website refactor

apps/website/components/home/MigrationSection.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/ui/Button';
 import { Stack } from '@/ui/Stack';
 import { Group } from '@/ui/Group';
 import { Panel } from '@/ui/Panel';
+import { Icon } from '@/ui/Icon';
 import { ArrowRight, Database } from 'lucide-react';
 import { routes } from '@/lib/routing/RouteConfig';
 
@@ -16,13 +17,13 @@ import { routes } from '@/lib/routing/RouteConfig';
  */
 export function MigrationSection() {
   return (
-    <Section variant="default" py={32}>
+    <Section variant="default" padding="lg">
       <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>
+              <Icon icon={Database} size={5} intent="primary" />
+              <Text variant="primary" weight="bold" uppercase size="xs">League Migration</Text>
             </Group>
             <Heading level={2} weight="bold">Moving from Sheets or Discord?</Heading>
             <Text variant="med" size="lg">
@@ -36,7 +37,7 @@ export function MigrationSection() {
             href={routes.league.migration}
             variant="primary" 
             size="lg" 
-            icon={<ArrowRight size={18} />}
+            icon={<Icon icon={ArrowRight} size={4} />}
           >
             Start Migration
           </Button>