FAQ Page

apps/site/src/components/Home/FAQ/FAQ.tsx

@@ -0,0 +1,61 @@
+import { FAQS } from "@/constants/faq-questions";
+import { VStack } from "@chakra-ui/react";
+import React, { useState } from "react";
+
+import { FAQHeader } from "./FAQHeader";
+import { FAQQuestion } from "./FAQQuestion";
+
+export const FAQ: React.FC = () => {
+  const [selectedFaqIndices, setSelectedFaqIndices] = useState<Set<number>>(
+    new Set()
+  );
+
+  const handleFaqToggle = (index: number) => {
+    setSelectedFaqIndices((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <VStack
+      w="100%"
+      minH={"100dvh"}
+      justifyContent="flex-start"
+      bgImage={"/faq/faq-backdrop.png"}
+      bgColor={"black"}
+      bgSize="cover"
+      bgPosition="center"
+      bgRepeat="no-repeat"
+      gap={3}
+      pb={20}
+    >
+      <VStack spacing={0} mb={4} w="100%" overflowX={"hidden"}>
+        <FAQHeader selectedFaqIndices={selectedFaqIndices} />
+      </VStack>
+      <VStack
+        maxW="850px"
+        w="100%"
+        mx="auto"
+        spacing={{
+          base: 5,
+          md: 5
+        }}
+      >
+        {FAQS.map((faqItem, index) => (
+          <FAQQuestion
+            key={`faq-item-${index}`}
+            index={index}
+            faqItem={faqItem}
+            onFaqToggle={handleFaqToggle}
+          />
+        ))}
+      </VStack>
+    </VStack>
+  );
+};

apps/site/src/components/Home/FAQ/FAQHeader.tsx

@@ -0,0 +1,64 @@
+import { FAQS } from "@/constants/faq-questions";
+import { Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
+import React from "react";
+import { StopLight } from "./StopLight";
+
+export const FAQHeader: React.FC<{
+  selectedFaqIndices: Set<number>;
+}> = ({ selectedFaqIndices }) => {
+  return (
+    <Box position="relative" w="100%" overflow="hidden">
+      <Image
+        src={"/faq/faq-header-left-bars.svg"}
+        position="absolute"
+        top={{ base: 0, md: -5 }}
+        left={{ base: -5, md: 0 }}
+        h={{ base: "50px", sm: "75px", md: "100px", lg: "140px" }}
+        opacity={0.9}
+        zIndex={0}
+      />
+
+      <Image
+        src={"/faq/faq-header-right-bars.svg"}
+        position="absolute"
+        top={{ base: 0, md: -0 }}
+        right={{ base: -14, sm: -14, md: -90 }}
+        h={{ base: "50px", sm: "75px", md: "100px", lg: "140px" }}
+        opacity={0.9}
+        zIndex={0}
+      />
+
+      <HStack
+        w="100%"
+        p={2}
+        pt={0}
+        alignItems="flex-start"
+        justifyContent="center"
+        position="relative"
+        zIndex={1}
+      >
+        <VStack spacing={0}>
+          <Text
+            fontSize="7xl"
+            fontWeight="bold"
+            fontStyle="italic"
+            color="white"
+            fontFamily="ProRacingSlant"
+          >
+            FAQ
+          </Text>
+
+          <HStack gap={0}>
+            {FAQS.map((_, index) => (
+              <StopLight
+                key={index}
+                active={selectedFaqIndices.has(index)}
+                hasBar={index < FAQS.length - 1}
+              />
+            ))}
+          </HStack>
+        </VStack>
+      </HStack>
+    </Box>
+  );
+};

apps/site/src/components/Home/FAQ/FAQQuestion.tsx

@@ -0,0 +1,112 @@
+import { FAQItem } from "@/constants/faq-questions";
+import { Box, Collapse, Image, Text } from "@chakra-ui/react";
+import { useState } from "react";
+
+const CAR_URLS = [
+  "/faq/car1.svg",
+  "/faq/car2.svg",
+  "/faq/car3.svg",
+  "/faq/car4.svg",
+  "/faq/car5.svg"
+];
+
+type FAQQuestionProps = {
+  index: number;
+  faqItem: FAQItem;
+  onFaqToggle: (index: number) => void;
+};
+
+export const FAQQuestion: React.FC<FAQQuestionProps> = ({
+  index,
+  faqItem: { question, answer, colors },
+  onFaqToggle
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+    onFaqToggle(index);
+  };
+
+  return (
+    <Box w="100%" px={10}>
+      <Box
+        position={"relative"}
+        display="flex"
+        alignItems={{ md: "center" }}
+        justifyContent={"flex-start"}
+        bgColor={colors.light}
+        p={4}
+        py={5}
+        pt={{ base: 3, md: 4 }}
+        pb={{ base: 10, md: 5 }}
+        borderRadius={"lg"}
+        borderBottomRadius={isOpen ? 0 : "lg"}
+        transition={"all 0.3s ease-in-out"}
+        onClick={handleToggle}
+        cursor="pointer"
+      >
+        <Box
+          position="absolute"
+          right="0"
+          top="0"
+          bottom="0"
+          w={{ base: "42%", md: "35%" }}
+          bgColor={colors.dark}
+          sx={{ clipPath: "polygon(28% 0, 100% 0, 100% 100%, 0 100%)" }}
+          borderTopRightRadius="lg"
+          borderBottomRightRadius={isOpen ? 0 : "lg"}
+          pointerEvents="none"
+          zIndex={0}
+        />
+
+        <Image
+          position="absolute"
+          left={{
+            base: isOpen ? "62%" : -1,
+            sm: isOpen ? "70%" : -3,
+            md: isOpen ? "72%" : "-20%",
+            lg: isOpen ? "72%" : "-20%"
+          }}
+          bottom={{ base: 0, md: undefined }}
+          borderRadius="lg"
+          h={{ base: "30px", md: "70px" }}
+          transition={"left 0.3s ease-in-out"}
+          src={CAR_URLS[index % CAR_URLS.length]}
+          alt="Car"
+          objectFit="cover"
+          transform={{ md: "scale(0.7)", lg: "scale(0.8)" }}
+          zIndex={2}
+        />
+
+        <Text
+          ml={{ md: isOpen ? 0 : "120px", lg: isOpen ? 0 : "140px" }}
+          mr={{ md: isOpen ? 28 : 0 }}
+          pl={{ base: 1, md: 2 }}
+          color="white"
+          maxH="100%"
+          overflow="hidden"
+          fontFamily="ProRacing"
+          fontSize={{ base: "xl", md: "2xl" }}
+          zIndex={1}
+          transition="all 0.3s ease-in-out"
+        >
+          {question}
+        </Text>
+      </Box>
+
+      <Collapse in={isOpen} animateOpacity unmountOnExit>
+        <Box bg="gray.50" p={4} borderBottomRadius="lg">
+          <Text
+            fontFamily={"Magistral"}
+            fontWeight={"medium"}
+            color="gray.800"
+            fontSize={"lg"}
+          >
+            {answer}
+          </Text>
+        </Box>
+      </Collapse>
+    </Box>
+  );
+};

apps/site/src/components/Home/FAQ/StopLight.tsx

@@ -0,0 +1,59 @@
+import { Box, HStack, VStack } from "@chakra-ui/react";
+
+type StopLightProps = {
+  active: boolean;
+  hasBar?: boolean;
+};
+
+export const StopLight: React.FC<StopLightProps> = ({ active, hasBar }) => {
+  return (
+    <HStack gap={0}>
+      <Box
+        w={{ base: "36px", md: "48px" }}
+        px={{ base: 1, md: 2 }}
+        py={{ base: 2, md: 3 }}
+        bgGradient="linear(to-b, rgb(50,50,50), rgb(40,40,40))"
+        borderRadius="md"
+        boxShadow="0 4px 8px rgba(0,0,0,0.6)"
+      >
+        <VStack spacing={{ base: 2, md: 3 }}>
+          <Box
+            w={{ base: "16px", md: "24px" }}
+            h={{ base: "16px", md: "24px" }}
+            borderRadius="full"
+            bg={active ? "green.300" : "red.500"}
+            boxShadow="inset 0 0 4px rgba(0,0,0,0.7)"
+            transition="all 0.2s ease-in-out"
+          />
+          <Box
+            w={{ base: "16px", md: "24px" }}
+            h={{ base: "16px", md: "24px" }}
+            borderRadius="full"
+            bg={active ? "green.300" : "red.500"}
+            boxShadow="inset 0 0 4px rgba(0,0,0,0.7)"
+            transition="all 0.2s ease-in-out"
+          />
+        </VStack>
+      </Box>
+
+      {hasBar && (
+        <VStack
+          gap={{ base: 1, md: 2 }}
+          mb={{ base: "30%", md: "40%" }}
+          align="start"
+        >
+          <Box
+            w={{ base: "14px", md: "20px" }}
+            h={{ base: "4px", md: "5px" }}
+            bg="gray.600"
+          />
+          <Box
+            w={{ base: "14px", md: "20px" }}
+            h={{ base: "4px", md: "5px" }}
+            bg="gray.500"
+          />
+        </VStack>
+      )}
+    </HStack>
+  );
+};

apps/site/src/constants/faq-questions.ts

@@ -0,0 +1,41 @@
+export interface FAQItem {
+  question: string;
+  answer: string;
+  colors: {
+    light: string;
+    dark: string;
+  };
+}
+
+export const FAQS: FAQItem[] = [
+  {
+    question: "What is Reflections | Projections?",
+    answer:
+      "Reflections | Projections (R|P) is the largest student-run tech conference in the Midwest, bringing together students, industry leaders, and professionals from all over the world. Join us for an exciting week of speaker talks, workshops, a career fair, and other intriguing opportunities! All of R|P is designed to allow participants to reflect upon their experiences and project towards their future.",
+    colors: { light: "#8D0000", dark: "#600000" }
+  },
+  {
+    question: "Who can attend R|P?",
+    answer:
+      "R|P is open to everyone over the age of 18. Registering and attending R|P is open to all majors and class levels and is completely free!",
+    colors: { light: "#322BB7", dark: "#221D88" }
+  },
+  {
+    question: "When is R|P 2024?",
+    answer:
+      "Reflections | Projections 2024 will be from Wednesday, September 18 to Sunday, September 22!",
+    colors: { light: "#56BF59", dark: "#429945" }
+  },
+  {
+    question: "Where are R|P’s events held?",
+    answer:
+      "Every event of R|P 2024 will be held in the Siebel Center for Computer Science (201 N Goodwin Ave, Urbana, IL 61801). Our calendar contains the specific room for each event.",
+    colors: { light: "#E6930D", dark: "#B77408" }
+  },
+  {
+    question: "What do I need to do before R|P?",
+    answer:
+      "It’s simple: register (it’s completely free!) and download the brand new Reflections | Projections app (available in the App Store and Google Play Store). Just like that, you’re all set to attend events and retrieve free swag/merch!",
+    colors: { light: "#47438A", dark: "#312F63" }
+  }
+];