finish faq

acmucsd · Mar 29, 2024 · 0e7497a · 0e7497a
1 parent 2427387
commit 0e7497a
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 97 deletions.
diff --git a/src/app/Faq/page.tsx b/src/app/Faq/page.tsx
@@ -2,6 +2,8 @@ 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
@@ -31,36 +31,33 @@ export default function FAQ({ data }: FaqProps) {
     };
 
   return (
-    <ThemeProvider theme={theme} >
+    <ThemeProvider theme={theme}>
       {data.map((questionObject, index) => (
         <Accordion
           disableGutters
           elevation={0}
           expanded={expandedIndex === index}
           onChange={handleChange(index)}
           sx={{
-            //borderTop: index === 0 ? 3 : 0,
-            //border: '1px solid transparent', // Set transparent border
-            bgcolor: 'transparent',
+            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',
-              }}>
+            <Typography sx={{ fontSize: 20, fontWeight: 'bold' }}>
               {questionObject.question}
             </Typography>
           </AccordionSummary>
-          <AccordionDetails className={s.description} >
+          <AccordionDetails className={s.description}>
             <Typography component="div" sx={{ fontSize: 16 }}>
               <div>{questionObject.answer}</div>
             </Typography>

diff --git a/src/sections/FAQ/faq.tsx b/src/sections/FAQ/faq.tsx
@@ -1,49 +1,52 @@
 const data = {
-    students: [
-      {
-        question: 'How can I register for DiamondHacks? Are there any deadlines?',
-        answer: (
-          <p>
-            You can sign up for email updates about DiamondHacks using{' '}
-            <a
-              href="https://acmurl.com/diamondhacks-preregister"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              this pre-registration link
-            </a>
-            !
-            <br />
-            Check back soon for official DiamondHacks registration info and deadlines!
-          </p>
-        ),
-      },
-      {
-        question: "What's a “hackathon”?",
-        answer:
-          'Hackathons are collaborative events where you can build innovative software/hardware projects in a short period of time (apps, websites, etc). Hackathons are a great opportunity to learn something new in the technology space and apply your knowledge to find creative solutions to problems in our world!',
-      },
-      {
-        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: '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;
+  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
@@ -1,5 +1,5 @@
 import Faq from '../../components/Faq';
-import faqData from './faq.tsx';
+import faqData from './faq';
 import s from './style.module.css';
 
 export default function FAQ() {
@@ -13,4 +13,4 @@ export default function FAQ() {
       </div>
     </div>
   );
-}
+}
diff --git a/src/sections/FAQ/style.module.css b/src/sections/FAQ/style.module.css
@@ -1,23 +1,15 @@
 .background {
-    min-height: 100vh;
-  }
-
-  .faqContainer {
-    max-width: 1440px;
-    margin: 0 auto;
-    width: 65%;
-    padding-top: 10px;
-    padding-bottom: 50px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  .faqTitle {
-    font-size: 65px;
-  }
-
-  .faqBox {
-    margin-top: 20px;
-    max-width: 900px;
-  }
+  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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,8 @@ import FAQ from '@/sections/FAQ'; @@
     export default function Home() {
       return (
+        <main>
           <FAQ />
+        </main>
       );
     }