website refactor

apps/website/components/home/CtaSection.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { Section } from '@/ui/Section';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Button } from '@/ui/Button';
+import { Group } from '@/ui/Group';
+import { Box } from '@/ui/Box';
+import { Panel } from '@/ui/Panel';
+import { Stack } from '@/ui/Stack';
+import { Trophy } from 'lucide-react';
+
+/**
+ * CtaSection - Final call to action for league admins.
+ * Redesigned to match the "Modern Precision" theme and "Dieter Rams" style.
+ */
+export function CtaSection() {
+  return (
+    <Section variant="default" py={32}>
+      <Panel variant="muted" padding="xl">
+        <Stack gap={12} align="center" textAlign="center">
+          <Box>
+            <Box marginBottom={6} display="flex" justifyContent="center">
+              <Box width="3rem" height="3rem" bg="var(--ui-color-bg-surface)" rounded="full" border={true} display="flex" alignItems="center" justifyContent="center">
+                <Trophy size={24} className="text-[var(--ui-color-intent-primary)]" />
+              </Box>
+            </Box>
+            <Heading level={2} weight="bold" marginBottom={4}>
+              Ready to elevate your league?
+            </Heading>
+            <Text variant="med" size="lg" maxWidth="36rem" mx="auto">
+              Join the growing ecosystem of professional sim racing leagues. 
+              Start for free and scale as your community grows.
+            </Text>
+          </Box>
+          
+          <Group gap={6} justify="center">
+            <Button variant="primary" size="lg">
+              Create Your League
+            </Button>
+            <Button variant="secondary" size="lg">
+              View Documentation
+            </Button>
+          </Group>
+        </Stack>
+      </Panel>
+    </Section>
+  );
+}