responsive hero section

HackRU · Jan 20, 2024 · 39bd420 · 39bd420
1 parent f296482
commit 39bd420
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 153 deletions.
diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
@@ -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>

diff --git a/app/(landing)/sections/About.tsx b/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>
   );
-}
+}
diff --git a/app/(landing)/sections/FAQ.tsx b/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>
   );
-}
+}
diff --git a/app/(landing)/sections/Hero/Hero.tsx b/app/(landing)/sections/Hero/Hero.tsx
@@ -3,29 +3,43 @@ 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"
-        height="0"
-        sizes="100vw"
-        alt="Fire"
-        /* https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height */
-        className="w-80 h-auto"
-        priority
-      />
+      <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="flex flex-col text-center grow justify-center text-3xl space-y-4">
-        <div className="text-xl mb-2">WELCOME TO OUR</div>
-        <div>SCHOOL OF</div>
-        <div>CODECRAFT &</div>
-        <div>WIZARDRY!</div>
-      </div>
 
-    </div>
+        {/* <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>
+    </>
   );
-}
+}
diff --git a/app/(landing)/sections/Hero/Navbar.tsx b/app/(landing)/sections/Hero/Navbar.tsx
@@ -1,18 +1,18 @@
 'use client';
 
-import React from "react";
-import { MdOutlineMenu } from "react-icons/md";
-import { Fragment } from "react";
+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";
+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" });
+    section.scrollIntoView({ behavior: 'smooth' });
   }
 }
 
@@ -22,7 +22,9 @@ function MenuItem(props: { sectionName: string }) {
     <Menu.Item>
       {({ active }) => (
         <button
-          className={`${active ? "bg-f23-lightGreen text-white" : "text-gray-900"}
+          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)}
         >
@@ -38,36 +40,29 @@ function OtherPageMenuItem(props: { sectionName: string }) {
   return (
     <Menu.Item>
       {({ active }) => (
-
         <button
-          className={`${active ? "bg-f23-lightGreen text-white" : "text-gray-900"}
+          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");
+            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 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 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 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
@@ -101,77 +96,70 @@ function CollapsedMenu() {
 
 function Navbar() {
   const pathname = usePathname();
-  const isContactPage = pathname === "/contact";
-  const sections = ["Home", "About", "Schedule", "FAQ"];
+  const isContactPage = pathname === '/contact';
+  const sections = ['Home', 'About', 'Schedule', 'FAQ'];
 
   return (
-    <div className="flex md:fixed justify-end z-40 w-full">
+    <div className="z-40 flex w-full justify-end md:fixed">
       <Image
         width={0}
         height={0}
-        sizes={"100vw"}
+        sizes={'100vw'}
         src="/landing/yellow_hackru.png"
         alt="yellow hackru logo"
-        className="w-24 absolute top-0 left-4 z-50"
+        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="w-24 absolute top-0 right-0 z-50"
+          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="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"
+        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) => {
+        {!isContactPage && (
+          <>
+            {sections.map((section) => {
               return (
                 <button
-                  className="glow-center font-medium uppercase mr-5"
+                  className="glow-center mr-5 font-medium uppercase"
                   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
+            })}
+            <Link href="/contact">
+              <button className="glow-center mr-5 font-medium uppercase">
+                Contact
               </button>
             </Link>
-          )
-        }
-      </div>
+          </>
+        )}
 
+        {isContactPage && (
+          <Link href="/">
+            <button className="glow-center mr-5 font-medium uppercase">
+              Home
+            </button>
+          </Link>
+        )}
+      </div>
     </div>
   );
 }
 
-
-export default Navbar;
+export default Navbar;
diff --git a/app/(landing)/sections/Schedule.tsx b/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>
   );
-}
+}
diff --git a/app/(landing)/sections/Sponsors.tsx b/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>
   );
-}
+}