website refactor

apps/website/components/home/MigrationSection.tsx

@@ -0,0 +1,47 @@
+'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 { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
+import { Panel } from '@/ui/Panel';
+import { ArrowRight, Database } from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
+
+/**
+ * MigrationSection - Offers help with migrating existing league data.
+ */
+export function MigrationSection() {
+  return (
+    <Section variant="default" py={32}>
+      <Panel variant="bordered" padding="xl">
+        <Group justify="between" align="center" gap={12} wrap>
+          <Stack gap={6} flex={1} minWidth="20rem">
+            <Group gap={3}>
+              <Database size={20} className="text-[var(--ui-color-intent-primary)]" />
+              <Text variant="primary" weight="bold" uppercase size="xs" letterSpacing="0.1em">League Migration</Text>
+            </Group>
+            <Heading level={2} weight="bold">Moving from Sheets or Discord?</Heading>
+            <Text variant="med" size="lg">
+              We know that moving years of history is daunting. Send us your data, and we will handle the migration for you — for free. 
+              We support CSV, Google Sheets, and manual data entry.
+            </Text>
+          </Stack>
+          
+          <Button 
+            as="a"
+            href={routes.league.migration}
+            variant="primary" 
+            size="lg" 
+            icon={<ArrowRight size={18} />}
+          >
+            Start Migration
+          </Button>
+        </Group>
+      </Panel>
+    </Section>
+  );
+}