Update src/App.js

src/App.js

@@ -105,49 +105,58 @@ const HoroscopeApp = () => {
     }`}>
       <div className="max-w-6xl mx-auto p-5">
         {/* Header Controls */}
-        <div className="flex justify-between items-center mb-8">
+        <div className="flex justify-between items-center mb-6 md:mb-8">
           {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
-            className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all duration-300 ${
+            className={`flex items-center gap-2 px-3 md:px-4 py-2 rounded-full font-medium transition-all duration-300 ${
               isDarkMode 
                 ? 'bg-white bg-opacity-10 text-white hover:bg-opacity-20' 
                 : 'bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100'
             } shadow-lg hover:scale-105`}
           >
             <span className="text-xl">{isDarkMode ? '☀️' : '🌙'}</span>
-            {isDarkMode ? 'Light Mode' : 'Dark Mode'}
+            <span className="hidden sm:inline">{isDarkMode ? 'Light Mode' : 'Dark Mode'}</span>
           </button>
 
+          {/* App Icon - Visible on mobile */}
+          <div className="sm:hidden">
+            <div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full shadow-lg">
+              <span className="text-xl text-white">🔮</span>
+            </div>
+          </div>
+
           {/* Gender Selection */}
           <div className={`flex rounded-full p-1 shadow-lg ${
             isDarkMode ? 'bg-white bg-opacity-10' : 'bg-white bg-opacity-90'
           }`}>
             <button
               onClick={() => setSelectedGender('female')}
-              className={`px-6 py-2 rounded-full font-medium transition-all ${
+              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
                 selectedGender === 'female'
                   ? 'bg-pink-400 text-white shadow-md'
                   : isDarkMode ? 'text-white hover:text-pink-300' : 'text-gray-600 hover:text-pink-400'
               }`}
             >
-              Female
+              <span className="hidden sm:inline">Female</span>
+              <span className="sm:hidden">♀</span>
             </button>
             <button
               onClick={() => setSelectedGender('male')}
-              className={`px-6 py-2 rounded-full font-medium transition-all ${
+              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
                 selectedGender === 'male'
                   ? 'bg-blue-400 text-white shadow-md'
                   : isDarkMode ? 'text-white hover:text-blue-300' : 'text-gray-600 hover:text-blue-400'
               }`}
             >
-              Male
+              <span className="hidden sm:inline">Male</span>
+              <span className="sm:hidden">♂</span>
             </button>
           </div>
         </div>
 
-        {/* App Title */}
-        <div className="text-center mb-10">
+        {/* App Title - Hidden on mobile */}
+        <div className="text-center mb-6 md:mb-10 hidden sm:block">
           <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full mb-4 shadow-lg">
             <span className="text-2xl text-white">🔮</span>
           </div>
@@ -155,14 +164,14 @@ const HoroscopeApp = () => {
         </div>
 
         {/* Zodiac Signs Grid - Single Row */}
-        <div className="flex justify-center gap-3 mb-10 overflow-x-auto pb-4">
+        <div className="flex justify-center gap-2 md:gap-3 mb-6 md:mb-10 overflow-x-auto pb-4">
           {zodiacSigns.map((sign) => (
             <div
               key={sign.id}
               onClick={() => setSelectedSign(sign.id)}
               className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 min-w-max"
             >
-              <div className={`w-16 h-16 rounded-full p-1 transition-all ${
+              <div className={`w-20 h-20 md:w-24 md:h-24 rounded-full p-0.5 transition-all ${
                 selectedSign === sign.id
                   ? 'shadow-lg'
                   : ''
@@ -197,7 +206,7 @@ const HoroscopeApp = () => {
         </div>
 
         {/* Period Selection */}
-        <div className="flex justify-center mb-8">
+        <div className="flex justify-center mb-6 md:mb-8">
           <div className={`flex rounded-full p-1 shadow-lg ${
             isDarkMode ? 'bg-white bg-opacity-10' : 'bg-white bg-opacity-90'
           }`}>
@@ -205,7 +214,7 @@ const HoroscopeApp = () => {
               <button
                 key={period.id}
                 onClick={() => setSelectedPeriod(period.id)}
-                className={`px-6 py-3 rounded-full font-medium transition-all ${
+                className={`px-4 md:px-6 py-2 md:py-3 rounded-full font-medium transition-all text-sm md:text-base ${
                   selectedPeriod === period.id
                     ? 'bg-blue-400 text-white shadow-md'
                     : isDarkMode ? 'text-white hover:text-blue-300' : 'text-gray-600 hover:text-blue-400'
@@ -218,12 +227,12 @@ const HoroscopeApp = () => {
         </div>
 
         {/* Category Selection */}
-        <div className="flex justify-center flex-wrap gap-3 mb-10">
+        <div className="flex justify-center flex-wrap gap-2 md:gap-3 mb-6 md:mb-10">
           {categories.map((category) => (
             <button
               key={category.id}
               onClick={() => setSelectedCategory(category.id)}
-              className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 ${
+              className={`flex items-center gap-2 px-3 md:px-4 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 text-sm md:text-base ${
                 selectedCategory === category.id
                   ? 'bg-purple-400 text-white shadow-lg'
                   : isDarkMode 
@@ -244,7 +253,7 @@ const HoroscopeApp = () => {
             : 'bg-white bg-opacity-95'
         }`}>
           <div className="flex items-center gap-6 mb-8">
-            <div className="w-16 h-16 rounded-full p-1 shadow-lg"
+            <div className="w-20 h-20 rounded-full p-0.5 shadow-lg"
                  style={{
                    background: 'linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)'
                  }}>
@@ -339,4 +348,4 @@ const HoroscopeApp = () => {
   );
 };
 
-export default HoroscopeApp;
+export default HoroscopeApp;