From 972836ff6c17bd4bc3e51d95a9cdca65091ac36f Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Thu, 26 Dec 2024 10:19:25 -0800 Subject: [PATCH 01/11] add faq text color --- tailwind.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 1465361..0b341c8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -79,7 +79,8 @@ module.exports = { beige: "#D9D9D9", white: "#FFF", purple_card: "#1E2D79", - cyan: "#46C8E5" + cyan: "#46C8E5", + mint: "#51FFCE" }, textColor: { purple_main: "#EB6EFF", From 1c8f5003bec010d31187b98690fa5cfa46e9238a Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Thu, 26 Dec 2024 10:43:10 -0800 Subject: [PATCH 02/11] wip on faq btns --- src/components/faq.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 9a6b4c1..0693c48 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -25,10 +25,10 @@ export const FAQDropDown: React.FC = (props) => { }; return ( -
+

{question}

@@ -40,7 +40,7 @@ export const FAQDropDown: React.FC = (props) => {

{answer}

@@ -53,7 +53,7 @@ const FAQ: React.FC = (props) => { const { faqs } = props; return ( <> -

+

FAQ

From b3971dde624768bc052914422a21d3d3bc7b0a3c Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Thu, 26 Dec 2024 10:52:16 -0800 Subject: [PATCH 03/11] comment out chevron icon --- src/components/faq.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 0693c48..949f6f4 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -1,6 +1,6 @@ import { FAQType } from "@/types/interface"; import React, { useEffect, useState } from "react"; -import { FaChevronDown } from "react-icons/fa"; +// import { FaChevronDown } from "react-icons/fa"; interface FAQProps { faqs: FAQType[]; @@ -36,11 +36,11 @@ export const FAQDropDown: React.FC = (props) => { className={`transition-all duration-500 ${ opened ? "rotate-180" : "" }`}> - + {/* */}

{answer}

From 2b8a06aa69b6ae1e01d43c4cf57181d80cdb37fe Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Thu, 26 Dec 2024 13:03:51 -0800 Subject: [PATCH 04/11] wip on faq bottom txt --- src/components/faq.tsx | 8 +++++--- tailwind.config.js | 1 + 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 949f6f4..06dc7e2 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -65,10 +65,12 @@ const FAQ: React.FC = (props) => { ); })}
-

+

More questions? Reach out to us at - - {" fullyhacks@gmail.com "} + +   + fullyhacks@gmail.com +   and we'll get back to you ASAP!

diff --git a/tailwind.config.js b/tailwind.config.js index 0b341c8..0165912 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -65,6 +65,7 @@ module.exports = { purple_300: "#9EA8FF", purple_hover: "#3b3561", purple_500: "#4F38DF", + purple_shadow_blur: "#6F6795", pink_700: "#B438DF", pink_400: "#FF8F8F", pink_300: "#DF389C", From df9cf9f30cb29be0d5d639085e9ddfe11e065988 Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Fri, 27 Dec 2024 11:42:40 -0800 Subject: [PATCH 05/11] remove dropdown func, put ans txt under question --- src/components/faq.tsx | 47 +++++++++++++----------------------------- 1 file changed, 14 insertions(+), 33 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 06dc7e2..b4ddb40 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -1,6 +1,5 @@ import { FAQType } from "@/types/interface"; -import React, { useEffect, useState } from "react"; -// import { FaChevronDown } from "react-icons/fa"; +import React from "react"; interface FAQProps { faqs: FAQType[]; @@ -11,41 +10,23 @@ interface FAQDropDownProps { answer: string; } -export const FAQDropDown: React.FC = (props) => { - const { question, answer } = props; - const [opened, setOpen] = useState(false); - const [mounted, setMounted] = useState(false); - - useEffect(() => { - setMounted(true); - }, []); - - const toggleOpen = () => { - setOpen(!opened); - }; +export const FAQDropDown: React.FC = ({ + question, + answer +}) => { return ( - - -
-

- {question} -

-
- {/* */} + <> +
+
+

+ {question} +

-
-

{answer}

+
+

{answer}

- + ); }; From aaa05d21caeb546db4c1a603f62879d8f2ea8bc8 Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Fri, 27 Dec 2024 11:56:24 -0800 Subject: [PATCH 06/11] add text shadow for questions --- src/components/faq.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index b4ddb40..16def31 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -14,11 +14,13 @@ export const FAQDropDown: React.FC = ({ question, answer }) => { + // Text shadow is somewhat accurate to the actual design in Figma. It's kinda hard to perfectly match it + const mintColorRgba = "rgba(81, 255, 206, 0.2)"; return ( <>
-

+

{question}

From f7492a209cdf4b3ad2896e9ecda5591f265ff7aa Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Fri, 27 Dec 2024 14:27:35 -0800 Subject: [PATCH 07/11] add back dropdown, fix border dropdown issue --- src/components/faq.tsx | 41 ++++++++++++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 16def31..1589662 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -1,5 +1,6 @@ import { FAQType } from "@/types/interface"; -import React from "react"; +import React, { useState, useEffect } from "react"; +// import { FaChevronDown } from "react-icons/fa"; interface FAQProps { faqs: FAQType[]; @@ -14,21 +15,43 @@ export const FAQDropDown: React.FC = ({ question, answer }) => { + const [opened, setOpen] = useState(false); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + const toggleOpen = () => { + setOpen(!opened); + }; + // Text shadow is somewhat accurate to the actual design in Figma. It's kinda hard to perfectly match it const mintColorRgba = "rgba(81, 255, 206, 0.2)"; + return ( - <> -
-
-

+

+ + +
+

{question}

+ +
+

+ {answer} +

-
-

{answer}

-
- +
); }; From 956db8bf27350889e32f267d7e547805d83f7372 Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Sat, 28 Dec 2024 11:41:25 -0800 Subject: [PATCH 08/11] make faq responsive --- src/components/faq.tsx | 18 ++++++++++-------- tailwind.config.js | 3 +++ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 1589662..9b76506 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -32,12 +32,12 @@ export const FAQDropDown: React.FC = ({ return ( -

- More questions? Reach out to us at +

+ More questions?  + {/* Add new line on mobile view */} +
+
+ Reach out to us at   fullyhacks@gmail.com diff --git a/tailwind.config.js b/tailwind.config.js index 0165912..91f37bb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -97,6 +97,9 @@ module.exports = { inter: ["Inter", "sans-serif"], audiowide: ["Audiowide", "sans-serif"], bruno: ["Bruno Ace", "sans-serif"] + }, + borderWidth: { + 5: "5px" } } }, From e368a04848e0a063443f8afe5d57963c74e082a2 Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Mon, 30 Dec 2024 13:10:54 -0800 Subject: [PATCH 09/11] wip on blur effect behind text --- src/components/faq.tsx | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 9b76506..41dd8b4 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -69,19 +69,22 @@ const FAQ: React.FC = (props) => { ); })}

-

- More questions?  - {/* Add new line on mobile view */} -
-
- Reach out to us at - -   - fullyhacks@gmail.com -   - - and we'll get back to you ASAP! -

+
+
+

+ More questions?  + {/* Add new line on mobile view */} +
+
+ Reach out to us at + +   + fullyhacks@gmail.com +   + + and we'll get back to you ASAP! +

+
{" "} ); }; From c3cec6f14cf552aee67232c7de9f76a3e1c94203 Mon Sep 17 00:00:00 2001 From: John Carlo Manuel <39042556+johncmanuel@users.noreply.github.com> Date: Mon, 30 Dec 2024 14:00:45 -0800 Subject: [PATCH 10/11] added more spacing, increase font size --- src/components/faq.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 41dd8b4..320c867 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -26,19 +26,16 @@ export const FAQDropDown: React.FC = ({ setOpen(!opened); }; - // Text shadow is somewhat accurate to the actual design in Figma. It's kinda hard to perfectly match it - const mintColorRgba = "rgba(81, 255, 206, 0.2)"; - return ( ); @@ -57,13 +54,13 @@ const FAQ: React.FC = (props) => { const { faqs } = props; return ( <> -

+

FAQ

{faqs.map((faq: FAQType) => { return ( -
+
); From a94071f7004d3f800d86210be7839320da998a22 Mon Sep 17 00:00:00 2001 From: Chom <112128328+tomasohCHOM@users.noreply.github.com> Date: Tue, 31 Dec 2024 12:07:33 -0800 Subject: [PATCH 11/11] feat: modify faq font size, add smooth border animation --- src/app/(site)/_components/landing-page.tsx | 2 +- src/app/api/faqs/faqs.ts | 13 ++++--- src/components/faq.tsx | 43 +++++++++++---------- 3 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/app/(site)/_components/landing-page.tsx b/src/app/(site)/_components/landing-page.tsx index f50eeb7..77fbe7e 100644 --- a/src/app/(site)/_components/landing-page.tsx +++ b/src/app/(site)/_components/landing-page.tsx @@ -61,7 +61,7 @@ const LandingPage: React.FC = (props) => {
+ className="relative mx-4 flex max-w-[1048px] flex-col items-center justify-center font-normal md:mt-40 md:text-md">
diff --git a/src/app/api/faqs/faqs.ts b/src/app/api/faqs/faqs.ts index c3ea891..9251161 100644 --- a/src/app/api/faqs/faqs.ts +++ b/src/app/api/faqs/faqs.ts @@ -10,7 +10,7 @@ export const faqs: FAQType[] = [ { id: "faq2", question: "When is FullyHacks?", - answer: "Feb 24th to Feb 25th. The hackathon will be 100% in-person." + answer: "April 12th to April 13th. The hackathon will be 100% in-person." }, { id: "faq3", @@ -28,13 +28,13 @@ export const faqs: FAQType[] = [ id: "faq5", question: "What can I build?", answer: - "Anything your heart desires! Web, mobile, gaming, VR... You name it, we will support it. We offer different tracks that you can be inspired and build your project" + "Anything your heart desires! Web, mobile, gaming, VR... You name it, we will support it. We offer different tracks to inspire you and help you build your project." }, { id: "faq6", question: "Do I need to have a team?", answer: - "Not at all! You can do solo, come with a team (no more than four people), or join some teams at FullyHacks. We will also have team building activities to help you find the right teammates!" + "Not at all! You can go solo, come with a team (no more than four people), or join some teams at FullyHacks. We will also have team building activities to help you find the right teammates!" }, { id: "faq7", @@ -45,17 +45,18 @@ export const faqs: FAQType[] = [ { id: "faq8", question: "What should I bring?", - answer: "Sleeping bag, laptop, chargers, snacks & drinks, hygiene items,..." + answer: + "Bring a sleeping bag, laptop, chargers, snacks and drinks, hygiene items, and anything else you might need for a 24-hour event." }, { id: "faq9", question: "When are applications due?", - answer: "Before 23:59 Feb 10th, 2024" + answer: "Applications are due by 11:59 PM (PDT) on March 24, 2025." }, { id: "faq10", question: "When will I know my application status?", answer: - "All applications will be reviewed on a rolling basis until Feb 10th, you can check application status in your user portal" + "All applications will be reviewed on a rolling basis until March 24th, you can check application status in your user portal." } ]; diff --git a/src/components/faq.tsx b/src/components/faq.tsx index 320c867..5aa4f19 100644 --- a/src/components/faq.tsx +++ b/src/components/faq.tsx @@ -1,5 +1,6 @@ import { FAQType } from "@/types/interface"; import React, { useState, useEffect } from "react"; +import { FaChevronDown } from "react-icons/fa"; // import { FaChevronDown } from "react-icons/fa"; interface FAQProps { @@ -27,24 +28,28 @@ export const FAQDropDown: React.FC = ({ }; return ( -
- - -
-

- {question} -

+
+ +
-

{answer}

+

{answer}

); @@ -54,20 +59,18 @@ const FAQ: React.FC = (props) => { const { faqs } = props; return ( <> -

- FAQ -

+

FAQ

{faqs.map((faq: FAQType) => { return ( -
+
); })}
-
+

More questions?  {/* Add new line on mobile view */}