From 4cf4c79de96d15efc54bfa2b3bd23aa65527e473 Mon Sep 17 00:00:00 2001 From: Kevin Monisit Date: Sun, 4 Feb 2024 13:29:01 -0500 Subject: [PATCH] Merging new FAQ Component into Main (#50) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * created cursor component with wand image (#30) * "created cursor component with wang image with '#' will be ignored, and an empty message aborts the commit. * Created Simple About Section (#31) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * Merge from Dev (#33) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * fixed cursor selection bugs and added a trail * Fixed missing component import for FAQ * added comment in luge.js --------- Co-authored-by: Kevin Monisit * Basic Sections (#32) * completed basic generic sections * Formatting with prettier * added some colors and additional divider * moved text divider half way up to previous section --------- Co-authored-by: Kevin Monisit * Fire Animation (#45) * Merging from Dev (#35) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * created cursor component with wand image (#30) * "created cursor component with wang image with '#' will be ignored, and an empty message aborts the commit. * Created Simple About Section (#31) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * Merge from Dev (#33) * Hero Section (#27) * set up initial template * added navbar to hero section * responsive hero section * Basic About is done * About is added * fixed cursor selection bugs and added a trail * Fixed missing component import for FAQ * added comment in luge.js --------- Co-authored-by: Kevin Monisit * Basic Sections (#32) * completed basic generic sections * Formatting with prettier * added some colors and additional divider * moved text divider half way up to previous section --------- Co-authored-by: Kevin Monisit --------- Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com> Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com> * Fire Animation * Fire Animation * Animating fire-animation * Animating fire-animation * Fire-Animation * Fire-Animation Fire Animation. * Fire Animation * deleted webp in favor of png, fixed safari stuttering animation --------- Co-authored-by: Kevin Monisit Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com> Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com> * New FAQ (#47) * Accordian Style FAQ Unstyled Finished up accordian style FAQ without any styling applied yet. Changed the FAQ constants to include the question as well as answer. * Styled FAQ and Made Responsive Created responsive FAQ using breakpoints and styled accordian. * Fixed Typo Accordian -> Accordion --------- Co-authored-by: poojakedia <67982568+poojakedia@users.noreply.github.com> Co-authored-by: Shivam Kajaria <57373405+bhivam@users.noreply.github.com> Co-authored-by: dchaudhari0811 <136735426+dchaudhari0811@users.noreply.github.com> --- app/(landing)/sections/FAQ/Accordian.tsx | 56 ++++++++++++++ app/(landing)/sections/FAQ/Accordion.tsx | 56 ++++++++++++++ app/(landing)/sections/FAQ/FAQ.tsx | 93 +++--------------------- app/lib/constants.ts | 21 +++--- tailwind.config.ts | 12 ++- 5 files changed, 143 insertions(+), 95 deletions(-) create mode 100644 app/(landing)/sections/FAQ/Accordian.tsx create mode 100644 app/(landing)/sections/FAQ/Accordion.tsx diff --git a/app/(landing)/sections/FAQ/Accordian.tsx b/app/(landing)/sections/FAQ/Accordian.tsx new file mode 100644 index 0000000..bf109a3 --- /dev/null +++ b/app/(landing)/sections/FAQ/Accordian.tsx @@ -0,0 +1,56 @@ +import { useState } from 'react'; + +type propType = { + question: string; + answer: string; +}; + +export default function Accordion(props: propType) { + const [accordionOpen, setAccordionOpen] = useState(false); + + return ( +
+ +
+
{props.answer}
+
+
+
+ ); +} diff --git a/app/(landing)/sections/FAQ/Accordion.tsx b/app/(landing)/sections/FAQ/Accordion.tsx new file mode 100644 index 0000000..bf109a3 --- /dev/null +++ b/app/(landing)/sections/FAQ/Accordion.tsx @@ -0,0 +1,56 @@ +import { useState } from 'react'; + +type propType = { + question: string; + answer: string; +}; + +export default function Accordion(props: propType) { + const [accordionOpen, setAccordionOpen] = useState(false); + + return ( +
+ +
+
{props.answer}
+
+
+
+ ); +} diff --git a/app/(landing)/sections/FAQ/FAQ.tsx b/app/(landing)/sections/FAQ/FAQ.tsx index f402ba0..f1a9bdd 100644 --- a/app/(landing)/sections/FAQ/FAQ.tsx +++ b/app/(landing)/sections/FAQ/FAQ.tsx @@ -1,87 +1,18 @@ 'use client'; - import React from 'react'; -import { Disclosure } from '@headlessui/react'; -import { GoChevronDown } from 'react-icons/go'; import { hackRUFAQ } from '@/app/lib/constants'; - -/** - * TODO: make it so that only one question can be open at a time. - */ - -function Question(props: { question: string; answer: string }) { - const { question, answer } = props; - return ( - - {({ open }) => ( -
- - {question} - - - - {answer} - -
- )} - - ); -} +import Accordian from './Accordion'; function QuestionContainer() { - const { - whatIsHackRUAnswer, - whatIsApplicationAnswer, - winAnythingAnswer, - maskMandateAnswer, - moreQuestionsAnswer, - whoCanComeAnswer, - newAnswer, - costAnswer, - workWithOthersAnswer, - } = hackRUFAQ; - return ( -
-
-
- - - - - -
-
- - - - -
-
+
+ {Object.keys(hackRUFAQ).map((question: string, i: number) => ( + + ))}
); } @@ -90,11 +21,9 @@ export default function FAQ() { return (
-
+
diff --git a/app/lib/constants.ts b/app/lib/constants.ts index 0b83574..e581712 100644 --- a/app/lib/constants.ts +++ b/app/lib/constants.ts @@ -1,32 +1,31 @@ export const hackRUFAQ = { - whatIsHackRUAnswer: `HackRU is a 24-hour hackathon at Rutgers University. We welcome hundreds of students to join us in building + 'What is HackRU?': `HackRU is a 24-hour hackathon at Rutgers University. We welcome hundreds of students to join us in building awesome software and hardware projects. Industry experts and mentors come from all over the country to create an environment that fosters an atmosphere of learning through teck talks and one-on-one guidance. We encourage beginner and advanced hackers alike to challenge themselves and expand their skills.`, - whatIsApplicationAnswer: `HackRU will be back in person this Fall 2023! We will be accepting anywhere between 300-500 hackers based on + 'What is the application process like?': `HackRU will be back in person this Fall 2023! We will be accepting anywhere between 300-500 hackers based on when you register for the event. After you register, you'll get a notification 1-2 weeks before the hackathon whether we have accepted you or not to the hackathon. You will then have to let us know if you plan on coming or not and then you're all set!`, - winAnythingAnswer: + 'Can I win anything?': "Yes! We'll release more information about prizes as the event draws near.", - maskMandateAnswer: + 'Will there be a mask mandate?': 'No, HackRU will not have a mask mandate but it is encouraged throughout the duration of the event.', - moreQuestionsAnswer: - "Reach out to us at info@hackru.org! We'll be happy to answer.", - - whoCanComeAnswer: `HackRU welcomes undergraduate and graduate students of all majors, backgrounds, and skill level to come create. Additionally, high + 'Who can come?': `HackRU welcomes undergraduate and graduate students of all majors, backgrounds, and skill level to come create. Additionally, high school students who will be 18 by HackRU are allowed to register. Unfortunately, if you are under 18, you will not be able to attend.`, - newAnswer: `That's great! We'd love to have you at HackRU. Throughout the weekend, there will be workshops to get your feet wet, + "I'm new. What should I do?": `That's great! We'd love to have you at HackRU. Throughout the weekend, there will be workshops to get your feet wet, project ideas for you to try out, and mentors to guide you through the process.`, - costAnswer: + 'How much does it cost to attend?': 'Like the best things in life, HackRU is completely free to attend!', - workWithOthersAnswer: `Hackers can(and are encouraged to) work in teams of up to 4 humans max. The knowledge you gain from teammates is + 'Can I work with others?': `Hackers can(and are encouraged to) work in teams of up to 4 humans max. The knowledge you gain from teammates is invaluable, along with the opportunity to build lifetime friendships - you might leave with a new best friend! We will be having a team-building exercise after opening ceremonies for people who are looking for teammates.`, + 'I have more questions!': + "Reach out to us at info@hackru.org! We'll be happy to answer.", }; diff --git a/tailwind.config.ts b/tailwind.config.ts index 890f136..c65feb5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -7,6 +7,14 @@ const config: Config = { './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { + screens: { + xx: '0px', + xs: '320px', + sm: '576px', + md: '768px', + lg: '1024px', + xl: '1280px', + }, extend: { gridTemplateColumns: { '13': 'repeat(13, minmax(0, 1fr))', @@ -14,10 +22,10 @@ const config: Config = { colors: { blue: { 100: '#203437', - 200: '#1B1F23' }, orange: { - 100: '#FFB464' + 100: '#FFB464', + 200: '#1B1F23' } }, },