diff --git a/apps/site/public/faq/car1.svg b/apps/site/public/faq/car1.svg new file mode 100644 index 00000000..8643f07f --- /dev/null +++ b/apps/site/public/faq/car1.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/faq/car2.svg b/apps/site/public/faq/car2.svg new file mode 100644 index 00000000..06cb28dc --- /dev/null +++ b/apps/site/public/faq/car2.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/faq/car3.svg b/apps/site/public/faq/car3.svg new file mode 100644 index 00000000..3a99a062 --- /dev/null +++ b/apps/site/public/faq/car3.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/faq/car4.svg b/apps/site/public/faq/car4.svg new file mode 100644 index 00000000..f86251b0 --- /dev/null +++ b/apps/site/public/faq/car4.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/faq/car5.svg b/apps/site/public/faq/car5.svg new file mode 100644 index 00000000..890799da --- /dev/null +++ b/apps/site/public/faq/car5.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/faq/faq-backdrop.png b/apps/site/public/faq/faq-backdrop.png new file mode 100644 index 00000000..75848a04 Binary files /dev/null and b/apps/site/public/faq/faq-backdrop.png differ diff --git a/apps/site/public/faq/faq-header-left-bars.svg b/apps/site/public/faq/faq-header-left-bars.svg new file mode 100644 index 00000000..9cf005a2 --- /dev/null +++ b/apps/site/public/faq/faq-header-left-bars.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/faq/faq-header-right-bars.svg b/apps/site/public/faq/faq-header-right-bars.svg new file mode 100644 index 00000000..6ef9a901 --- /dev/null +++ b/apps/site/public/faq/faq-header-right-bars.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/faq/stoplights.svg b/apps/site/public/faq/stoplights.svg new file mode 100644 index 00000000..7002833b --- /dev/null +++ b/apps/site/public/faq/stoplights.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/public/magistral.ttf b/apps/site/public/magistral.ttf new file mode 100644 index 00000000..6a64aed8 Binary files /dev/null and b/apps/site/public/magistral.ttf differ diff --git a/apps/site/public/pro-racing-slant.ttf b/apps/site/public/pro-racing-slant.ttf new file mode 100644 index 00000000..9f099e16 Binary files /dev/null and b/apps/site/public/pro-racing-slant.ttf differ diff --git a/apps/site/public/pro-racing.ttf b/apps/site/public/pro-racing.ttf new file mode 100644 index 00000000..610e42ac Binary files /dev/null and b/apps/site/public/pro-racing.ttf differ diff --git a/apps/site/src/components/Home/FAQ/FAQ.tsx b/apps/site/src/components/Home/FAQ/FAQ.tsx new file mode 100644 index 00000000..2dac7f32 --- /dev/null +++ b/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>( + 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 ( + + + + + + {FAQS.map((faqItem, index) => ( + + ))} + + + ); +}; diff --git a/apps/site/src/components/Home/FAQ/FAQHeader.tsx b/apps/site/src/components/Home/FAQ/FAQHeader.tsx new file mode 100644 index 00000000..7d16f7e1 --- /dev/null +++ b/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; +}> = ({ selectedFaqIndices }) => { + return ( + + + + + + + + + FAQ + + + + {FAQS.map((_, index) => ( + + ))} + + + + + ); +}; diff --git a/apps/site/src/components/Home/FAQ/FAQQuestion.tsx b/apps/site/src/components/Home/FAQ/FAQQuestion.tsx new file mode 100644 index 00000000..e052ae89 --- /dev/null +++ b/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 = ({ + index, + faqItem: { question, answer, colors }, + onFaqToggle +}) => { + const [isOpen, setIsOpen] = useState(false); + + const handleToggle = () => { + setIsOpen(!isOpen); + onFaqToggle(index); + }; + + return ( + + + + + Car + + + {question} + + + + + + + {answer} + + + + + ); +}; diff --git a/apps/site/src/components/Home/FAQ/StopLight.tsx b/apps/site/src/components/Home/FAQ/StopLight.tsx new file mode 100644 index 00000000..154c4bdd --- /dev/null +++ b/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 = ({ active, hasBar }) => { + return ( + + + + + + + + + {hasBar && ( + + + + + )} + + ); +}; diff --git a/apps/site/src/constants/faq-questions.ts b/apps/site/src/constants/faq-questions.ts new file mode 100644 index 00000000..930889cb --- /dev/null +++ b/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" } + } +]; diff --git a/apps/site/src/index.css b/apps/site/src/index.css index 9bfcb041..c478858a 100644 --- a/apps/site/src/index.css +++ b/apps/site/src/index.css @@ -2,3 +2,36 @@ color: #213547; background-color: #ffffff; } + +:root { + color: #213547; + background-color: #ffffff; +} + +@font-face { + font-family: "Magistral"; + src: url("/magistral.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "ProRacing"; + src: url("/pro-racing.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "ProRacingSlant"; + src: url("/pro-racing-slant.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +.condensed { + font-stretch: condensed; +} diff --git a/apps/site/src/routes/Home.tsx b/apps/site/src/routes/Home.tsx index 33e35e77..dfc64487 100644 --- a/apps/site/src/routes/Home.tsx +++ b/apps/site/src/routes/Home.tsx @@ -1,7 +1,10 @@ +import { FAQ } from "../components/Home/FAQ/FAQ"; + export default function Home() { return ( <>

Reflections | Projections 2025

+ ); } diff --git a/apps/site/src/vite-env.d.ts b/apps/site/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/apps/site/src/vite-env.d.ts @@ -0,0 +1 @@ +///