Update FAQ

components/FAQ/FAQ.module.scss

@@ -3,33 +3,23 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    top: 170px;
-    padding: 4rem 150px;
-
-    @media screen and (max-width: 1152px) {
-        top: 100px;
-        padding: 24px;
-    }
+    top: 12vw;
+    padding: 0 3vw;
+    height: 60vw;
 
     @media screen and (max-width: 768px) {
-        top: 70px;
-        padding: 24px;
-    }
-
-    @media screen and (max-width: 500px) {
-        padding: 12px;
-        top: 40px;
+        height: 90vw;
     }
 }
 
 .faqArrow {
     background: none;
     border: none;
-    font-size: 36px;
+    font-size: 48px;
     cursor: pointer;
 
-    @media screen and (max-width: 768px) {
-        font-size: 18px;
+    @media screen and (max-width: 1152px) {
+        font-size: 24px;
     }
 }
 
@@ -47,21 +37,17 @@
     @media screen and (max-width: 1152px) {
         gap: 1rem;
     }
-
-    @media screen and (max-width: 768px) {
-        gap: 7px;
-    }
 }
 
 .faqItem {
     h3 {
-        font-size: 42px;
+        font-size: 2.5vw;
         font-weight: 500;
         margin-bottom: 0.5rem;
     }
 
     p {
-        font-size: 21px;
+        font-size: 1.25vw;
     }
 
     a {
@@ -76,33 +62,23 @@
         color: #a5c300;
     }
 
-    @media screen and (max-width: 1650px) {
-        h3 {
-            font-size: 36px;
-        }
-
-        p {
-            font-size: 18px;
-        }
-    }
-
-    @media screen and (max-width: 800px) {
+    @media screen and (max-width: 1350px) {
         h3 {
-            font-size: 20px;
+            font-size: 3vw;
         }
 
         p {
-            font-size: 14px;
+            font-size: 2.5vw;
         }
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (max-width: 432px) {
         h3 {
-            font-size: 16px;
+            font-size: 4vw;
         }
 
         p {
-            font-size: 10px;
+            font-size: 2.9vw;
         }
     }
 }

components/FAQ/FAQ.tsx

@@ -38,6 +38,30 @@ const FAQ: React.FC = () => {
                 </p>
             )
         },
+        {
+            question: (
+                <strong>
+                    What is the difference between a path and a track?
+                </strong>
+            ),
+            answer: (
+                <p>
+                    Paths distinguish your level of expertise whereas tracks
+                    specify the type of project you are creating. Our paths are
+                    General and{" "}
+                    <Link prefetch={false} href={"/olympians"}>
+                        HackOlympian
+                    </Link>
+                    {""}; General encompasses beginner and intermediate hackers
+                    competing for a smaller cash prize, while HackOlympians are
+                    experienced hackers looking for a chance to compete in a
+                    more competitive arena with a larger cash prize. Tracks are
+                    designed by our sponsors to provide a specialized topic to
+                    center your project around. Each participant must choose
+                    both a path and track when submitting their project.
+                </p>
+            )
+        },
         {
             question: (
                 <strong>
@@ -78,7 +102,10 @@ const FAQ: React.FC = () => {
                     will gain access to special networking opportunities with
                     our event sponsors and the chance to present their project
                     in a thrilling Shark-Tank inspired showcase, among other
-                    exciting perks - but spots are limited, so register soon!
+                    exciting perks
+                    {eventStatus === "registration"
+                        ? " - but spots are limited, so register soon!"
+                        : "!"}
                 </p>
             )
         },
@@ -133,12 +160,12 @@ const FAQ: React.FC = () => {
     });
 
     const faqsPerPage = useMemo(() => {
-        if (windowWidth < 432) {
+        if (windowWidth <= 432) {
+            return 1;
+        } else if (windowWidth <= 1350) {
             return 2;
-        } else if (windowWidth < 1350) {
-            return 3;
         } else {
-            return faqData.length;
+            return 5;
         }
     }, [windowWidth, faqData]);
     const totalPages = Math.ceil(faqData.length / faqsPerPage);

components/Home/FAQ/FAQ.tsx

@@ -16,7 +16,7 @@ const FAQSection: FC = () => {
             <Image
                 alt="background"
                 src={
-                    windowSizeHook?.width && windowSizeHook.width > 768
+                    windowSizeHook?.width && windowSizeHook.width >= 768
                         ? BACKGROUND_DESKTOP
                         : BACKGROUND_MOBILE
                 }