Landing page 2025/faq

src/app/(site)/_components/landing-page.tsx

@@ -61,7 +61,7 @@ const LandingPage: React.FC<LandingPageProps> = (props) => {
       <section className="relative flex w-[100vw] flex-col items-center justify-start overflow-hidden pb-40 font-normal md:pt-32 md:pb-24 md:text-md">
         <div
           id="frequently-asked-questions"
-          className="relative mx-4 flex max-w-[1048px] flex-col items-center justify-center font-normal md:mx-0 md:mt-40 md:text-md">
+          className="relative mx-4 flex max-w-[1048px] flex-col items-center justify-center font-normal md:mt-40 md:text-md">
           <FAQ faqs={faqData} />
         </div>
         <LandingFooter />

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."
   }
 ];

src/components/faq.tsx

@@ -1,6 +1,7 @@
 import { FAQType } from "@/types/interface";
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import { FaChevronDown } from "react-icons/fa";
+// import { FaChevronDown } from "react-icons/fa";
 
 interface FAQProps {
   faqs: FAQType[];
@@ -11,8 +12,10 @@ interface FAQDropDownProps {
   answer: string;
 }
 
-export const FAQDropDown: React.FC<FAQDropDownProps> = (props) => {
-  const { question, answer } = props;
+export const FAQDropDown: React.FC<FAQDropDownProps> = ({
+  question,
+  answer
+}) => {
   const [opened, setOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
 
@@ -23,13 +26,16 @@ export const FAQDropDown: React.FC<FAQDropDownProps> = (props) => {
   const toggleOpen = () => {
     setOpen(!opened);
   };
+
   return (
-    <a
-      className="rounded-box collapse border-2 border-pink_200"
+    <div
+      className={`collapse border-2 border-white ${opened ? "rounded-box" : "rounded-full delay-150"}`}
       onClick={toggleOpen}>
       <input type="checkbox" className={mounted ? "hidden" : ""} />
-      <div className="collapse-title rounded-box flex w-full items-center justify-between rounded-b-none border-pink_200 bg-[#0C1B3A] bg-opacity-50 p-2 px-4 text-sm text-white transition-all duration-500 ease-in-out hover:bg-purple_hover hover:text-white hover:duration-200 hover:ease-in-out md:p-4 md:text-md lg:text-lg">
-        <p className="text-start text-[1rem] normal-case leading-9 md:text-md lg:text-lg">
+      <div className="collapse-title flex w-full items-center justify-between rounded-b-none p-2 px-4 text-mint transition-all ease-in-out hover:bg-white/10 hover:duration-200 hover:ease-in-out md:p-4 md:px-6">
+        <p
+          className="text-start normal-case md:text-md"
+          style={{ textShadow: `0px 4px 4px mint` }}>
           {question}
         </p>
         <div
@@ -40,22 +46,20 @@ export const FAQDropDown: React.FC<FAQDropDownProps> = (props) => {
         </div>
       </div>
       <div
-        className={`collapse-content w-full overflow-hidden border-solid border-pink_200 bg-[#0C1B3A] shadow-lg shadow-pink_200 transition-[max-height] duration-500 ease-in-out ${
+        className={`collapse-content w-full overflow-hidden border-solid border-white transition-[max-height] ease-in-out ${
           opened ? "max-h-screen border-t-2" : "max-h-0"
         }`}>
-        <p className="my-4 text-white md:text-md">{answer}</p>
+        <p className="my-4 px-6 text-white md:px-8 md:text-md">{answer}</p>
       </div>
-    </a>
+    </div>
   );
 };
 
 const FAQ: React.FC<FAQProps> = (props) => {
   const { faqs } = props;
   return (
     <>
-      <p className="mb-4 mt-14 text-xxl font-medium text-[#B479FF] [text-shadow:_0_0_10px_#FFD8FD] md:text-[5rem]">
-        FAQ
-      </p>
+      <p className="mb-4 text-xxl font-normal text-white md:text-[5rem]">FAQ</p>
       <div className="flex flex-col items-center">
         {faqs.map((faq: FAQType) => {
           return (
@@ -65,13 +69,22 @@ const FAQ: React.FC<FAQProps> = (props) => {
           );
         })}
       </div>
-      <p className="mt-2 text-center">
-        More questions? Reach out to us at
-        <a href="mailto:[email protected]" className="font-bold">
-          {" [email protected] "}
-        </a>
-        and we&apos;ll get back to you ASAP!
-      </p>
+      <div className="relative mt-16">
+        <div className="absolute inset-0 hidden h-8 rounded-md bg-purple_shadow_blur opacity-70 blur-2xl md:block"></div>
+        <p className="relative text-left text-md tracking-wide md:text-center">
+          More questions?&nbsp;
+          {/* Add new line on mobile view */}
+          <br className="md:hidden" />
+          <br className="md:hidden" />
+          Reach out to us at
+          <a href="mailto:[email protected]">
+            &nbsp;
+            <span className="underline">[email protected]</span>
+            &nbsp;
+          </a>
+          and we&apos;ll get back to you ASAP!
+        </p>
+      </div>{" "}
     </>
   );
 };

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",
@@ -79,7 +80,8 @@ module.exports = {
         beige: "#D9D9D9",
         white: "#FFF",
         purple_card: "#1E2D79",
-        cyan: "#46C8E5"
+        cyan: "#46C8E5",
+        mint: "#51FFCE"
       },
       textColor: {
         purple_main: "#EB6EFF",
@@ -95,6 +97,9 @@ module.exports = {
         inter: ["Inter", "sans-serif"],
         audiowide: ["Audiowide", "sans-serif"],
         bruno: ["Bruno Ace", "sans-serif"]
+      },
+      borderWidth: {
+        5: "5px"
       }
     }
   },