extract components from website

apps/website/app/auth/login/page.tsx

@@ -27,6 +27,7 @@ import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
 import { useAuth } from '@/lib/auth/AuthContext';
 import AuthWorkflowMockup from '@/components/auth/AuthWorkflowMockup';
+import UserRolesPreview from '@/components/auth/UserRolesPreview';
 
 interface FormErrors {
   email?: string;
@@ -34,26 +35,6 @@ interface FormErrors {
   submit?: string;
 }
 
-const USER_ROLES = [
-  {
-    icon: Car,
-    title: 'Driver',
-    description: 'Race, track stats, join teams',
-    color: 'primary-blue',
-  },
-  {
-    icon: Trophy,
-    title: 'League Admin',
-    description: 'Organize leagues and events',
-    color: 'performance-green',
-  },
-  {
-    icon: Users,
-    title: 'Team Manager',
-    description: 'Manage team and drivers',
-    color: 'purple-400',
-  },
-];
 
 export default function LoginPage() {
   const router = useRouter();
@@ -167,25 +148,7 @@ export default function LoginPage() {
           </p>
 
           {/* Role Cards */}
-          <div className="space-y-3 mb-8">
-            {USER_ROLES.map((role, index) => (
-              <motion.div
-                key={role.title}
-                initial={{ opacity: 0, x: -20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: index * 0.1 }}
-                className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline"
-              >
-                <div className={`w-10 h-10 rounded-lg bg-${role.color}/20 flex items-center justify-center`}>
-                  <role.icon className={`w-5 h-5 text-${role.color}`} />
-                </div>
-                <div>
-                  <h4 className="text-white font-medium">{role.title}</h4>
-                  <p className="text-sm text-gray-500">{role.description}</p>
-                </div>
-              </motion.div>
-            ))}
-          </div>
+          <UserRolesPreview variant="full" />
 
           {/* Workflow Mockup */}
           <AuthWorkflowMockup />
@@ -365,19 +328,7 @@ export default function LoginPage() {
           </p>
 
           {/* Mobile Role Info */}
-          <div className="mt-8 lg:hidden">
-            <p className="text-center text-xs text-gray-500 mb-4">One account for all roles</p>
-            <div className="flex justify-center gap-6">
-              {USER_ROLES.map((role) => (
-                <div key={role.title} className="flex flex-col items-center">
-                  <div className={`w-8 h-8 rounded-lg bg-${role.color}/20 flex items-center justify-center mb-1`}>
-                    <role.icon className={`w-4 h-4 text-${role.color}`} />
-                  </div>
-                  <span className="text-xs text-gray-500">{role.title}</span>
-                </div>
-              ))}
-            </div>
-          </div>
+          <UserRolesPreview variant="compact" />
         </div>
       </div>
     </main>