Merge pull request #15 from acmucsd/alex/faq

Add FAQ

package.json

@@ -10,12 +10,17 @@
     "lint:check": "prettier --check ./src && next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/material": "^6.1.10",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "20.6.0",
     "@types/react-dom": "18.2.7",
     "next": "^13.4.16",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-is": "^19.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

src/app/page.tsx

@@ -1,6 +1,7 @@
 import Statistics from '@/sections/Statistics';
 import Hero from '@/sections/Hero';
 import About from '@/sections/About';
+import FAQ from '@/sections/FAQ';
 import styles from './page.module.scss';
 
 export default function Home() {
@@ -9,6 +10,7 @@ export default function Home() {
       <Hero />
       <About />
       <Statistics />
+      <FAQ />
     </main>
   );
 }

src/components/FAQAccordion/index.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import styles from './style.module.scss';
+import Typography from '../Typography';
+import { Question } from '@/sections/FAQ/questions';
+
+interface FAQAccordionProps {
+  data: Question[];
+}
+
+export default function FAQ({ data }: FAQAccordionProps) {
+  const [expandedIndices, setExpandedIndices] = useState<number[]>([]);
+
+  const handleChange = (panelIndex: number) => (_e: React.SyntheticEvent, newExpanded: boolean) => {
+    if (newExpanded) {
+      setExpandedIndices([...expandedIndices, panelIndex]);
+    } else {
+      setExpandedIndices(expandedIndices.filter(index => index !== panelIndex));
+    }
+  };
+
+  return (
+    <>
+      {data.map((questionObject, index) => (
+        <Accordion
+          elevation={0}
+          expanded={expandedIndices.includes(index)}
+          onChange={handleChange(index)}
+          className={`${styles.accordionRoot} ${styles.accordion}`}
+          key={questionObject.question}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon className={styles.expandIcon} />}
+            className={styles.accordionSummary}
+          >
+            <Typography variant="body/large" className={styles.accordionQuestion}>
+              {questionObject.question}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails className={styles.accordionDetails}>
+            <Typography variant="body/medium" className={styles.accordionAnswer}>
+              {questionObject.answer}
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </>
+  );
+}

src/components/FAQAccordion/style.module.scss

@@ -0,0 +1,67 @@
+@use '../../styles/vars.scss' as vars;
+
+.accordion {
+  box-shadow: none;
+  margin: 0 !important;
+  padding: 0.5rem 0;
+  border-bottom: none;
+
+  &:first-of-type {
+    border-top: none;
+  }
+
+  &:last-of-type {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: 1px solid vars.$neutral;
+  }
+}
+
+.accordionRoot {
+  background-color: transparent !important;
+  border-top: 1px solid vars.$neutral;
+
+  &:before {
+    display: none;
+  }
+}
+
+.accordionSummary {
+  padding: 0 1rem;
+  flex-direction: row-reverse;
+
+  :global(.MuiAccordionSummary-content) {
+    margin: 0;
+  }
+
+  :global(.MuiAccordionSummary-expandIconWrapper) {
+    margin-right: 1rem;
+    transform: rotate(-90deg);
+
+    &.Mui-expanded {
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.accordionDetails {
+  padding: 1rem 1rem 1rem 2rem;
+  color: vars.$white;
+}
+
+.expandIcon {
+  color: vars.$white;
+  min-width: 24px;
+}
+
+.accordionQuestion {
+  color: vars.$white;
+}
+
+.accordionAnswer {
+  color: vars.$white;
+
+  a {
+    color: vars.$blue;
+  }
+}

src/sections/FAQ/index.tsx

@@ -0,0 +1,17 @@
+import Typography from '@/components/Typography';
+import { QUESTIONS } from './questions';
+import styles from './style.module.scss';
+import FAQAccordion from '@/components/FAQAccordion';
+
+const FAQ: React.FC = () => {
+  return (
+    <section className={styles.container}>
+      <Typography variant="display/heavy/small" className={styles.title}>
+        Frequently Asked Questions
+      </Typography>
+      <FAQAccordion data={QUESTIONS} />
+    </section>
+  );
+};
+
+export default FAQ;

src/sections/FAQ/questions.tsx

@@ -0,0 +1,53 @@
+import Typography from '@/components/Typography';
+import Link from 'next/link';
+
+export interface Question {
+  question: string;
+  answer: React.ReactNode;
+}
+
+export const QUESTIONS: Question[] = [
+  {
+    question: 'How can I register for DiamondHacks?',
+    answer: (
+      <>
+        Fill out the interest form here (
+        <Link href="https://acmurl.com/diamondhacks">https://acmurl.com/diamondhacks</Link>) to be
+        notified when applications go live!
+      </>
+    ),
+  },
+  {
+    question: 'What is a hackathon?',
+    answer:
+      'A hackathon is an event where hackers come together to collaborate, create, and develop projects within a set timeframe (usually 24–48 hours). Participants form teams to brainstorm ideas, write code, and build solutions, with a focus on innovation and creativity.',
+  },
+  {
+    question: 'Do I need any prior experience?',
+    answer:
+      "No, hackers of any experience levels are welcome! We'll have workshops and mentors to help you get started, and beginners have the chance to win prizes specifically for first time hackers.",
+  },
+  {
+    question: 'Where will DiamondHacks be held?',
+    answer:
+      'DiamondHacks will be hosted at UC San Diego, in the Computer Science & Engineering Buildings, as well as Jacobs Hall.',
+  },
+  {
+    question: 'Who can attend DiamondHacks?',
+    answer: (
+      <>
+        Any undergraduate students enrolled in <b>any</b> college or university are eligible to
+        attend!
+      </>
+    ),
+  },
+  {
+    question: 'Who can I reach out to for questions and concerns?',
+    answer: (
+      <>
+        Please reach out to <Link href="mailto:[email protected]">[email protected]</Link>{' '}
+        with any questions or concerns about DiamondHacks!
+      </>
+    ),
+  },
+];

src/sections/FAQ/style.module.scss

@@ -0,0 +1,11 @@
+@use '../../styles/vars.scss' as vars;
+
+.title {
+  margin-bottom: 2rem;
+  color: vars.$light-blue;
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    font-size: 2.25rem !important;
+    line-height: 2.625rem !important;
+  }
+}

src/sections/Statistics/style.module.scss

@@ -16,32 +16,36 @@
 
   .diamond {
     position: relative;
-    aspect-ratio: 0.64;
-    flex: 0 0 40%;
-    max-height: 600px;
-
-    .slidingDiamondWrapper {
-      position: sticky;
-      top: -6rem;
-      z-index: 1;
-      pointer-events: none;
-
-      .slidingDiamond {
-        position: absolute;
-        top: 0;
-        left: calc(-1 * vars.$side-padding);
-      }
-    }
+    height: 896px;
+    width: 350px;
+  }
 
-    .rope {
-      width: auto;
+  .slidingDiamondWrapper {
+    position: sticky;
+    top: -6rem;
+    z-index: 1;
+    pointer-events: none;
+    height: 400px; // So the diamond doesn't slide off the rope
+
+    .slidingDiamond {
       position: absolute;
       top: 0;
       left: calc(-1 * vars.$side-padding);
-      object-fit: contain;
     }
+  }
+
+  .rope {
+    width: auto;
+    position: absolute;
+    top: 0;
+    left: calc(-1 * vars.$side-padding);
+    object-fit: contain;
+  }
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    height: auto;
 
-    @media screen and (max-width: vars.$breakpoint-md) {
+    .diamond {
       display: none;
     }
   }

src/styles/vars.scss

@@ -7,6 +7,7 @@ $red: #ff8e72;
 $orange: #f9a857;
 $yellow: #ecdf98;
 $white: #ffffff;
+$neutral: #a1acbd;
 
 // Media Query Standard Breakpoints
 $breakpoint-sm: 425px; //