Merge pull request #123 from LaurierHawkHacks/feature/96/faq

feature/96/faq

src/components/Accordion.tsx

@@ -0,0 +1,42 @@
+// components/Accordion.tsx
+import React, { useState } from 'react';
+
+interface AccordionProps {
+  items: { question: string; answer: string }[];
+}
+
+const Accordion: React.FC<AccordionProps> = ({ items }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const toggleAccordion = (index: number) => {
+    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  return (
+    <div className="py-20 flex flex-wrap">
+      {items.map((item, index) => (
+        <div key={index} className="px-3 w-full md:w-1/2 mb-5">
+          <div
+            className={`cursor-pointer flex justify-between items-center p-2 bg-white border-black rounded-xl border ${
+              activeIndex === index ? 'rounded-b-none' : ''
+            }`}
+            onClick={() => toggleAccordion(index)}
+          >
+            <h6 className="text-black">{item.question}</h6>
+            <span>{activeIndex === index ? '^' : '⌄'}</span>
+          </div>
+          {activeIndex === index && (
+            <div className="p-2 bg-deepMarine border-black rounded-xl rounded-t-none border">
+              <h6 className="text-white">{item.answer}</h6>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Accordion;
+
+
+

src/components/index.tsx

@@ -9,12 +9,13 @@ export { Navbar } from './Navbar/Navbar';
 export { Menu } from './Navbar/Menu';
 /*
  *
- * @section
+ * @section 
  *
  */
 export { HeroSection } from "./sections/Hero.section"
 export { AboutSection } from './sections/About.section';
 export { TeamSection } from './sections/Team.section';
 export { ContactSection } from './sections/Contact.section';
 export { SponsorSection } from './sections/Sponsor.section';
-export { FooterSection } from './sections/Footer.section';
+export { FooterSection } from './sections/Footer.section';
+export { FAQSection } from './sections/FAQ.section';

src/components/sections/FAQ.section.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Accordion from '../Accordion';
+
+const FAQSection: React.FC = () => {
+  const faqData = [
+    { question: 'So, what exactly is a hackathon?', answer: 'Our product is...' },
+    { question: 'Do I need a team?', answer: 'Our product is...' },
+    { question: 'When and where is HawkHacks happening?', answer: 'Our product is...' },
+    { question: 'Are there any prizes?', answer: 'Our product is...' },
+    { question: 'How much does it cost?', answer: 'Our product is...' },
+    { question: 'Who can attend? Do I need to be a skilled leet programmer?', answer: 'Our product is...' },
+    { question: 'This is a cool FAQ but I still have questions!', answer: 'Our product is...' },
+    // Add more FAQ items as needed
+  ];
+
+
+  return (
+    <section className="bg-faq-image bg-brightUbe bg-cover">
+      <div className="h-full flex flex-col justify-center items-center">
+        <h2 className="mt-60 text-center text-white font-bold drop-shadow-md">
+          FAQ
+        </h2>
+        <div className="mx-auto max-w-[66.5rem] mb-96">
+          <Accordion items={faqData} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export { FAQSection};

src/pages/Landing.tsx

@@ -1,4 +1,4 @@
-import { Navbar, HeroSection, AboutSection, TeamSection, ContactSection, SponsorSection, FooterSection } from '@components';
+import { Navbar, HeroSection, AboutSection, TeamSection, FAQSection, ContactSection, SponsorSection, FooterSection } from '@components';
 
 const Landing: React.FC = () => {
     return (
@@ -11,6 +11,7 @@ const Landing: React.FC = () => {
             <HeroSection />
             <AboutSection />
             <SponsorSection />
+            <FAQSection/>
             <TeamSection />
             <ContactSection />
             <FooterSection />

tailwind.config.mjs

@@ -35,6 +35,9 @@ export default {
             translate: {
                 0.75: '0.1875rem', // value in between of 0.5 and 1 (0.125rem + 0.25) / 2
             },
+            backgroundImage: {
+                'faq-image': "url('/src/assets/background/faqBackground.png')",
+            }
         },
     },
     plugins: [],