website refactor

apps/website/components/landing/FAQ.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { motion } from 'framer-motion';
-import { ChevronDown } from 'lucide-react';
-import { useState } from 'react';
+import { FAQSection } from '@/components/home/FAQSection';
 
 const faqs = [
   {
@@ -35,103 +29,12 @@ const faqs = [
   }
 ];
 
-function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Stack
-      as={motion.div}
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ delay: index * 0.1 }}
-      group
-    >
-      <Stack rounded="none" bg="panel-gray/40" border borderColor="border-gray/50" transition hoverBorderColor="primary-accent/30">
-        <Stack
-          as="button"
-          onClick={() => setIsOpen(!isOpen)}
-          fullWidth
-          p={{ base: 4, md: 6 }}
-          textAlign="left"
-          rounded="none"
-          minHeight="44px"
-          className="relative overflow-hidden"
-        >
-          <Stack display="flex" alignItems="center" justifyContent="between" gap={{ base: 2, md: 4 }}>
-            <Stack direction="row" align="center" gap={4}>
-              <Stack w="1" h="4" bg={isOpen ? "primary-accent" : "border-gray"} transition className="group-hover:bg-primary-accent" />
-              <Heading level={3} fontSize={{ base: 'sm', md: 'base' }} weight="bold" color="text-white" groupHoverColor="primary-accent" transition className="tracking-wide">
-                {faq.question}
-              </Heading>
-            </Stack>
-            <Stack
-              as={motion.div}
-              animate={{ rotate: isOpen ? 180 : 0 }}
-              transition={{ duration: 0.15, ease: 'easeInOut' }}
-              w={{ base: "4", md: "5" }}
-              h={{ base: "4", md: "5" }}
-              color={isOpen ? "text-primary-accent" : "text-gray-500"}
-              flexShrink={0}
-            >
-              <Icon icon={ChevronDown} size="full" />
-            </Stack>
-          </Stack>
-        </Stack>
-        <Stack
-          as={motion.div}
-          initial={false}
-          animate={{
-            height: isOpen ? 'auto' : 0,
-            opacity: isOpen ? 1 : 0
-          }}
-          transition={{
-            height: { duration: 0.2, ease: 'easeInOut' },
-            opacity: { duration: 0.15, ease: 'easeInOut' }
-          }}
-          overflow="hidden"
-        >
-          <Stack px={{ base: 4, md: 6 }} pb={{ base: 4, md: 6 }} pt={0} ml={5}>
-            <Text size="sm" color="text-gray-400" weight="normal" leading="relaxed" className="max-w-2xl">
-              {faq.answer}
-            </Text>
-          </Stack>
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-}
-
 export function FAQ() {
   return (
-    <Stack as="section" position="relative" py={{ base: 20, md: 32 }} bg="graphite-black" overflow="hidden" borderBottom borderColor="border-gray/50">
-      {/* Background image with mask */}
-      <Stack
-        position="absolute"
-        inset="0"
-        bg="url(/images/porsche.jpeg)"
-        backgroundSize="cover"
-        backgroundPosition="center"
-        opacity={0.03}
-      />
-      
-      <Stack maxWidth="4xl" mx="auto" px={{ base: 4, md: 6 }} position="relative" zIndex={10}>
-        <Stack textAlign="center" mb={{ base: 12, md: 16 }}>
-          <Stack borderLeft borderRight borderStyle="solid" borderColor="primary-accent" px={4} display="inline-block" mb={4}>
-            <Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
-              Support & Information
-            </Text>
-          </Stack>
-          <Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4} className="tracking-tight">
-            Frequently Asked Questions
-          </Heading>
-        </Stack>
-        <Stack display="flex" flexDirection="column" gap={4}>
-          {faqs.map((faq, index) => (
-            <FAQItem key={faq.question} faq={faq} index={index} />
-          ))}
-        </Stack>
-      </Stack>
-    </Stack>
+    <FAQSection
+      title="Frequently Asked Questions"
+      subtitle="Support & Information"
+      faqs={faqs}
+    />
   );
-}
+}