feat(libs/website/feature/faq): create faq section

libs/website/feature/faq/index.ts

@@ -0,0 +1,2 @@
+export { FAQSection } from './ui/faq.section'
+export { FAQPresenter } from './ui/faq-presenter/faq.presenter'

libs/website/feature/faq/ui/faq-item/faq-item.tsx

@@ -0,0 +1,25 @@
+import { AccordionContent, AccordionItem, AccordionTrigger } from '@cuhacking/shared/ui/src/cuHacking/components/accordion'
+import { TerminalText } from '@cuhacking/shared/ui/src/cuHacking/components/terminal-text'
+import React from 'react'
+
+interface FAQItemProps {
+  question: string
+  answer: string
+}
+
+export function FAQItem({ question, answer }: FAQItemProps) {
+  return (
+    <AccordionItem value={question}>
+      <AccordionTrigger>
+        <p>
+          <span className="text-primary">faq(</span>
+          {question}
+          <span className="text-primary">)</span>
+        </p>
+      </AccordionTrigger>
+      <AccordionContent>
+        <TerminalText>{answer}</TerminalText>
+      </AccordionContent>
+    </AccordionItem>
+  )
+}

libs/website/feature/faq/ui/faq-presenter/faq.presenter.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FAQPresenter } from './faq.presenter'
+
+const meta = {
+  title: 'Website/FAQ Presenter',
+  component: FAQPresenter,
+  tags: ['autodocs'],
+  args: {
+    questions: [
+      {
+        question: 'What is an FAQ?',
+        answer: 'FAQ stands for Frequently Asked Questions.',
+      },
+      {
+        question: 'How do I use Storybook?',
+        answer: 'Storybook is a development environment for UI components.',
+      },
+    ],
+  },
+  argTypes: {
+    questions: {
+      control: {
+        type: 'object',
+      },
+    },
+  },
+} satisfies Meta<typeof FAQPresenter>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const CustomFAQs: Story = {
+  args: {
+    questions: [
+      {
+        question: 'What is the purpose of an FAQ?',
+        answer: 'The purpose of an FAQ is to provide quick answers to common questions.',
+      },
+      {
+        question: 'How do I contribute to this project?',
+        answer: 'You can contribute by opening pull requests and submitting issues.',
+      },
+    ],
+  },
+}
+
+export const LongFAQs: Story = {
+  args: {
+    questions: [
+      {
+        question: 'What are the benefits of using this FAQ system in a project?',
+        answer: 'This FAQ system allows users to find answers to their most frequently asked questions without needing to contact support or search through documentation.',
+      },
+      {
+        question: 'How do I use the accordion component in my React project?',
+        answer: 'You can use the accordion component by importing it from our component library, passing the necessary props such as "type" and "collapsible", and wrapping your FAQ items inside it.',
+      },
+    ],
+  },
+}

libs/website/feature/faq/ui/faq-presenter/faq.presenter.tsx

@@ -0,0 +1,21 @@
+import { Accordion } from '@cuhacking/shared/ui/src/cuHacking/components/accordion'
+import { GlassmorphicCard } from '@cuhacking/shared/ui/src/cuHacking/components/glassmorphic-card'
+import React from 'react'
+import { FAQItem } from '../faq-item/faq-item'
+
+interface FAQPresenterProps {
+  questions: { question: string, answer: string }[]
+}
+
+export function FAQPresenter({ questions }: FAQPresenterProps) {
+  return (
+    <GlassmorphicCard className="flex flex-col w-full gap-6 px-5 py-6">
+      <h2 className="text-4xl font-bold">FAQ</h2>
+      <Accordion type="multiple" className="flex flex-col flex-grow-0 w-full gap-2">
+        {questions.map(({ question, answer }) => (
+          <FAQItem key={question} question={question} answer={answer} />
+        ))}
+      </Accordion>
+    </GlassmorphicCard>
+  )
+}

libs/website/feature/faq/ui/faq.section.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { FAQ_CONSTANTS } from '../constants/faq.constants'
+import { FAQPresenter } from './faq-presenter/faq.presenter'
+
+export function FAQSection() {
+  return (
+    <section id="faq" className="flex justify-center w-full">
+      <div className="w-full max-w-screen-xl px-5 py-5 lg:px-20 lg:py-14">
+        <div className="w-full">
+          <FAQPresenter questions={FAQ_CONSTANTS.QUESTIONS} />
+        </div>
+      </div>
+    </section>
+  )
+}