Merge pull request #218 from SadafKausar2025/main

Added Animated icon in Navbar links
Curious-Ecosystem · Aug 9, 2024 · b846d23 · b846d23
2 parents eaef041 + 6320abd
commit b846d23
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 1 deletion.
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,6 +8,8 @@
   </head>
   <body>
     <div id="root"></div>
+
     <script type="module" src="/src/main.jsx"></script>
+    <script src="https://cdn.lordicon.com/lordicon.js"></script>
   </body>
 </html>
diff --git a/frontend/src/Components/Pages/Landing-Page/Navbar.jsx b/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
@@ -93,7 +93,81 @@ const Navbar = () => {
               {item.label}
             </motion.span>
           </Link>
-        ))}
+        </div>
+      </div>
+      <div className='hidden lg:flex justify-between gap-28 items-center z-20'>
+        <Link to={'/'}>
+          <span
+            className={home ? selectedClass : ''}
+            onClick={() => {
+              setActive(0);
+            }}>
+            <lord-icon
+              style={{
+                height: '20px',
+                width: '20px',
+                paddingTop: '2px',
+              }}
+              src='https://cdn.lordicon.com/wmwqvixz.json'
+              trigger='hover'
+              colors='primary:#ffffff'></lord-icon>{' '}
+            Home
+          </span>
+        </Link>
+        <Link to={'/aboutUs'}>
+          <span
+            className={about ? selectedClass : ''}
+            onClick={() => {
+              setActive(1);
+            }}>
+            <lord-icon
+              style={{
+                height: '20px',
+                width: '20px',
+                paddingTop: '2px',
+              }}
+              src='https://cdn.lordicon.com/jnzhohhs.json'
+              trigger='hover'
+              colors='primary:#ffffff'></lord-icon>{' '}
+            About
+          </span>
+        </Link>
+        <Link to={'/contactUs'}>
+          <span
+            className={contact ? selectedClass : ''}
+            onClick={() => {
+              setActive(2);
+            }}>
+            <lord-icon
+              style={{
+                height: '20px',
+                width: '20px',
+                paddingTop: '2px',
+              }}
+              src='https://cdn.lordicon.com/srsgifqc.json'
+              trigger='hover'
+              colors='primary:#ffffff'></lord-icon>{' '}
+            Contact
+          </span>
+        </Link>
+        <Link to={'/faq'}>
+          <span
+            className={faq ? selectedClass : ''}
+            onClick={() => {
+              setActive(3);
+            }}>
+            <lord-icon
+              style={{
+                height: '20px',
+                width: '20px',
+                paddingTop: '2px',
+              }}
+              src='https://cdn.lordicon.com/pyoiumqr.json'
+              trigger='hover'
+              colors='primary:#ffffff'></lord-icon>{' '}
+            FAQ
+          </span>
+        </Link>
       </div>
     </nav>
   );