website refactor

apps/website/ui/Accordion.tsx

@@ -0,0 +1,48 @@
+
+
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface AccordionProps {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+export function Accordion({ title, icon, children, isOpen, onToggle }: AccordionProps) {
+  return (
+    <Box border={true} borderColor="border-charcoal-outline" rounded="lg" overflow="hidden" bg="bg-iron-gray/30">
+      <Box
+        as="button"
+        onClick={onToggle}
+        display="flex"
+        alignItems="center"
+        justifyContent="between"
+        px={3}
+        py={2}
+        fullWidth
+        className="hover:bg-iron-gray/50 transition-colors"
+      >
+        <Stack direction="row" align="center" gap={2}>
+          {icon}
+          <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
+            {title}
+          </Text>
+        </Stack>
+        <Icon icon={isOpen ? ChevronDown : ChevronUp} size={4} color="text-gray-400" />
+      </Box>
+      
+      {isOpen && (
+        <Box p={3} borderTop={true} borderColor="border-charcoal-outline">
+          {children}
+        </Box>
+      )}
+    </Box>
+  );
+}