Update src/App.js

src/App.js

@@ -1,77 +1,196 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 const HoroscopeApp = () => {
-  const [selectedSign, setSelectedSign] = useState('taurus');
-  const [selectedGender, setSelectedGender] = useState('female');
-  const [selectedPeriod, setSelectedPeriod] = useState('today');
-  const [selectedCategory, setSelectedCategory] = useState('love');
+  const [selectedSign, setSelectedSign] = useState("taurus");
+  const [selectedGender, setSelectedGender] = useState("female");
+  const [selectedPeriod, setSelectedPeriod] = useState("today");
+  const [selectedCategory, setSelectedCategory] = useState("love");
   const [isDarkMode, setIsDarkMode] = useState(false);
 
   const zodiacSigns = [
-    { id: 'taurus', name: 'Taurus', dates: 'April 20 - May 20', emoji: '🐂', image: '/img/Taurus.jpg' },
-    { id: 'sagittarius', name: 'Sagittarius', dates: 'Nov 22 - Dec 21', emoji: '🏹', image: '/img/Sagittarius.jpg' },
-    { id: 'pisces', name: 'Pisces', dates: 'Feb 19 - Mar 20', emoji: '🐠', image: '/img/Pisces.jpg' },
-    { id: 'libra', name: 'Libra', dates: 'Sep 23 - Oct 22', emoji: '⚖️', image: '/img/Libra.jpg' },
-    { id: 'gemini', name: 'Gemini', dates: 'May 21 - Jun 20', emoji: '👯', image: '/img/Gemini.jpg' },
-    { id: 'leo', name: 'Leo', dates: 'Jul 23 - Aug 22', emoji: '🦁', image: '/img/Leo.jpg' },
-    { id: 'virgo', name: 'Virgo', dates: 'Aug 23 - Sep 22', emoji: '👸', image: '/img/Virgo.jpg' },
-    { id: 'aquarius', name: 'Aquarius', dates: 'Jan 20 - Feb 18', emoji: '🏺', image: null },
-    { id: 'aries', name: 'Aries', dates: 'Mar 21 - Apr 19', emoji: '🐏', image: "/img/Aries.png" },
-    { id: 'cancer', name: 'Cancer', dates: 'Jun 21 - Jul 22', emoji: '🦀', image: null },
-    { id: 'scorpio', name: 'Scorpio', dates: 'Oct 23 - Nov 21', emoji: '🦂', image: null },
-    { id: 'capricorn', name: 'Capricorn', dates: 'Dec 22 - Jan 19', emoji: '🐐', image: null }
+    {
+      id: "taurus",
+      name: "Taurus",
+      dates: "April 20 - May 20",
+      emoji: "🐂",
+      image: "/img/Taurus.jpg",
+    },
+    {
+      id: "sagittarius",
+      name: "Sagittarius",
+      dates: "Nov 22 - Dec 21",
+      emoji: "🏹",
+      image: "/img/Sagittarius.jpg",
+    },
+    {
+      id: "pisces",
+      name: "Pisces",
+      dates: "Feb 19 - Mar 20",
+      emoji: "🐠",
+      image: "/img/Pisces.jpg",
+    },
+    {
+      id: "libra",
+      name: "Libra",
+      dates: "Sep 23 - Oct 22",
+      emoji: "⚖️",
+      image: "/img/Libra.jpg",
+    },
+    {
+      id: "gemini",
+      name: "Gemini",
+      dates: "May 21 - Jun 20",
+      emoji: "👯",
+      image: "/img/Gemini.jpg",
+    },
+    {
+      id: "leo",
+      name: "Leo",
+      dates: "Jul 23 - Aug 22",
+      emoji: "🦁",
+      image: "/img/Leo.jpg",
+    },
+    {
+      id: "virgo",
+      name: "Virgo",
+      dates: "Aug 23 - Sep 22",
+      emoji: "👸",
+      image: "/img/Virgo.jpg",
+    },
+    {
+      id: "aquarius",
+      name: "Aquarius",
+      dates: "Jan 20 - Feb 18",
+      emoji: "🏺",
+      image: "/img/Aquarius.png",
+    },
+    {
+      id: "aries",
+      name: "Aries",
+      dates: "Mar 21 - Apr 19",
+      emoji: "🐏",
+      image: "/img/Aries.png",
+    },
+    {
+      id: "cancer",
+      name: "Cancer",
+      dates: "Jun 21 - Jul 22",
+      emoji: "🦀",
+      image: "/img/Cancer.png",
+    },
+    {
+      id: "scorpio",
+      name: "Scorpio",
+      dates: "Oct 23 - Nov 21",
+      emoji: "🦂",
+      image: "/img/Scorpio.png",
+    },
+    {
+      id: "capricorn",
+      name: "Capricorn",
+      dates: "Dec 22 - Jan 19",
+      emoji: "🐐",
+      image: "/img/Capricorn.png",
+    },
   ];
 
   const periods = [
-    { id: 'today', name: 'Today' },
-    { id: 'week', name: 'Week' },
-    { id: 'month', name: 'Month' },
-    { id: 'year', name: 'Year' }
+    { id: "today", name: "Today" },
+    { id: "week", name: "Week" },
+    { id: "month", name: "Month" },
+    { id: "year", name: "Year" },
   ];
 
   const categories = [
-    { id: 'love', name: 'Love', icon: '💖' },
-    { id: 'health', name: 'Health', icon: '🌟' },
-    { id: 'relationship', name: 'Relationship', icon: '👥' },
-    { id: 'finance', name: 'Finance', icon: '💰' }
+    { id: "love", name: "Love", icon: "💖" },
+    { id: "health", name: "Health", icon: "🌟" },
+    { id: "relationship", name: "Relationship", icon: "👥" },
+    { id: "finance", name: "Finance", icon: "💰" },
   ];
 
   const horoscopeContent = {
     love: {
-      today: "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
+      today:
+        "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
       week: "This week brings romantic opportunities and deepening connections with your loved ones.",
-      month: "A month of passionate encounters and meaningful relationships awaits you.",
-      year: "This year will be transformative for your love life, bringing lasting happiness."
+      month:
+        "A month of passionate encounters and meaningful relationships awaits you.",
+      year: "This year will be transformative for your love life, bringing lasting happiness.",
     },
     health: {
-      today: "Your energy levels are high today. Focus on maintaining balance between work and rest.",
+      today:
+        "Your energy levels are high today. Focus on maintaining balance between work and rest.",
       week: "Pay attention to your physical wellbeing this week. Small changes can make big differences.",
-      month: "This month emphasizes the importance of mental and physical health harmony.",
-      year: "A year of wellness and vitality lies ahead. Make health your priority."
+      month:
+        "This month emphasizes the importance of mental and physical health harmony.",
+      year: "A year of wellness and vitality lies ahead. Make health your priority.",
     },
     relationship: {
-      today: "Relationships flourish under today's cosmic energy. Communication is key to success.",
+      today:
+        "Relationships flourish under today's cosmic energy. Communication is key to success.",
       week: "Strengthen your bonds with family and friends through meaningful conversations.",
-      month: "Social connections expand this month, bringing new friendships and opportunities.",
-      year: "Your social circle will grow significantly, enriching your life in unexpected ways."
+      month:
+        "Social connections expand this month, bringing new friendships and opportunities.",
+      year: "Your social circle will grow significantly, enriching your life in unexpected ways.",
     },
     finance: {
-      today: "Financial opportunities present themselves today. Stay alert for new possibilities.",
+      today:
+        "Financial opportunities present themselves today. Stay alert for new possibilities.",
       week: "This week favors careful financial planning and smart investments.",
-      month: "Money matters require attention this month. Budget wisely for future security.",
-      year: "Financial growth and stability are highlighted throughout this year."
-    }
+      month:
+        "Money matters require attention this month. Budget wisely for future security.",
+      year: "Financial growth and stability are highlighted throughout this year.",
+    },
   };
 
   const luckyData = {
-    colors: ['Green', 'Blue', 'Purple', 'Gold', 'Silver', 'Red', 'Pink', 'Orange', 'Yellow', 'Turquoise', 'Violet', 'Indigo'],
+    colors: [
+      "Green",
+      "Blue",
+      "Purple",
+      "Gold",
+      "Silver",
+      "Red",
+      "Pink",
+      "Orange",
+      "Yellow",
+      "Turquoise",
+      "Violet",
+      "Indigo",
+    ],
     numbers: [1, 3, 7, 9, 11, 13, 21, 23, 27, 33, 42, 77],
-    stones: ['Emerald', 'Sapphire', 'Ruby', 'Diamond', 'Amethyst', 'Topaz', 'Opal', 'Pearl', 'Garnet', 'Aquamarine', 'Citrine', 'Turquoise'],
-    moods: ['Optimistic', 'Energetic', 'Peaceful', 'Confident', 'Creative', 'Adventurous', 'Romantic', 'Focused', 'Joyful', 'Balanced', 'Inspired', 'Harmonious']
+    stones: [
+      "Emerald",
+      "Sapphire",
+      "Ruby",
+      "Diamond",
+      "Amethyst",
+      "Topaz",
+      "Opal",
+      "Pearl",
+      "Garnet",
+      "Aquamarine",
+      "Citrine",
+      "Turquoise",
+    ],
+    moods: [
+      "Optimistic",
+      "Energetic",
+      "Peaceful",
+      "Confident",
+      "Creative",
+      "Adventurous",
+      "Romantic",
+      "Focused",
+      "Joyful",
+      "Balanced",
+      "Inspired",
+      "Harmonious",
+    ],
   };
 
   const getCurrentSign = () => {
-    return zodiacSigns.find(sign => sign.id === selectedSign);
+    return zodiacSigns.find((sign) => sign.id === selectedSign);
   };
 
   const getHoroscopeText = () => {
@@ -85,10 +204,10 @@ const HoroscopeApp = () => {
 
   const getPeriodTitle = () => {
     const titles = {
-      today: 'Horoscope for Today',
-      week: 'Horoscope for This Week',
-      month: 'Horoscope for This Month',
-      year: 'Horoscope for This Year'
+      today: "Horoscope for Today",
+      week: "Horoscope for This Week",
+      month: "Horoscope for This Month",
+      year: "Horoscope for This Year",
     };
     return titles[selectedPeriod];
   };
@@ -98,11 +217,13 @@ const HoroscopeApp = () => {
   };
 
   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'
-    }`}>
+    <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"
+      }`}
+    >
       <div className="max-w-6xl mx-auto p-5">
         {/* Header Controls */}
         <div className="flex justify-between items-center mb-6 md:mb-8">
@@ -110,13 +231,15 @@ const HoroscopeApp = () => {
           <button
             onClick={toggleTheme}
             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'
+              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>
-            <span className="hidden sm:inline">{isDarkMode ? 'Light Mode' : 'Dark Mode'}</span>
+            <span className="text-xl">{isDarkMode ? "☀️" : "🌙"}</span>
+            <span className="hidden sm:inline">
+              {isDarkMode ? "Light Mode" : "Dark Mode"}
+            </span>
           </button>
 
           {/* App Icon - Visible on mobile */}
@@ -127,26 +250,32 @@ const HoroscopeApp = () => {
           </div>
 
           {/* Gender Selection */}
-          <div className={`flex rounded-full p-1 shadow-lg ${
-            isDarkMode ? 'bg-white bg-opacity-10' : 'bg-white bg-opacity-90'
-          }`}>
+          <div
+            className={`flex rounded-full p-1 shadow-lg ${
+              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
+            }`}
+          >
             <button
-              onClick={() => setSelectedGender('female')}
+              onClick={() => setSelectedGender("female")}
               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'
+                selectedGender === "female"
+                  ? "bg-pink-400 text-white shadow-md"
+                  : isDarkMode
+                  ? "text-white hover:text-pink-300"
+                  : "text-gray-600 hover:text-pink-400"
               }`}
             >
               <span className="hidden sm:inline">Female</span>
               <span className="sm:hidden">♀</span>
             </button>
             <button
-              onClick={() => setSelectedGender('male')}
+              onClick={() => setSelectedGender("male")}
               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'
+                selectedGender === "male"
+                  ? "bg-blue-400 text-white shadow-md"
+                  : isDarkMode
+                  ? "text-white hover:text-blue-300"
+                  : "text-gray-600 hover:text-blue-400"
               }`}
             >
               <span className="hidden sm:inline">Male</span>
@@ -172,36 +301,41 @@ const HoroscopeApp = () => {
                 onClick={() => setSelectedSign(sign.id)}
                 className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 flex-shrink-0"
               >
-                <div className={`w-20 h-20 md:w-24 md:h-24 rounded-full p-0.5 transition-all ${
-                  selectedSign === sign.id
-                    ? 'shadow-lg'
-                    : ''
-                }`} 
-                style={{
-                  background: selectedSign === sign.id 
-                    ? 'linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)'
-                    : 'linear-gradient(135deg, #07090A 0%, #979999 100%)'
-                }}>
-                  <div className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
-                    isDarkMode ? 'bg-gray-800' : 'bg-gray-100'
-                  }`}>
+                <div
+                  className={`w-20 h-20 md:w-24 md:h-24 rounded-full p-0.5 transition-all ${
+                    selectedSign === sign.id ? "shadow-lg" : ""
+                  }`}
+                  style={{
+                    background:
+                      selectedSign === sign.id
+                        ? "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)"
+                        : "linear-gradient(135deg, #07090A 0%, #979999 100%)",
+                  }}
+                >
+                  <div
+                    className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
+                      isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                    }`}
+                  >
                     {sign.image ? (
-                      <img 
-                        src={sign.image} 
+                      <img
+                        src={sign.image}
                         alt={sign.name}
                         className="w-full h-full object-cover rounded-full"
                         onError={(e) => {
-                          e.target.style.display = 'none';
-                          e.target.nextSibling.style.display = 'block';
+                          e.target.style.display = "none";
+                          e.target.nextSibling.style.display = "block";
                         }}
                       />
                     ) : null}
-                    <span style={{ display: sign.image ? 'none' : 'block' }}>
+                    <span style={{ display: sign.image ? "none" : "block" }}>
                       {sign.emoji}
                     </span>
                   </div>
                 </div>
-                <p className="text-xs font-medium mt-2 text-center">{sign.name}</p>
+                <p className="text-xs font-medium mt-2 text-center">
+                  {sign.name}
+                </p>
               </div>
             ))}
           </div>
@@ -209,17 +343,21 @@ const HoroscopeApp = () => {
 
         {/* Period Selection */}
         <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'
-          }`}>
+          <div
+            className={`flex rounded-full p-1 shadow-lg ${
+              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
+            }`}
+          >
             {periods.map((period) => (
               <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 ${
                   selectedPeriod === period.id
-                    ? 'bg-blue-400 text-white shadow-md'
-                    : isDarkMode ? 'text-white hover:text-blue-300' : 'text-gray-600 hover:text-blue-400'
+                    ? "bg-blue-400 text-white shadow-md"
+                    : isDarkMode
+                    ? "text-white hover:text-blue-300"
+                    : "text-gray-600 hover:text-blue-400"
                 }`}
               >
                 {period.name}
@@ -236,10 +374,10 @@ const HoroscopeApp = () => {
               onClick={() => setSelectedCategory(category.id)}
               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 
-                    ? 'bg-white bg-opacity-10 text-white hover:bg-opacity-20' 
-                    : 'bg-white bg-opacity-90 text-gray-600 hover:bg-opacity-100'
+                  ? "bg-purple-400 text-white shadow-lg"
+                  : isDarkMode
+                  ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
+                  : "bg-white bg-opacity-90 text-gray-600 hover:bg-opacity-100"
               }`}
             >
               <span>{category.icon}</span>
@@ -249,31 +387,41 @@ const HoroscopeApp = () => {
         </div>
 
         {/* Horoscope Content */}
-        <div className={`rounded-3xl p-8 mb-4 shadow-2xl backdrop-blur-lg transition-all ${
-          isDarkMode 
-            ? 'bg-white bg-opacity-10 border border-white border-opacity-20' 
-            : 'bg-white bg-opacity-95'
-        }`}>
+        <div
+          className={`rounded-3xl p-8 mb-4 shadow-2xl backdrop-blur-lg transition-all ${
+            isDarkMode
+              ? "bg-white bg-opacity-10 border border-white border-opacity-20"
+              : "bg-white bg-opacity-95"
+          }`}
+        >
           <div className="flex items-center gap-6 mb-8">
-            <div className="w-20 h-20 rounded-full p-0.5 shadow-lg"
-                 style={{
-                   background: 'linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)'
-                 }}>
-              <div className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
-                isDarkMode ? 'bg-gray-800' : 'bg-gray-100'
-              }`}>
+            <div
+              className="w-20 h-20 rounded-full p-0.5 shadow-lg"
+              style={{
+                background: "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)",
+              }}
+            >
+              <div
+                className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
+                  isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                }`}
+              >
                 {getCurrentSign()?.image ? (
-                  <img 
-                    src={getCurrentSign()?.image} 
+                  <img
+                    src={getCurrentSign()?.image}
                     alt={getCurrentSign()?.name}
                     className="w-full h-full object-cover rounded-full"
                     onError={(e) => {
-                      e.target.style.display = 'none';
-                      e.target.nextSibling.style.display = 'block';
+                      e.target.style.display = "none";
+                      e.target.nextSibling.style.display = "block";
                     }}
                   />
                 ) : null}
-                <span style={{ display: getCurrentSign()?.image ? 'none' : 'block' }}>
+                <span
+                  style={{
+                    display: getCurrentSign()?.image ? "none" : "block",
+                  }}
+                >
                   {getCurrentSign()?.emoji}
                 </span>
               </div>
@@ -290,64 +438,87 @@ const HoroscopeApp = () => {
             </div>
           </div>
 
-          <p className={`font-medium mb-6 ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+          <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>
+          <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={`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">
               <div className="text-3xl mb-3">🍀</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
+              <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>
+              <p className="font-bold text-green-500">
+                {getLuckyElement("colors")}
+              </p>
             </div>
             <div className="text-center">
               <div className="text-3xl mb-3">🔢</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
+              <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>
+              <p className="font-bold text-blue-500">
+                {getLuckyElement("numbers")}
+              </p>
             </div>
             <div className="text-center">
               <div className="text-3xl mb-3">💎</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
+              <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>
+              <p className="font-bold text-purple-500">
+                {getLuckyElement("stones")}
+              </p>
             </div>
             <div className="text-center">
               <div className="text-3xl mb-3">⭐</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
+              <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>
+              <p className="font-bold text-yellow-500">
+                {getLuckyElement("moods")}
+              </p>
             </div>
           </div>
         </div>
 
         {/* Footer */}
         <div className="text-center text-sm opacity-70 mt-4">
-          <p>✨ Discover your daily horoscope and unlock the secrets of the stars ✨</p>
+          <p>
+            ✨ Discover your daily horoscope and unlock the secrets of the stars
+            ✨
+          </p>
         </div>
       </div>
     </div>
   );
 };
 
-export default HoroscopeApp;
+export default HoroscopeApp;