acmucsd · alexzhang1618 · Mar 29, 2024 · Mar 7, 2024 · Mar 29, 2024 · Mar 29, 2024
diff --git a/src/app/Faq/page.tsx b/src/app/Faq/page.tsx
@@ -0,0 +1,9 @@
+import FAQ from '@/sections/FAQ';
+
+export default function Home() {
+  return (
+    <main>
+      <FAQ />
+    </main>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -20,4 +20,9 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin: 0 var(--side-padding);
+
+  @media screen and (max-width: 768px) {
+    margin: 0 var(--side-padding-small);
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import Footer from '@/sections/footer';
 import './globals.css';
 import type { Metadata } from 'next';
 import { DM_Sans } from 'next/font/google';
+import Navbar from '@/sections/navbar';
 
 const dmSans = DM_Sans({ subsets: ['latin'] });
 
@@ -12,8 +13,11 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className={dmSans.className}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body className={dmSans.className}>
+        <Navbar />
+        {children}
+      </body>
       <footer className={dmSans.className}>
         <Footer />
       </footer>

diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -4,17 +4,12 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   color: var(--Dark-Bleu);
-  margin: 0 var(--side-padding);
-
-  @media screen and (max-width: 768px) {
-    margin: 0 var(--side-padding-small);
-  }
 
   h1,
   h2,
   h3,
   p {
     margin: 0;
-    z-index: 2;
+    z-index: 1;
   }
 }
diff --git a/src/components/Faq/index.tsx b/src/components/Faq/index.tsx
@@ -0,0 +1,69 @@
+'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 Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import s from './style.module.css';
+import { ThemeProvider, createTheme } from '@mui/material';
+import { DM_Sans } from 'next/font/google';
+
+const dmSans = DM_Sans({ subsets: ['latin'] });
+
+interface FaqProps {
+  data: { question: string; answer: string | any }[];
+}
+
+const theme = createTheme({
+  typography: {
+    fontFamily: dmSans.style.fontFamily,
+  },
+});
+
+export default function FAQ({ data }: FaqProps) {
+  const [expandedIndex, setExpandedIndex] = useState<number>(-1);
+
+  const handleChange =
+    (panelIndex: number) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+      setExpandedIndex(newExpanded ? panelIndex : -1);
+    };
+
+  return (
+    <ThemeProvider theme={theme}>
+      {data.map((questionObject, index) => (
+        <Accordion
+          disableGutters
+          elevation={0}
+          expanded={expandedIndex === index}
+          onChange={handleChange(index)}
+          sx={{
+            padding: '1rem',
+            borderRadius: '0.75rem !important',
+            boxShadow: 'none',
+            margin: '20px 0',
+            '&.Mui-expanded': {
+              margin: 0,
+            },
+            '&:before': {
+              display: 'none',
+            },
+          }}
+          key={questionObject.question}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon className={s.header} />}>
+            <Typography sx={{ fontSize: 20, fontWeight: 'bold' }}>
+              {questionObject.question}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails className={s.description}>
+            <Typography component="div" sx={{ fontSize: 16 }}>
+              <div>{questionObject.answer}</div>
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </ThemeProvider>
+  );
+}
diff --git a/src/components/Faq/style.module.css b/src/components/Faq/style.module.css
@@ -0,0 +1,12 @@
+.header {
+  background-color: transparent;
+  font-size: 1.25rem;
+  font-weight: bolder;
+  border-color: none;
+  box-shadow: none;
+}
+
+.description {
+  font-size: 1rem;
+  font-weight: bolder;
+}
diff --git a/src/sections/FAQ/faq.tsx b/src/sections/FAQ/faq.tsx
@@ -0,0 +1,52 @@
+const data = {
+  students: [
+    {
+      question: 'How can I register for DiamondHacks? Are there any deadlines?',
+      answer: (
+        <p>
+          You can sign up for DiamondHacks using{' '}
+          <a
+            href="https://acmurl.com/diamondhacks-preregister"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            this link
+          </a>
+          ! Applications are due on April 4th!
+        </p>
+      ),
+    },
+    {
+      question: 'Do I need prior experience in coding to participate?',
+      answer:
+        'No, hackers of any experience levels are welcome! DiamondHacks will provide a wide range of project tracks, including tracks for first time hackers.',
+    },
+    {
+      question: 'Will DiamondHacks be online or in-person?',
+      answer:
+        'DiamondHacks is an in-person hackathon taking place at UC San Diego. Check back soon for details on the venue!',
+    },
+    {
+      question: 'Who can attend DiamondHacks? Is there an age limit?',
+      answer:
+        'Undergraduate students enrolled in any college/university are eligible to attend DiamondHacks!',
+    },
+    {
+      question: 'Where is the schedule of events?',
+      answer:
+        'The detailed hackathon schedule will be released soon! For now, hacking is scheduled to start on Saturday at noon and end Sunday evening! We’ll also have lots of fun events, panels, workshops, and activities!',
+    },
+    {
+      question: 'Will DiamondHacks cover my lodging or transportation?',
+      answer:
+        'Unfortunately, we are unable to offer overnight lodging or transportation reimbursements due to school policy. Venues will close at 9pm and you will be responsible for finding your own lodging.',
+    },
+    {
+      question: 'Who can I reach out to for questions or concerns?',
+      answer:
+        'Please reach out to [email protected] with any questions or concerns about DiamondHacks!',
+    },
+  ],
+};
+
+export default data;
diff --git a/src/sections/FAQ/index.tsx b/src/sections/FAQ/index.tsx
@@ -0,0 +1,16 @@
+import Faq from '../../components/Faq';
+import faqData from './faq';
+import s from './style.module.css';
+
+export default function FAQ() {
+  return (
+    <div className={s.background} id="faq">
+      <div className={s.faqContainer}>
+        <h3 className={s.faqTitle}>FAQs</h3>
+        <div className={s.faqBox}>
+          <Faq data={faqData.students} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/sections/FAQ/style.module.css b/src/sections/FAQ/style.module.css
@@ -0,0 +1,15 @@
+.background {
+  min-height: 100vh;
+}
+
+.faqContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.faqTitle {
+  font-size: 4.125rem;
+  margin-bottom: 3rem;
+  margin-top: 8rem;
+}
diff --git a/src/sections/landing/hero/index.tsx b/src/sections/landing/hero/index.tsx
@@ -3,13 +3,10 @@ import Image from 'next/image';
 import styles from './style.module.scss';
 import Arrow from '@/public/arrow.svg';
 import BackgroundGraphic from '@/components/background';
-import Navbar from '@/sections/navbar';
 
 const Hero = () => {
   return (
     <div className={styles.container}>
-      <Navbar />
-
       <BackgroundGraphic />
       <div className={styles.cta}>
         <div>

diff --git a/src/sections/navbar/index.tsx b/src/sections/navbar/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import Link from 'next/link';
 import styles from './style.module.scss';
 import { useState } from 'react';
@@ -11,6 +12,10 @@ const LINKS = [
     name: 'Home',
     href: '/',
   },
+  {
+    name: 'FAQ',
+    href: '/faq',
+  },
 ];
 
 export default function Navbar() {
@@ -72,7 +77,7 @@ export default function Navbar() {
             backgroundColor: 'rgba(252, 252, 252, 0.7)',
             maxHeight: '80vh',
             width: '100%',
-            margin: 0,
+            margin: '0 calc(-1 * var(--side-padding-small))',
             alignSelf: 'flex-start',
             alignItems: 'center',
             padding: '1rem 0',
@@ -93,7 +98,17 @@ export default function Navbar() {
             onClick={handleMobileClose}
             style={{ textDecoration: 'none', color: 'inherit' }}
           >
-            <div className={styles.leftSection}>
+            <div
+              className={styles.leftSection}
+              style={
+                mobileOpen
+                  ? {
+                      backdropFilter: 'unset',
+                      backgroundColor: 'transparent',
+                    }
+                  : undefined
+              }
+            >
               <img
                 className={styles.logoImage}
                 src="/diamondhacks-logo.svg"

diff --git a/src/sections/navbar/style.module.scss b/src/sections/navbar/style.module.scss
@@ -1,19 +1,32 @@
 .container {
+  position: fixed;
   align-self: flex-start;
-
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
+  width: calc(100% - 2 * var(--side-padding));
 
   padding: 3rem 0;
-  z-index: 1;
+  z-index: 100;
 
   @media screen and (max-width: 768px) {
     padding: 1rem 0;
+    width: calc(100% - 2 * var(--side-padding-small));
   }
 }
 
+.leftSection,
+.rightSectionDesktop {
+  backdrop-filter: blur(2px);
+  background-color: rgba(169, 224, 255, 0.7);
+  border-radius: 0.75rem;
+}
+
+.rightSectionDesktop {
+  padding-left: 1rem;
+  border-radius: 2rem;
+}
+
 .leftSection {
   display: flex;
   align-items: center;