website poc
This commit is contained in:
220
apps/website/components/mockups/DriverProfileMockup.tsx
Normal file
220
apps/website/components/mockups/DriverProfileMockup.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion, useMotionValue, useSpring, useTransform } from 'framer-motion';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function DriverProfileMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const stats = [
|
||||
{ label: 'Wins', value: 24 },
|
||||
{ label: 'Podiums', value: 48 },
|
||||
{ label: 'Championships', value: 3 },
|
||||
{ label: 'Races', value: 156 },
|
||||
{ label: 'Finish Rate', value: 94, suffix: '%' }
|
||||
];
|
||||
|
||||
const formData = [85, 72, 68, 91, 88, 95, 88, 79, 82, 91];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.1 }
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-6 md:p-8 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<div className="h-6 w-48 bg-white/10 rounded mb-2"></div>
|
||||
<div className="h-4 w-24 bg-white/5 rounded"></div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-charcoal-outline">#33</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="text-xs text-gray-400">GridPilot Rating:</div>
|
||||
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} value={2150} />
|
||||
<div className="text-xs text-gray-400 ml-4">iRating:</div>
|
||||
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} value={3200} />
|
||||
</div>
|
||||
|
||||
<div className="relative h-3 bg-charcoal-outline rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-blue to-neon-aqua rounded-full"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: '86%' }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.4, duration: 0.8, ease: 'easeOut' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end mt-1">
|
||||
<span className="text-xs text-gray-400">86%</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="h-4 w-32 bg-white/10 rounded mb-3"></div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
variants={itemVariants}
|
||||
className="bg-iron-gray/50 border border-charcoal-outline rounded-lg p-3 text-center"
|
||||
>
|
||||
<AnimatedCounter
|
||||
value={stat.value}
|
||||
shouldReduceMotion={shouldReduceMotion ?? false}
|
||||
delay={index * 0.1}
|
||||
suffix={stat.suffix}
|
||||
/>
|
||||
<div className="text-xs text-gray-400 mt-1">{stat.label}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.6 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="h-4 w-28 bg-white/10 rounded mb-3"></div>
|
||||
|
||||
<div className="h-20 bg-iron-gray/30 border border-charcoal-outline rounded-lg p-3 flex items-end gap-1">
|
||||
{formData.map((value, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="flex-1 bg-gradient-to-t from-performance-green to-primary-blue rounded-sm"
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: `${value}%` }}
|
||||
transition={{
|
||||
delay: shouldReduceMotion ? 0 : 0.8 + i * 0.05,
|
||||
duration: 0.4,
|
||||
ease: 'easeOut'
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-between mt-1 text-xs text-gray-500">
|
||||
<span>Last 10 races</span>
|
||||
<span>Recent</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.8 }}
|
||||
>
|
||||
<div className="h-4 w-20 bg-white/10 rounded mb-3"></div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ team: 'Red Bull Racing', status: 'Current', color: 'primary-blue' },
|
||||
{ team: 'Mercedes AMG', status: '2023', color: 'charcoal-outline' }
|
||||
].map((team, i) => (
|
||||
<motion.div
|
||||
key={team.team}
|
||||
initial={{ opacity: 0, x: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.9 + i * 0.1 }}
|
||||
className="flex items-center justify-between bg-iron-gray/30 border border-charcoal-outline rounded-lg p-2 text-sm"
|
||||
>
|
||||
<div className="h-3 w-32 bg-white/10 rounded"></div>
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${
|
||||
team.status === 'Current'
|
||||
? 'bg-primary-blue/20 text-primary-blue'
|
||||
: 'bg-charcoal-outline text-gray-400'
|
||||
}`}>
|
||||
{team.status}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 1.2 }}
|
||||
className="mt-4 text-center text-xs text-gray-400"
|
||||
>
|
||||
Active in 3 leagues
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AnimatedRating({ shouldReduceMotion, value }: { shouldReduceMotion: boolean; value: number }) {
|
||||
const count = useMotionValue(0);
|
||||
const rounded = useTransform(count, (v) => Math.round(v));
|
||||
const spring = useSpring(count, { stiffness: 50, damping: 25 });
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldReduceMotion) {
|
||||
count.set(value);
|
||||
} else {
|
||||
const timeout = setTimeout(() => count.set(value), 200);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [shouldReduceMotion, count, value]);
|
||||
|
||||
return (
|
||||
<motion.span className="text-lg font-bold text-primary-blue font-mono">
|
||||
{shouldReduceMotion ? value : <motion.span>{rounded}</motion.span>}
|
||||
</motion.span>
|
||||
);
|
||||
}
|
||||
|
||||
function AnimatedCounter({
|
||||
value,
|
||||
shouldReduceMotion,
|
||||
delay,
|
||||
suffix = ''
|
||||
}: {
|
||||
value: number;
|
||||
shouldReduceMotion: boolean;
|
||||
delay: number;
|
||||
suffix?: string;
|
||||
}) {
|
||||
const count = useMotionValue(0);
|
||||
const rounded = useTransform(count, (v) => Math.round(v));
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldReduceMotion) {
|
||||
count.set(value);
|
||||
} else {
|
||||
const timeout = setTimeout(() => count.set(value), delay * 1000 + 400);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [shouldReduceMotion, count, value, delay]);
|
||||
|
||||
return (
|
||||
<div className="text-xl font-bold text-white font-mono">
|
||||
{shouldReduceMotion ? value : <motion.span>{rounded}</motion.span>}{suffix}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
171
apps/website/components/mockups/LeagueDiscoveryMockup.tsx
Normal file
171
apps/website/components/mockups/LeagueDiscoveryMockup.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LeagueDiscoveryMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
|
||||
|
||||
const leagues = [
|
||||
{
|
||||
name: 'Championship Series',
|
||||
carClass: 'GT3',
|
||||
region: 'EU',
|
||||
skill: '2.5k iRating',
|
||||
drivers: 48,
|
||||
schedule: 'Wed 20:00 CET',
|
||||
rating: 4.8,
|
||||
icon: '🏁'
|
||||
},
|
||||
{
|
||||
name: 'Touring Car Challenge',
|
||||
carClass: 'TCR',
|
||||
region: 'NA',
|
||||
skill: 'Open skill',
|
||||
drivers: 32,
|
||||
schedule: 'Sat 18:00 EST',
|
||||
rating: 4.6,
|
||||
icon: '🏎️'
|
||||
}
|
||||
];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
|
||||
}
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-6 md:p-8 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="h-6 w-52 bg-white/10 rounded mb-4"></div>
|
||||
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{['Game', 'Region', 'Skill'].map((filter, i) => (
|
||||
<motion.div
|
||||
key={filter}
|
||||
initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : i * 0.1 }}
|
||||
className="h-8 px-4 bg-charcoal-outline border border-primary-blue/30 rounded-full flex items-center"
|
||||
>
|
||||
<div className="h-2 w-12 bg-white/10 rounded"></div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="space-y-4"
|
||||
>
|
||||
{leagues.map((league, index) => (
|
||||
<motion.div
|
||||
key={league.name}
|
||||
variants={cardVariants}
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredIndex(index)}
|
||||
onHoverEnd={() => setHoveredIndex(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.02,
|
||||
y: -4,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
className="bg-iron-gray/80 border border-charcoal-outline rounded-lg p-4 backdrop-blur-sm"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-2xl">{league.icon}</div>
|
||||
<div>
|
||||
<div className="h-4 w-40 bg-white/10 rounded mb-2"></div>
|
||||
<div className="flex gap-2 text-xs">
|
||||
<span className="px-2 py-0.5 bg-primary-blue/20 text-primary-blue rounded">
|
||||
{league.carClass}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 bg-neon-aqua/20 text-neon-aqua rounded">
|
||||
{league.region}
|
||||
</span>
|
||||
<span className="px-2 py-0.5 bg-charcoal-outline text-gray-400 rounded">
|
||||
{league.skill}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-gray-400 mb-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<span>{league.drivers} drivers</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>{league.schedule}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<motion.svg
|
||||
key={i}
|
||||
className={`w-4 h-4 ${i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
animate={hoveredIndex === index && !shouldReduceMotion ? {
|
||||
scale: [1, 1.2, 1],
|
||||
transition: { delay: i * 0.05, duration: 0.3 }
|
||||
} : {}}
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</motion.svg>
|
||||
))}
|
||||
<span className="text-xs text-gray-400 ml-1">{league.rating}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<motion.button
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
|
||||
className="px-3 py-1 bg-primary-blue text-white text-xs rounded hover:bg-primary-blue/80 transition-colors"
|
||||
>
|
||||
Join
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
|
||||
className="px-3 py-1 bg-charcoal-outline text-gray-300 text-xs rounded hover:bg-charcoal-outline/80 transition-colors"
|
||||
>
|
||||
View
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
94
apps/website/components/mockups/LeagueHomeMockup.tsx
Normal file
94
apps/website/components/mockups/LeagueHomeMockup.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
|
||||
export default function LeagueHomeMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.1 }
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
|
||||
visible: { opacity: 1, y: 0 }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden">
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="space-y-6"
|
||||
>
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="text-xl font-bold text-white mb-2">Super GT Championship</div>
|
||||
<div className="text-sm text-gray-400">Season 3 • Round 8/12</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="text-base font-semibold text-white mb-4">Upcoming Races</div>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="relative flex items-center gap-4 bg-iron-gray rounded-lg p-4 border border-charcoal-outline shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)]"
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
y: -2,
|
||||
boxShadow: '0 4px 24px rgba(0,0,0,0.4), 0 0 20px rgba(25,140,255,0.3)',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
transition={{ type: 'spring', stiffness: 200, damping: 20 }}
|
||||
>
|
||||
<div className="h-10 w-10 bg-charcoal-outline rounded border border-primary-blue/20"></div>
|
||||
<div className="flex-1">
|
||||
<div className="h-3 w-32 bg-white/10 rounded mb-2"></div>
|
||||
<div className="h-2.5 w-24 bg-white/5 rounded font-mono"></div>
|
||||
</div>
|
||||
{i === 1 && (
|
||||
<motion.div
|
||||
className="absolute right-4"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
scale: [1, 1.2, 1],
|
||||
boxShadow: [
|
||||
'0 0 20px rgba(25,140,255,0.3)',
|
||||
'0 0 32px rgba(67,201,230,0.4)',
|
||||
'0 0 20px rgba(25,140,255,0.3)'
|
||||
]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<div className="w-3 h-3 bg-primary-blue rounded-full shadow-glow"></div>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="text-base font-semibold text-white mb-4">Recent Results</div>
|
||||
<div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline shadow-[0_4px_24px_rgba(0,0,0,0.4)]">
|
||||
<div className="flex items-center gap-3 mb-3 pb-3 border-b border-charcoal-outline">
|
||||
<div className="h-2.5 w-8 bg-white/10 rounded font-mono"></div>
|
||||
<div className="h-2.5 flex-1 bg-white/10 rounded"></div>
|
||||
<div className="h-2.5 w-12 bg-white/10 rounded font-mono"></div>
|
||||
</div>
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="flex items-center gap-3 py-2">
|
||||
<div className="h-2.5 w-8 bg-white/5 rounded font-mono"></div>
|
||||
<div className="h-2.5 flex-1 bg-white/5 rounded"></div>
|
||||
<div className="h-2.5 w-12 bg-performance-green/20 rounded text-center font-mono text-performance-green"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
150
apps/website/components/mockups/ProtestWorkflowMockup.tsx
Normal file
150
apps/website/components/mockups/ProtestWorkflowMockup.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function ProtestWorkflowMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [activeStep, setActiveStep] = useState<number>(1);
|
||||
|
||||
const steps = [
|
||||
{
|
||||
name: 'Submit',
|
||||
status: 'pending',
|
||||
color: 'charcoal-outline',
|
||||
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
|
||||
},
|
||||
{
|
||||
name: 'Review',
|
||||
status: 'active',
|
||||
color: 'warning-amber',
|
||||
icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4'
|
||||
},
|
||||
{
|
||||
name: 'Resolve',
|
||||
status: 'resolved',
|
||||
color: 'performance-green',
|
||||
icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
|
||||
},
|
||||
];
|
||||
|
||||
const stepVariants = {
|
||||
hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.8 },
|
||||
visible: (i: number) => ({
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : i * 0.2,
|
||||
type: 'spring' as const,
|
||||
stiffness: 200,
|
||||
damping: 20
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const arrowVariants = {
|
||||
hidden: { opacity: 0, pathLength: 0 },
|
||||
visible: (i: number) => ({
|
||||
opacity: 1,
|
||||
pathLength: 1,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : i * 0.2 + 0.1,
|
||||
duration: 0.5,
|
||||
ease: 'easeOut' as const
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'pending': return 'bg-charcoal-outline border-charcoal-outline text-gray-500';
|
||||
case 'active': return 'bg-warning-amber/20 border-warning-amber text-warning-amber';
|
||||
case 'resolved': return 'bg-performance-green/20 border-performance-green text-performance-green';
|
||||
default: return 'bg-charcoal-outline border-charcoal-outline text-gray-500';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg overflow-hidden p-6 flex flex-col justify-center">
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-4 mb-4">
|
||||
{steps.map((step, i) => (
|
||||
<div key={step.name} className="flex items-center flex-shrink-0">
|
||||
<motion.div
|
||||
custom={i}
|
||||
variants={stepVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="flex flex-col items-center"
|
||||
onHoverStart={() => !shouldReduceMotion && setActiveStep(i)}
|
||||
>
|
||||
<motion.div
|
||||
className={`relative w-12 h-12 md:w-14 md:h-14 rounded-lg flex items-center justify-center mb-2 border-2 ${getStatusColor(step.status)}`}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.1,
|
||||
boxShadow: step.status === 'active'
|
||||
? '0 0 32px rgba(255,197,86,0.4)'
|
||||
: step.status === 'resolved'
|
||||
? '0 0 32px rgba(111,227,122,0.4)'
|
||||
: '0 0 20px rgba(34,38,42,0.4)',
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<svg className="w-6 h-6 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
|
||||
</svg>
|
||||
{step.status === 'active' && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-lg"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
boxShadow: [
|
||||
'0 0 20px rgba(255,197,86,0.3)',
|
||||
'0 0 32px rgba(255,197,86,0.5)',
|
||||
'0 0 20px rgba(255,197,86,0.3)'
|
||||
]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
<div className="text-xs text-white/70 text-center mb-1">{step.name}</div>
|
||||
<motion.div
|
||||
className={`h-1.5 w-10 md:w-12 rounded ${
|
||||
step.status === 'pending' ? 'bg-charcoal-outline' :
|
||||
step.status === 'active' ? 'bg-warning-amber/30' :
|
||||
'bg-performance-green/30'
|
||||
}`}
|
||||
animate={shouldReduceMotion ? {} : step.status === 'active' ? {
|
||||
opacity: [0.5, 1, 0.5]
|
||||
} : {}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{i < steps.length - 1 && (
|
||||
<div className="hidden md:block relative ml-1.5">
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M5 12h14m-7-7l7 7-7 7" stroke="#43C9E6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scaleX: 0 }}
|
||||
animate={{ opacity: 1, scaleX: 1 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.8, duration: 0.6 }}
|
||||
className="relative h-1 bg-charcoal-outline rounded-full overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-neon-aqua to-primary-blue rounded-full"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
165
apps/website/components/mockups/RatingFactorsMockup.tsx
Normal file
165
apps/website/components/mockups/RatingFactorsMockup.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion, useMotionValue, useSpring, useTransform } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function RatingFactorsMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isHovered, setIsHovered] = useState<number | null>(null);
|
||||
|
||||
const factors = [
|
||||
{ name: 'Position', value: 85, color: 'text-primary-blue', bgColor: 'bg-primary-blue' },
|
||||
{ name: 'Field Strength', value: 72, color: 'text-neon-aqua', bgColor: 'bg-neon-aqua' },
|
||||
{ name: 'Consistency', value: 68, color: 'text-performance-green', bgColor: 'bg-performance-green' },
|
||||
{ name: 'Clean Driving', value: 91, color: 'text-warning-amber', bgColor: 'bg-warning-amber' },
|
||||
{ name: 'Reliability', value: 88, color: 'text-primary-blue', bgColor: 'bg-primary-blue' },
|
||||
{ name: 'Team Points', value: 79, color: 'text-performance-green', bgColor: 'bg-performance-green' },
|
||||
];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: shouldReduceMotion ? 0 : 0.1 }
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center mb-6"
|
||||
>
|
||||
<div className="h-7 w-56 bg-white/10 rounded mx-auto mb-3"></div>
|
||||
<div className="h-4 w-40 bg-white/5 rounded mx-auto"></div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="grid grid-cols-3 gap-4 mb-6 max-w-4xl mx-auto"
|
||||
>
|
||||
{factors.map((factor, index) => (
|
||||
<motion.div
|
||||
key={factor.name}
|
||||
variants={itemVariants}
|
||||
className="flex flex-col items-center"
|
||||
onHoverStart={() => !shouldReduceMotion && setIsHovered(index)}
|
||||
onHoverEnd={() => setIsHovered(null)}
|
||||
>
|
||||
<RatingFactor
|
||||
value={factor.value}
|
||||
color={factor.color}
|
||||
bgColor={factor.bgColor}
|
||||
name={factor.name}
|
||||
shouldReduceMotion={shouldReduceMotion ?? false}
|
||||
isHovered={isHovered === index}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.6 }}
|
||||
className="flex items-center justify-center gap-3 bg-iron-gray/50 rounded-lg p-5 border border-charcoal-outline shadow-[0_4px_24px_rgba(0,0,0,0.4)] backdrop-blur-sm max-w-md mx-auto"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="h-3 w-28 bg-white/10 rounded mb-2 mx-auto"></div>
|
||||
<div className="h-12 w-24 bg-charcoal-outline rounded flex items-center justify-center border border-primary-blue/30">
|
||||
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RatingFactor({
|
||||
value,
|
||||
color,
|
||||
bgColor,
|
||||
name,
|
||||
shouldReduceMotion,
|
||||
isHovered
|
||||
}: {
|
||||
value: number;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
name: string;
|
||||
shouldReduceMotion: boolean;
|
||||
isHovered: boolean;
|
||||
}) {
|
||||
const progress = useMotionValue(0);
|
||||
const smoothProgress = useSpring(progress, { stiffness: 60, damping: 25 });
|
||||
const width = useTransform(smoothProgress, (v) => `${v}%`);
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldReduceMotion) {
|
||||
progress.set(value);
|
||||
} else {
|
||||
const timeout = setTimeout(() => progress.set(value), 200);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [value, shouldReduceMotion, progress]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="w-full"
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-xs font-light text-gray-400 tracking-wide">{name}</div>
|
||||
<motion.span
|
||||
className={`text-sm font-semibold font-mono ${color}`}
|
||||
animate={isHovered && !shouldReduceMotion ? { scale: 1.1 } : { scale: 1 }}
|
||||
>
|
||||
{value}
|
||||
</motion.span>
|
||||
</div>
|
||||
<div className="relative h-2 bg-charcoal-outline rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
className={`absolute inset-y-0 left-0 ${bgColor} rounded-full`}
|
||||
style={{ width }}
|
||||
animate={isHovered && !shouldReduceMotion ? {
|
||||
boxShadow: `0 0 12px currentColor`
|
||||
} : {}}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
function AnimatedRating({ shouldReduceMotion }: { shouldReduceMotion: boolean }) {
|
||||
const count = useMotionValue(0);
|
||||
const rounded = useTransform(count, (v) => Math.round(v));
|
||||
const spring = useSpring(count, { stiffness: 50, damping: 25 });
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldReduceMotion) {
|
||||
count.set(1342);
|
||||
} else {
|
||||
const timeout = setTimeout(() => count.set(1342), 800);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [shouldReduceMotion, count]);
|
||||
|
||||
return (
|
||||
<motion.span className="text-3xl font-bold text-primary-blue font-mono">
|
||||
{shouldReduceMotion ? 1342 : <motion.span>{rounded}</motion.span>}
|
||||
</motion.span>
|
||||
);
|
||||
}
|
||||
128
apps/website/components/mockups/StandingsTableMockup.tsx
Normal file
128
apps/website/components/mockups/StandingsTableMockup.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion, useMotionValue, useSpring } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function StandingsTableMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [hoveredRow, setHoveredRow] = useState<number | null>(null);
|
||||
|
||||
const getRowAnimation = (i: number) => ({
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : i * 0.05,
|
||||
type: 'spring' as const,
|
||||
stiffness: 300,
|
||||
damping: 24
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-6 overflow-hidden">
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-4 pb-3 border-b border-charcoal-outline">
|
||||
<div className="text-xs font-mono text-gray-400">#</div>
|
||||
<div className="text-xs flex-1 font-semibold text-white">Driver</div>
|
||||
<div className="text-xs font-mono text-gray-400">Wins</div>
|
||||
<div className="text-xs font-mono text-gray-400">Points</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
variants={getRowAnimation(i)}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className={`relative flex items-center gap-4 py-3 px-3 rounded-lg border transition-all duration-150 ${
|
||||
i <= 3
|
||||
? 'bg-gradient-to-r from-performance-green/10 to-iron-gray border-performance-green/20'
|
||||
: 'bg-iron-gray border-charcoal-outline'
|
||||
}`}
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredRow(i)}
|
||||
onHoverEnd={() => setHoveredRow(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.01,
|
||||
boxShadow: '0 0 20px rgba(25,140,255,0.3)',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
className={`h-7 w-7 rounded-full flex items-center justify-center font-semibold text-xs ${
|
||||
i <= 3
|
||||
? 'bg-primary-blue text-white shadow-glow'
|
||||
: 'bg-charcoal-outline text-gray-400'
|
||||
}`}
|
||||
animate={
|
||||
shouldReduceMotion ? {} : i <= 3 && hoveredRow === i
|
||||
? { scale: 1.15, boxShadow: '0 0 28px rgba(25,140,255,0.5)' }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
{i}
|
||||
</motion.div>
|
||||
<div className="flex-1">
|
||||
<div className="h-3 w-full max-w-[140px] bg-white/10 rounded"></div>
|
||||
</div>
|
||||
<div className="h-3 w-16 bg-white/5 rounded font-mono"></div>
|
||||
<div className="relative">
|
||||
<AnimatedPoints
|
||||
points={300 - i * 20}
|
||||
position={i}
|
||||
shouldReduceMotion={shouldReduceMotion ?? false}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AnimatedPoints({
|
||||
points,
|
||||
position,
|
||||
shouldReduceMotion
|
||||
}: {
|
||||
points: number;
|
||||
position: number;
|
||||
shouldReduceMotion: boolean;
|
||||
}) {
|
||||
const motionValue = useMotionValue(0);
|
||||
const spring = useSpring(motionValue, { stiffness: 50, damping: 20 });
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldReduceMotion) {
|
||||
motionValue.set(points);
|
||||
} else {
|
||||
setTimeout(() => motionValue.set(points), 100 + position * 50);
|
||||
}
|
||||
}, [points, position, shouldReduceMotion, motionValue]);
|
||||
|
||||
const percentage = (points / 300) * 100;
|
||||
|
||||
return (
|
||||
<div className="relative w-24 h-7 bg-charcoal-outline rounded border border-primary-blue/20 overflow-hidden">
|
||||
<motion.div
|
||||
className={`absolute inset-y-0 left-0 ${
|
||||
position <= 3
|
||||
? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20'
|
||||
: 'bg-gradient-to-r from-iron-gray to-charcoal-outline'
|
||||
}`}
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${percentage}%` }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.8, ease: 'easeOut', delay: 0.1 + position * 0.05 }}
|
||||
/>
|
||||
<div className="relative h-full flex items-center justify-center">
|
||||
<motion.span className="text-xs font-mono font-semibold text-white">
|
||||
{shouldReduceMotion ? points : <motion.span>{spring}</motion.span>}
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
189
apps/website/components/mockups/TeamCompetitionMockup.tsx
Normal file
189
apps/website/components/mockups/TeamCompetitionMockup.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function TeamCompetitionMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [hoveredDriver, setHoveredDriver] = useState<number | null>(null);
|
||||
const [hoveredTeam, setHoveredTeam] = useState<number | null>(null);
|
||||
|
||||
const teamColors = ['#198CFF', '#6FE37A', '#FFC556', '#43C9E6', '#9333EA'];
|
||||
|
||||
const leftColumnVariants = {
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
type: 'spring' as const,
|
||||
stiffness: 100,
|
||||
damping: 20
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const rightColumnVariants = {
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
type: 'spring' as const,
|
||||
stiffness: 100,
|
||||
damping: 20
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const rowVariants = {
|
||||
hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 },
|
||||
visible: (i: number) => ({
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : 0.3 + i * 0.05,
|
||||
type: 'spring' as const,
|
||||
stiffness: 300,
|
||||
damping: 25
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-6 overflow-hidden">
|
||||
<div className="grid grid-cols-2 gap-6 h-full">
|
||||
<motion.div
|
||||
variants={leftColumnVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="relative"
|
||||
>
|
||||
<div className="h-5 w-24 bg-white/10 rounded mb-4 text-xs flex items-center justify-center text-white font-semibold">
|
||||
Drivers
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
custom={i}
|
||||
variants={rowVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="relative flex items-center gap-3 bg-iron-gray rounded-lg p-2.5 border border-charcoal-outline overflow-hidden"
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredDriver(i)}
|
||||
onHoverEnd={() => setHoveredDriver(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.02,
|
||||
boxShadow: `0 0 20px ${teamColors[i-1]}40`,
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-0.5"
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
/>
|
||||
<div
|
||||
className="h-5 w-5 rounded-full flex items-center justify-center font-semibold text-[10px] border-2"
|
||||
style={{
|
||||
borderColor: teamColors[i-1],
|
||||
backgroundColor: `${teamColors[i-1]}20`
|
||||
}}
|
||||
>
|
||||
<span className="text-white">{i}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="h-2.5 w-full bg-white/10 rounded"></div>
|
||||
</div>
|
||||
<div className="h-3 w-12 bg-charcoal-outline rounded font-mono text-[10px] flex items-center justify-center text-white/70"></div>
|
||||
{hoveredDriver === i && (
|
||||
<motion.div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${teamColors[i-1]}10 0%, transparent 100%)`
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="absolute left-1/2 top-8 bottom-8 w-px bg-gradient-to-b from-transparent via-charcoal-outline to-transparent backdrop-blur-sm" />
|
||||
|
||||
<motion.div
|
||||
variants={rightColumnVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="relative"
|
||||
>
|
||||
<div className="h-5 w-32 bg-white/10 rounded mb-4 text-xs flex items-center justify-center text-white font-semibold">
|
||||
Constructors
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
custom={i}
|
||||
variants={rowVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="relative flex items-center gap-3 bg-iron-gray rounded-lg p-2.5 border border-charcoal-outline overflow-hidden"
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredTeam(i)}
|
||||
onHoverEnd={() => setHoveredTeam(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.02,
|
||||
boxShadow: `0 0 20px ${teamColors[i-1]}40`,
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-0.5"
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
/>
|
||||
<div
|
||||
className="h-5 w-5 rounded flex items-center justify-center font-semibold text-[10px] border-2"
|
||||
style={{
|
||||
borderColor: teamColors[i-1],
|
||||
backgroundColor: `${teamColors[i-1]}20`
|
||||
}}
|
||||
>
|
||||
<span className="text-white">{i}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="h-2.5 w-full bg-white/10 rounded mb-1.5"></div>
|
||||
<div className="relative h-1.5 bg-charcoal-outline rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 rounded-full"
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${100 - (i-1) * 15}%` }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.8, delay: 0.4 + i * 0.05 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{i === 3 && (
|
||||
<div className="h-4 px-1.5 bg-warning-amber/20 rounded text-[9px] flex items-center justify-center text-warning-amber font-semibold border border-warning-amber/30">
|
||||
=
|
||||
</div>
|
||||
)}
|
||||
{hoveredTeam === i && (
|
||||
<motion.div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${teamColors[i-1]}10 0%, transparent 100%)`
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user