website refactor

apps/website/ui/DiscoverySection.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Section } from './Section';
+import { Container } from './Container';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Text } from './Text';
+import { Grid } from './Grid';
+
+interface DiscoverySectionProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  children: React.ReactNode;
+}
+
+/**
+ * DiscoverySection - A semantic section for discovering content.
+ */
+export function DiscoverySection({
+  title,
+  subtitle,
+  description,
+  children,
+}: DiscoverySectionProps) {
+  return (
+    <Section variant="dark" padding="lg">
+      <Container>
+        <Box maxWidth="2xl" marginBottom={16}>
+          <Box 
+            display="flex" 
+            alignItems="center" 
+            borderLeft 
+            borderStyle="solid" 
+            borderWidth="2px" 
+            borderColor="var(--ui-color-intent-primary)" 
+            paddingLeft={4} 
+            marginBottom={4}
+          >
+            <Text size="xs" weight="bold" uppercase letterSpacing="widest" variant="primary">
+              {subtitle}
+            </Text>
+          </Box>
+          <Heading level={2} weight="bold" marginBottom={6}>
+            {title}
+          </Heading>
+          <Text size="lg" variant="low" leading="relaxed">
+            {description}
+          </Text>
+        </Box>
+
+        <Grid cols={{ base: 1, lg: 3 }} gap={8}>
+          {children}
+        </Grid>
+      </Container>
+    </Section>
+  );
+}