Update src/App.js

src/App.js

@@ -75,13 +75,21 @@ const ZodiacIcon = ({ sign, size = 24, className = "" }) => {
 };
 
 const HoroscopeApp = () => {
-  const [selectedSign, setSelectedSign] = useState("taurus");
+  const [selectedSign, setSelectedSign] = useState("aries");
   const [selectedGender, setSelectedGender] = useState("female");
   const [selectedPeriod, setSelectedPeriod] = useState("today");
   const [selectedCategory, setSelectedCategory] = useState("love");
   const [isDarkMode, setIsDarkMode] = useState(false);
 
   const zodiacSigns = [
+    {
+      id: "aries",
+      name: "Aries",
+      dates: "Mar 21 - Apr 19",
+      emoji: "🐏",
+      symbol: "♈",
+      imageFile: "ARIES.png",
+    },
     {
       id: "taurus",
       name: "Taurus",
@@ -90,30 +98,6 @@ const HoroscopeApp = () => {
       symbol: "♉",
       imageFile: "TAURUS.png",
     },
-    {
-      id: "sagittarius",
-      name: "Sagittarius",
-      dates: "Nov 22 - Dec 21",
-      emoji: "🏹",
-      symbol: "♐",
-      imageFile: "SAGITTARIUS.png",
-    },
-    {
-      id: "pisces",
-      name: "Pisces",
-      dates: "Feb 19 - Mar 20",
-      emoji: "🐠",
-      symbol: "♓",
-      imageFile: "PISCES.png",
-    },
-    {
-      id: "libra",
-      name: "Libra",
-      dates: "Sep 23 - Oct 22",
-      emoji: "⚖️",
-      symbol: "♎",
-      imageFile: "LIBRA.png",
-    },
     {
       id: "gemini",
       name: "Gemini",
@@ -122,6 +106,14 @@ const HoroscopeApp = () => {
       symbol: "♊",
       imageFile: "GEMINI.png",
     },
+    {
+      id: "cancer",
+      name: "Cancer",
+      dates: "Jun 21 - Jul 22",
+      emoji: "🦀",
+      symbol: "♋",
+      imageFile: "CANCER.png",
+    },
     {
       id: "leo",
       name: "Leo",
@@ -139,28 +131,12 @@ const HoroscopeApp = () => {
       imageFile: "VIRGO.png",
     },
     {
-      id: "aquarius",
-      name: "Aquarius",
-      dates: "Jan 20 - Feb 18",
-      emoji: "🏺",
-      symbol: "♒",
-      imageFile: "AQUARIUS.png",
-    },
-    {
-      id: "aries",
-      name: "Aries",
-      dates: "Mar 21 - Apr 19",
-      emoji: "🐏",
-      symbol: "♈",
-      imageFile: "ARIES.png",
-    },
-    {
-      id: "cancer",
-      name: "Cancer",
-      dates: "Jun 21 - Jul 22",
-      emoji: "🦀",
-      symbol: "♋",
-      imageFile: "CANCER.png",
+      id: "libra",
+      name: "Libra",
+      dates: "Sep 23 - Oct 22",
+      emoji: "⚖️",
+      symbol: "♎",
+      imageFile: "LIBRA.png",
     },
     {
       id: "scorpio",
@@ -170,6 +146,14 @@ const HoroscopeApp = () => {
       symbol: "♏",
       imageFile: "SCORPIO.png",
     },
+    {
+      id: "sagittarius",
+      name: "Sagittarius",
+      dates: "Nov 22 - Dec 21",
+      emoji: "🏹",
+      symbol: "♐",
+      imageFile: "SAGITTARIUS.png",
+    },
     {
       id: "capricorn",
       name: "Capricorn",
@@ -178,6 +162,22 @@ const HoroscopeApp = () => {
       symbol: "♑",
       imageFile: "CAPRICORN.png",
     },
+    {
+      id: "aquarius",
+      name: "Aquarius",
+      dates: "Jan 20 - Feb 18",
+      emoji: "🏺",
+      symbol: "♒",
+      imageFile: "AQUARIUS.png",
+    },
+    {
+      id: "pisces",
+      name: "Pisces",
+      dates: "Feb 19 - Mar 20",
+      emoji: "🐠",
+      symbol: "♓",
+      imageFile: "PISCES.png",
+    },
   ];
 
   const periods = [
@@ -350,16 +350,28 @@ const HoroscopeApp = () => {
             </span>
           </button>
 
-          {/* App Icon - Visible on mobile */}
-          <div className="sm:hidden">
+          {/* App Icon - Visible on mobile - Fixed centering */}
+          <div className="sm:hidden flex-1 flex justify-center">
             <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">
               <i className="ri-magic-line text-xl text-white"></i>
             </div>
           </div>
 
-          {/* Gender Selection */}
+          {/* Gender Selection - Toggle style on mobile, tabs on desktop */}
+          <button
+            onClick={() => setSelectedGender(selectedGender === 'male' ? 'female' : 'male')}
+            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 sm:hidden ${
+              isDarkMode
+                ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
+                : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
+            }`}
+          >
+            <i className={selectedGender === 'male' ? 'ri-men-line text-xl' : 'ri-women-line text-xl'}></i>
+          </button>
+
+          {/* Gender Selection - Desktop tabs */}
           <div
-            className={`flex rounded-full p-1 shadow-lg ${
+            className={`hidden sm:flex rounded-full p-1 shadow-lg ${
               isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
             }`}
           >
@@ -373,8 +385,7 @@ const HoroscopeApp = () => {
                   : "text-gray-600 hover:text-pink-400"
               }`}
             >
-              <span className="hidden sm:inline">Female</span>
-              <i className="ri-women-line sm:hidden"></i>
+              <span>Female</span>
             </button>
             <button
               onClick={() => setSelectedGender("male")}
@@ -386,8 +397,7 @@ const HoroscopeApp = () => {
                   : "text-gray-600 hover:text-blue-400"
               }`}
             >
-              <span className="hidden sm:inline">Male</span>
-              <i className="ri-men-line sm:hidden"></i>
+              <span>Male</span>
             </button>
           </div>
         </div>
@@ -669,4 +679,4 @@ const HoroscopeApp = () => {
   );
 };
 
-export default HoroscopeApp;
+export default HoroscopeApp;