Update src/App.js

src/App.js

@@ -114,10 +114,22 @@ const HoroscopeApp = () => {
   ];
 
   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: <i className="ri-hearts-line"></i> },
+    {
+      id: "health",
+      name: "Health",
+      icon: <i className="ri-open-arm-line"></i>,
+    },
+    {
+      id: "relationship",
+      name: "Relationship",
+      icon: <i className="ri-group-3-line"></i>,
+    },
+    {
+      id: "finance",
+      name: "Finance",
+      icon: <i className="ri-wallet-3-line"></i>,
+    },
   ];
 
   const horoscopeContent = {
@@ -254,7 +266,11 @@ const HoroscopeApp = () => {
                 : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
             } shadow-lg hover:scale-105`}
           >
-            <span className="text-xl">{isDarkMode ? "☀️" : "🌙"}</span>
+            <i
+              className={`text-xl ${
+                isDarkMode ? "ri-sun-line" : "ri-moon-line"
+              }`}
+            ></i>
             <span className="hidden sm:inline">
               {isDarkMode ? "Light Mode" : "Dark Mode"}
             </span>
@@ -263,7 +279,7 @@ const HoroscopeApp = () => {
           {/* 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>
+              <i className="ri-magic-line text-xl text-white"></i>
             </div>
           </div>
 
@@ -284,7 +300,7 @@ const HoroscopeApp = () => {
               }`}
             >
               <span className="hidden sm:inline">Female</span>
-              <span className="sm:hidden">♀</span>
+              <i className="ri-women-line sm:hidden"></i>
             </button>
             <button
               onClick={() => setSelectedGender("male")}
@@ -297,7 +313,7 @@ const HoroscopeApp = () => {
               }`}
             >
               <span className="hidden sm:inline">Male</span>
-              <span className="sm:hidden">♂</span>
+              <i className="ri-men-line sm:hidden"></i>
             </button>
           </div>
         </div>
@@ -305,7 +321,7 @@ 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">
-            <span className="text-2xl text-white">🔮</span>
+            <i className="ri-magic-line text-2xl text-white"></i>
           </div>
           <h1 className="text-4xl font-bold mb-2">Horoscope App</h1>
         </div>
@@ -410,7 +426,7 @@ const HoroscopeApp = () => {
                   : "bg-white bg-opacity-90 text-gray-600 hover:bg-opacity-100"
               }`}
             >
-              <span>{category.icon}</span>
+              {category.icon}
               {category.name}
             </button>
           ))}
@@ -468,7 +484,7 @@ const HoroscopeApp = () => {
             <div className="flex-1">
               <h2 className="text-3xl font-bold text-blue-400 flex items-center gap-2 mb-2">
                 {getPeriodTitle()}
-                <span className="text-xl">📈</span>
+                <i className="ri-pulse-line text-xl"></i>
               </h2>
               <div className="flex items-center gap-2">
                 <span className="text-xl">{getCurrentSign()?.symbol}</span>
@@ -494,7 +510,7 @@ const HoroscopeApp = () => {
             }`}
           >
             <div className="text-center">
-              <div className="text-3xl mb-3">🍀</div>
+              <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"
@@ -507,7 +523,7 @@ const HoroscopeApp = () => {
               </p>
             </div>
             <div className="text-center">
-              <div className="text-3xl mb-3">🔢</div>
+              <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"
@@ -520,7 +536,7 @@ const HoroscopeApp = () => {
               </p>
             </div>
             <div className="text-center">
-              <div className="text-3xl mb-3">💎</div>
+              <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"
@@ -533,7 +549,7 @@ const HoroscopeApp = () => {
               </p>
             </div>
             <div className="text-center">
-              <div className="text-3xl mb-3">⭐</div>
+              <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"
@@ -550,9 +566,10 @@ const HoroscopeApp = () => {
 
         {/* Footer */}
         <div className="text-center text-sm opacity-70 mt-4">
-          <p>
-            ✨ Discover your daily horoscope and unlock the secrets of the stars
-            ✨
+          <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>
         </div>
       </div>