From 12017125cabc25ecc9bf632dd0b7ee3d06432926 Mon Sep 17 00:00:00 2001
From: prince04kumar <princesocial04@gmail.com>
Date: Sat, 19 Oct 2024 00:12:51 +0530
Subject: [PATCH 1/2] responsive navbar and removed unnecessary margin from
 footer and hide scrollbar

---
 frontend/src/components/Footer.jsx |  2 +-
 frontend/src/components/Navbar.css | 89 ++++++++++++++++++++++++------
 frontend/src/components/Navbar.jsx | 32 ++++++++---
 frontend/src/index.css             |  6 ++
 frontend/src/pages/HomePage.jsx    |  2 +-
 5 files changed, 105 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index b5dab68..095f0db 100644
--- a/frontend/src/components/Footer.jsx
+++ b/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}
diff --git a/frontend/src/components/Navbar.css b/frontend/src/components/Navbar.css
index a66d785..30cdb3f 100644
--- a/frontend/src/components/Navbar.css
+++ b/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;
+    }
+}
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index f8fd552..8beb1bc 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/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"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b5c61c9..8b3e6ae 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+::-webkit-scrollbar{
+
+    display:none;
+  }
\ No newline at end of file
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 152456b..27dfd61 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/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>

From 998bf18424938faa74abff6b2937b73ac1728fc0 Mon Sep 17 00:00:00 2001
From: prince04kumar <princesocial04@gmail.com>
Date: Sat, 19 Oct 2024 00:35:16 +0530
Subject: [PATCH 2/2] given style to create NFTPage

---
 frontend/src/pages/CreateNFTPage.jsx | 35 +++++++++++++++++-----------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/CreateNFTPage.jsx b/frontend/src/pages/CreateNFTPage.jsx
index 92cfb66..5541213 100644
--- a/frontend/src/pages/CreateNFTPage.jsx
+++ b/frontend/src/pages/CreateNFTPage.jsx
@@ -58,13 +58,13 @@ const CreateNFT = ({ wallet }) => {
     }
 
     return (
-        <div className="container mx-auto px-4 py-8">
-            <h1 className="text-3xl font-bold mb-8">Create NFT</h1>
-            <form onSubmit={handleSubmit} className="max-w-lg">
+        <div className="container mx-auto px-4 py-8 bg-gray-100 min-h-screen">
+            <h1 className="text-3xl font-bold mb-8 text-center text-indigo-600">Create NFT</h1>
+            <form onSubmit={handleSubmit} className="max-w-lg mx-auto bg-white shadow-md rounded-lg p-6">
                 <div className="mb-4">
                     <label
                         htmlFor="name"
-                        className="block text-sm font-medium text-gray-700"
+                        className="block text-sm font-medium text-gray-700 mb-2"
                     >
                         Name
                     </label>
@@ -75,13 +75,13 @@ const CreateNFT = ({ wallet }) => {
                         value={formData.name}
                         onChange={handleChange}
                         required
-                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                        className="mt-1 block w-full rounded-md border-black border shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-3 py-2 hover:border-blue-500 transition-colors duration-300"
                     />
                 </div>
                 <div className="mb-4">
                     <label
                         htmlFor="description"
-                        className="block text-sm font-medium text-gray-700"
+                        className="block text-sm font-medium text-gray-700 mb-2"
                     >
                         Description
                     </label>
@@ -91,13 +91,14 @@ const CreateNFT = ({ wallet }) => {
                         value={formData.description}
                         onChange={handleChange}
                         required
-                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                        className="mt-1 block w-full rounded-md border-black border shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-3 py-2 hover:border-blue-500 transition-colors duration-300"
+                        rows="4"
                     ></textarea>
                 </div>
                 <div className="mb-4">
                     <label
                         htmlFor="price"
-                        className="block text-sm font-medium text-gray-700"
+                        className="block text-sm font-medium text-gray-700 mb-2"
                     >
                         Price (ETH)
                     </label>
@@ -109,13 +110,13 @@ const CreateNFT = ({ wallet }) => {
                         onChange={handleChange}
                         required
                         step="0.01"
-                        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                        className="mt-1 block w-full rounded-md border-black border shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 px-3 py-2 hover:border-blue-500 transition-colors duration-300"
                     />
                 </div>
-                <div className="mb-4">
+                <div className="mb-6">
                     <label
                         htmlFor="file"
-                        className="block text-sm font-medium text-gray-700"
+                        className="block text-sm font-medium text-gray-700 mb-2"
                     >
                         File
                     </label>
@@ -125,12 +126,19 @@ const CreateNFT = ({ wallet }) => {
                         name="file"
                         onChange={handleChange}
                         required
-                        className="mt-1 block w-full"
+                        className="mt-1 block w-full text-sm text-gray-500
+                        file:mr-4 file:py-2 file:px-4
+                        file:rounded-full file:border-0
+                        file:text-sm file:font-semibold
+                        file:bg-indigo-50 file:text-indigo-700
+                        hover:file:bg-indigo-100
+                        
+                     transition-colors duration-300"
                     />
                 </div>
                 <button
                     type="submit"
-                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                    className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out transform hover:scale-105"
                 >
                     Create NFT
                 </button>
@@ -138,6 +146,7 @@ const CreateNFT = ({ wallet }) => {
         </div>
     )
 }
+
 CreateNFT.propTypes = {
     wallet: PropTypes.object.isRequired,
     // wallet: PropTypes.object,