Add Styles

Author: AbhinavMV

components/Footer.jsx

@@ -16,38 +16,38 @@ const Footer = () => {
         {
             name: 'Mail',
             url: 'mailto:[email protected]',
-            icon: <AiOutlineMail />,
+            icon: AiOutlineMail,
             text: 'Contact us via mail'
         },
         {
             name: 'Instagram',
             url: 'https://www.instagram.com/web3community/',
-            icon: <AiOutlineInstagram />,
+            icon: AiOutlineInstagram,
             text: 'Check our content at Instagram'
         },
         {
             name: 'Twitter',
             url: 'https://twitter.com/web3community',
-            icon: <AiOutlineTwitter />,
+            icon: AiOutlineTwitter,
             text: 'Follow us via Twitter'
         },
 
         {
             name: 'Linkedin',
             url: 'https://www.linkedin.com/company/web3community',
-            icon: <AiFillLinkedin />,
+            icon: AiFillLinkedin,
             text: 'Connect with us at LinkedIn'
         },
         {
             name: 'Twitter',
             url: 'https://github.com/WebXDAO',
-            icon: <AiOutlineGithub />,
+            icon: AiOutlineGithub,
             text: 'Contribute at GitHub'
         },
         {
             name: 'Twitter',
             url: 'https://discord.gg/TSRwqx4K2v',
-            icon: <FaDiscord />,
+            icon: FaDiscord,
             text: 'Join our Discord community'
         }
     ]
@@ -64,17 +64,17 @@ const Footer = () => {
                     <div className='flex-wrap flex-1 md:px-4 mb-6 text-black'>
                         <p className='text-white mb-3 md:mb-6'>Socials</p>
                         <div className='flex space-x-4'>
-                            {socials.map((handle, index) => (
+                            {socials.map(({ url, name, text, icon: Icon }, index) => (
                                 <a
                                     aria-hidden='true'
                                     className='text-white transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100'
-                                    href={handle.url}
-                                    key={handle.name + index}
+                                    href={url}
+                                    key={name + index}
                                     rel='noreferrer'
                                     target='_blank'
-                                    title={handle.text}
+                                    title={text}
                                 >
-                                    {handle.icon}
+                                    <Icon className='w-5 h-5' />
                                 </a>
                             ))}
                         </div>

components/Navbar.jsx

@@ -10,7 +10,7 @@ const NavBarItem = ({ item, pathname, classprops }) => (
         <li
             className={`${
                 pathname === item.url && 'font-bold'
-            } ${classprops} text-ml inline-block text-blue-800 no-underline hover:text-indigo-500 py-2 px-4 items-center`}
+            } ${classprops} cursor-pointer text-ml inline-block text-blue-800 no-underline hover:text-indigo-500 py-2 px-4 items-center`}
         >
             {item.title}
         </li>
@@ -33,7 +33,7 @@ const Navbar = () => {
     return (
         <nav className='sticky w-full z-30 top-0 text-white bg-white'>
             <div className='w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2'>
-                <div className='pl-4 flex items-center'>
+                <div className='pl-4 flex items-center cursor-pointer'>
                     <Link
                         className='toggleColour text-black no-underline hover:no-underline font-bold text-2xl lg:text-2xl'
                         href='/'
@@ -88,55 +88,3 @@ flex flex-col justify-start items-end rounded-md blue-glassmorphism animate-slid
 }
 
 export default Navbar
-
-{
-    /* <nav className='w-full z-30 top-0 text-white bg-white relative'>
-<div className='md:flex-[0.5] flex-initial justify-center items-center'>
-    <Image
-        src='/logo.png'
-        layout='responsive'
-        width={80}
-        height={40}
-        alt='logo'
-        className='w-32 cursor-pointer'
-    />
-</div>
-<ul className='md:flex hidden list-none flex-row justify-between items-center flex-initial'>
-    {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
-        <NavBarItem key={item + index} title={item} />
-    ))}
-    <li className='bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]'>
-        Login
-    </li>
-</ul>
-<div className='flex relative'>
-    {!toggleMenu && (
-        <HiMenuAlt4
-            fontSize={28}
-            className='md:hidden cursor-pointer'
-            onClick={() => setToggleMenu(true)}
-        />
-    )}
-    {toggleMenu && (
-        <AiOutlineClose
-            fontSize={28}
-            className='text-white md:hidden cursor-pointer'
-            onClick={() => setToggleMenu(false)}
-        />
-    )}
-    {toggleMenu && (
-        <ul
-            className='z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none
-flex flex-col justify-start items-end rounded-md blue-glassmorphism animate-slide-in'
-        >
-            <li className='text-xl w-full my-2'>
-                <AiOutlineClose onClick={() => setToggleMenu(false)} />
-            </li>
-            {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => (
-                <NavBarItem key={item + index} title={item} classprops='my-2 text-lg' />
-            ))}
-        </ul>
-    )}
-</div>
-</nav> */
-}