Update src/App.js

src/App.js

@@ -192,44 +192,12 @@ const HoroscopeApp = () => {
     {
       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>
-      ),
+      icon: <i class="ri-dashboard-line"></i>,
     },
     {
       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>
-      ),
+      icon: <i class="ri-seedling-line"></i>,
     },
     {
       id: "health",
@@ -357,6 +325,9 @@ const HoroscopeApp = () => {
   };
 
   const getHoroscopeText = () => {
+    if (selectedPeriod !== "today") {
+      return "Upgrade to Premium to unlock weekly, monthly, and yearly horoscope insights. Get deeper cosmic guidance and detailed predictions for your future.";
+    }
     return horoscopeContent[selectedCategory][selectedPeriod];
   };
 
@@ -379,7 +350,7 @@ const HoroscopeApp = () => {
     setIsDarkMode(!isDarkMode);
   };
 
-  // Scroll to selected zodiac sign on mount
+  // Scroll to selected zodiac sign on mount and selection change
   useEffect(() => {
     if (zodiacScrollRef.current) {
       const selectedElement = zodiacScrollRef.current.querySelector(
@@ -393,7 +364,12 @@ const HoroscopeApp = () => {
         });
       }
     }
-  }, []);
+  }, [selectedSign]);
+
+  // Handle zodiac sign selection with auto-center
+  const handleSignSelect = (signId) => {
+    setSelectedSign(signId);
+  };
 
   return (
     <div
@@ -428,7 +404,23 @@ const HoroscopeApp = () => {
           {/* 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>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <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>
             </div>
           </div>
 
@@ -488,7 +480,23 @@ const HoroscopeApp = () => {
         {/* 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">
-            <i className="ri-magic-line text-2xl text-white"></i>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <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>
           </div>
           <h1 className="text-4xl font-bold mb-2">Horoscope App</h1>
         </div>
@@ -503,12 +511,14 @@ const HoroscopeApp = () => {
               <div
                 key={sign.id}
                 data-sign={sign.id}
-                onClick={() => setSelectedSign(sign.id)}
+                onClick={() => handleSignSelect(sign.id)}
                 className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 flex-shrink-0 py-1"
               >
                 <div
-                  className={`w-20 h-20 md:w-24 md:h-24 rounded-full p-0.5 transition-all ${
-                    selectedSign === sign.id ? "shadow-lg" : ""
+                  className={`rounded-full p-0.5 transition-all duration-300 ${
+                    selectedSign === sign.id
+                      ? "w-24 h-24 md:w-28 md:h-28 shadow-lg"
+                      : "w-20 h-20 md:w-24 md:h-24"
                   }`}
                   style={{
                     background:
@@ -541,7 +551,7 @@ const HoroscopeApp = () => {
                       ) : (
                         <ZodiacIcon
                           sign={sign.id}
-                          size={28}
+                          size={selectedSign === sign.id ? 30 : 28}
                           className="text-gray-600"
                         />
                       )}
@@ -555,10 +565,14 @@ const HoroscopeApp = () => {
                     </div>
                   </div>
                 </div>
-                <p className="text-xs font-medium mt-3 text-center flex items-center justify-center gap-1">
+                <p
+                  className={`text-xs font-medium mt-3 text-center flex items-center justify-center gap-1 transition-all duration-300 ${
+                    selectedSign === sign.id ? "font-bold" : ""
+                  }`}
+                >
                   <ZodiacIcon
                     sign={sign.id}
-                    size={16}
+                    size={selectedSign === sign.id ? 17 : 16}
                     className="text-current"
                   />
                   {sign.name}
@@ -579,7 +593,7 @@ const HoroscopeApp = () => {
               <button
                 key={period.id}
                 onClick={() => setSelectedPeriod(period.id)}
-                className={`px-4 md:px-6 py-2 md:py-3 rounded-full font-medium transition-all text-sm md:text-base ${
+                className={`px-4 md:px-6 py-2 md:py-3 rounded-full font-medium transition-all text-sm md:text-base flex items-center gap-1 ${
                   selectedPeriod === period.id
                     ? "bg-blue-400 text-white shadow-md"
                     : isDarkMode
@@ -588,6 +602,9 @@ const HoroscopeApp = () => {
                 }`}
               >
                 {period.name}
+                {period.id !== "today" && (
+                  <i className="ri-lock-line text-xs opacity-70"></i>
+                )}
               </button>
             ))}
           </div>
@@ -669,7 +686,22 @@ const HoroscopeApp = () => {
             <div className="flex-1">
               <h2 className="text-3xl font-bold text-blue-400 flex items-center gap-2 mb-2">
                 {getPeriodTitle()}
-                <i className="ri-pulse-line text-xl"></i>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="icon icon-tabler icons-tabler-outline icon-tabler-trending-up"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path d="M3 17l6 -6l4 4l8 -8" />
+                  <path d="M14 7l7 0l0 7" />
+                </svg>
               </h2>
               <div className="flex items-center gap-2">
                 <ZodiacIcon
@@ -677,19 +709,13 @@ const HoroscopeApp = () => {
                   size={20}
                   className="text-current"
                 />
-                <span className="font-semibold">{getCurrentSign()?.name}</span>
+                <span className="font-semibold">
+                  {getCurrentSign()?.name} ({getCurrentSign()?.dates})
+                </span>
               </div>
             </div>
           </div>
 
-          <p
-            className={`font-medium mb-6 ${
-              isDarkMode ? "text-gray-300" : "text-gray-600"
-            }`}
-          >
-            {getCurrentSign()?.name} ({getCurrentSign()?.dates})
-          </p>
-
           <p className="text-lg leading-relaxed mb-8">{getHoroscopeText()}</p>
         </div>