[HFI-18] feat(faq): adds faq section

src/components/About.astro

@@ -1 +1,93 @@
-<section></section>
+<section> 
+  <h4 id="about">ABOUT US</h4>
+  <div class="spacer"></div>
+  <div class="header">
+    <h3>At Hack for Impact, you will join over&nbsp;</h3>
+      <h2>200+ hackers</h2>
+      <h3>&nbsp;at UC Berkeley to innovate for social good.</h3>
+  </div>
+
+  <div class="mission-vision">
+    <div class="bigRow">
+      <h2 class="left">Our Vision</h2>
+      <p>To solve the most pressing challenges of our world, 
+        we will need the best and the brightest minds to work collaboratively on 
+        creative, ethical, and technical solutions that will propel humanity forward. 
+        Our audience is anyone, anywhere, who believes that 
+        technology can solve hard problems, grow prosperity, 
+        and expand human possibilities.</p>
+    </div>
+    <div class="bigRow">
+      <h2 class="left">The Mission</h2>
+      <div>
+        <p>Hack for Impact 2024 is a 1-day hackathon co-hosted by 
+          Blueprint and Cal Hacks at UC Berkeley. 
+          The event’s mission is two-fold:</p>
+        <div class="captionRow">
+          <div class="image-placeholder"></div>
+          <p>To <b>empower</b> student hackers to develop creative solutions 
+            for relevant social causes and collaborate with 
+            non-profit organizations on ethical innovation 
+            with tangible community impact.</p>
+        </div>
+        <div class="captionRow">
+          <div class="image-placeholder"></div>
+          <p>To <b>educate</b> students via a <b>series of workshops and speaker panels</b> 
+            to learn about professional opportunities in social good, 
+            as well as emerging technologies and their ethical aspects.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  @use '../styles/colors';
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    text-align: center;
+    width: 100%;
+    margin: 0 auto;
+    padding-top: 5rem;
+  }
+  div.spacer {
+    height: 1.5rem;
+  }
+
+  div.mission-vision {
+    max-width: 58.625rem;
+  }
+
+  div.bigRow {
+    margin-top: 8.3125rem; 
+    display: flex;
+    flex-direction: row;
+    gap: 0 6.125rem;
+    text-align: left;
+  }
+
+  .image-placeholder {
+    background-color: colors.$secondary;
+    min-width: 10.5rem;
+    height: 7.0625rem;
+  }
+
+  h2.left {
+    display: inline-block; 
+    min-width: 12rem;
+  }
+
+  div.captionRow {
+    display: flex; 
+    flex-direction: row;
+    margin-top: 3.75rem;
+    gap: 0 1.5rem; 
+  }
+
+  div.header {
+    display: inline-block;
+    // flex-direction: row;
+  }
+</style>

src/components/FAQ.astro

@@ -1 +1,141 @@
-<section></section>
+---
+import FAQDropdown from '../components/FAQDropdown';
+import type { Question } from '../components/FAQDropdown';
+
+const faqs: Question[] = [
+  {
+    label: 'What is Hack for Impact?',
+    content:
+      'Hack for Impact is a 1-day hackathon, where students will creatively collaborate with non-profit organizations on social causes, and attend a series of workshops and speaker panels to learn more about emerging tech in the social impact space.',
+  },
+  {
+    label: 'Who will attend?',
+    content:
+      '200+ hackers, speakers, non-profit organizations, Blueprint and Cal Hack club members, judges, and mentors! You do not have the be a student at UC Berkeley to participate. All undergraduates, graduates, and community college students are welcome.',
+  },
+  {
+    label: 'Do I have to be in person?',
+    content:
+      'Yes! All individuals and teams must attend in-person to participate.',
+  },
+  {
+    label: 'How many people are on a team?',
+    content: 'Up to four people can be on a team.',
+  },
+  {
+    label: 'How will team matching work?',
+    content:
+      'You are welcome to form a team of up to 4 in advance. There will also be the opportunity to work solo or find team members while mixing/team-matching during the event.',
+  },
+  {
+    label: 'Is there an event schedule?',
+    content:
+      'We will release a finalized schedule soon. In the meantime, you can check out the tentative schedule here.',
+    hyperlink: {
+      target: 'here',
+      link: 'https://docs.google.com/document/d/1SrPCX9sZpT3kc4AglA-S2KL_sPYgcwCXs0zaauwysbk/edit',
+    },
+  },
+  {
+    label: 'What will I build?',
+    content:
+      'You can build ANYTHING —a website, mobile app, you name it. It’s recommended that you build something that addresses a problem statement of one of our non-profit partners to be eligible for certain prizes. However, you’re welcome to build anything with a social good focus. The goal is for you to learn and have fun!',
+  },
+  {
+    label: 'Do I have to register to just attend speaker panels/workshops?',
+    content:
+      'No. All workshops and speaker events are open to everyone! Only people who would like to hack have to sign up. ',
+  },
+  {
+    label: 'What should I bring?',
+    content:
+      'Your laptop (if you have one) and a charger. Optionally – pens, pencil, and paper!',
+  },
+
+  {
+    label: 'How will we recieve updates during the event?',
+    content:
+      'You’ll be able to connect with other participants and receive updates through a Slack channel. All attendees are invited to the Slack channel a few days before the hackathon.',
+  },
+  {
+    label: 'Are meals included?',
+    content: 'Yes! We will provide breakfast, lunch, and dinner.',
+  },
+  {
+    label: 'Is the venue accessible to public transportation?',
+    content:
+      'Yes. Pauley Ballroom is a short walk from the Downtown Berkeley BART Station and local buses (F, 51B, 52, etc.) ',
+  },
+];
+
+const split = Math.ceil(faqs.length / 2);
+const faqsCol1 = faqs.slice(0, split);
+const faqsCol2 = faqs.slice(split);
+---
+
+<section id="faq">
+  <div class="faq-headers">
+    <h4>FAQ</h4>
+    <h2>
+      Frequently asked questions <span>– we've got the answers</span>
+    </h2>
+  </div>
+  <div class="faq-content">
+    <div class="faq-container">
+      <FAQDropdown question={faqsCol1[0]} defaultOpen client:visible />
+      {
+        faqsCol1
+          .slice(1)
+          .map(faq => <FAQDropdown question={faq} client:visible />)
+      }
+    </div>
+    <div class="faq-container">
+      <FAQDropdown question={faqsCol2[0]} defaultOpen client:visible />
+      {
+        faqsCol2
+          .slice(1)
+          .map(faq => <FAQDropdown question={faq} client:visible />)
+      }
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  @use '../styles/_fonts.scss';
+
+  #faq {
+    display: flex;
+    flex-direction: column;
+    width: 80vw;
+    margin: 10rem auto 0;
+  }
+
+  .faq-headers {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 4.5rem;
+
+    span {
+      font-family: fonts.$sans;
+      font-size: 1.75rem;
+      font-weight: 600;
+    }
+  }
+
+  .faq-content {
+    display: flex;
+    gap: 32px;
+    width: 100%;
+    align-items: flex-start;
+    padding: 0 15%;
+  }
+  .faq-container {
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+    width: 50%;
+    padding: 0 0.7rem;
+  }
+</style>

src/components/FAQDropdown/index.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import styles from './style.module.scss';
+
+export interface Question {
+  label: string;
+  content: string;
+  hyperlink?: { target: string; link: string };
+}
+
+interface FAQDropdownProps {
+  question: Question;
+  defaultOpen?: boolean;
+}
+
+const FAQDropdown = ({ question, defaultOpen }: FAQDropdownProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen ? true : false);
+  const { label, content, hyperlink } = question;
+
+  const handleToggle = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  const renderContent = () => {
+    if (hyperlink) {
+      const { target, link } = hyperlink;
+
+      const parts = content.split(target);
+
+      return (
+        <div className={styles.content}>
+          <p>
+            {parts[0]}
+            <a href={link} target="_blank">
+              {target}
+            </a>
+            {parts[1]}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.content}>
+        <p>{content}</p>
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.labelContainer}
+        onClick={handleToggle}
+        tabIndex={0}
+        onKeyUp={handleToggle}
+      >
+        <div className={styles.statusIcon}>{isOpen ? '-' : '+'}</div>
+        <b>{label}</b>
+      </div>
+      {isOpen && renderContent()}
+    </div>
+  );
+};
+
+export default FAQDropdown;

src/components/FAQDropdown/style.module.scss

@@ -0,0 +1,36 @@
+@use '../../styles/breakpoints';
+@use '../../styles/colors';
+@use '../../styles/global';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.labelContainer {
+  display: flex;
+  gap: 1.75rem;
+  align-items: center;
+  font-weight: 700;
+  cursor: pointer;
+
+  .statusIcon {
+    font-size: 1.5rem;
+    text-align: center;
+  }
+
+  b {
+    font-size: 1rem;
+  }
+}
+
+.content {
+  display: flex;
+  margin-left: 2.5rem;
+
+  p {
+    font-style: normal;
+    font-weight: 400;
+  }
+}