extract components from website

apps/website/components/auth/UserRolesPreview.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Car, Trophy, Users } from 'lucide-react';
+
+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',
+  },
+];
+
+interface UserRolesPreviewProps {
+  variant?: 'full' | 'compact';
+}
+
+export default function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
+  if (variant === 'compact') {
+    return (
+      <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>
+    );
+  }
+
+  return (
+    <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>
+  );
+}