diff --git a/app/faq/page.tsx b/app/faq/page.tsx index 61b4934..35f5dc2 100644 --- a/app/faq/page.tsx +++ b/app/faq/page.tsx @@ -1,170 +1,289 @@ 'use client'; import { motion } from 'framer-motion'; -import { Russo_One } from 'next/font/google'; +import { Russo_One, Allerta_Stencil, Zen_Dots } from 'next/font/google'; import { Instagram } from 'lucide-react'; import Link from 'next/link'; import { useState } from 'react'; -// Load Russo One font +// Font configurations const russo = Russo_One({ weight: '400', subsets: ['latin'], }); +const allertaStencil = Allerta_Stencil({ + weight: '400', + subsets: ['latin'], +}); + +const zenDots = Zen_Dots({ + weight: '400', + subsets: ['latin'], +}); + +// Animation variants +const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + }, + }, +}; + +const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + type: "spring", + stiffness: 100, + duration: 0.8 + } + }, +}; + +// FAQ data +const faqs = [ + { + question: "Is the hackathon online or in-person?", + answer: "DevFest will be held in-person, on Columbia University's campus." + }, + { + question: "Who is eligible to participate?", + answer: "DevFest is open to all college students ages 18 and older. Please be aware that travel is unfortunately NOT sponsored." + }, + { + question: "When is Devfest?", + answer: "Devfest will be _______." + }, + { + question: "What is the team size limit?", + answer: "Teams can be of 1-4 people. Individual participation is allowed." + }, + { + question: "Will there be mentorship or support given?", + answer: "Yes, experienced students and industry professionals (ADI alumni!) will be in-person and online during the hackathon." + }, + { + question: "Who do I contact for questions or concerns?", + answer: "If you have any questions or concerns, feel free to reach out to us via email at devfestorganizers@googlegroups.com or on our Discord server, where you can ping any of the organizers. For additional guidance, please refer to the MLH Code of Conduct." + } +]; + export default function FAQ() { const [openFAQ, setOpenFAQ] = useState(null); - const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - staggerChildren: 0.1, - }, - }, + const toggleFAQ = (index: number) => { + setOpenFAQ(openFAQ === index ? null : index); }; - const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - type: "spring", - stiffness: 100, - duration: 0.8 + // Constants for accordion layout + const CONTAINER_HEIGHT = 258; + const BASE_ROW_HEIGHT = CONTAINER_HEIGHT / 6; // 43px per row + const EXPANDED_ROW_HEIGHT = BASE_ROW_HEIGHT * 3; // (3x base) + + // Calculate how many rows fit below the expanded row + const getRowsBelowExpanded = (expandedIndex: number) => { + if (openFAQ === null) return 0; + const spaceUsed = (expandedIndex + 1) * BASE_ROW_HEIGHT + BASE_ROW_HEIGHT; // rows above + expanded row + const spaceRemaining = CONTAINER_HEIGHT - spaceUsed; + return Math.floor(spaceRemaining / BASE_ROW_HEIGHT); + }; + + // Calculate offset to push rows up if answer doesn't fit + const getUpwardOffset = (expandedIndex: number) => { + if (openFAQ === null || openFAQ !== expandedIndex) return 0; + + const spaceNeeded = EXPANDED_ROW_HEIGHT; + const spaceBelow = CONTAINER_HEIGHT - (expandedIndex + 1) * BASE_ROW_HEIGHT; + const overflow = spaceNeeded - spaceBelow; + + if (overflow > 0) { + // Calculate how many full rows we need to push up + const rowsToPush = Math.ceil(overflow / BASE_ROW_HEIGHT); + return rowsToPush * BASE_ROW_HEIGHT; + } + return 0; + }; + + // Calculate top position for each row + const getRowTop = (index: number) => { + if (openFAQ === null) { + return index * BASE_ROW_HEIGHT; + } + + const expandedIndex = openFAQ; + const upwardOffset = getUpwardOffset(expandedIndex); + + if (index < expandedIndex) { + // Rows above expanded row - push up if needed + return index * BASE_ROW_HEIGHT - upwardOffset; + } else if (index === expandedIndex) { + // Expanded row + return expandedIndex * BASE_ROW_HEIGHT - upwardOffset; + } else { + // Rows below expanded row + const rowsBelow = getRowsBelowExpanded(expandedIndex); + if (index <= expandedIndex + rowsBelow) { + return expandedIndex * BASE_ROW_HEIGHT - upwardOffset + EXPANDED_ROW_HEIGHT + (index - expandedIndex - 1) * BASE_ROW_HEIGHT; } - }, + // Row is hidden + return CONTAINER_HEIGHT; + } }; - const faqs = [ - { - question: "What is Columbia DevFest?", - answer: "Columbia DevFest is a hackathon hosted by ADI Columbia at Columbia University. It's a weekend-long event where students come together to build innovative projects, learn new technologies, and network with industry professionals." - }, - { - question: "When and where is the event?", - answer: "Columbia DevFest 2026 will take place on February 8th, 2026 at Columbia University in the City of New York. The exact venue details will be announced closer to the event date." - }, - { - question: "Who can participate?", - answer: "The event is open to all college students, recent graduates, and high school students. You don't need to be a Columbia student to participate - we welcome students from all universities!" - }, - { - question: "Do I need to pay to participate?", - answer: "No! Columbia DevFest is completely free to attend. We provide meals, snacks, and all the resources you'll need for the weekend." - }, - { - question: "What should I bring?", - answer: "Bring your laptop, charger, and any development tools you prefer. We'll provide Wi-Fi, power outlets, and other necessary infrastructure. Don't forget to bring your student ID!" - }, - { - question: "Can I work in a team?", - answer: "Yes! You can work individually or in teams of up to 4 people. We encourage collaboration and will have team formation activities at the beginning of the event." - }, - { - question: "What are the prizes?", - answer: "We'll have exciting prizes for the winning teams across different categories. Prize details will be announced closer to the event date." - }, - { - question: "Will there be mentors and workshops?", - answer: "Absolutely! We'll have industry professionals, alumni, and experienced developers available as mentors throughout the event. We'll also host workshops on various technologies and development topics." + // Calculate if row is visible + const isRowVisible = (index: number) => { + if (openFAQ === null) { + return index < 6; } - ]; - const toggleFAQ = (index: number) => { - setOpenFAQ(openFAQ === index ? null : index); + const expandedIndex = openFAQ; + const rowTop = getRowTop(index); + const rowHeight = index === expandedIndex ? EXPANDED_ROW_HEIGHT : BASE_ROW_HEIGHT; + const rowBottom = rowTop + rowHeight; + + // Row is visible if it's within container bounds and not hidden + return rowTop >= 0 && rowBottom <= CONTAINER_HEIGHT && rowTop < CONTAINER_HEIGHT; }; return (
{/* Background Image */} - ))} - - - {/* Contact Info */} - -

Still have questions?

-

- Feel free to reach out to us on Instagram or email us at{' '} - - devfest@adicu.com - -

- - + + + {isExpanded && ( + +

+ {faq.answer} +

+ + )} + + ); + })} + + {/* Container for bottom-left links */}
diff --git a/package-lock.json b/package-lock.json index 65f3f1b..e7cb037 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1208,6 +1208,7 @@ "integrity": "sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1258,6 +1259,7 @@ "integrity": "sha512-H+vqmWwT5xoNrXqWs/fesmssOW70gxFlgcMlYcBaWNPIEWDgLa4W9nkSPmhuOgLnXq9QYgkZ31fhDyLhleCsAg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.30.1", "@typescript-eslint/types": "8.30.1", @@ -1691,6 +1693,7 @@ "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2583,6 +2586,7 @@ "integrity": "sha512-MsBdObhM4cEwkzCiraDv7A6txFXEqtNXOb877TsSp2FCkBNl8JfVQrmiuDqC1IkejT6JLPzYBXx/xAiYhyzgGA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", @@ -2757,6 +2761,7 @@ "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.8", @@ -4866,6 +4871,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -4875,6 +4881,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -5505,7 +5512,8 @@ "version": "4.1.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz", "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/tailwindcss-animate": { "version": "1.0.7", @@ -5564,6 +5572,7 @@ "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -5722,6 +5731,7 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/public/faqimages/faqbackground.png b/public/faqimages/faqbackground.png new file mode 100644 index 0000000..2c38cae Binary files /dev/null and b/public/faqimages/faqbackground.png differ diff --git a/public/faqimages/faqplanet.png b/public/faqimages/faqplanet.png new file mode 100644 index 0000000..3dcdc98 Binary files /dev/null and b/public/faqimages/faqplanet.png differ diff --git a/public/faqimages/planet.png b/public/faqimages/planet.png new file mode 100644 index 0000000..3dcdc98 Binary files /dev/null and b/public/faqimages/planet.png differ diff --git a/public/faqimages/squiggle.png b/public/faqimages/squiggle.png new file mode 100644 index 0000000..c70fed0 Binary files /dev/null and b/public/faqimages/squiggle.png differ