Dev

.vscode/settings.json

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

app/(landing)/page.tsx

@@ -8,7 +8,7 @@ import Schedule from './sections/Schedule';
 import { Suspense } from 'react';
 import Sponsors from './sections/Sponsors';
 import About from './sections/About';
-import FAQ from './sections/FAQ';
+import FAQ from './sections/FAQ/FAQ';
 
 export default function Page() {
   return (

app/(landing)/sections/About.tsx

@@ -1,10 +1,116 @@
+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 AboutInfoContent() {
+    return (
+      <div
+        className={clsx(
+          "bg-red-100 w-full md:w-1/2 md:grow md:justify-end h-fit p-20",
+          {
+            'text-end': reverse,
+          }
+        )}
+      >
+        <h1 className="font-extrabold bg-red-100 text-5xl">
+          {title}
+        </h1>
+        {children}
+      </div>
+    );
+  }
+
+  function AboutImage() {
+    return (
+      <div
+        className={clsx(
+          "bg-red-200 w-full md:w-1/2 h-fit flex justify-center",
+          {
+            "md:justify-start": !reverse,
+            "md:justify-end": reverse,
+          }
+        )}
+      >
+        <Image
+          src={imageSrc}
+          width="400"
+          height="400"
+          alt={alt}
+          priority
+        />
+      </div>
+    );
+  }
+
+  if (reverse) {
+    return (
+      <>
+        <AboutImage />
+        <AboutInfoContent />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <AboutInfoContent />
+      <AboutImage />
+    </>
+  )
+}
+
+
 export default function About() {
   return (
     <div
-      className="flex h-[100vh] max-h-[1300px] w-full
-      flex-col items-center justify-center bg-gray-200"
+      className="bg-gray-200 w-full h-fit
+      flex flex-col md:flex-row flex-wrap"
     >
-      <h1 className="text-5xl font-extrabold">About</h1>
+      <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
+        </p>
+      </AboutInfo>
+
+      <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
+        </p>
+      </AboutInfo>
+
+      <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
+        </p>
+      </AboutInfo>
     </div>
   );
 }

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

@@ -0,0 +1,113 @@
+'use client';
+
+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 }) {
+  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">
+          <Disclosure.Button
+            className="flex w-full justify-between
+            p-4 text-left text-md text-textSubtitle
+            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`}
+            />
+          </Disclosure.Button>
+          <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-white w-full">
+            {answer}
+          </Disclosure.Panel>
+        </div>
+      )}
+    </Disclosure>
+  );
+}
+
+function QuestionContainer() {
+
+  const {
+    whatIsHackRUAnswer,
+    whatIsApplicationAnswer,
+    winAnythingAnswer,
+    maskMandateAnswer,
+    moreQuestionsAnswer,
+    whoCanComeAnswer,
+    newAnswer,
+    costAnswer,
+    workWithOthersAnswer,
+  } = 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>
+          <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="Will there be a mask mandate?"
+            answer={maskMandateAnswer}
+          />
+          <Question
+            question="I have more questions!"
+            answer={moreQuestionsAnswer}
+          />
+        </div>
+        <div>
+          <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}
+          />
+          <Question
+            question="Can I work with others?"
+            answer={workWithOthersAnswer}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+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]"
+    >
+      <div className="w-full h-full max-w-7xl relative flex flex-col items-center pb-[24rem]">
+        <QuestionContainer />
+      </div>
+    </div>
+  );
+}

app/lib/constants.ts

@@ -0,0 +1,32 @@
+export const hackRUFAQ = {
+  whatIsHackRUAnswer: `HackRU is a 24-hour hackathon at Rutgers University. We welcome hundreds of students to join us in building
+  awesome software and hardware projects. Industry experts and mentors come from all over the country to create
+  an environment that fosters an atmosphere of learning through teck talks and one-on-one guidance.
+  We encourage beginner and advanced hackers alike to challenge themselves and expand their skills.`,
+
+  whatIsApplicationAnswer: `HackRU will be back in person this Fall 2023! We will be accepting anywhere between 300-500 hackers based on
+  when you register for the event. After you register, you'll get a notification 1-2 weeks before the hackathon whether we have accepted you or
+  not to the hackathon. You will then have to let us know if you plan on coming or not and then you're all set!`,
+
+  winAnythingAnswer:
+    "Yes! We'll release more information about prizes as the event draws near.",
+
+  maskMandateAnswer:
+    'No, HackRU will not have a mask mandate but it is encouraged throughout the duration of the event.',
+
+  moreQuestionsAnswer:
+    "Reach out to us at info@hackru.org! We'll be happy to answer.",
+
+  whoCanComeAnswer: `HackRU welcomes undergraduate and graduate students of all majors, backgrounds, and skill level to come create. Additionally, high
+  school students who will be 18 by HackRU are allowed to register. Unfortunately, if you are under 18, you will not be able to attend.`,
+
+  newAnswer: `That's great! We'd love to have you at HackRU. Throughout the weekend, there will be workshops to get your feet wet,
+  project ideas for you to try out, and mentors to guide you through the process.`,
+
+  costAnswer:
+    'Like the best things in life, HackRU is completely free to attend!',
+
+  workWithOthersAnswer: `Hackers can(and are encouraged to) work in teams of up to 4 humans max. The knowledge you gain from teammates is
+  invaluable, along with the opportunity to build lifetime friendships - you might leave with a new best friend! We will be having a team-building exercise
+  after opening ceremonies for people who are looking for teammates.`,
+};