auth rework
This commit is contained in:
182
apps/website/components/auth/AuthWorkflowMockup.tsx
Normal file
182
apps/website/components/auth/AuthWorkflowMockup.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
UserPlus,
|
||||
Link as LinkIcon,
|
||||
Settings,
|
||||
Trophy,
|
||||
Car,
|
||||
Users,
|
||||
Shield,
|
||||
CheckCircle2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface WorkflowStep {
|
||||
id: number;
|
||||
icon: typeof UserPlus;
|
||||
title: string;
|
||||
description: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const WORKFLOW_STEPS: WorkflowStep[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: UserPlus,
|
||||
title: 'Create Account',
|
||||
description: 'Sign up with email or connect iRacing',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: LinkIcon,
|
||||
title: 'Link iRacing',
|
||||
description: 'Connect your iRacing profile for stats',
|
||||
color: 'text-purple-400',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: Settings,
|
||||
title: 'Configure Profile',
|
||||
description: 'Set up your racing preferences',
|
||||
color: 'text-warning-amber',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: Trophy,
|
||||
title: 'Join Leagues',
|
||||
description: 'Find and join competitive leagues',
|
||||
color: 'text-performance-green',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: Car,
|
||||
title: 'Start Racing',
|
||||
description: 'Compete and track your progress',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
];
|
||||
|
||||
export default function AuthWorkflowMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % WORKFLOW_STEPS.length);
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isMounted]);
|
||||
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-6">
|
||||
<div className="flex justify-between gap-2">
|
||||
{WORKFLOW_STEPS.map((step) => (
|
||||
<div key={step.id} className="flex flex-col items-center text-center flex-1">
|
||||
<div className="w-10 h-10 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center mb-2">
|
||||
<step.icon className={`w-4 h-4 ${step.color}`} />
|
||||
</div>
|
||||
<h4 className="text-xs font-medium text-white">{step.title}</h4>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-4 sm:p-6 overflow-hidden">
|
||||
{/* Connection Lines */}
|
||||
<div className="absolute top-[3.5rem] left-[8%] right-[8%] hidden sm:block">
|
||||
<div className="h-0.5 bg-charcoal-outline relative">
|
||||
<motion.div
|
||||
className="absolute h-full bg-gradient-to-r from-primary-blue to-performance-green"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${(activeStep / (WORKFLOW_STEPS.length - 1)) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="flex justify-between gap-2 relative">
|
||||
{WORKFLOW_STEPS.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={step.id}
|
||||
className="flex flex-col items-center text-center cursor-pointer flex-1"
|
||||
onClick={() => setActiveStep(index)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg border flex items-center justify-center mb-2 transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]'
|
||||
: isCompleted
|
||||
? 'bg-performance-green/20 border-performance-green/50'
|
||||
: 'bg-iron-gray border-charcoal-outline'
|
||||
}`}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
scale: [1, 1.08, 1],
|
||||
transition: { duration: 1, repeat: Infinity }
|
||||
} : {}}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-performance-green" />
|
||||
) : (
|
||||
<StepIcon className={`w-4 h-4 sm:w-5 sm:h-5 ${isActive ? step.color : 'text-gray-500'}`} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h4 className={`text-xs font-medium transition-colors hidden sm:block ${
|
||||
isActive ? 'text-white' : 'text-gray-400'
|
||||
}`}>
|
||||
{step.title}
|
||||
</h4>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Step Preview - Mobile */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="mt-4 pt-4 border-t border-charcoal-outline sm:hidden"
|
||||
>
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-gray-400 mb-1">
|
||||
Step {activeStep + 1}: {WORKFLOW_STEPS[activeStep].title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{WORKFLOW_STEPS[activeStep].description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
apps/website/components/auth/RoleCard.tsx
Normal file
82
apps/website/components/auth/RoleCard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user