website refactor

apps/website/components/auth/AuthCard.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { SectionHeader } from '@/ui/SectionHeader';
 import React from 'react';
 
 interface AuthCardProps {
@@ -18,31 +18,15 @@ interface AuthCardProps {
  */
 export function AuthCard({ children, title, description }: AuthCardProps) {
   return (
-    <Card bg="surface-charcoal" borderColor="outline-steel" rounded="lg" position="relative" overflow="hidden">
-      {/* Subtle top accent line */}
-      <Stack 
-        position="absolute" 
-        top="0" 
-        left="0" 
-        w="full" 
-        h="1px" 
-        bg="linear-gradient(to right, transparent, rgba(25, 140, 255, 0.3), transparent)" 
-      >{null}</Stack>
-      
-      <Stack p={{ base: 6, md: 8 }}>
-        <Stack as="header" mb={8} align="center">
-          <Text as="h1" size="xl" weight="semibold" color="text-white" letterSpacing="tight" mb={2} block textAlign="center">
-            {title}
-          </Text>
-          {description && (
-            <Text size="sm" color="text-med" block textAlign="center">
-              {description}
-            </Text>
-          )}
-        </Stack>
-        
+    <Card variant="dark">
+      <SectionHeader
+        title={title}
+        description={description}
+        variant="minimal"
+      />
+      <div>
         {children}
-      </Stack>
+      </div>
     </Card>
   );
 }

apps/website/components/auth/AuthProviderButtons.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import React from 'react';
 
 interface AuthProviderButtonsProps {
@@ -14,8 +14,10 @@ interface AuthProviderButtonsProps {
  */
 export function AuthProviderButtons({ children }: AuthProviderButtonsProps) {
   return (
-    <Grid cols={1} gap={3} mb={6}>
-      {children}
-    </Grid>
+    <div style={{ marginBottom: '1.5rem' }}>
+      <Grid cols={1} gap={3}>
+        {children}
+      </Grid>
+    </div>
   );
 }

apps/website/components/auth/AuthShell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { AuthLayout } from '@/ui/AuthLayout';
 import React from 'react';
 
 interface AuthShellProps {
@@ -15,37 +15,8 @@ interface AuthShellProps {
  */
 export function AuthShell({ children }: AuthShellProps) {
   return (
-    <Stack as="main" minHeight="screen" align="center" justify="center" p={4} bg="base-black" position="relative" overflow="hidden">
-      {/* Subtle background glow - top right */}
-      <Stack 
-        position="absolute" 
-        top="-10%" 
-        right="-10%" 
-        w="40%" 
-        h="40%" 
-        rounded="full" 
-        bg="rgba(25, 140, 255, 0.05)" 
-        blur="xl" 
-        pointerEvents="none"
-        aria-hidden="true"
-      >{null}</Stack>
-      {/* Subtle background glow - bottom left */}
-      <Stack 
-        position="absolute" 
-        bottom="-10%" 
-        left="-10%" 
-        w="40%" 
-        h="40%" 
-        rounded="full" 
-        bg="rgba(78, 212, 224, 0.05)" 
-        blur="xl" 
-        pointerEvents="none"
-        aria-hidden="true"
-      >{null}</Stack>
-      
-      <Stack w="full" maxWidth="400px" position="relative" zIndex={10} {...({ animate: "fade-in" } as any)}>
-        {children}
-      </Stack>
-    </Stack>
+    <AuthLayout>
+      {children}
+    </AuthLayout>
   );
 }

apps/website/components/auth/AuthWorkflowMockup.tsx

@@ -8,7 +8,7 @@ import {
   Trophy,
   Car,
 } from 'lucide-react';
-import { WorkflowMockup, WorkflowStep } from '@/components/mockups/WorkflowMockup';
+import { WorkflowMockup, WorkflowStep } from '@/ui/WorkflowMockup';
 
 const WORKFLOW_STEPS: WorkflowStep[] = [
   {
@@ -16,35 +16,35 @@ const WORKFLOW_STEPS: WorkflowStep[] = [
     icon: UserPlus,
     title: 'Create Account',
     description: 'Sign up with email or connect iRacing',
-    color: 'text-primary-blue',
+    intent: 'primary',
   },
   {
     id: 2,
     icon: LinkIcon,
     title: 'Link iRacing',
     description: 'Connect your iRacing profile for stats',
-    color: 'text-purple-400',
+    intent: 'telemetry',
   },
   {
     id: 3,
     icon: Settings,
     title: 'Configure Profile',
     description: 'Set up your racing preferences',
-    color: 'text-warning-amber',
+    intent: 'warning',
   },
   {
     id: 4,
     icon: Trophy,
     title: 'Join Leagues',
     description: 'Find and join competitive leagues',
-    color: 'text-performance-green',
+    intent: 'success',
   },
   {
     id: 5,
     icon: Car,
     title: 'Start Racing',
     description: 'Compete and track your progress',
-    color: 'text-primary-blue',
+    intent: 'primary',
   },
 ];
 

apps/website/components/auth/UserRolesPreview.tsx

@@ -1,28 +1,29 @@
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { ListItem, ListItemInfo } from '@/ui/ListItem';
 import { motion } from 'framer-motion';
 import { Car, Trophy, Users } from 'lucide-react';
+import React from 'react';
 
 const USER_ROLES = [
   {
     icon: Car,
     title: 'Driver',
     description: 'Race, track stats, join teams',
-    color: 'primary-blue',
+    intent: 'primary' as const,
   },
   {
     icon: Trophy,
     title: 'League Admin',
     description: 'Organize leagues and events',
-    color: 'performance-green',
+    intent: 'success' as const,
   },
   {
     icon: Users,
     title: 'Team Manager',
     description: 'Manage team and drivers',
-    color: 'purple-400',
+    intent: 'telemetry' as const,
   },
 ] as const;
 
@@ -33,72 +34,46 @@ interface UserRolesPreviewProps {
 export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
   if (variant === 'compact') {
     return (
-      <Stack mt={8} display={{ base: 'block', lg: 'none' }}>
-        <Text align="center" size="xs" color="text-gray-500" mb={4} block>
+      <div style={{ marginTop: '2rem' }}>
+        <Text align="center" size="xs" variant="low" block marginBottom={4}>
           One account for all roles
         </Text>
-        <Stack direction="row" justify="center" gap={6}>
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '1.5rem' }}>
           {USER_ROLES.map((role) => (
-            <Stack key={role.title} direction="col" align="center">
-              <Stack 
-                w="8" 
-                h="8" 
-                rounded="lg" 
-                bg={`bg-${role.color}/20`} 
-                align="center" 
-                justify="center" 
-                mb={1}
-              >
-                <Text color={`text-${role.color}`}>
-                  <Icon icon={role.icon} size={4} />
-                </Text>
-              </Stack>
-              <Text size="xs" color="text-gray-500">{role.title}</Text>
-            </Stack>
+            <div key={role.title} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.25rem' }}>
+              <div style={{ width: '2rem', height: '2rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Icon icon={role.icon} size={4} intent={role.intent} />
+              </div>
+              <Text size="xs" variant="low">{role.title}</Text>
+            </div>
           ))}
-        </Stack>
-      </Stack>
+        </div>
+      </div>
     );
   }
 
   return (
-    <Stack direction="col" gap={3} mb={8}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '2rem' }}>
       {USER_ROLES.map((role, index) => (
-        <Stack
-          as={motion.div}
+        <motion.div
           key={role.title}
-          {...({
-            initial: { opacity: 0, x: -20 },
-            animate: { opacity: 1, x: 0 },
-            transition: { delay: index * 0.1 }
-          } as any)}
-          direction="row"
-          align="center"
-          gap={4}
-          p={4}
-          rounded="xl"
-          bg="bg-iron-gray/50"
-          border
-          borderColor="border-charcoal-outline"
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: index * 0.1 }}
         >
-          <Stack 
-            w="10" 
-            h="10" 
-            rounded="lg" 
-            bg={`bg-${role.color}/20`} 
-            align="center" 
-            justify="center"
-          >
-            <Text color={`text-${role.color}`}>
-              <Icon icon={role.icon} size={5} />
-            </Text>
-          </Stack>
-          <Stack>
-            <Heading level={4}>{role.title}</Heading>
-            <Text size="sm" color="text-gray-500">{role.description}</Text>
-          </Stack>
-        </Stack>
+          <ListItem>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+              <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-bg-surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Icon icon={role.icon} size={5} intent={role.intent} />
+              </div>
+              <ListItemInfo
+                title={role.title}
+                description={role.description}
+              />
+            </div>
+          </ListItem>
+        </motion.div>
       ))}
-    </Stack>
+    </div>
   );
 }