METSOC · aparna03dubey · Mar 18, 2024 · Mar 19, 2024
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Anveshan</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@material-tailwind/react": "^2.1.9",
     "framer-motion": "^11.0.12",
     "lottie-react": "^2.4.0",
+    "lucide-react": "^0.359.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,9 @@
+.button{
+    color: rgb(255, 117, 4);
+}
+
+@media (max-width: 800px){
+.nav{
+    background-color: black;
+    padding-bottom: 4px;
+}}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,21 +1,48 @@
 import React from 'react'
 import {Link} from 'react-router-dom'
 import Anveshan_Logo from '../../public/AnvLogo.svg'
-
+import { useState } from 'react';
+import { Menu,X } from 'lucide-react';
+import '../App.css'
 const Navbar = () => {
+    const [isOpen, setIsOpen]=useState(false);
+
+    const toggleNavbar=()=>{
+        setIsOpen(!isOpen);
+    }
+
     return (
-        <div className='bg-black'>
+        <div className='nav md:bg-transparent fixed  z-10 w-100%  m-auto top-0 left-0  right-0'>
+            <div className=' bg-transparent pt-6 flex justify-evenly'>
         <div className=' w-100  flex flex-row items-center  justify-around rounded-full  '>
-            <img src={Anveshan_Logo} alt='Anveshan_Logo' className=' w-10 h-auto '></img>
-            <div className="flex flex-row items-center justify-center h-[50px] rounded-full gap-6 md:gap-20 text-white font-jost text-xl">
+            <img  src={Anveshan_Logo} alt='Anveshan_Logo' className=' w-10 h-auto mr-10 '></img>
+
+            <div className="hidden md:flex flex-row items-center   bg-black h-[50px] w-[700px] rounded-full gap-6 md:gap-20 text-white font-jost text-xl font-bold	px-8 lg: fle items bg-center justify-evenly">
                 <Link to="/"><button className='hover:text-orange '>Home</button></Link>
                 <Link to="/events#events"><button className='hover:text-orange'>Events</button></Link>
                 <Link to="/about#about"> <button className='hover:text-orange'>About</button></Link>
                 <Link to="/contact#contact"><button className='hover:text-orange'>Contact</button></Link>
             </div>
-            <button className='w-22 h-auto p-2 bg-white text-black rounded-full text-md md:text-xl font-jost  '>Get started</button>
+
+            <button className='w-22 h-auto  bg-white text-black rounded-full text-md md:text-xl font-jost font-semibold md:flex hidden ml-10 p-4'>get started</button>
+        </div>
+        <div className='md:hidden'>
+       <button className='button' onClick={toggleNavbar}>{isOpen?<X/>:<Menu/>}</button>
         </div>
         </div>
+        {isOpen && (
+            <div className='text-white font-jost flex flex-col  font-semibold basis-full items-center md:hidden'>
+             <Link to="/"><button className='hover:text-orange py-3 '>Home</button></Link>
+                <Link to="/events#events"><button className='hover:text-orange py-3'>Events</button></Link>
+                <Link to="/about#about"> <button className='hover:text-orange py-3'>About</button></Link>
+                <Link to="/contact#contact"><button className='hover:text-orange py-3'>Contact</button></Link>
+            </div>
+        )}
+
+
+        </div>
+
+
     )
 }
 export default Navbar
diff --git a/src/index.css b/src/index.css
@@ -69,3 +69,5 @@
     @apply absolute left-4 top-1/2 -translate-y-1/2;
   }
 }
+
+
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
@@ -9,7 +9,9 @@ const Contact = () => {
 
   return (
     <>
-    <Navbar/>
+
+<Navbar/>
+
       <div
         style={{
           backgroundImage: backgroundImageUrl,
@@ -21,6 +23,8 @@ const Contact = () => {
         }}
         className="bg-[#000000] w-full h-full"
       >
+
+
        <p className="text-center h-[100vh] m-auto text-5xl text-white font-extrabold">Contact Us</p>
       </div>
     </>

diff --git a/src/pages/Events.jsx b/src/pages/Events.jsx
@@ -8,12 +8,11 @@ import Navbar from '../components/Navbar';
 const Events = () => {
   return (
     <>
-      <Navbar/>
+
       <div className="relative bg-cover bg-center h-screen flex items-center" style={{backgroundImage: `url(${bgImage})`}}>
-
+ <Navbar />
       <section className="grid mx-auto h-[90vh] px-4  sm:px-6 lg:px-8 max-w-full">
-        <p className='text-center text-white text-5xl font-extrabold top-4'>Event <span className='text-orange text-5xl -ml-4'>s</span> </p>
-        <p className='text-center text-white'><a href='/'>Home</a> /Events</p>
+        <p className='text-center text-white mt-4 text-5xl font-extrabold top-4'>Event <span className='text-orange text-5xl -ml-4'>s</span> </p>
         <div className="grid mx-auto max-w-screen-xl px-4 py-8  lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
           <div className="mr-auto place-self-center lg:col-span-7">
              <p className="text-5xl text-white font-bold mb-16">

diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx
@@ -16,7 +16,7 @@ const Homepage = () => {
 
   return (
     <>
-      <Navbar />
+
       <div
         style={{
           backgroundImage: backgroundImageUrl,
@@ -28,6 +28,7 @@ const Homepage = () => {
         }}
         className="bg-[#000000] w-full h-full"
       >
+         <Navbar />
         <div className="flex flex-col">
           <div className=" w-100 flex justify-center font-bold">
             {" "}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -69,3 +69,5 @@
		@apply absolute left-4 top-1/2 -translate-y-1/2;
		}
		}