added id for sponsors and added hamburger menu

Author: QuadAces

components/Hamburger.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { AnimatePresence, motion, useCycle } from "framer-motion";
+import Link from "next/link";
+
+export default function Hamburger () {
+
+  const [isOpen, toggleOpen] = useCycle(false, true);
+
+  return (
+    <button onClick={() => {toggleOpen()}} className="focus:outline-none">
+      <svg
+        className="w-6 h-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 6h16M4 12h16m-7 6h7"
+        />
+      </svg>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2 }}
+            className="absolute top-16 right-0 bg-[#3977F9] p-4 shadow-lg w-40 rounded-2xl"
+            style={{height: "85vh"}}
+          >
+            <ul>
+              <li className="py-2"><Link href={"#about"}>About Us</Link></li>
+              <li className="py-2"><Link href={"#events"}>Events</Link></li>
+              <li className="py-2"><Link href={"/resources"}>Resources</Link></li>
+              <li className="py-2"><Link href={"#sponsors"}>Sponsors</Link></li>
+            </ul>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </button>
+  );
+}

components/Navbar.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import Hamburger from './Hamburger';
 
 const Navbar = () => {
   const [path, setPath] = useState<string>('');
@@ -28,7 +29,7 @@ const Navbar = () => {
             <p className="text-[0.6rem] text-[#C4C5C8]">01</p>
             <div>{'//'} about us</div>
           </Link>
-          <Link href="events">
+          <Link href="#events">
             <p className="text-[0.6rem] text-[#C4C5C8]">02</p>
             <div>{'//'} events</div>
           </Link>
@@ -41,6 +42,9 @@ const Navbar = () => {
             <div>{'//'} sponsors</div>
           </Link>
         </div>
+        <div className='md:hidden xl:hidden lg:hidden text-right font-bold block'>
+          <Hamburger/>
+        </div>
       </div>
     </nav>
   );

components/Sponsors/index.tsx

@@ -8,7 +8,7 @@ const Sponsors = () => {
     'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36';
 
   return (
-    <section className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20">
+    <section className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20" id="sponsors">
       <div className="text-center">
         <p className="text-[#3977F8] font-game text-xl">04</p>
         <h2 className="font-bold text-6xl">SUPPORT CSESOC</h2>

components/styles.css

@@ -0,0 +1,40 @@
+body {
+    background-color: #1a0554;
+    font-family: "Roboto", sans-serif;
+  }
+  
+  main {
+    display: flex;
+  }
+  
+  aside {
+    background-color: #c4a8ff;
+    width: 18.75rem;
+    height: 100vh;
+  }
+  
+  .container {
+    margin: 4.5rem 1.4rem;
+  }
+  
+  .btn-container {
+    position: fixed;
+  }
+  
+  .container a {
+    color: #f9fafb;
+    text-decoration: none;
+    font-size: 1.75rem;
+    font-weight: 600;
+    display: block;
+    margin: 20px;
+  }
+  
+  button {
+    cursor: pointer;
+    margin: 1.25rem;
+    border: none;
+    padding: 0.5rem 1rem;
+    background-color: #f9fafb;
+  }
+  

package-lock.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
     "eslint-config-next": "13.4.19",
+    "framer-motion": "^11.1.2",
     "next": "13.4.19",
     "postcss": "8.4.29",
     "react": "18.2.0",