website refactor

apps/website/components/home/FAQSection.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Section } from '@/ui/Section';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Accordion } from '@/components/shared/Accordion';
+import { CardStack } from '@/ui/CardStack';
+import { Center } from '@/ui/Center';
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface FAQSectionProps {
+  title: string;
+  subtitle: string;
+  faqs: FAQItem[];
+}
+
+/**
+ * FAQSection - A semantic component for the FAQ section.
+ */
+export function FAQSection({
+  title,
+  subtitle,
+  faqs,
+}: FAQSectionProps) {
+  return (
+    <Section variant="dark" padding="lg">
+      <Container size="md">
+        <Center>
+          <CardStack gap={4}>
+            <Center>
+              <Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="widest">
+                {subtitle}
+              </Text>
+            </Center>
+            <Heading level={2} weight="bold" align="center">
+              {title}
+            </Heading>
+          </CardStack>
+        </Center>
+
+        <CardStack gap={4}>
+          {faqs.map((faq, index) => (
+            <Accordion key={index} title={faq.question}>
+              <Text size="sm" variant="low" leading="relaxed">
+                {faq.answer}
+              </Text>
+            </Accordion>
+          ))}
+        </CardStack>
+      </Container>
+    </Section>
+  );
+}