Update src/App.js

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 // Zodiac Icon Components using Tabler Icons SVGs
 const ZodiacIcon = ({ sign, size = 24, className = "" }) => {
@@ -75,11 +75,12 @@ const ZodiacIcon = ({ sign, size = 24, className = "" }) => {
 };
 
 const HoroscopeApp = () => {
-  const [selectedSign, setSelectedSign] = useState("aries");
+  const [selectedSign, setSelectedSign] = useState("virgo");
   const [selectedGender, setSelectedGender] = useState("female");
   const [selectedPeriod, setSelectedPeriod] = useState("today");
-  const [selectedCategory, setSelectedCategory] = useState("love");
+  const [selectedCategory, setSelectedCategory] = useState("overall");
   const [isDarkMode, setIsDarkMode] = useState(false);
+  const zodiacScrollRef = useRef(null);
 
   const zodiacSigns = [
     {
@@ -188,25 +189,75 @@ const HoroscopeApp = () => {
   ];
 
   const categories = [
-    { id: "love", name: "Love", icon: <i className="ri-hearts-line"></i> },
+    {
+      id: "overall",
+      name: "Overall",
+      icon: (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M3 4l18 0" />
+          <path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" />
+          <path d="M12 16l0 4" />
+          <path d="M9 20l6 0" />
+          <path d="M8 12l3 -3l2 2l3 -3" />
+        </svg>
+      ),
+    },
+    {
+      id: "fortune",
+      name: "Fortune",
+      icon: (
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M6.73 17.018a8 8 0 1 1 10.54 0" />
+          <path d="M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0 -4h-10a2 2 0 0 0 -2 2z" />
+          <path d="M11 7a3 3 0 0 0 -3 3" />
+        </svg>
+      ),
+    },
     {
       id: "health",
       name: "Health",
       icon: <i className="ri-open-arm-line"></i>,
     },
-    {
-      id: "relationship",
-      name: "Relationship",
-      icon: <i className="ri-team-line"></i>,
-    },
+    { id: "love", name: "Love", icon: <i className="ri-hearts-line"></i> },
     {
       id: "finance",
       name: "Finance",
       icon: <i className="ri-wallet-3-line"></i>,
     },
+    {
+      id: "relationship",
+      name: "Relationship",
+      icon: <i className="ri-team-line"></i>,
+    },
   ];
 
   const horoscopeContent = {
+    overall: {
+      today:
+        "Today brings a harmonious blend of opportunities and challenges across all aspects of your life. Your natural instincts will guide you well.",
+      week: "This week promises balanced growth in multiple areas. Trust your intuition as you navigate new experiences.",
+      month:
+        "A month of significant personal development awaits. Embrace change and new perspectives with confidence.",
+      year: "This year marks a transformative period of growth, bringing profound insights and meaningful achievements.",
+    },
     love: {
       today:
         "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
@@ -239,6 +290,14 @@ const HoroscopeApp = () => {
         "Money matters require attention this month. Budget wisely for future security.",
       year: "Financial growth and stability are highlighted throughout this year.",
     },
+    fortune: {
+      today:
+        "Lucky energies surround you today. Trust your instincts and take calculated risks for unexpected rewards.",
+      week: "Fortune favors the bold this week. Positive surprises and serendipitous encounters await.",
+      month:
+        "A month of abundance and good fortune unfolds. Opportunities align perfectly with your goals.",
+      year: "This year brings remarkable luck and prosperity. Your efforts will be rewarded beyond expectations.",
+    },
   };
 
   const luckyData = {
@@ -320,34 +379,50 @@ const HoroscopeApp = () => {
     setIsDarkMode(!isDarkMode);
   };
 
+  // Scroll to selected zodiac sign on mount
+  useEffect(() => {
+    if (zodiacScrollRef.current) {
+      const selectedElement = zodiacScrollRef.current.querySelector(
+        `[data-sign="${selectedSign}"]`
+      );
+      if (selectedElement) {
+        selectedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        });
+      }
+    }
+  }, []);
+
   return (
     <div
       className={`min-h-screen transition-all duration-500 ${
-        isDarkMode
-          ? "bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 text-white"
-          : "bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 text-gray-800"
+        isDarkMode ? "text-white" : "text-gray-800"
       }`}
+      style={{
+        background: isDarkMode
+          ? "linear-gradient(135deg, #7E437B 0%, #0B194A 50%, #221C96 100%)"
+          : "linear-gradient(135deg, #A19BFF 0%, #FCC6EA 50%, #BADCFF 100%)",
+      }}
     >
       <div className="max-w-6xl mx-auto p-5">
         {/* Header Controls */}
         <div className="flex justify-between items-center mb-6 md:mb-8">
-          {/* Theme Toggle */}
+          {/* Theme Toggle - Icon only for all screen sizes */}
           <button
             onClick={toggleTheme}
-            className={`flex items-center gap-2 px-3 md:px-4 py-2 rounded-full font-medium transition-all duration-300 ${
+            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 ${
               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`}
+            }`}
           >
             <i
               className={`text-xl ${
                 isDarkMode ? "ri-sun-line" : "ri-moon-line"
               }`}
             ></i>
-            <span className="hidden sm:inline">
-              {isDarkMode ? "Light Mode" : "Dark Mode"}
-            </span>
           </button>
 
           {/* App Icon - Visible on mobile - Fixed centering */}
@@ -359,14 +434,22 @@ const HoroscopeApp = () => {
 
           {/* Gender Selection - Toggle style on mobile, tabs on desktop */}
           <button
-            onClick={() => setSelectedGender(selectedGender === 'male' ? 'female' : 'male')}
+            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>
+            <i
+              className={
+                selectedGender === "male"
+                  ? "ri-women-line text-xl"
+                  : "ri-men-line text-xl"
+              }
+            ></i>
           </button>
 
           {/* Gender Selection - Desktop tabs */}
@@ -411,11 +494,15 @@ const HoroscopeApp = () => {
         </div>
 
         {/* Zodiac Signs Grid - Single Row */}
-        <div className="w-full overflow-x-auto mb-6 md:mb-10">
+        <div
+          className="w-full overflow-x-auto mb-6 md:mb-10"
+          ref={zodiacScrollRef}
+        >
           <div className="flex justify-start md:justify-center gap-2 md:gap-3 pb-4 px-4 min-w-max py-2">
             {zodiacSigns.map((sign) => (
               <div
                 key={sign.id}
+                data-sign={sign.id}
                 onClick={() => setSelectedSign(sign.id)}
                 className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 flex-shrink-0 py-1"
               >
@@ -604,79 +691,22 @@ const HoroscopeApp = () => {
           </p>
 
           <p className="text-lg leading-relaxed mb-8">{getHoroscopeText()}</p>
-
-          {/* Lucky Elements */}
-          <div
-            className={`grid grid-cols-2 md:grid-cols-4 gap-6 pt-6 border-t ${
-              isDarkMode ? "border-gray-700" : "border-gray-200"
-            }`}
-          >
-            <div className="text-center">
-              <i className="ri-palette-line text-3xl mb-3 text-green-500"></i>
-              <p
-                className={`text-xs uppercase tracking-wider mb-2 ${
-                  isDarkMode ? "text-gray-400" : "text-gray-500"
-                }`}
-              >
-                Lucky Color
-              </p>
-              <p className="font-bold text-green-500">
-                {getLuckyElement("colors")}
-              </p>
-            </div>
-            <div className="text-center">
-              <i className="ri-hashtag text-3xl mb-3 text-blue-500"></i>
-              <p
-                className={`text-xs uppercase tracking-wider mb-2 ${
-                  isDarkMode ? "text-gray-400" : "text-gray-500"
-                }`}
-              >
-                Lucky Number
-              </p>
-              <p className="font-bold text-blue-500">
-                {getLuckyElement("numbers")}
-              </p>
-            </div>
-            <div className="text-center">
-              <i className="ri-vip-diamond-line text-3xl mb-3 text-purple-500"></i>
-              <p
-                className={`text-xs uppercase tracking-wider mb-2 ${
-                  isDarkMode ? "text-gray-400" : "text-gray-500"
-                }`}
-              >
-                Lucky Stone
-              </p>
-              <p className="font-bold text-purple-500">
-                {getLuckyElement("stones")}
-              </p>
-            </div>
-            <div className="text-center">
-              <i className="ri-star-line text-3xl mb-3 text-yellow-500"></i>
-              <p
-                className={`text-xs uppercase tracking-wider mb-2 ${
-                  isDarkMode ? "text-gray-400" : "text-gray-500"
-                }`}
-              >
-                Mood
-              </p>
-              <p className="font-bold text-yellow-500">
-                {getLuckyElement("moods")}
-              </p>
-            </div>
-          </div>
         </div>
 
         {/* Footer */}
-        <div className="text-center text-sm opacity-70 mt-4">
+        <div className="text-center text-sm opacity-70 mt-4 space-y-2">
           <p className="flex items-center justify-center gap-2">
             <i className="ri-sparkling-line"></i>
             Discover your daily horoscope and unlock the secrets of the stars
             <i className="ri-sparkling-line"></i>
           </p>
+          <p className="text-xs opacity-60">
+            © 2025 AstroLens Horoscope - All rights reserved.
+          </p>
         </div>
       </div>
     </div>
   );
 };
 
-export default HoroscopeApp;
+export default HoroscopeApp;