Responsive Navbar and removed unnecessary margin from footer and hide Scrollbar

frontend/src/components/Footer.jsx

@@ -24,7 +24,7 @@ const Footer = () => {
     }, [])
 
     return (
-        <footer className="bg-gray-900 mt-12 text-white relative pt-20 pb-10">
+        <footer className="bg-gray-900  text-white relative pt-20 pb-10">
             <div className="absolute top-0 left-0 w-full overflow-hidden">
                 <svg
                     ref={waveRef}

frontend/src/components/Navbar.css

@@ -155,32 +155,58 @@
     font-weight: bold;
 }
 
+.menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 0.5rem;
+}
+
 @media (max-width: 1024px) {
     .navbar {
-        justify-content: center;
-        text-align: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
     }
 
     .navbar-logo {
-        margin-bottom: 1rem;
+        margin-bottom: 0;
     }
 
-    .navbar-links {
-        width: 100%;
-        justify-content: center;
-        margin-bottom: 1rem;
+    .menu-toggle {
+        display: block;
     }
 
+    .navbar-links,
     .navbar-actions {
         width: 100%;
-        justify-content: center;
+        display: none;
+        flex-direction: column;
+        gap: .53rem;
+        align-items: center;
+        padding: 1rem 0;
+    }
+
+    .navbar-links.active,
+    .navbar-actions.active {
+        display: flex;
+    }
+
+    .navbar-link {
+        margin: 0.5rem 0;
     }
 
     .search-container {
-        max-width: none;
-        width: 100%;
+        max-width: 100%;
         margin-bottom: 1rem;
     }
+
+    .github-button,
+    .connect-wallet-button {
+        width: 100%;
+        margin: 0.5rem 0;
+    }
 }
 
 @media (max-width: 768px) {
@@ -189,19 +215,28 @@
         align-items: center;
     }
 
-    .navbar-link::after {
-        display: none;
+    .navbar-link.active::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        display: block;
+        margin-top: 5px;
+        left: 0;
+        background: #ff00ff;
     }
 
-    .navbar-actions {
-        flex-direction: column;
-        align-items: stretch;
+    .navbar-link {
+        margin: 0.5rem 0;
+        padding-bottom: 5px;
     }
 
     .github-button,
     .connect-wallet-button,
     .mint-nft-button {
-        width: 100%;
+        width: 80%;
+        max-width: 250px;
+        margin: 0.5rem auto;
     }
 
     .mint-nft-container {
@@ -213,3 +248,25 @@
         width: 100%;
     }
 }
+
+@media (max-width: 480px) {
+    .navbar-logo {
+        font-size: 1.2rem;
+    }
+
+    .logo-img {
+        width: 2rem;
+    }
+
+    .search-input {
+        font-size: 0.9rem;
+    }
+
+    .github-button,
+    .connect-wallet-button {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+        width: 70%;
+        max-width: 200px;
+    }
+}

frontend/src/components/Navbar.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
-import { Link } from 'react-router-dom'
-import { Search } from 'lucide-react'
+import React, { useState, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { Search, Menu, X } from 'lucide-react'
 import logo from '../assets/decentrade-logo.png'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
@@ -10,6 +10,16 @@ import { connectWallet, mintNFT } from '../utils/ethereum'
 const Navbar = ({ wallet, setWallet }) => {
     const [tokenURI, setTokenURI] = useState('')
     const [showMintOption, setShowMintOption] = useState(false)
+    const [isMenuOpen, setIsMenuOpen] = useState(false)
+    const location = useLocation()
+
+    useEffect(() => {
+        if (isMenuOpen) {
+            document.body.classList.add('menu-open');
+        } else {
+            document.body.classList.remove('menu-open');
+        }
+    }, [isMenuOpen]);
 
     const handleGithubClick = () => {
         window.open('https://github.com/4darsh-Dev/DecenTrade', '_blank')
@@ -36,6 +46,10 @@ const Navbar = ({ wallet, setWallet }) => {
         }
     }
 
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    }
+
     return (
         <nav className="navbar">
             <div className="navbar-logo">
@@ -48,27 +62,29 @@ const Navbar = ({ wallet, setWallet }) => {
                 </Link>
                 <Link to="/">DecenTrade</Link>
             </div>
-            <div className="navbar-links">
+            <button className="menu-toggle" onClick={toggleMenu}>
+                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+            <div className={`navbar-links ${isMenuOpen ? 'active' : ''}`}>
                 {[
                     { name: 'Home', link: '/' },
                     { name: 'Explore', link: '/explore' },
                     { name: 'Create', link: '/create' },
                     { name: 'About', link: '/about' },
                     { name: 'Creators', link: '/creators' },
-                    // { name: 'How It Works', link: '/how-it-works' },
-
                     { name: 'FAQs', link: '/faqs' },
                 ].map((item) => (
                     <Link
                         key={item.name}
                         to={item.link}
-                        className="navbar-link"
+                        className={`navbar-link ${location.pathname === item.link ? 'active' : ''}`}
+                        onClick={toggleMenu}
                     >
                         {item.name}
                     </Link>
                 ))}
             </div>
-            <div className="navbar-actions">
+            <div className={`navbar-actions ${isMenuOpen ? 'active' : ''}`}>
                 <div className="search-container">
                     <input
                         type="text"

frontend/src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+::-webkit-scrollbar{
+
+    display:none;
+  }

frontend/src/pages/HomePage.jsx

@@ -8,7 +8,7 @@ const HomePage = () => {
     return (
         <div className="min-h-screen">
             <div className="bg-cover bg-center bg-[url('/src/assets/decen-bg2.webp')]">
-                <main className="container mx-auto px-4">
+                <main className="container mx-auto p-4">
                     <HeroSection />
                     <InfoCards />
                 </main>