auth rework

apps/website/components/auth/RoleCard.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { LucideIcon } from 'lucide-react';
+
+interface RoleCardProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  features: string[];
+  color: string;
+  selected?: boolean;
+  onClick?: () => void;
+}
+
+export default function RoleCard({
+  icon: Icon,
+  title,
+  description,
+  features,
+  color,
+  selected = false,
+  onClick,
+}: RoleCardProps) {
+  return (
+    <motion.button
+      onClick={onClick}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      className={`w-full text-left p-4 rounded-xl border transition-all duration-200 ${
+        selected
+          ? `border-${color} bg-${color}/10 shadow-[0_0_20px_rgba(25,140,255,0.2)]`
+          : 'border-charcoal-outline bg-iron-gray/50 hover:border-gray-600 hover:bg-iron-gray'
+      }`}
+    >
+      <div className="flex items-start gap-3">
+        <div
+          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
+            selected ? `bg-${color}/20` : 'bg-deep-graphite'
+          }`}
+        >
+          <Icon className={`w-5 h-5 ${selected ? `text-${color}` : 'text-gray-400'}`} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3
+            className={`font-semibold transition-colors ${
+              selected ? 'text-white' : 'text-gray-200'
+            }`}
+          >
+            {title}
+          </h3>
+          <p className="text-xs text-gray-500 mt-0.5">{description}</p>
+        </div>
+        <div
+          className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${
+            selected ? 'border-primary-blue bg-primary-blue' : 'border-gray-600'
+          }`}
+        >
+          {selected && (
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              className="w-2 h-2 rounded-full bg-white"
+            />
+          )}
+        </div>
+      </div>
+      <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
+        <ul className="space-y-1">
+          {features.map((feature, index) => (
+            <li key={index} className="text-xs text-gray-400 flex items-center gap-2">
+              <span
+                className={`w-1 h-1 rounded-full ${selected ? 'bg-primary-blue' : 'bg-gray-600'}`}
+              />
+              {feature}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </motion.button>
+  );
+}