Hero Section (#27)

* set up initial template

* added navbar to hero section

* responsive hero section

.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/jsx-first-prop-new-line": [2, "multiline"],
+    "react/jsx-max-props-per-line": [2, { "maximum": 1, "when": "multiline" }],
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-closing-bracket-location": [2, "tag-aligned"]
+  }
 }

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": ["CODECRAFT", "headlessui", "tailwindcss"],
+  "prettier.configPath": "./prettier.config.js",
+  "editor.codeActionsOnSave": {
+    "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';
@@ -16,13 +16,11 @@ export default function Page() {
       <div>
         <Hero />
         <About />
-        {
-          /**
-           * We are using Suspense because Schedule and Sponsors will eventually
-           * pull from the backend. Also, we will need to replace the fallback
-           * component to a relevant loading component.
-           */
-        }
+        {/**
+         * We are using Suspense because Schedule and Sponsors will eventually
+         * pull from the backend. Also, we will need to replace the fallback
+         * component to a relevant loading component.
+         */}
         <Suspense fallback={<>Loading Schedule!</>}>
           <Schedule />
         </Suspense>

app/(landing)/sections/About.tsx

@@ -1,12 +1,10 @@
 export default function About() {
   return (
     <div
-      className="bg-gray-200 w-full h-[100vh] max-h-[1300px]
-      flex flex-col justify-center items-center"
+      className="flex h-[100vh] max-h-[1300px] w-full
+      flex-col items-center justify-center bg-gray-200"
     >
-      <h1 className="font-extrabold text-5xl">
-        About
-      </h1>
+      <h1 className="text-5xl font-extrabold">About</h1>
     </div>
   );
-}
+}

app/(landing)/sections/FAQ.tsx

@@ -1,12 +1,10 @@
 export default function FAQ() {
   return (
     <div
-      className="bg-gray-400 w-full h-[100vh] max-h-[1300px]
-      flex flex-col justify-center items-center"
+      className="flex h-[100vh] max-h-[1300px] w-full
+      flex-col items-center justify-center bg-gray-400"
     >
-      <h1 className="font-extrabold text-5xl">
-        FAQ
-      </h1>
+      <h1 className="text-5xl font-extrabold">FAQ</h1>
     </div>
   );
-}
+}

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

@@ -0,0 +1,45 @@
+import Image from 'next/image';
+import Navbar from './Navbar';
+
+export default function Hero() {
+  return (
+    <>
+      <Navbar />
+      <div
+        className="flex w-full
+        flex-col items-center justify-center bg-gray-100
+        md:flex md:flex-row-reverse md:h-[100vh]
+        "
+      >
+
+
+        {/* <div className="w-full h-[75vh] bg-red-100" />
+        <div className="w-full h-10 bg-red-500" /> */}
+
+        <div className="w-full lg:w-2/5 h-[40vh] text-center pt-10 md:pt-0 relative">
+          <div
+            className="flex h-[40vh] w-full flex-col justify-center space-y-4 text-5xl
+                       md:text-4xl md:space-y-7 md:absolute md:-left-20 md:min-w-fit
+                       lg:text-5xl lg:-left-10 xl:text-6xl xl:space-y-8"
+          >
+            <div className="mb-2 text-xl md:mb-0 lg:text-3xl xl:text-4xl">WELCOME TO OUR</div>
+            <div>SCHOOL OF</div>
+            <div>CODECRAFT&nbsp;&</div>
+            <div>CIRCUITRY!</div>
+          </div>
+        </div>
+
+        <Image
+          src="/landing/fire.png"
+          width="0"
+          height="0"
+          sizes="100vw"
+          alt="Fire"
+          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
+          className="h-auto w-[790px] pl-8 md:w-[550px] lg:w-[650px]"
+          priority
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,165 @@
+'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="bg-f23-mediumGreen absolute right-28 top-4 z-40 rounded-md text-right md:hidden ">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          <Menu.Button className="inline-flex w-full justify-center rounded-md px-2 py-2 text-sm font-medium text-white hover:bg-black hover:bg-opacity-20 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="z-40 flex w-full justify-end md:fixed">
+      <Image
+        width={0}
+        height={0}
+        sizes={'100vw'}
+        src="/landing/yellow_hackru.png"
+        alt="yellow hackru logo"
+        className="absolute left-4 top-0 z-50 w-24"
+      />
+
+      <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="absolute right-0 top-0 z-50 w-24"
+          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="text-text from-f23-lightGreen absolute top-0 z-40 hidden
+                w-[100%] justify-end bg-gradient-to-b pr-20 pt-8 text-lg  font-light md:flex"
+      >
+        {!isContactPage && (
+          <>
+            {sections.map((section) => {
+              return (
+                <button
+                  className="glow-center mr-5 font-medium uppercase"
+                  onClick={() => scrollToSectionName(section)}
+                  key={section}
+                >
+                  {section}
+                </button>
+              );
+            })}
+            <Link href="/contact">
+              <button className="glow-center mr-5 font-medium uppercase">
+                Contact
+              </button>
+            </Link>
+          </>
+        )}
+
+        {isContactPage && (
+          <Link href="/">
+            <button className="glow-center mr-5 font-medium uppercase">
+              Home
+            </button>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Navbar;

app/(landing)/sections/Schedule.tsx

@@ -1,43 +1,48 @@
-import { getSchedule } from "@/app/lib/data";
+import { getSchedule } from '@/app/lib/data';
 
 function ScheduleOfTheDay(props: { dayInfo: DayInfo }) {
   const { dayInfo } = props;
   const { day, times } = dayInfo;
   return (
-    <div className="flex flex-col w-full my-5">
-      <div className="text-5xl md:text-7xl w-full text-center mb-4 font-semibold glow-subtitles text-textSubtitle">{dayInfo.day}</div>
+    <div className="my-5 flex w-full flex-col">
+      <div className="glow-subtitles text-textSubtitle mb-4 w-full text-center text-5xl font-semibold md:text-7xl">
+        {dayInfo.day}
+      </div>
       <div className="w-full">
         {times.map((timeInfo, index) => (
-          <div className="flex flex-row w-full text-xl my-2 md:my-5 md:px-3 pr-4"
+          <div
+            className="my-2 flex w-full flex-row pr-4 text-xl md:my-5 md:px-3"
             key={`${day}-${index}`}
           >
-            <div className="w-2/5 h-fit text-right pr-2 font-black">{timeInfo.time}</div>
-            <div className="w-3/5">
-              {timeInfo.event}
+            <div className="h-fit w-2/5 pr-2 text-right font-black">
+              {timeInfo.time}
             </div>
-
+            <div className="w-3/5">{timeInfo.event}</div>
           </div>
         ))}
       </div>
     </div>
   );
-
 }
 
 export default async function Schedule() {
   const schedule = await getSchedule();
 
   return (
-    <div className="w-full flex justify-center px-4 mb-20 relative"
-      id="Schedule">
-      <div className="w-full max-w-7xl h-fit flex flex-col items-center">
-        <div className="transparent-black-background w-full text-text rounded-3xl
-                              flex flex-col items-center md:flex-row md:items-start relative">
-          <ScheduleOfTheDay dayInfo={schedule["Saturday"]} />
-          <div className="w-20 h-2 bg-text md:invisible md:absolute rounded-sm" />
-          <ScheduleOfTheDay dayInfo={schedule["Sunday"]} />
+    <div
+      className="relative mb-20 flex w-full justify-center px-4"
+      id="Schedule"
+    >
+      <div className="flex h-fit w-full max-w-7xl flex-col items-center">
+        <div
+          className="transparent-black-background text-text relative flex
+                              w-full flex-col items-center rounded-3xl md:flex-row md:items-start"
+        >
+          <ScheduleOfTheDay dayInfo={schedule['Saturday']} />
+          <div className="bg-text h-2 w-20 rounded-sm md:invisible md:absolute" />
+          <ScheduleOfTheDay dayInfo={schedule['Sunday']} />
         </div>
       </div>
     </div>
   );
-}
+}

app/(landing)/sections/Sponsors.tsx

@@ -1,12 +1,10 @@
 export default function Sponsors() {
   return (
     <div
-      className="bg-gray-100 w-full h-[100vh] max-h-[1300px]
-      flex flex-col justify-center items-center"
+      className="flex h-[100vh] max-h-[1300px] w-full
+      flex-col items-center justify-center bg-gray-100"
     >
-      <h1 className="font-extrabold text-5xl">
-        Sponsors
-      </h1>
+      <h1 className="text-5xl font-extrabold">Sponsors</h1>
     </div>
   );
-}
+}