added navbar to hero section

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-  "cSpell.words": ["CODECRAFT", "tailwindcss"],
+  "cSpell.words": ["CODECRAFT", "headlessui", "tailwindcss"],
   "prettier.configPath": "./prettier.config.js",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }

app/(landing)/page.tsx

@@ -3,7 +3,7 @@ import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { lusitana } from '@/app/ui/fonts';
 import Image from 'next/image';
-import Hero from './sections/Hero';
+import Hero from './sections/Hero/Hero';
 import Schedule from './sections/Schedule';
 import { Suspense } from 'react';
 import Sponsors from './sections/Sponsors';

app/(landing)/sections/Hero.tsx → app/(landing)/sections/Hero/Hero.tsx

@@ -1,11 +1,13 @@
 import Image from 'next/image';
+import Navbar from './Navbar';
 
 export default function Hero() {
   return (
     <div
       className="bg-gray-100 w-full h-[100vh] max-h-[1300px]
       flex flex-col-reverse justify-center items-center"
     >
+      <Navbar />
       <Image
         src="/landing/fire.png"
         width="0"

app/(landing)/sections/Hero/Navbar.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import React from "react";
+import { MdOutlineMenu } from "react-icons/md";
+import { Fragment } from "react";
+// import { scrollToSectionName } from "./utilities";
+import { usePathname, useRouter } from "next/navigation";
+import { Menu, Transition } from "@headlessui/react";
+import Image from "next/image";
+import Link from "next/link";
+
+function scrollToSectionName(sectionName: string) {
+  const section = document.getElementById(sectionName);
+  if (section) {
+    section.scrollIntoView({ behavior: "smooth" });
+  }
+}
+
+function MenuItem(props: { sectionName: string }) {
+  const { sectionName } = props;
+  return (
+    <Menu.Item>
+      {({ active }) => (
+        <button
+          className={`${active ? "bg-f23-lightGreen text-white" : "text-gray-900"}
+                    group flex w-full items-center rounded-md px-2 py-2 text-lg`}
+          onClick={() => scrollToSectionName(sectionName)}
+        >
+          {sectionName}
+        </button>
+      )}
+    </Menu.Item>
+  );
+}
+function OtherPageMenuItem(props: { sectionName: string }) {
+  const { sectionName } = props;
+  const history = useRouter();
+  return (
+    <Menu.Item>
+      {({ active }) => (
+
+        <button
+          className={`${active ? "bg-f23-lightGreen text-white" : "text-gray-900"}
+                    group flex w-full items-center rounded-md px-2 py-2 text-lg`}
+          onClick={() => {
+            history.push("/contact");
+          }}
+        >
+          {sectionName}
+        </button>
+
+
+      )}
+    </Menu.Item>
+  );
+}
+
+function CollapsedMenu() {
+  return (
+    <div className="text-right bg-f23-mediumGreen rounded-md z-40 md:hidden absolute right-28 top-4 ">
+      <Menu
+        as="div"
+        className="relative inline-block text-left"
+      >
+        <div>
+          <Menu.Button className="inline-flex w-full justify-center rounded-md hover:bg-black hover:bg-opacity-20 px-2 py-2 text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+            <MdOutlineMenu
+              color="white"
+              size={40}
+            />
+          </Menu.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div className="px-1 py-1">
+              <MenuItem sectionName="Home" />
+              <MenuItem sectionName="About" />
+              <MenuItem sectionName="Schedule" />
+              <MenuItem sectionName="FAQ" />
+              {/* <MenuItem sectionName="Sponsors" /> */}
+              {<OtherPageMenuItem sectionName="Contact" />}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  );
+}
+
+/**
+ * TODO: Make navbar sticky and then change the glow to the section that is currently present ??
+ */
+
+function Navbar() {
+  const pathname = usePathname();
+  const isContactPage = pathname === "/contact";
+  const sections = ["Home", "About", "Schedule", "FAQ"];
+
+  return (
+    <div className="flex md:fixed justify-end z-40 w-full">
+      <Image
+        width={0}
+        height={0}
+        sizes={"100vw"}
+        src="/landing/yellow_hackru.png"
+        alt="yellow hackru logo"
+        className="w-24 absolute top-0 left-4 z-50"
+      />
+
+      <a
+        href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2024-season&utm_content=white"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+
+        <Image
+          width={0}
+          height={0}
+          className="w-24 absolute top-0 right-0 z-50"
+          src="https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-yellow.svg"
+          alt="Major League Hacking 2024 Hackathon Season"
+        />
+      </a>
+
+      <CollapsedMenu />
+      <div
+        className="absolute top-0 font-light text-text hidden md:flex
+                text-lg pt-8 pr-20 z-40 bg-gradient-to-b from-f23-lightGreen  w-[100%] justify-end"
+      >
+
+        {!isContactPage && (<>
+          {
+            sections.map((section) => {
+              return (
+                <button
+                  className="glow-center font-medium uppercase mr-5"
+                  onClick={() => scrollToSectionName(section)}
+                  key={section}
+                >
+                  {section}
+                </button>
+              );
+            })
+          }
+          <Link href="/contact">
+            <button className="glow-center font-medium uppercase mr-5">
+              Contact
+            </button>
+          </Link>
+        </>)
+        }
+
+        {
+          isContactPage && (
+            <Link href="/">
+              <button className="glow-center font-medium uppercase mr-5">
+                Home
+              </button>
+            </Link>
+          )
+        }
+      </div>
+
+    </div>
+  );
+}
+
+
+export default Navbar;

package.json

@@ -11,6 +11,7 @@
     "tsc": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.0.18",
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "20.5.7",
@@ -23,6 +24,7 @@
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^5.0.1",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",
     "use-debounce": "^9.0.4",