Basic Sections (#32)

* completed basic generic sections * Formatting with prettier * added some colors and additional divider * moved text divider half way up to previous section --------- Co-authored-by: Kevin Monisit <monisitkevin@gmail.com>
HackRU · Jan 31, 2024 · 4aaf1ee · 4aaf1ee
1 parent 9dd6abf
commit 4aaf1ee
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 118 deletions.
diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
@@ -1,14 +1,15 @@
-import AcmeLogo from '@/app/ui/acme-logo';
-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/Hero';
-import Schedule from './sections/Schedule';
-import { Suspense } from 'react';
-import Sponsors from './sections/Sponsors';
-import About from './sections/About';
-import FAQ from './sections/FAQ/FAQ';
+import AcmeLogo from "@/app/ui/acme-logo";
+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/Hero";
+import Schedule from "./sections/Schedule";
+import { Suspense } from "react";
+import Sponsors from "./sections/Sponsors";
+import About from "./sections/About";
+import FAQ from "./sections/FAQ/FAQ";
+import GenericSection from "./sections/GenericSection";
 import Cursor from '@/app/ui/cursor';
 
 export default function Page() {
@@ -20,18 +21,26 @@ 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.
-         */}
-        <Suspense fallback={<>Loading Schedule!</>}>
-          <Schedule />
-        </Suspense>
-        <Suspense fallback={<>Loading Sponsors!</>}>
-          <Sponsors />
-        </Suspense>
-        <FAQ />
+        {
+          /*
+           * 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.
+           */
+        }
+        <GenericSection title="Schedule" color="white">
+          <Suspense fallback={<>Loading Schedule!</>}>
+            <Schedule />
+          </Suspense>
+        </GenericSection>
+        <GenericSection title="Sponsors" color="gray-100">
+          <Suspense fallback={<>Loading Sponsors!</>}>
+            <Sponsors />
+          </Suspense>
+        </GenericSection>
+        <GenericSection title="FAQ" color="gray-500">
+          <FAQ />
+        </GenericSection>
       </div>
     </main>
   );

diff --git a/app/(landing)/sections/About.tsx b/app/(landing)/sections/About.tsx
@@ -1,29 +1,30 @@
 import Image from 'next/image';
 import clsx from 'clsx';
 
-function AboutInfo({ children, title, imageSrc, alt, reverse }:
-  {
-    children: React.ReactNode,
-    title: string,
-    imageSrc: string,
-    alt: string,
-    reverse?: boolean,
-  }
-) {
-
+function AboutInfo({
+  children,
+  title,
+  imageSrc,
+  alt,
+  reverse,
+}: {
+  children: React.ReactNode;
+  title: string;
+  imageSrc: string;
+  alt: string;
+  reverse?: boolean;
+}) {
   function AboutInfoContent() {
     return (
       <div
         className={clsx(
-          "bg-red-100 w-full md:w-1/2 md:grow md:justify-end h-fit p-20",
+          'h-fit w-full bg-red-100 p-20 md:w-1/2 md:grow md:justify-end',
           {
             'text-end': reverse,
-          }
+          },
         )}
       >
-        <h1 className="font-extrabold bg-red-100 text-5xl">
-          {title}
-        </h1>
+        <h1 className="bg-red-100 text-5xl font-extrabold">{title}</h1>
         {children}
       </div>
     );
@@ -33,20 +34,14 @@ function AboutInfo({ children, title, imageSrc, alt, reverse }:
     return (
       <div
         className={clsx(
-          "bg-red-200 w-full md:w-1/2 h-fit flex justify-center",
+          'flex h-fit w-full justify-center bg-red-200 md:w-1/2',
           {
-            "md:justify-start": !reverse,
-            "md:justify-end": reverse,
-          }
+            'md:justify-start': !reverse,
+            'md:justify-end': reverse,
+          },
         )}
       >
-        <Image
-          src={imageSrc}
-          width="400"
-          height="400"
-          alt={alt}
-          priority
-        />
+        <Image src={imageSrc} width="400" height="400" alt={alt} priority />
       </div>
     );
   }
@@ -57,57 +52,59 @@ function AboutInfo({ children, title, imageSrc, alt, reverse }:
         <AboutImage />
         <AboutInfoContent />
       </>
-    )
+    );
   }
 
   return (
     <>
       <AboutInfoContent />
       <AboutImage />
     </>
-  )
+  );
 }
 
-
 export default function About() {
   return (
     <div
-      className="bg-gray-200 w-full h-fit
-      flex flex-col md:flex-row flex-wrap"
+      className="flex h-fit w-full
+      flex-col flex-wrap bg-gray-200 md:flex-row"
     >
-      <AboutInfo title="WHAT" imageSrc='/landing/python.png' alt="Python">
+      <AboutInfo title="WHAT" imageSrc="/landing/python.png" alt="Python">
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
+          imperdiet, nibh nec dictum consectetur, lorem nisi Lorem ipsum dolor
+          sit amet, consectetur adipiscing elit. Sed imperdiet, nibh nec dictum
+          consectetur, lorem nisi Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit. Sed imperdiet, nibh nec dictum consectetur, lorem
+          nisi
         </p>
       </AboutInfo>
 
-      <AboutInfo title="TRACKS" imageSrc='/landing/python.png' alt="Python" reverse>
+      <AboutInfo
+        title="TRACKS"
+        imageSrc="/landing/python.png"
+        alt="Python"
+        reverse
+      >
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+          imperdiet, nibh nec dictum consectetur, lorem nisi Lorem ipsum dolor
+          sit amet, consectetur adipiscing elit. Sed imperdiet, nibh nec dictum
+          consectetur, lorem nisi Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit. Sed imperdiet, nibh nec dictum consectetur, lorem
+          nisi Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
           imperdiet, nibh nec dictum consectetur, lorem nisi
         </p>
       </AboutInfo>
 
-      <AboutInfo title="JOIN US" imageSrc='/landing/python.png' alt="Python">
+      <AboutInfo title="JOIN US" imageSrc="/landing/python.png" alt="Python">
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-          imperdiet, nibh nec dictum consectetur, lorem nisi
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+          imperdiet, nibh nec dictum consectetur, lorem nisi Lorem ipsum dolor
+          sit amet, consectetur adipiscing elit. Sed imperdiet, nibh nec dictum
+          consectetur, lorem nisi Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit. Sed imperdiet, nibh nec dictum consectetur, lorem
+          nisi Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
           imperdiet, nibh nec dictum consectetur, lorem nisi
         </p>
       </AboutInfo>

diff --git a/app/(landing)/sections/FAQ/FAQ.tsx b/app/(landing)/sections/FAQ/FAQ.tsx
@@ -1,32 +1,34 @@
 'use client';
 
-import React from "react";
-import { Disclosure } from "@headlessui/react";
-import { GoChevronDown } from "react-icons/go";
-import { hackRUFAQ } from "@/app/lib/constants";
+import React from 'react';
+import { Disclosure } from '@headlessui/react';
+import { GoChevronDown } from 'react-icons/go';
+import { hackRUFAQ } from '@/app/lib/constants';
 
 /**
  * TODO: make it so that only one question can be open at a time.
  */
 
-function Question(props: { question: string, answer: string }) {
+function Question(props: { question: string; answer: string }) {
   const { question, answer } = props;
   return (
     <Disclosure>
       {({ open }) => (
-        <div className="flex flex-col border-b-white border-b-2 hover:bg-f23-mediumGreen rounded-t-lg">
+        <div className="hover:bg-f23-mediumGreen flex flex-col rounded-t-lg border-b-2 border-b-white">
           <Disclosure.Button
-            className="flex w-full justify-between
-            p-4 text-left text-md text-textSubtitle
+            className="text-md text-textSubtitle flex
+            w-full justify-between p-4 text-left
             focus:outline-none focus-visible:ring
             focus-visible:ring-opacity-75"
           >
             <span>{question}</span>
             <GoChevronDown
-              className={`${open ? "rotate-180 transform" : ""} h-5 w-5 text-text`}
+              className={`${
+                open ? 'rotate-180 transform' : ''
+              } text-text h-5 w-5`}
             />
           </Disclosure.Button>
-          <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-white w-full">
+          <Disclosure.Panel className="w-full px-4 pb-2 pt-4 text-sm text-white">
             {answer}
           </Disclosure.Panel>
         </div>
@@ -36,7 +38,6 @@ function Question(props: { question: string, answer: string }) {
 }
 
 function QuestionContainer() {
-
   const {
     whatIsHackRUAnswer,
     whatIsApplicationAnswer,
@@ -50,21 +51,15 @@ function QuestionContainer() {
   } = hackRUFAQ;
 
   return (
-    <div className="pt-16 ml-22 z-40">
-      <div className="max-w-3xl rounded-2xl transparent-black-background p-10 sm:grid sm:grid-cols-2">
+    <div className="ml-22 z-40 pt-16">
+      <div className="transparent-black-background max-w-3xl rounded-2xl p-10 sm:grid sm:grid-cols-2">
         <div>
-          <Question
-            question="What is HackRU?"
-            answer={whatIsHackRUAnswer}
-          />
+          <Question question="What is HackRU?" answer={whatIsHackRUAnswer} />
           <Question
             question="What is the application process like?"
             answer={whatIsApplicationAnswer}
           />
-          <Question
-            question="Can I win anything?"
-            answer={winAnythingAnswer}
-          />
+          <Question question="Can I win anything?" answer={winAnythingAnswer} />
           <Question
             question="Will there be a mask mandate?"
             answer={maskMandateAnswer}
@@ -75,14 +70,8 @@ function QuestionContainer() {
           />
         </div>
         <div>
-          <Question
-            question="Who can come?"
-            answer={whoCanComeAnswer}
-          />
-          <Question
-            question="I'm new. What should I do? "
-            answer={newAnswer}
-          />
+          <Question question="Who can come?" answer={whoCanComeAnswer} />
+          <Question question="I'm new. What should I do? " answer={newAnswer} />
           <Question
             question="How much does it cost to attend?"
             answer={costAnswer}
@@ -101,11 +90,11 @@ export default function FAQ() {
   return (
     <div
       id="FAQ"
-      className="w-full flex h-fit
-relative overflow-visible items-center bg-gray-500
-flex-col justify-start min-h-[600px]"
+      className="relative flex h-fit
+min-h-[600px] w-full flex-col 
+items-center justify-start overflow-visible"
     >
-      <div className="w-full h-full max-w-7xl relative flex flex-col items-center pb-[24rem]">
+      <div className="relative flex h-full w-full max-w-7xl flex-col items-center pb-[24rem]">
         <QuestionContainer />
       </div>
     </div>

diff --git a/app/(landing)/sections/GenericSection.tsx b/app/(landing)/sections/GenericSection.tsx
@@ -0,0 +1,21 @@
+import SectionTitle from './SectionTitle';
+import { ReactNode } from 'react';
+
+type GenericSectionProps = {
+  children: ReactNode;
+  title: string;
+  color: string;
+};
+
+export default function GenericSection(props: GenericSectionProps) {
+  return (
+    <div
+      id={props.title}
+      className={'flex w-full flex-col items-center bg-blue-200'}
+    >
+      <SectionTitle title={props.title} />
+      {props.children}
+      <div className='h-[15vh] w-full bg-blue-100'></div>
+    </div>
+  );
+}
diff --git a/app/(landing)/sections/Hero/Hero.tsx b/app/(landing)/sections/Hero/Hero.tsx
@@ -8,21 +8,21 @@ export default function Hero() {
       <div
         className="flex w-full
         flex-col items-center justify-center bg-gray-100
-        md:flex md:flex-row-reverse md:h-[100vh]
+        md:flex md:h-[100vh] md:flex-row-reverse
         "
       >
-
-
         {/* <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="relative h-[40vh] w-full pt-10 text-center md:pt-0 lg:w-2/5">
           <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"
+                       md:absolute md:-left-20 md:min-w-fit md:space-y-7 md:text-4xl
+                       lg:-left-10 lg:text-5xl xl:space-y-8 xl:text-6xl"
           >
-            <div className="mb-2 text-xl md:mb-0 lg:text-3xl xl:text-4xl">WELCOME TO OUR</div>
+            <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>

diff --git a/app/(landing)/sections/Schedule.tsx b/app/(landing)/sections/Schedule.tsx
@@ -1,4 +1,5 @@
 import { getSchedule } from '@/app/lib/data';
+import SectionTitle from './SectionTitle';
 
 function ScheduleOfTheDay(props: { dayInfo: DayInfo }) {
   const { dayInfo } = props;