website refactor

apps/website/ui/LandingHero.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Section } from './Section';
+import { Container } from './Container';
+import { Box } from './Box';
+import { Glow } from './Glow';
+import { Heading } from './Heading';
+import { Text } from './Text';
+import { ButtonGroup } from './ButtonGroup';
+import { Button } from './Button';
+
+interface LandingHeroProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  primaryAction: {
+    label: string;
+    href: string;
+  };
+  secondaryAction: {
+    label: string;
+    href: string;
+  };
+}
+
+/**
+ * LandingHero - A semantic hero section for landing pages.
+ */
+export function LandingHero({
+  title,
+  subtitle,
+  description,
+  primaryAction,
+  secondaryAction,
+}: LandingHeroProps) {
+  return (
+    <Section variant="dark" padding="lg">
+      <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
+      
+      <Container>
+        <Box display="flex" flexDirection="col" gap={8} maxWidth="3xl">
+          <Text size="xs" weight="bold" uppercase variant="primary">
+            {subtitle}
+          </Text>
+          
+          <Heading level={1} weight="bold">
+            {title}
+          </Heading>
+          
+          <Text size="lg" variant="low">
+            {description}
+          </Text>
+
+          <ButtonGroup gap={4}>
+            <Button
+              as="a"
+              href={primaryAction.href}
+              variant="primary"
+              size="lg"
+            >
+              {primaryAction.label}
+            </Button>
+            <Button
+              as="a"
+              href={secondaryAction.href}
+              variant="secondary"
+              size="lg"
+            >
+              {secondaryAction.label}
+            </Button>
+          </ButtonGroup>
+        </Box>
+      </Container>
+    </Section>
+  );
+}