website refactor
This commit is contained in:
@@ -25,7 +25,7 @@ export function CareerProgressionMockup() {
|
||||
// Simple mobile version - just the essence
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite to-iron-gray" rounded="lg" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial="hidden"
|
||||
@@ -43,8 +43,8 @@ export function CareerProgressionMockup() {
|
||||
{ value: '48', label: 'Podiums' },
|
||||
{ value: '156', label: 'Races' }
|
||||
].map((stat, i) => (
|
||||
<Box key={i} bg="bg-iron-gray/60" rounded="lg" p={3} border borderColor="border-primary-blue/20" textAlign="center">
|
||||
<Text size="2xl" weight="bold" color="text-primary-blue" font="mono" block>{stat.value}</Text>
|
||||
<Box key={i} bg="panel-gray/60" rounded="none" p={3} border borderColor="primary-accent/20" textAlign="center">
|
||||
<Text size="2xl" weight="bold" color="text-primary-accent" font="mono" block>{stat.value}</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '11px' }}
|
||||
@@ -52,6 +52,8 @@ export function CareerProgressionMockup() {
|
||||
opacity={0.5}
|
||||
mt={1}
|
||||
block
|
||||
font="mono"
|
||||
uppercase
|
||||
>
|
||||
{stat.label}
|
||||
</Text>
|
||||
@@ -61,11 +63,11 @@ export function CareerProgressionMockup() {
|
||||
|
||||
{/* Single elegant season card */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray/40" rounded="lg" p={3} border borderColor="border-charcoal-outline">
|
||||
<Box bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Text size="sm" color="text-white" opacity={0.7}>GT3 Championship</Text>
|
||||
<Box as="span" px={2.5} py={1} bg="bg-performance-green/20" rounded="sm">
|
||||
<Text size="xs" color="text-performance-green" weight="semibold">P2</Text>
|
||||
<Text size="sm" color="text-white" opacity={0.7} weight="bold">GT3 Championship</Text>
|
||||
<Box as="span" px={2.5} py={1} bg="success-green/10" border borderColor="success-green/30">
|
||||
<Text size="xs" color="text-success-green" weight="bold" font="mono">P2</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -78,7 +80,7 @@ export function CareerProgressionMockup() {
|
||||
|
||||
// Desktop version - more detailed
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial="hidden"
|
||||
@@ -89,26 +91,29 @@ export function CareerProgressionMockup() {
|
||||
>
|
||||
<Stack gap={{ base: 1.5, sm: 3, md: 4, lg: 6 }}>
|
||||
{/* Driver Header */}
|
||||
<Box as={motion.div} variants={itemVariants} display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} pb={{ base: 1.5, sm: 3, md: 4, lg: 6 }} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box h={{ base: 8, sm: 10, md: 12, lg: 16 }} w={{ base: 8, sm: 10, md: 12, lg: 16 }} bg="bg-charcoal-outline" rounded="full" border borderWidth="2px" borderColor="border-primary-blue/30" display="flex" alignItems="center" justifyContent="center" overflow="hidden">
|
||||
<Box as={motion.div} variants={itemVariants} display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} pb={{ base: 1.5, sm: 3, md: 4, lg: 6 }} borderBottom borderColor="border-gray/50">
|
||||
<Box h={{ base: 8, sm: 10, md: 12, lg: 16 }} w={{ base: 8, sm: 10, md: 12, lg: 16 }} bg="panel-gray" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" display="flex" alignItems="center" justifyContent="center" overflow="hidden" className="relative">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl', lg: '3xl' }}>🏎️</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" opacity={0.9} mb={{ base: 1, sm: 1.5, md: 2 }} block>Your Racing Identity</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="bold" color="text-white" opacity={0.9} mb={{ base: 1, sm: 1.5, md: 2 }} block className="uppercase tracking-widest">Your Racing Identity</Text>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1, sm: 2, md: 3 }}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-primary-blue"
|
||||
opacity={0.7}
|
||||
color="text-primary-accent"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Multi-league profile
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-performance-green"
|
||||
opacity={0.7}
|
||||
color="text-success-green"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Career tracking
|
||||
</Text>
|
||||
@@ -118,7 +123,7 @@ export function CareerProgressionMockup() {
|
||||
|
||||
{/* Career Stats */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" opacity={0.6} mb={{ base: 1, sm: 2, md: 3 }} block>Career Overview</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="bold" color="text-gray-500" mb={{ base: 1, sm: 2, md: 3 }} block className="uppercase tracking-[0.2em]">Career Overview</Text>
|
||||
<Box display="grid" gridCols={3} gap={{ base: 1, sm: 2, md: 3 }}>
|
||||
{[
|
||||
{ label: 'Wins', value: '24' },
|
||||
@@ -128,19 +133,19 @@ export function CareerProgressionMockup() {
|
||||
<Box
|
||||
key={i}
|
||||
as={motion.div}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
bg="panel-gray/40"
|
||||
rounded="none"
|
||||
p={{ base: 1, sm: 2, md: 3 }}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
borderColor="border-gray/50"
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
y: -2,
|
||||
boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
|
||||
borderColor: '#198CFF80',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg' }} weight="bold" color="text-primary-blue" font="mono" mb={0.5} block>{stat.value}</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-white" opacity={0.4} block>{stat.label}</Text>
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg' }} weight="bold" color="text-primary-accent" font="mono" mb={0.5} block>{stat.value}</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-gray-500" weight="bold" className="uppercase tracking-widest" block>{stat.label}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
@@ -148,7 +153,7 @@ export function CareerProgressionMockup() {
|
||||
|
||||
{/* Season Timeline */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" opacity={0.6} mb={{ base: 1, sm: 2, md: 3 }} block>Season History</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="bold" color="text-gray-500" mb={{ base: 1, sm: 2, md: 3 }} block className="uppercase tracking-[0.2em]">Season History</Text>
|
||||
<Stack gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
{[
|
||||
{ league: 'GT3 Championship', season: 'S3', position: 'P2', points: '248' },
|
||||
@@ -161,30 +166,30 @@ export function CareerProgressionMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={{ base: 1.5, sm: 2, md: 3 }}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
bg="panel-gray/20"
|
||||
rounded="none"
|
||||
p={{ base: 1.5, sm: 2, md: 3 }}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
borderColor="border-gray/30"
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
x: 4,
|
||||
boxShadow: '0 2px 12px rgba(25,140,255,0.2)',
|
||||
borderColor: '#198CFF50',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
<Box h={{ base: 5, sm: 6, md: 8 }} w={{ base: 5, sm: 6, md: 8 }} bg="bg-charcoal-outline" rounded border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box h={{ base: 5, sm: 6, md: 8 }} w={{ base: 5, sm: 6, md: 8 }} bg="panel-gray" rounded="none" border borderColor="primary-accent/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }}>🏁</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-white" opacity={0.8} mb={{ base: 0.5, sm: 1 }} block>{season.league}</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-white" opacity={0.4} block>Season complete</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-white" weight="bold" mb={{ base: 0.5, sm: 1 }} block>{season.league}</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-gray-500" font="mono" uppercase block>Season complete</Text>
|
||||
</Box>
|
||||
<Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-performance-green/20" rounded="sm">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-performance-green" weight="semibold">{season.position}</Text>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="success-green/10" border borderColor="success-green/30">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-success-green" weight="bold" font="mono">{season.position}</Text>
|
||||
</Box>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-primary-blue/20" rounded="sm">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-primary-blue" font="mono">{season.points}</Text>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/30">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-primary-accent" font="mono" weight="bold">{season.points}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -194,18 +199,18 @@ export function CareerProgressionMockup() {
|
||||
|
||||
{/* Multi-League Badge */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }} bg="bg-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3 }} border borderColor="border-primary-blue/30">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }} bg="panel-gray/40" rounded="none" p={{ base: 1.5, sm: 2, md: 3 }} border borderColor="primary-accent/20">
|
||||
<Box display="flex"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="-space-x-2"
|
||||
>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Box key={i} h={{ base: 4, sm: 5, md: 6 }} w={{ base: 4, sm: 5, md: 6 }} bg="bg-iron-gray" rounded="full" border borderWidth="2px" borderColor="border-charcoal-outline" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box key={i} h={{ base: 4, sm: 5, md: 6 }} w={{ base: 4, sm: 5, md: 6 }} bg="panel-gray" rounded="full" border borderWidth="2px" borderColor="border-gray" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }}>🏆</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-white" opacity={0.6}>Active in 3 leagues across seasons</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-gray-400" weight="medium">Active in 3 leagues across seasons</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
@@ -2,12 +2,10 @@
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Check } from 'lucide-react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
|
||||
export function CompanionAutomationMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
@@ -23,7 +21,7 @@ export function CompanionAutomationMockup() {
|
||||
// Simple mobile version - just the essence of automation
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite to-iron-gray" rounded="lg" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0 }}
|
||||
@@ -32,39 +30,41 @@ export function CompanionAutomationMockup() {
|
||||
>
|
||||
<Stack gap={4}>
|
||||
{/* Simple progress indicator */}
|
||||
<Box bg="bg-iron-gray/60" rounded="xl" p={4} border borderColor="border-primary-blue/40">
|
||||
<Box bg="panel-gray/60" rounded="none" p={4} border borderColor="primary-accent/40">
|
||||
<Box display="flex" alignItems="center" gap={3} mb={3}>
|
||||
<Box
|
||||
as={motion.div}
|
||||
h="8"
|
||||
w="8"
|
||||
bg="bg-performance-green/40"
|
||||
rounded="full"
|
||||
bg="success-green/20"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
border
|
||||
borderWidth="2px"
|
||||
borderColor="border-performance-green/60"
|
||||
borderWidth="1px"
|
||||
borderColor="success-green/40"
|
||||
flexShrink={0}
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
scale: [1, 1.1, 1],
|
||||
scale: [1, 1.05, 1],
|
||||
opacity: [0.6, 1, 0.6]
|
||||
}}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="relative"
|
||||
>
|
||||
<Box h="3" w="3" bg="bg-performance-green" rounded="full" />
|
||||
<Box h="2" w="2" bg="success-green" />
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="success-green" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="sm" color="text-white" weight="medium" block>Creating Session</Text>
|
||||
<Text size="xs" color="text-white" opacity={0.5} block>Automated</Text>
|
||||
<Text size="sm" color="text-white" weight="bold" block className="uppercase tracking-widest">Creating Session</Text>
|
||||
<Text size="xs" color="text-gray-500" block font="mono">AUTOMATED</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box h="2.5" fullWidth bg="bg-white/5" rounded="full" overflow="hidden">
|
||||
<Box h="1" fullWidth bg="white/5" rounded="none" overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
h="full"
|
||||
bg="bg-primary-blue/60"
|
||||
bg="primary-accent"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: '75%' }}
|
||||
transition={{ duration: 2, ease: 'easeInOut' }}
|
||||
@@ -74,8 +74,8 @@ export function CompanionAutomationMockup() {
|
||||
|
||||
{/* Simple CTA */}
|
||||
<Box display="flex" justifyContent="center">
|
||||
<Box bg="bg-primary-blue/20" color="text-primary-blue" px={6} py={2.5} rounded="lg" border borderColor="border-primary-blue/40">
|
||||
<Text size="sm" weight="semibold">One Click</Text>
|
||||
<Box bg="primary-accent/10" color="text-primary-accent" px={6} py={2.5} rounded="none" border borderColor="primary-accent/30">
|
||||
<Text size="xs" weight="bold" className="uppercase tracking-[0.2em]">One Click</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
@@ -86,7 +86,7 @@ export function CompanionAutomationMockup() {
|
||||
|
||||
// Desktop version - richer with more automation steps
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 3, md: 4, lg: 6 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 3, md: 4, lg: 6 }} overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial="hidden"
|
||||
@@ -103,12 +103,14 @@ export function CompanionAutomationMockup() {
|
||||
{/* Companion App Header - Enhanced */}
|
||||
<Box as={motion.div} variants={{ hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0 } }}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2.5, md: 3, lg: 4 }} mb={{ base: 3, md: 4, lg: 5 }}>
|
||||
<Box h={{ base: 10, md: 12, lg: 14 }} w={{ base: 10, md: 12, lg: 14 }} bg="bg-primary-blue/20" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/40" display="flex" alignItems="center" justifyContent="center" shadow="lg">
|
||||
<Box h={{ base: 6, md: 7, lg: 8 }} w={{ base: 6, md: 7, lg: 8 }} bg="bg-primary-blue/60" rounded="sm" />
|
||||
<Box h={{ base: 10, md: 12, lg: 14 }} w={{ base: 10, md: 12, lg: 14 }} bg="primary-accent/10" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" display="flex" alignItems="center" justifyContent="center" className="relative">
|
||||
<Box h={{ base: 6, md: 7, lg: 8 }} w={{ base: 6, md: 7, lg: 8 }} bg="primary-accent/40" />
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
<Box position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={2} fontSize={{ base: 'base', md: 'lg', lg: 'xl' }} weight="semibold" color="text-white">GridPilot Companion</Heading>
|
||||
<Text size={{ base: 'xs', md: 'sm', lg: 'base' }} color="text-white" opacity={0.5} block>Automated Session Creator</Text>
|
||||
<Heading level={2} fontSize={{ base: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" className="uppercase tracking-widest">GridPilot Companion</Heading>
|
||||
<Text size={{ base: 'xs', md: 'sm', lg: 'base' }} color="text-gray-500" block font="mono">AUTOMATED SESSION CREATOR</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -118,26 +120,25 @@ export function CompanionAutomationMockup() {
|
||||
as={motion.div}
|
||||
variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}
|
||||
position="relative"
|
||||
bg="bg-charcoal-outline"
|
||||
rounded="lg"
|
||||
bg="panel-gray/40"
|
||||
rounded="none"
|
||||
p={{ base: 3, md: 4, lg: 5 }}
|
||||
border
|
||||
borderWidth="2px"
|
||||
borderColor="border-primary-blue/40"
|
||||
borderWidth="1px"
|
||||
borderColor="border-gray/50"
|
||||
overflow="hidden"
|
||||
>
|
||||
{/* Browser Window Mockup */}
|
||||
<Stack gap={{ base: 3, md: 4 }}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2, md: 2.5 }} pb={{ base: 3, md: 4 }} borderBottom borderColor="border-white/10">
|
||||
<Box h={{ base: 2.5, md: 3 }} w={{ base: 2.5, md: 3 }} bg="bg-red-500/60" rounded="full" />
|
||||
<Box h={{ base: 2.5, md: 3 }} w={{ base: 2.5, md: 3 }} bg="bg-warning-amber/60" rounded="full" />
|
||||
<Box h={{ base: 2.5, md: 3 }} w={{ base: 2.5, md: 3 }} bg="bg-performance-green/60" rounded="full" />
|
||||
<Box flexGrow={1} h={{ base: 2.5, md: 3 }} bg="bg-white/5" rounded="sm" ml={2} px={2} display="flex" alignItems="center">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2, md: 2.5 }} pb={{ base: 3, md: 4 }} borderBottom borderColor="border-gray/30">
|
||||
<Box h="2" w="2" bg="critical-red/40" rounded="none" />
|
||||
<Box h="2" w="2" bg="warning-amber/40" rounded="none" />
|
||||
<Box h="2" w="2" bg="success-green/40" rounded="none" />
|
||||
<Box flexGrow={1} h="4" bg="graphite-black" rounded="none" ml={2} px={2} display="flex" alignItems="center" border borderColor="border-gray/30">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
color="text-white"
|
||||
opacity={0.3}
|
||||
color="text-gray-500"
|
||||
font="mono"
|
||||
>
|
||||
members.iracing.com
|
||||
@@ -169,54 +170,53 @@ export function CompanionAutomationMockup() {
|
||||
as={motion.div}
|
||||
h={{ base: 7, md: 8, lg: 9 }}
|
||||
w={{ base: 7, md: 8, lg: 9 }}
|
||||
rounded="full"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
flexShrink={0}
|
||||
border
|
||||
borderWidth="2px"
|
||||
borderWidth="1px"
|
||||
bg={
|
||||
step.status === 'Complete'
|
||||
? 'bg-performance-green/40'
|
||||
? 'success-green/10'
|
||||
: step.status === 'Running'
|
||||
? 'bg-primary-blue/40'
|
||||
: 'bg-charcoal-outline'
|
||||
? 'primary-accent/10'
|
||||
: 'transparent'
|
||||
}
|
||||
borderColor={
|
||||
step.status === 'Complete'
|
||||
? 'border-performance-green/60'
|
||||
? 'success-green/40'
|
||||
: step.status === 'Running'
|
||||
? 'border-primary-blue/60'
|
||||
: 'border-white/20'
|
||||
? 'primary-accent/40'
|
||||
: 'border-gray/30'
|
||||
}
|
||||
animate={shouldReduceMotion ? {} : step.status === 'Running' ? {
|
||||
scale: [1, 1.15, 1],
|
||||
opacity: [0.4, 1, 0.4]
|
||||
} : {}}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
>
|
||||
{step.status === 'Complete' && (
|
||||
<Icon icon={Check} size={5} color="text-performance-green" />
|
||||
<Box w="2" h="2" bg="success-green" />
|
||||
)}
|
||||
{step.status === 'Running' && (
|
||||
<Box h={{ base: 3, md: 4 }} w={{ base: 3, md: 4 }} bg="bg-primary-blue" rounded="full" />
|
||||
<Box h="2" w="2" bg="primary-accent" />
|
||||
)}
|
||||
{step.status === 'Pending' && (
|
||||
<Box h={{ base: 2, md: 2.5 }} w={{ base: 2, md: 2.5 }} bg="bg-white/30" rounded="full" />
|
||||
<Box h="1" w="1" bg="gray-700" />
|
||||
)}
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Text size={{ base: 'sm', md: 'base', lg: 'lg' }} color="text-white" weight="medium" block>{step.label}</Text>
|
||||
<Text size={{ base: 'xs', md: 'sm' }} color="text-white" opacity={0.5} block>{step.detail}</Text>
|
||||
<Text size={{ base: 'sm', md: 'base' }} color="text-white" weight="bold" block className="uppercase tracking-widest">{step.label}</Text>
|
||||
<Text size="xs" color="text-gray-500" block font="mono">{step.detail.toUpperCase()}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
{step.status !== 'Pending' && (
|
||||
<Box h={{ base: 2.5, md: 3 }} fullWidth bg="bg-white/5" rounded="full" overflow="hidden" ml={{ base: 9, md: 10, lg: 11 }}>
|
||||
<Box h="1" fullWidth bg="white/5" rounded="none" overflow="hidden" ml={{ base: 9, md: 10, lg: 11 }}>
|
||||
<Box
|
||||
as={motion.div}
|
||||
h="full"
|
||||
bg={step.status === 'Complete' ? 'bg-performance-green/60' : 'bg-primary-blue/60'}
|
||||
bg={step.status === 'Complete' ? 'success-green/60' : 'primary-accent/60'}
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: step.status === 'Complete' ? '100%' : '65%' }}
|
||||
transition={{ duration: 2, ease: 'easeInOut' }}
|
||||
@@ -238,36 +238,33 @@ export function CompanionAutomationMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={2}
|
||||
bg="bg-deep-graphite/90"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="backdrop-blur-sm"
|
||||
bg="graphite-black"
|
||||
px={3}
|
||||
py={2}
|
||||
rounded="full"
|
||||
py={1.5}
|
||||
rounded="none"
|
||||
border
|
||||
borderWidth="2px"
|
||||
borderColor="border-primary-blue/40"
|
||||
borderWidth="1px"
|
||||
borderColor="primary-accent/40"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
boxShadow: [
|
||||
'0 0 12px rgba(25,140,255,0.3)',
|
||||
'0 0 20px rgba(25,140,255,0.5)',
|
||||
'0 0 12px rgba(25,140,255,0.3)'
|
||||
'0 0 8px rgba(25,140,255,0.2)',
|
||||
'0 0 15px rgba(25,140,255,0.4)',
|
||||
'0 0 8px rgba(25,140,255,0.2)'
|
||||
]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<Box
|
||||
as={motion.div}
|
||||
h={{ base: 2.5, md: 3 }}
|
||||
w={{ base: 2.5, md: 3 }}
|
||||
bg="bg-primary-blue"
|
||||
rounded="full"
|
||||
h="1.5"
|
||||
w="1.5"
|
||||
bg="primary-accent"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
opacity: [1, 0.5, 1]
|
||||
opacity: [1, 0.3, 1]
|
||||
}}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
/>
|
||||
<Text size={{ base: 'xs', md: 'sm' }} color="text-primary-blue" weight="medium">Running</Text>
|
||||
<Text size="xs" color="text-primary-accent" weight="bold" className="uppercase tracking-widest">Running</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -278,32 +275,36 @@ export function CompanionAutomationMockup() {
|
||||
display="flex"
|
||||
flexDirection="col"
|
||||
alignItems="center"
|
||||
gap={{ base: 2, md: 3 }}
|
||||
gap={3}
|
||||
>
|
||||
<Box
|
||||
as={motion.div}
|
||||
bg="bg-primary-blue/20"
|
||||
color="text-primary-blue"
|
||||
bg="primary-accent/10"
|
||||
color="text-primary-accent"
|
||||
px={8}
|
||||
py={4}
|
||||
rounded="lg"
|
||||
py={3}
|
||||
rounded="none"
|
||||
border
|
||||
borderWidth="2px"
|
||||
borderColor="border-primary-blue/40"
|
||||
borderWidth="1px"
|
||||
borderColor="primary-accent/40"
|
||||
cursor="pointer"
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.03,
|
||||
boxShadow: '0 4px 24px rgba(25,140,255,0.3)',
|
||||
scale: 1.02,
|
||||
borderColor: '#198CFF',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
className="relative"
|
||||
>
|
||||
<Text size={{ base: 'base', md: 'lg' }} weight="semibold">Create Session</Text>
|
||||
<Text size="sm" weight="bold" className="uppercase tracking-[0.2em]">Create Session</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
<Box position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.4}
|
||||
color="text-gray-500"
|
||||
font="mono"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
One click. All fields automated.
|
||||
</Text>
|
||||
|
||||
@@ -11,7 +11,10 @@ export function DriverProfileMockup() {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
const checkMobile = () => setIsMobile(window.innerWidth < 768);
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
const stats = [
|
||||
@@ -26,77 +29,58 @@ export function DriverProfileMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Stack gap={4}>
|
||||
<Box>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box position="relative" h="12" w="12" rounded="full" border borderWidth="2px" borderColor="border-primary-blue/50" overflow="hidden" bg="bg-charcoal-outline">
|
||||
<Box position="absolute" inset="0" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="2xl">🏎️</Text>
|
||||
</Box>
|
||||
<Box position="relative" h="12" w="12" rounded="none" border borderWidth="1px" borderColor="primary-accent/50" overflow="hidden" bg="panel-gray" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="2xl">🏎️</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text weight="bold" color="text-white" block>Driver Profile</Text>
|
||||
<Text size="xs" color="text-white" opacity={0.5} block>Cross-league</Text>
|
||||
<Text weight="bold" color="text-white" block className="uppercase tracking-widest">Driver Profile</Text>
|
||||
<Text size="xs" color="text-gray-500" block font="mono">CROSS-LEAGUE</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text size="2xl" weight="bold" color="text-charcoal-outline">#33</Text>
|
||||
<Text size="2xl" weight="bold" color="text-gray-800" font="mono">#33</Text>
|
||||
</Box>
|
||||
|
||||
<Box position="relative" h="2" bg="bg-charcoal-outline" rounded="full" overflow="hidden" mb={1}>
|
||||
<Box position="relative" h="1" bg="white/5" rounded="none" overflow="hidden" mb={1}>
|
||||
<Box
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
bg="bg-gradient-to-r from-primary-blue to-neon-aqua"
|
||||
rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
bg="primary-accent"
|
||||
style={{ width: '86%' }}
|
||||
/>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="end">
|
||||
<Text size="xs" color="text-gray-400">2150 GP Rating</Text>
|
||||
<Text size="xs" color="text-primary-accent" font="mono" weight="bold">2150 GP RATING</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={2} block>Career Stats</Text>
|
||||
<Text size="xs" weight="bold" color="text-gray-500" mb={2} block className="uppercase tracking-widest">Career Stats</Text>
|
||||
<Box display="grid" gridCols={3} gap={2}>
|
||||
{stats.slice(0, 3).map((stat) => (
|
||||
<Box
|
||||
key={stat.label}
|
||||
bg="bg-iron-gray/50"
|
||||
bg="panel-gray/40"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="lg"
|
||||
borderColor="border-gray/50"
|
||||
rounded="none"
|
||||
p={2}
|
||||
textAlign="center"
|
||||
>
|
||||
<Text weight="bold" color="text-white" font="mono" block>
|
||||
{stat.value}{stat.suffix}
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-400" mt={0.5} block>{stat.label}</Text>
|
||||
<Text size="xs" color="text-gray-500" mt={0.5} block className="uppercase tracking-tighter">{stat.label}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={2} block>Recent Form</Text>
|
||||
<Box h="16" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" rounded="lg" p={2} display="flex" alignItems="end" gap={1}>
|
||||
{formData.slice(-6).map((value, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
flexGrow={1}
|
||||
bg="bg-gradient-to-t from-performance-green to-primary-blue"
|
||||
rounded="sm"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ height: `${value}%` }}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
@@ -120,7 +104,7 @@ export function DriverProfileMockup() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
|
||||
@@ -129,50 +113,46 @@ export function DriverProfileMockup() {
|
||||
>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Box position="relative" h={{ base: 8, sm: 10, md: 12, lg: 16 }} w={{ base: 8, sm: 10, md: 12, lg: 16 }} rounded="full" border borderWidth="2px" borderColor="border-primary-blue/50" overflow="hidden" bg="bg-charcoal-outline">
|
||||
<Box position="absolute" inset="0" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl', lg: '3xl' }}>🏎️</Text>
|
||||
</Box>
|
||||
<Box position="relative" h={{ base: 8, sm: 10, md: 12, lg: 16 }} w={{ base: 8, sm: 10, md: 12, lg: 16 }} rounded="none" border borderWidth="1px" borderColor="primary-accent/50" overflow="hidden" bg="panel-gray" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl', lg: '3xl' }}>🏎️</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" mb={{ base: 1, sm: 1.5, md: 2 }} block>Driver Profile</Text>
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" mb={{ base: 1, sm: 1.5, md: 2 }} block className="uppercase tracking-widest">Driver Profile</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
color="text-gray-500"
|
||||
block
|
||||
font="mono"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Cross-league racing identity
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text size={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} weight="bold" color="text-charcoal-outline">#33</Text>
|
||||
<Text size={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} weight="bold" color="text-gray-800" font="mono">#33</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" flexWrap="wrap" alignItems="center" gap={{ base: 1, sm: 2, md: 3, lg: 4 }} mb={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Text size="xs" color="text-gray-400">GridPilot Rating:</Text>
|
||||
<Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest">GP RATING:</Text>
|
||||
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} value={2150} />
|
||||
<Text size="xs" color="text-gray-400">iRating:</Text>
|
||||
<Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest ml-4">iRATING:</Text>
|
||||
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} value={3200} />
|
||||
</Box>
|
||||
|
||||
<Box position="relative" h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} bg="bg-charcoal-outline" rounded="full" overflow="hidden">
|
||||
<Box position="relative" h="1" bg="white/5" rounded="none" overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
bg="bg-gradient-to-r from-primary-blue to-neon-aqua"
|
||||
rounded="full"
|
||||
bg="primary-accent"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: '86%' }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.4, duration: 0.8, ease: 'easeOut' }}
|
||||
/>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="end" mt={1}>
|
||||
<Text size="xs" color="text-gray-400">86%</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
@@ -182,8 +162,7 @@ export function DriverProfileMockup() {
|
||||
animate="visible"
|
||||
mb={{ base: 1.5, sm: 3, md: 4, lg: 6 }}
|
||||
>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={1} block>Career Statistics</Text>
|
||||
<Text size="xs" color="text-white" opacity={0.5} mb={{ base: 1, sm: 2, md: 3 }} block>Aggregated across all leagues</Text>
|
||||
<Text size="xs" weight="bold" color="text-gray-500" mb={3} block className="uppercase tracking-[0.2em]">Career Statistics</Text>
|
||||
|
||||
<Box display="grid" gridCols={{ base: 2, md: 5 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
{stats.map((stat, index) => (
|
||||
@@ -191,10 +170,10 @@ export function DriverProfileMockup() {
|
||||
key={stat.label}
|
||||
as={motion.div}
|
||||
variants={itemVariants}
|
||||
bg="bg-iron-gray/50"
|
||||
bg="panel-gray/40"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="lg"
|
||||
borderColor="border-gray/50"
|
||||
rounded="none"
|
||||
p={{ base: 1.5, sm: 2, md: 3 }}
|
||||
textAlign="center"
|
||||
>
|
||||
@@ -204,7 +183,7 @@ export function DriverProfileMockup() {
|
||||
delay={index * 0.1}
|
||||
suffix={stat.suffix ?? ''}
|
||||
/>
|
||||
<Text size="xs" color="text-gray-400" mt={0.5} block>{stat.label}</Text>
|
||||
<Text size="xs" color="text-gray-500" mt={0.5} block className="uppercase tracking-tighter font-bold">{stat.label}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
@@ -212,22 +191,20 @@ export function DriverProfileMockup() {
|
||||
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 10 }}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.6 }}
|
||||
mb={{ base: 1.5, sm: 3, md: 4, lg: 6 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={1} block>Recent Form</Text>
|
||||
<Text size="xs" color="text-white" opacity={0.5} mb={{ base: 1, sm: 2, md: 3 }} block>Performance trend over last 10 races</Text>
|
||||
|
||||
<Box h={{ base: 12, sm: 16, md: 20 }} bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3 }} display="flex" alignItems="end" gap={0.5}>
|
||||
<Text size="xs" weight="bold" color="text-gray-500" mb={3} block className="uppercase tracking-[0.2em]">Recent Form</Text>
|
||||
<Box h={{ base: 12, sm: 16, md: 20 }} bg="panel-gray/20" border borderColor="border-gray/50" rounded="none" p={{ base: 1.5, sm: 2, md: 3 }} display="flex" alignItems="end" gap={1}>
|
||||
{formData.map((value, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
as={motion.div}
|
||||
flexGrow={1}
|
||||
bg="bg-gradient-to-t from-performance-green to-primary-blue"
|
||||
rounded="sm"
|
||||
bg="primary-accent"
|
||||
opacity={0.4 + (i * 0.06)}
|
||||
rounded="none"
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: `${value}%` }}
|
||||
transition={{
|
||||
@@ -238,66 +215,6 @@ export function DriverProfileMockup() {
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between" mt={0.5}>
|
||||
<Text size="xs" color="text-gray-500">Last 10 races</Text>
|
||||
<Text size="xs" color="text-gray-500">Recent</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.8 }}
|
||||
>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={1} block>Teams</Text>
|
||||
<Text size="xs" color="text-white" opacity={0.5} mb={{ base: 1, sm: 2, md: 3 }} block>Current and past team memberships</Text>
|
||||
|
||||
<Stack gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
{[
|
||||
{ team: 'Red Bull Racing', status: 'Current', color: 'primary-blue' },
|
||||
{ team: 'Mercedes AMG', status: '2023', color: 'charcoal-outline' }
|
||||
].map((team, i) => (
|
||||
<Box
|
||||
key={team.team}
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, x: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.9 + i * 0.1 }}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="between"
|
||||
bg="bg-iron-gray/30"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="lg"
|
||||
p={{ base: 1, sm: 1.5, md: 2 }}
|
||||
>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2, sm: 3 }}>
|
||||
<Box h={{ base: 5, sm: 6, md: 8 }} w={{ base: 5, sm: 6, md: 8 }} rounded="sm" border borderColor="border-primary-blue/30" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg' }}>🏁</Text>
|
||||
</Box>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 3 }} w={{ base: 16, sm: 20, md: 32 }} bg="bg-white/10" rounded="sm" />
|
||||
</Box>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} rounded="sm" bg={team.status === 'Current' ? 'bg-primary-blue/20' : 'bg-charcoal-outline'}>
|
||||
<Text size="xs" color={team.status === 'Current' ? 'text-primary-blue' : 'text-gray-400'}>
|
||||
{team.status}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 1.2 }}
|
||||
mt={{ base: 2, sm: 3, md: 4 }}
|
||||
textAlign="center"
|
||||
>
|
||||
<Text size="xs" color="text-gray-400">Active in 3 leagues</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
@@ -318,7 +235,7 @@ function AnimatedRating({ shouldReduceMotion, value }: { shouldReduceMotion: boo
|
||||
}, [shouldReduceMotion, count, value]);
|
||||
|
||||
return (
|
||||
<Box as={motion.span} weight="bold" color="text-primary-blue" font="mono" size={{ base: 'sm', sm: 'base', md: 'lg' }}>
|
||||
<Box as={motion.span} weight="bold" color="text-primary-accent" font="mono" size={{ base: 'sm', sm: 'base' }}>
|
||||
{shouldReduceMotion ? value : <Box as={motion.span}>{rounded}</Box>}
|
||||
</Box>
|
||||
);
|
||||
@@ -348,7 +265,7 @@ function AnimatedCounter({
|
||||
}, [shouldReduceMotion, count, value, delay]);
|
||||
|
||||
return (
|
||||
<Box weight="bold" color="text-white" font="mono" size={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }}>
|
||||
<Box weight="bold" color="text-white" font="mono" size={{ base: 'sm', sm: 'base', md: 'lg' }}>
|
||||
{shouldReduceMotion ? value : <Box as={motion.span}>{rounded}</Box>}{suffix}
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -43,86 +43,58 @@ export function LeagueDiscoveryMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Box mb={3}>
|
||||
<Box h="4" w="40" bg="bg-white/10" rounded="sm" mb={3} />
|
||||
<Box h="1.5" w="40" bg="white/10" rounded="none" mb={3} />
|
||||
<Box display="flex" gap={2} flexWrap="wrap">
|
||||
{['Game', 'Region'].map((filter) => (
|
||||
<Box
|
||||
key={filter}
|
||||
h="6"
|
||||
h="5"
|
||||
px={3}
|
||||
bg="bg-charcoal-outline"
|
||||
bg="panel-gray"
|
||||
border
|
||||
borderColor="border-primary-blue/30"
|
||||
rounded="full"
|
||||
borderColor="primary-accent/30"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box h="1.5" w="10" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1" w="8" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack gap={3}>
|
||||
<Stack gap={2}>
|
||||
{leagues.map((league) => (
|
||||
<Box
|
||||
key={league.name}
|
||||
bg="bg-iron-gray/80"
|
||||
bg="panel-gray/40"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="lg"
|
||||
borderColor="border-gray/50"
|
||||
rounded="none"
|
||||
p={3}
|
||||
>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={2}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box h="10" w="10" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box h="10" w="10" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="xl">{league.icon}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box h="3" w="32" bg="bg-white/10" rounded="sm" mb={1} />
|
||||
<Box h="1.5" w="32" bg="white/10" rounded="none" mb={1.5} />
|
||||
<Box display="flex" gap={1}>
|
||||
<Box as="span" px={1.5} py={0.5} bg="bg-primary-blue/20" rounded="sm">
|
||||
<Text size="xs" color="text-primary-blue">{league.carClass}</Text>
|
||||
</Box>
|
||||
<Box as="span" px={1.5} py={0.5} bg="bg-neon-aqua/20" rounded="sm">
|
||||
<Text size="xs" color="text-neon-aqua">{league.region}</Text>
|
||||
<Box as="span" px={1.5} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
<Text size="xs" color="text-primary-accent" weight="bold" font="mono">{league.carClass}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Text size="xs" color="text-gray-400">{league.drivers} drivers</Text>
|
||||
<Text size="xs" color="text-gray-400">•</Text>
|
||||
<Text size="xs" color="text-gray-400">{league.schedule}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Box
|
||||
as="svg"
|
||||
key={i}
|
||||
w="3"
|
||||
h="3"
|
||||
color={i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="fill-current"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<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" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box as="button" px={2} py={1} bg="bg-primary-blue" rounded="sm">
|
||||
<Text size="xs" color="text-white">Join</Text>
|
||||
<Text size="xs" color="text-gray-500" font="mono">{league.drivers} DRIVERS • {league.schedule.toUpperCase()}</Text>
|
||||
<Box px={2} py={0.5} bg="primary-accent" rounded="none">
|
||||
<Text size="xs" color="text-white" weight="bold">JOIN</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -141,25 +113,25 @@ export function LeagueDiscoveryMockup() {
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
|
||||
x: 0,
|
||||
transition: { duration: 0.4 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
mb={{ base: 1.5, sm: 3, md: 4, lg: 6 }}
|
||||
>
|
||||
<Box h={{ base: 3, sm: 4, md: 5, lg: 6 }} w={{ base: 32, sm: 40, md: 52 }} bg="bg-white/10" rounded="sm" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} />
|
||||
<Box h="2" w="48" bg="white/10" rounded="none" mb={4} />
|
||||
|
||||
<Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }} flexWrap="wrap">
|
||||
<Box display="flex" gap={2} flexWrap="wrap">
|
||||
{['Game', 'Region', 'Skill'].map((filter, i) => (
|
||||
<Box
|
||||
key={filter}
|
||||
@@ -167,16 +139,16 @@ export function LeagueDiscoveryMockup() {
|
||||
initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : i * 0.1 }}
|
||||
h={{ base: 5, sm: 6, md: 7, lg: 8 }}
|
||||
px={{ base: 2, sm: 3, md: 4 }}
|
||||
bg="bg-charcoal-outline"
|
||||
h="6"
|
||||
px={4}
|
||||
bg="panel-gray"
|
||||
border
|
||||
borderColor="border-primary-blue/30"
|
||||
rounded="full"
|
||||
borderColor="primary-accent/30"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box h={{ base: 1, sm: 1.5, md: 2 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1" w="10" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
@@ -188,7 +160,7 @@ export function LeagueDiscoveryMockup() {
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<Stack gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Stack gap={2}>
|
||||
{leagues.map((league, index) => (
|
||||
<Box
|
||||
key={league.name}
|
||||
@@ -197,157 +169,90 @@ export function LeagueDiscoveryMockup() {
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredIndex(index)}
|
||||
onHoverEnd={() => setHoveredIndex(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.02,
|
||||
y: -4,
|
||||
x: 4,
|
||||
borderColor: '#198CFF30',
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
bg="bg-iron-gray/80"
|
||||
bg="panel-gray/20"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="lg"
|
||||
borderColor="border-gray/50"
|
||||
rounded="none"
|
||||
p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="backdrop-blur-sm"
|
||||
>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" shadow="0_0_12px_rgba(25,140,255,0.2)">
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={3}>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center" className="relative">
|
||||
<Text size={{ base: 'base', sm: 'lg', md: 'xl', lg: '2xl' }}>{league.icon}</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Box h={{ base: 2.5, sm: 3, md: 4 }} w={{ base: 28, sm: 32, md: 40 }} bg="bg-white/10" rounded="sm" mb={{ base: 1, sm: 1.5, md: 2 }} />
|
||||
<Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-primary-blue/20" rounded="sm">
|
||||
<Box h="2" w="40" bg="white/10" rounded="none" mb={2} />
|
||||
<Box display="flex" gap={2}>
|
||||
<Box as="span" px={2} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-primary-blue"
|
||||
color="text-primary-accent"
|
||||
weight="bold"
|
||||
font="mono"
|
||||
>
|
||||
{league.carClass}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-neon-aqua/20" rounded="sm">
|
||||
<Box as="span" px={2} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-neon-aqua"
|
||||
color="text-telemetry-aqua"
|
||||
weight="bold"
|
||||
font="mono"
|
||||
>
|
||||
{league.region}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-charcoal-outline" rounded="sm">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
>
|
||||
{league.skill}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Box as="svg" w={{ base: 2.5, sm: 3, md: 4 }} h={{ base: 2.5, sm: 3, md: 4 }} color="text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<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" />
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
>
|
||||
{league.drivers} drivers
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Box as="svg" w={{ base: 2.5, sm: 3, md: 4 }} h={{ base: 2.5, sm: 3, md: 4 }} color="text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
>
|
||||
{league.schedule}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Box
|
||||
as={motion.svg}
|
||||
key={i}
|
||||
w={{ base: 2.5, sm: 3, md: 4 }}
|
||||
h={{ base: 2.5, sm: 3, md: 4 }}
|
||||
color={i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="fill-current"
|
||||
viewBox="0 0 20 20"
|
||||
animate={hoveredIndex === index && !shouldReduceMotion ? {
|
||||
scale: [1, 1.2, 1],
|
||||
transition: { delay: i * 0.05, duration: 0.3 }
|
||||
} : {}}
|
||||
>
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<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" />
|
||||
</Box>
|
||||
))}
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
ml={1}
|
||||
color="text-gray-500"
|
||||
font="mono"
|
||||
weight="bold"
|
||||
>
|
||||
{league.rating}
|
||||
{league.drivers} DRIVERS
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-500"
|
||||
font="mono"
|
||||
weight="bold"
|
||||
>
|
||||
{league.schedule.toUpperCase()}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box display="flex" gap={2}>
|
||||
<Box
|
||||
as={motion.button}
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
|
||||
px={{ base: 1.5, sm: 2, md: 3 }}
|
||||
py={0.5}
|
||||
bg="bg-primary-blue"
|
||||
px={3}
|
||||
py={1}
|
||||
bg="primary-accent"
|
||||
color="text-white"
|
||||
rounded="sm"
|
||||
transition
|
||||
hoverBg="bg-primary-blue/80"
|
||||
rounded="none"
|
||||
>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
weight="bold"
|
||||
>
|
||||
Join
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
as={motion.button}
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
|
||||
px={{ base: 1.5, sm: 2, md: 3 }}
|
||||
py={0.5}
|
||||
bg="bg-charcoal-outline"
|
||||
color="text-gray-300"
|
||||
rounded="sm"
|
||||
transition
|
||||
hoverBg="bg-charcoal-outline/80"
|
||||
>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
View
|
||||
JOIN
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -17,47 +17,45 @@ export function LeagueHomeMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Stack gap={4}>
|
||||
<Box display="flex" alignItems="center" gap={3} mb={2}>
|
||||
<Box h="12" w="12" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/50" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" shadow="0_0_20px_rgba(25,140,255,0.3)">
|
||||
<Box h="12" w="12" rounded="none" border borderWidth="1px" borderColor="primary-accent/50" bg="panel-gray" display="flex" alignItems="center" justifyContent="center" className="relative">
|
||||
<Text size="2xl">🏆</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="base" weight="bold" color="text-white" block>Super GT</Text>
|
||||
<Text size="xs" color="text-gray-400" block>Round 8/12</Text>
|
||||
<Text size="base" weight="bold" color="text-white" block className="uppercase tracking-widest">Super GT</Text>
|
||||
<Text size="xs" color="text-gray-500" block font="mono">ROUND 8/12</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={3} block>Next Race</Text>
|
||||
<Box position="relative" display="flex" alignItems="center" gap={3} bg="bg-iron-gray" rounded="lg" p={3} border borderColor="border-charcoal-outline">
|
||||
<Box h="8" w="8" bg="bg-charcoal-outline" rounded border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="xs" weight="bold" color="text-gray-500" mb={3} block className="uppercase tracking-widest">Next Race</Text>
|
||||
<Box position="relative" display="flex" alignItems="center" gap={3} bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
|
||||
<Box h="8" w="8" bg="graphite-black" rounded="none" border borderColor="primary-accent/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="base">🏁</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Box h="2.5" w="28" bg="bg-white/10" rounded="sm" mb={2} />
|
||||
<Box h="2" w="20" bg="bg-white/5" rounded="sm" />
|
||||
<Box h="2" w="28" bg="white/10" rounded="none" mb={2} />
|
||||
<Box h="1.5" w="20" bg="white/5" rounded="none" />
|
||||
</Box>
|
||||
<Box w="2" h="2" bg="bg-primary-blue" rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="shadow-glow"
|
||||
/>
|
||||
<Box w="1.5" h="1.5" bg="primary-accent" rounded="full" className="animate-pulse" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={3} block>Latest Result</Text>
|
||||
<Box bg="bg-iron-gray" rounded="lg" p={3} border borderColor="border-charcoal-outline">
|
||||
<Box display="flex" alignItems="center" gap={3} py={2} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box h="2.5" w="6" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="2.5" flexGrow={1} bg="bg-white/10" rounded="sm" />
|
||||
<Box h="2.5" w="10" bg="bg-white/10" rounded="sm" />
|
||||
<Text size="xs" weight="bold" color="text-gray-500" mb={3} block className="uppercase tracking-widest">Latest Result</Text>
|
||||
<Box bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
|
||||
<Box display="flex" alignItems="center" gap={3} py={2} borderBottom borderColor="border-gray/30">
|
||||
<Box h="1.5" w="6" bg="white/10" rounded="none" />
|
||||
<Box h="1.5" flexGrow={1} bg="white/10" rounded="none" />
|
||||
<Box h="1.5" w="10" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={3} py={2}>
|
||||
<Box h="2" w="6" bg="bg-white/5" rounded="sm" />
|
||||
<Box h="2" flexGrow={1} bg="bg-white/5" rounded="sm" />
|
||||
<Box h="2" w="10" bg="bg-performance-green/20" rounded="sm" />
|
||||
<Box h="1.5" w="6" bg="white/5" rounded="none" />
|
||||
<Box h="1.5" flexGrow={1} bg="white/5" rounded="none" />
|
||||
<Box h="1.5" w="10" bg="success-green/20" rounded="none" />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -80,7 +78,7 @@ export function LeagueHomeMockup() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
variants={containerVariants}
|
||||
@@ -90,44 +88,27 @@ export function LeagueHomeMockup() {
|
||||
<Stack gap={{ base: 1.5, sm: 3, md: 4, lg: 6 }}>
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} mb={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box h={{ base: 8, sm: 10, md: 12, lg: 16 }} w={{ base: 8, sm: 10, md: 12, lg: 16 }} rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/50" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" shadow="0_0_20px_rgba(25,140,255,0.3)">
|
||||
<Box h={{ base: 8, sm: 10, md: 12, lg: 16 }} w={{ base: 8, sm: 10, md: 12, lg: 16 }} rounded="none" border borderWidth="1px" borderColor="primary-accent/50" bg="panel-gray" display="flex" alignItems="center" justifyContent="center" className="relative">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl', lg: '3xl' }}>🏆</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={2} fontSize={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" mb={0.5}>Super GT Championship</Heading>
|
||||
<Heading level={2} fontSize={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" mb={0.5} className="uppercase tracking-widest">Super GT Championship</Heading>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '9px' }}
|
||||
color="text-gray-400"
|
||||
color="text-gray-500"
|
||||
font="mono"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Season 3 • Round 8/12
|
||||
SEASON 3 • ROUND 8/12
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
mt={{ base: 1, sm: 1.5, md: 2 }}
|
||||
block
|
||||
>
|
||||
Your league's dedicated home page
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} block>Upcoming Races</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
mb={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Calendar automatically synced from iRacing
|
||||
</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-500" mb={{ base: 1.5, sm: 2, md: 3 }} block className="uppercase tracking-[0.2em]">Upcoming Races</Text>
|
||||
<Stack gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Box
|
||||
@@ -137,25 +118,23 @@ export function LeagueHomeMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
bg="panel-gray/40"
|
||||
rounded="none"
|
||||
p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
shadow="inset_0_1px_2px_rgba(0,0,0,0.2)"
|
||||
borderColor="border-gray/50"
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
y: -2,
|
||||
boxShadow: '0 4px 24px rgba(0,0,0,0.4), 0 0 20px rgba(25,140,255,0.3)',
|
||||
x: 4,
|
||||
borderColor: '#198CFF50',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
transition={{ type: 'spring', stiffness: 200, damping: 20 }}
|
||||
>
|
||||
<Box h={{ base: 6, sm: 7, md: 8, lg: 10 }} w={{ base: 6, sm: 7, md: 8, lg: 10 }} bg="bg-charcoal-outline" rounded border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box h={{ base: 6, sm: 7, md: 8, lg: 10 }} w={{ base: 6, sm: 7, md: 8, lg: 10 }} bg="graphite-black" rounded="none" border borderColor="primary-accent/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }}>🏁</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} w={{ base: 20, sm: 24, md: 28, lg: 32 }} bg="bg-white/10" rounded="sm" mb={{ base: 1, sm: 1.5, md: 2 }} />
|
||||
<Box h={{ base: 1, sm: 1.5, md: 2, lg: 2.5 }} w={{ base: 12, sm: 16, md: 20, lg: 24 }} bg="bg-white/5" rounded="sm" font="mono" />
|
||||
<Box h="1.5" w={i === 1 ? "32" : "24"} bg="white/10" rounded="none" mb={{ base: 1, sm: 1.5, md: 2 }} />
|
||||
<Box h="1" w="16" bg="white/5" rounded="none" />
|
||||
</Box>
|
||||
{i === 1 && (
|
||||
<Box
|
||||
@@ -163,19 +142,11 @@ export function LeagueHomeMockup() {
|
||||
position="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)'
|
||||
]
|
||||
opacity: [1, 0.4, 1]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<Box w={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} bg="bg-primary-blue" rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="shadow-glow"
|
||||
/>
|
||||
<Box w="1.5" h="1.5" bg="primary-accent" rounded="full" />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
@@ -184,28 +155,18 @@ export function LeagueHomeMockup() {
|
||||
</Box>
|
||||
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} block>Recent Results</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
mb={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Results appear instantly after each race
|
||||
</Text>
|
||||
<Box bg="bg-iron-gray" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} border borderColor="border-charcoal-outline" shadow="0_4px_24px_rgba(0,0,0,0.4)">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }} mb={{ base: 1.5, sm: 2, md: 3 }} pb={{ base: 1.5, sm: 2, md: 3 }} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 5, sm: 6, md: 8 }} bg="bg-white/10" rounded="sm" font="mono" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} flexGrow={1} bg="bg-white/10" rounded="sm" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-white/10" rounded="sm" font="mono" />
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-500" mb={{ base: 1.5, sm: 2, md: 3 }} block className="uppercase tracking-[0.2em]">Recent Results</Text>
|
||||
<Box bg="panel-gray/20" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} border borderColor="border-gray/50">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }} mb={{ base: 1.5, sm: 2, md: 3 }} pb={{ base: 1.5, sm: 2, md: 3 }} borderBottom borderColor="border-gray/30">
|
||||
<Box h="1" w="6" bg="white/10" rounded="none" />
|
||||
<Box h="1" flexGrow={1} bg="white/10" rounded="none" />
|
||||
<Box h="1" w="10" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
{[1, 2].map((i) => (
|
||||
<Box key={i} display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }} py={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 5, sm: 6, md: 8 }} bg="bg-white/5" rounded="sm" font="mono" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} flexGrow={1} bg="bg-white/5" rounded="sm" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-performance-green/20" rounded="sm" textAlign="center" font="mono" color="text-performance-green" />
|
||||
<Box h="1" w="6" bg="white/5" rounded="none" />
|
||||
<Box h="1" flexGrow={1} bg="white/5" rounded="none" />
|
||||
<Box h="1" w="10" bg={i === 1 ? "success-green/20" : "white/5"} rounded="none" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
@@ -30,7 +30,7 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
|
||||
return (
|
||||
<div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
|
||||
<div
|
||||
className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
|
||||
className="absolute rounded-none bg-panel-gray/80 border border-border-gray/50"
|
||||
style={{
|
||||
rotate: `${rotation1}deg`,
|
||||
zIndex: 1,
|
||||
@@ -44,7 +44,7 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
|
||||
className="absolute rounded-none bg-panel-gray/90 border border-border-gray/50"
|
||||
style={{
|
||||
rotate: `${rotation2}deg`,
|
||||
zIndex: 2,
|
||||
@@ -58,7 +58,7 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
|
||||
/>
|
||||
|
||||
<div
|
||||
className="relative z-10 w-full h-full rounded-lg overflow-hidden"
|
||||
className="relative z-10 w-full h-full rounded-none overflow-hidden border border-border-gray/30"
|
||||
style={{
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
|
||||
}}
|
||||
@@ -73,7 +73,7 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
|
||||
return (
|
||||
<div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
|
||||
<motion.div
|
||||
className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
|
||||
className="absolute rounded-none bg-panel-gray/80 border border-border-gray/50"
|
||||
style={{
|
||||
rotate: `${rotation1}deg`,
|
||||
zIndex: 1,
|
||||
@@ -89,7 +89,7 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
|
||||
className="absolute rounded-none bg-panel-gray/90 border border-border-gray/50"
|
||||
style={{
|
||||
rotate: `${rotation2}deg`,
|
||||
zIndex: 2,
|
||||
@@ -105,7 +105,7 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
className="relative z-10 w-full h-full rounded-lg overflow-hidden"
|
||||
className="relative z-10 w-full h-full rounded-none overflow-hidden border border-border-gray/30"
|
||||
style={{
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
|
||||
}}
|
||||
@@ -129,12 +129,12 @@ export function MockupStack({ children, index = 0 }: MockupStackProps) {
|
||||
transition={{ duration: 0.4, delay: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 pointer-events-none rounded-lg"
|
||||
className="absolute inset-0 pointer-events-none rounded-none"
|
||||
whileHover={
|
||||
shouldReduceMotion
|
||||
? {}
|
||||
: {
|
||||
boxShadow: '0 0 40px rgba(25, 140, 255, 0.4)',
|
||||
boxShadow: '0 0 40px rgba(25, 140, 255, 0.2)',
|
||||
transition: { duration: 0.2 },
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,35 +21,32 @@ export function ProtestWorkflowMockup() {
|
||||
{
|
||||
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 getStatusColor = (status: string) => {
|
||||
const getStatusStyles = (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';
|
||||
case 'pending': return 'bg-panel-gray border-gray-700 text-gray-600';
|
||||
case 'active': return 'bg-warning-amber/10 border-warning-amber text-warning-amber';
|
||||
case 'resolved': return 'bg-success-green/10 border-success-green text-success-green';
|
||||
default: return 'bg-panel-gray border-gray-700 text-gray-600';
|
||||
}
|
||||
};
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" overflow="hidden" p={3} display="flex" flexDirection="col" justifyContent="center" gap={4}>
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" overflow="hidden" p={3} display="flex" flexDirection="col" justifyContent="center" gap={4}>
|
||||
<Box display="flex" alignItems="center" justifyContent="center" gap={3}>
|
||||
{steps.map((step, i) => (
|
||||
<Box key={step.name} display="flex" alignItems="center">
|
||||
@@ -57,41 +54,36 @@ export function ProtestWorkflowMockup() {
|
||||
<Box
|
||||
w="10"
|
||||
h="10"
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
mb={1}
|
||||
border
|
||||
borderWidth="2px"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={getStatusColor(step.status)}
|
||||
borderWidth="1px"
|
||||
className={getStatusStyles(step.status)}
|
||||
>
|
||||
<Box as="svg" w="5" h="5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Text size="xs" color="text-white" opacity={0.7} textAlign="center">{step.name}</Text>
|
||||
<Text size="xs" color="text-white" weight="bold" textAlign="center" className="uppercase tracking-widest">{step.name}</Text>
|
||||
</Box>
|
||||
{i < steps.length - 1 && (
|
||||
<Box as="svg" w="4" h="4" mx={1} viewBox="0 0 24 24" fill="none">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path d="M5 12h14m-7-7l7 7-7 7" stroke="#43C9E6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M5 12h14m-7-7l7 7-7 7" stroke="#198CFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box position="relative" h="1" bg="bg-charcoal-outline" rounded="full" overflow="hidden">
|
||||
<Box position="relative" h="1" bg="white/5" rounded="none" overflow="hidden">
|
||||
<Box
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
bg="bg-gradient-to-r from-neon-aqua to-primary-blue"
|
||||
rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
bg="primary-accent"
|
||||
style={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
|
||||
/>
|
||||
</Box>
|
||||
@@ -100,21 +92,19 @@ export function ProtestWorkflowMockup() {
|
||||
}
|
||||
|
||||
const stepVariants = {
|
||||
hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.8 },
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
|
||||
visible: (i: number) => ({
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : i * 0.2,
|
||||
type: 'spring' as const,
|
||||
stiffness: 200,
|
||||
damping: 20
|
||||
duration: 0.4
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" overflow="hidden" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} display="flex" flexDirection="col" justifyContent="center" gap={{ base: 2, sm: 4, md: 6, lg: 8 }}>
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" overflow="hidden" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} display="flex" flexDirection="col" justifyContent="center" gap={{ base: 2, sm: 4, md: 6, lg: 8 }}>
|
||||
<Box display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems="center" justifyContent="center" gap={{ base: 2, sm: 3, md: 4 }}>
|
||||
{steps.map((step, i) => (
|
||||
<Box key={step.name} display="flex" alignItems="center" flexShrink={0}>
|
||||
@@ -134,84 +124,48 @@ export function ProtestWorkflowMockup() {
|
||||
position="relative"
|
||||
w={{ base: 8, sm: 10, md: 12, lg: 14 }}
|
||||
h={{ base: 8, sm: 10, md: 12, lg: 14 }}
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
mb={{ base: 1, sm: 1.5, md: 2 }}
|
||||
border
|
||||
borderWidth="2px"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={getStatusColor(step.status)}
|
||||
borderWidth="1px"
|
||||
className={getStatusStyles(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)',
|
||||
scale: 1.05,
|
||||
borderColor: '#198CFF',
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
transition={{ type: 'spring', stiffness: 300, damping: 15 }}
|
||||
>
|
||||
<Box as="svg" w={{ base: 4, sm: 5, md: 6, lg: 7 }} h={{ base: 4, sm: 5, md: 6, lg: 7 }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={step.icon} />
|
||||
</Box>
|
||||
{step.status === 'active' && (
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
inset="0"
|
||||
rounded="lg"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
boxShadow: [
|
||||
'0 0 20px rgba(25,140,255,0.3)',
|
||||
'0 0 32px rgba(255,197,86,0.5)',
|
||||
'0 0 20px rgba(25,140,255,0.3)'
|
||||
]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
/>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="warning-amber" />
|
||||
)}
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
weight="bold"
|
||||
textAlign="center"
|
||||
mb={0.5}
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
{step.name}
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.div}
|
||||
h={{ base: 0.5, sm: 1, md: 1.5 }}
|
||||
w={{ base: 6, sm: 8, md: 10, lg: 12 }}
|
||||
rounded="sm"
|
||||
bg={
|
||||
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 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{i < steps.length - 1 && (
|
||||
<Box
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="hidden md:block"
|
||||
position="relative"
|
||||
ml={1}
|
||||
ml={2}
|
||||
mr={2}
|
||||
>
|
||||
<Box as="svg" w={{ base: 3, sm: 4, md: 5 }} h={{ base: 3, sm: 4, md: 5 }} viewBox="0 0 24 24" fill="none">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path d="M5 12h14m-7-7l7 7-7 7" stroke="#43C9E6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M5 12h14m-7-7l7 7-7 7" stroke="#198CFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity={0.5} />
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
@@ -225,9 +179,9 @@ export function ProtestWorkflowMockup() {
|
||||
animate={{ opacity: 1, scaleX: 1 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : 0.8, duration: 0.6 }}
|
||||
position="relative"
|
||||
h={{ base: 0.5, md: 1 }}
|
||||
bg="bg-charcoal-outline"
|
||||
rounded="full"
|
||||
h="1"
|
||||
bg="white/5"
|
||||
rounded="none"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Box
|
||||
@@ -235,8 +189,7 @@ export function ProtestWorkflowMockup() {
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
bg="bg-gradient-to-r from-neon-aqua to-primary-blue"
|
||||
rounded="full"
|
||||
bg="primary-accent"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
|
||||
@@ -26,7 +26,7 @@ export function RaceHistoryMockup() {
|
||||
// Simple, elegant mobile version - just the core story
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite to-iron-gray" rounded="lg" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial="hidden"
|
||||
@@ -40,14 +40,14 @@ export function RaceHistoryMockup() {
|
||||
<Stack gap={4}>
|
||||
{/* Race result - clean and simple */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray/60" rounded="xl" p={4} border borderWidth="2px" borderColor="border-primary-blue/40">
|
||||
<Box bg="panel-gray/60" rounded="none" p={4} border borderWidth="1px" borderColor="primary-accent/40">
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box h="14" w="14" bg="bg-primary-blue/20" rounded="lg" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
|
||||
<Text size="2xl" weight="bold" color="text-primary-blue">P3</Text>
|
||||
<Box h="14" w="14" bg="primary-accent/10" rounded="none" display="flex" alignItems="center" justifyContent="center" flexShrink={0} border borderColor="primary-accent/30">
|
||||
<Text size="2xl" weight="bold" color="text-primary-accent" font="mono">P3</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="base" weight="semibold" color="text-white" block>Watkins Glen</Text>
|
||||
<Text size="xs" color="text-white" opacity={0.6} block>GT3 Sprint</Text>
|
||||
<Text size="base" weight="bold" color="text-white" block className="uppercase tracking-widest">Watkins Glen</Text>
|
||||
<Text size="xs" color="text-gray-500" block font="mono">GT3 SPRINT</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -55,30 +55,32 @@ export function RaceHistoryMockup() {
|
||||
|
||||
{/* Simple arrow */}
|
||||
<Box as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
|
||||
<Text color="text-primary-blue" size="2xl">↓</Text>
|
||||
<Text color="text-primary-accent" size="2xl">↓</Text>
|
||||
</Box>
|
||||
|
||||
{/* Updates - minimal */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray/40" rounded="xl" p={3} border borderColor="border-charcoal-outline">
|
||||
<Box bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
|
||||
<Stack gap={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
color="text-gray-500"
|
||||
textAlign="center"
|
||||
mb={2}
|
||||
block
|
||||
font="mono"
|
||||
uppercase
|
||||
className="tracking-widest"
|
||||
>
|
||||
Profile Updated
|
||||
</Text>
|
||||
<Box display="flex" gap={2}>
|
||||
<Box flexGrow={1} bg="bg-deep-graphite/50" rounded="sm" py={2} textAlign="center" border borderColor="border-primary-blue/30">
|
||||
<Text size="xs" color="text-primary-blue" weight="semibold" block>Stats ↑</Text>
|
||||
<Box flexGrow={1} bg="graphite-black" rounded="none" py={2} textAlign="center" border borderColor="primary-accent/30">
|
||||
<Text size="xs" color="text-primary-accent" weight="bold" block font="mono">STATS ↑</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} bg="bg-deep-graphite/50" rounded="sm" py={2} textAlign="center" border borderColor="border-performance-green/30">
|
||||
<Text size="xs" color="text-performance-green" weight="semibold" block>+12</Text>
|
||||
<Box flexGrow={1} bg="graphite-black" rounded="none" py={2} textAlign="center" border borderColor="success-green/30">
|
||||
<Text size="xs" color="text-success-green" weight="bold" block font="mono">+12</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
@@ -92,7 +94,7 @@ export function RaceHistoryMockup() {
|
||||
|
||||
// Desktop version - richer with more updates
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial="hidden"
|
||||
@@ -104,60 +106,43 @@ export function RaceHistoryMockup() {
|
||||
<Stack gap={{ base: 2, sm: 3, md: 4, lg: 5 }}>
|
||||
{/* Race Result Card - Enhanced */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray" rounded="lg" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderWidth="2px" borderColor="border-primary-blue/40">
|
||||
<Box bg="panel-gray/40" rounded="none" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderWidth="1px" borderColor="primary-accent/40">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
|
||||
<Box position="relative" h={{ base: 12, sm: 14, md: 16, lg: 20 }} w={{ base: 12, sm: 14, md: 16, lg: 20 }} bg="bg-charcoal-outline" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" overflow="hidden" flexShrink={0}>
|
||||
<Box position="absolute" inset="0" bg="bg-gradient-to-br from-primary-blue/20 to-performance-green/20" />
|
||||
<Box position="relative" h={{ base: 12, sm: 14, md: 16, lg: 20 }} w={{ base: 12, sm: 14, md: 16, lg: 20 }} bg="graphite-black" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" overflow="hidden" flexShrink={0}>
|
||||
<Box position="absolute" inset="0" bg="gradient-to-br from-primary-accent/10 to-success-green/10" />
|
||||
<Box position="absolute" inset="0" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text color="text-white" size={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} weight="bold">P3</Text>
|
||||
<Text color="text-white" size={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} weight="bold" font="mono">P3</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }} mb={1}>
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg' }}>🏁</Text>
|
||||
<Heading level={3} fontSize={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="semibold" color="text-white" truncate>Watkins Glen</Heading>
|
||||
<Box w="1" h="4" bg="primary-accent" />
|
||||
<Heading level={3} fontSize={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" truncate className="uppercase tracking-widest">Watkins Glen</Heading>
|
||||
</Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} color="text-white" opacity={0.6} mb={1} block>GT3 Sprint Race</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} color="text-gray-500" mb={1} block font="mono">GT3 SPRINT RACE</Text>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
color="text-gray-600"
|
||||
font="mono"
|
||||
>
|
||||
24 drivers
|
||||
24 DRIVERS
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
color="text-gray-600"
|
||||
>
|
||||
•
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
color="text-gray-600"
|
||||
font="mono"
|
||||
>
|
||||
45 min
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
>
|
||||
•
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
>
|
||||
Just finished
|
||||
45 MIN
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -178,12 +163,13 @@ export function RaceHistoryMockup() {
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<Text color="text-primary-blue" size={{ base: '2xl', sm: '3xl', md: '4xl' }}>↓</Text>
|
||||
<Text color="text-primary-accent" size={{ base: '2xl', sm: '3xl', md: '4xl' }}>↓</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-primary-blue"
|
||||
opacity={0.7}
|
||||
color="text-primary-accent"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Auto-sync
|
||||
</Text>
|
||||
@@ -192,27 +178,28 @@ export function RaceHistoryMockup() {
|
||||
|
||||
{/* Profile Updates Grid - More detailed */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Box bg="bg-iron-gray/80" rounded="lg" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderColor="border-charcoal-outline">
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" opacity={0.8} textAlign="center" mb={{ base: 2, sm: 3, md: 4 }} block>
|
||||
<Box bg="panel-gray/20" rounded="none" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderColor="border-gray/50">
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="bold" color="text-gray-500" textAlign="center" mb={{ base: 2, sm: 3, md: 4 }} block className="uppercase tracking-[0.2em]">
|
||||
Profile Updates
|
||||
</Text>
|
||||
|
||||
<Box display="grid" gridCols={2} gap={{ base: 2, sm: 3, md: 4 }}>
|
||||
{/* Career Stats Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-primary-blue/30">
|
||||
<Box bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="primary-accent/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
color="text-gray-500"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Career Stats
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-performance-green"
|
||||
weight="semibold"
|
||||
color="text-success-green"
|
||||
weight="bold"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
animate={shouldReduceMotion ? {} : { scale: [1, 1.2, 1] }}
|
||||
@@ -227,26 +214,28 @@ export function RaceHistoryMockup() {
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Wins: 24 → 25
|
||||
WINS: 24 → 25
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Rating Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-performance-green/30">
|
||||
<Box bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="success-green/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
color="text-gray-500"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Rating
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-performance-green"
|
||||
weight="semibold"
|
||||
color="text-success-green"
|
||||
weight="bold"
|
||||
font="mono"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
@@ -262,26 +251,28 @@ export function RaceHistoryMockup() {
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
1342 → 1354
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Season Points Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-warning-amber/30">
|
||||
<Box bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="warning-amber/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
color="text-gray-500"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Season
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-warning-amber"
|
||||
weight="semibold"
|
||||
weight="bold"
|
||||
font="mono"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
@@ -297,26 +288,28 @@ export function RaceHistoryMockup() {
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
248 → 266 pts
|
||||
248 → 266 PTS
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Team Points Update */}
|
||||
<Box bg="bg-deep-graphite/50" rounded="lg" p={{ base: 2, sm: 3, md: 4 }} border borderColor="border-neon-aqua/30">
|
||||
<Box bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="telemetry-aqua/30">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.7}
|
||||
color="text-gray-500"
|
||||
weight="bold"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Team
|
||||
</Text>
|
||||
<Box
|
||||
as={motion.span}
|
||||
color="text-neon-aqua"
|
||||
weight="semibold"
|
||||
color="text-telemetry-aqua"
|
||||
weight="bold"
|
||||
font="mono"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
@@ -332,8 +325,9 @@ export function RaceHistoryMockup() {
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Contributing
|
||||
CONTRIBUTING
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -18,30 +18,30 @@ export function SimPlatformMockup() {
|
||||
// Simple mobile version - just the essence of cross-platform
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite to-iron-gray" rounded="lg" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Stack gap={3} w="full">
|
||||
{/* Active Platform - Clean */}
|
||||
<Box bg="bg-iron-gray/60" border borderWidth="2px" borderColor="border-primary-blue" rounded="xl" p={4} position="relative">
|
||||
<Box bg="panel-gray/60" border borderWidth="1px" borderColor="primary-accent" rounded="none" p={4} position="relative">
|
||||
<Box position="absolute" top="3" right="3">
|
||||
<Box w="2" h="2" rounded="full" bg="bg-performance-green"
|
||||
<Box w="1.5" h="1.5" rounded="full" bg="success-green"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="animate-pulse"
|
||||
/>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box w="12" h="12" rounded="lg" bg="bg-primary-blue/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
|
||||
<Text size="2xl" weight="bold" color="text-primary-blue">iR</Text>
|
||||
<Box w="12" h="12" rounded="none" bg="primary-accent/10" display="flex" alignItems="center" justifyContent="center" flexShrink={0} border borderColor="primary-accent/30">
|
||||
<Text size="2xl" weight="bold" color="text-primary-accent" font="mono">iR</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="base" weight="semibold" color="text-white" block>iRacing</Text>
|
||||
<Text size="xs" color="text-performance-green" block>Active</Text>
|
||||
<Text size="base" weight="bold" color="text-white" block className="uppercase tracking-widest">iRacing</Text>
|
||||
<Text size="xs" color="text-success-green" block font="mono">ACTIVE</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Simple "more coming" indicator */}
|
||||
<Box bg="bg-iron-gray/30" rounded="xl" p={3} border borderColor="border-charcoal-outline/50">
|
||||
<Text size="xs" textAlign="center" color="text-slate-500" block>More platforms coming</Text>
|
||||
<Box bg="panel-gray/20" rounded="none" p={3} border borderStyle="dashed" borderColor="border-gray/30">
|
||||
<Text size="xs" textAlign="center" color="text-gray-600" block font="mono" uppercase tracking-widest>More platforms coming</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
@@ -51,150 +51,161 @@ export function SimPlatformMockup() {
|
||||
// Desktop version
|
||||
return (
|
||||
<Box position="relative" fullWidth maxWidth="3xl" mx="auto">
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} shadow="2xl">
|
||||
<Box bg="panel-gray/40" border borderColor="border-gray/50" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} shadow="2xl">
|
||||
<Stack gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" pb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderBottom borderColor="border-charcoal-outline">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-300">Platform Support</Text>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" pb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderBottom borderColor="border-gray/30">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-400" className="uppercase tracking-widest">Platform Support</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-500"
|
||||
color="text-gray-600"
|
||||
font="mono"
|
||||
>
|
||||
Active: 1 | Planned: 3
|
||||
ACTIVE: 1 | PLANNED: 3
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
{/* iRacing - Active */}
|
||||
<Box bg="bg-deep-graphite" border borderWidth="2px" borderColor="border-primary-blue" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} position="relative" overflow="hidden">
|
||||
<Box bg="graphite-black" border borderWidth="1px" borderColor="primary-accent/40" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} position="relative" overflow="hidden">
|
||||
<Box position="absolute" top={{ base: 1, sm: 1.5, md: 2 }} right={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box w={{ base: 1, sm: 1.5, md: 2 }} h={{ base: 1, sm: 1.5, md: 2 }} rounded="full" bg="bg-performance-green"
|
||||
<Box w="1.5" h="1.5" rounded="full" bg="success-green"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="animate-pulse"
|
||||
/>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-primary-blue/10" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-primary-blue">iR</Text>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="primary-accent/10" display="flex" alignItems="center" justifyContent="center" border borderColor="primary-accent/20">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-primary-accent" font="mono">iR</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" block>iRacing</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="bold" color="text-white" block className="uppercase tracking-widest">iRacing</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-performance-green"
|
||||
color="text-success-green"
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Active
|
||||
ACTIVE
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-400"
|
||||
color="text-gray-500"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Full integration
|
||||
FULL INTEGRATION
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* ACC - Future */}
|
||||
<Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
|
||||
<Box bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">AC</Text>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-gray-700" font="mono">AC</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>ACC</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-600" block className="uppercase tracking-widest">ACC</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
color="text-gray-700"
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Planned
|
||||
PLANNED
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
color="text-gray-700"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Coming later
|
||||
COMING LATER
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* rFactor 2 - Future */}
|
||||
<Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
|
||||
<Box bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">rF</Text>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-gray-700" font="mono">rF</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>rFactor 2</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-600" block className="uppercase tracking-widest">rFactor 2</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
color="text-gray-700"
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Planned
|
||||
PLANNED
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
color="text-gray-700"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Coming later
|
||||
COMING LATER
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* LMU - Future */}
|
||||
<Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
|
||||
<Box bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">LM</Text>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-gray-700" font="mono">LM</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>Le Mans Ult.</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-600" block className="uppercase tracking-widest">Le Mans Ult.</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
color="text-gray-700"
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Planned
|
||||
PLANNED
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
color="text-gray-700"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
font="mono"
|
||||
>
|
||||
Coming later
|
||||
COMING LATER
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box pt={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderTop borderColor="border-charcoal-outline">
|
||||
<Box pt={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderTop borderStyle="dashed" borderColor="border-gray/30">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-500"
|
||||
color="text-gray-600"
|
||||
textAlign="center"
|
||||
block
|
||||
font="mono"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Your identity stays with you across platforms
|
||||
</Text>
|
||||
|
||||
@@ -17,30 +17,30 @@ export function StandingsTableMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Box mb={3}>
|
||||
<Box display="flex" alignItems="center" gap={2} pb={2} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box display="flex" alignItems="center" gap={2} pb={2} borderBottom borderColor="border-gray/30">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
color="text-gray-600"
|
||||
>
|
||||
#
|
||||
POS
|
||||
</Text>
|
||||
<Text size="xs" flexGrow={1} weight="semibold" color="text-white">Driver</Text>
|
||||
<Text size="xs" flexGrow={1} weight="bold" color="text-gray-500" className="uppercase tracking-widest">Driver</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
color="text-gray-600"
|
||||
>
|
||||
Pts
|
||||
PTS
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack gap={2}>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -49,49 +49,41 @@ export function StandingsTableMockup() {
|
||||
gap={2}
|
||||
py={2}
|
||||
px={2}
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
border
|
||||
bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray' : 'bg-iron-gray'}
|
||||
borderColor={i <= 3 ? 'border-performance-green/20' : 'border-charcoal-outline'}
|
||||
bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
|
||||
borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
|
||||
>
|
||||
<Box
|
||||
h="7"
|
||||
w="7"
|
||||
rounded="full"
|
||||
h="6"
|
||||
w="6"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
weight="semibold"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
bg={i <= 3 ? 'bg-primary-blue' : 'bg-charcoal-outline'}
|
||||
color={i <= 3 ? 'text-white' : 'text-gray-400'}
|
||||
shadow={i <= 3 ? '0_0_12px_rgba(25,140,255,0.3)' : undefined}
|
||||
style={{ fontSize: '10px' }}
|
||||
bg={i <= 3 ? 'primary-accent' : 'panel-gray'}
|
||||
color={i <= 3 ? 'text-white' : 'text-gray-500'}
|
||||
font="mono"
|
||||
weight="bold"
|
||||
>
|
||||
{i}
|
||||
</Box>
|
||||
<Box flexGrow={1} display="flex" alignItems="center" gap={2}>
|
||||
<Box h="5" w="5" rounded="full" bg="bg-charcoal-outline" border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
>
|
||||
🏎️
|
||||
</Text>
|
||||
</Box>
|
||||
<Box h="2.5" fullWidth maxWidth="100px" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1.5" fullWidth maxWidth="80px" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Box position="relative" w="16" h="5" bg="bg-charcoal-outline" rounded="sm" border borderColor="border-primary-blue/20" overflow="hidden">
|
||||
<Box position="relative" w="12" h="4" bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
|
||||
<Box
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20' : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'}
|
||||
bg={i <= 3 ? 'primary-accent/40' : 'gray-700/40'}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ width: `${100 - (i - 1) * 15}%` }}
|
||||
/>
|
||||
<Box position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="xs" font="mono" weight="semibold" color="text-white">
|
||||
<Text size="xs" font="mono" weight="bold" color="text-white">
|
||||
{300 - i * 20}
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -104,47 +96,48 @@ export function StandingsTableMockup() {
|
||||
}
|
||||
|
||||
const getRowAnimation = (i: number) => ({
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -10 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
x: 0,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : i * 0.05,
|
||||
type: 'spring' as const,
|
||||
stiffness: 300,
|
||||
damping: 24
|
||||
duration: 0.3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
|
||||
<Box mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
color="text-gray-600"
|
||||
mb={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
font="mono"
|
||||
uppercase
|
||||
className="tracking-widest"
|
||||
>
|
||||
Real-time standings updated after every race
|
||||
</Text>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} pb={{ base: 1.5, sm: 2, md: 3 }} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} pb={{ base: 1.5, sm: 2, md: 3 }} borderBottom borderColor="border-gray/30">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
color="text-gray-500"
|
||||
>
|
||||
#
|
||||
POS
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
flexGrow={1}
|
||||
weight="semibold"
|
||||
color="text-white"
|
||||
weight="bold"
|
||||
color="text-gray-400"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Driver
|
||||
</Text>
|
||||
@@ -152,9 +145,8 @@ export function StandingsTableMockup() {
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="hidden md:block"
|
||||
color="text-gray-500"
|
||||
className="hidden md:block uppercase tracking-widest"
|
||||
>
|
||||
Wins
|
||||
</Text>
|
||||
@@ -163,21 +155,16 @@ export function StandingsTableMockup() {
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
color="text-gray-400"
|
||||
color="text-gray-500"
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
Points
|
||||
</Text>
|
||||
<Text color="text-performance-green"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
>
|
||||
●
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack gap={0.5}>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -189,18 +176,18 @@ export function StandingsTableMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
py={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }}
|
||||
py={{ base: 1.5, sm: 2, md: 2.5 }}
|
||||
px={{ base: 1.5, sm: 2, md: 3 }}
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
border
|
||||
transition
|
||||
bg={i <= 3 ? 'bg-gradient-to-r from-performance-green/10 to-iron-gray' : 'bg-iron-gray'}
|
||||
borderColor={i <= 3 ? 'border-performance-green/20' : 'border-charcoal-outline'}
|
||||
bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
|
||||
borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredRow(i)}
|
||||
onHoverEnd={() => setHoveredRow(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.01,
|
||||
boxShadow: '0 0 20px rgba(25,140,255,0.3)',
|
||||
x: 4,
|
||||
borderColor: '#198CFF30',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
@@ -208,30 +195,23 @@ export function StandingsTableMockup() {
|
||||
as={motion.div}
|
||||
h={{ base: 6, sm: 7 }}
|
||||
w={{ base: 6, sm: 7 }}
|
||||
rounded="full"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
weight="semibold"
|
||||
weight="bold"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '12px' }}
|
||||
bg={i <= 3 ? 'bg-primary-blue' : 'bg-charcoal-outline'}
|
||||
color={i <= 3 ? 'text-white' : 'text-gray-400'}
|
||||
animate={
|
||||
shouldReduceMotion ? {} : i <= 3 && hoveredRow === i
|
||||
? { scale: 1.15, boxShadow: '0 0 28px rgba(25,140,255,0.5)' }
|
||||
: {}
|
||||
}
|
||||
style={{ fontSize: '11px' }}
|
||||
bg={i <= 3 ? 'primary-accent' : 'panel-gray'}
|
||||
color={i <= 3 ? 'text-white' : 'text-gray-500'}
|
||||
font="mono"
|
||||
>
|
||||
{i}
|
||||
</Box>
|
||||
<Box flexGrow={1} display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box h={{ base: 4, sm: 5, md: 6 }} w={{ base: 4, sm: 5, md: 6 }} rounded="full" bg="bg-charcoal-outline" border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }}>🏎️</Text>
|
||||
</Box>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1.5" fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} w={{ base: 10, sm: 12, md: 16 }} bg="bg-white/5" rounded="sm" font="mono"
|
||||
<Box h="1" w={{ base: 10, sm: 12, md: 16 }} bg="white/5" rounded="none"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="hidden md:block"
|
||||
/>
|
||||
@@ -272,13 +252,13 @@ function AnimatedPoints({
|
||||
const percentage = (points / 300) * 100;
|
||||
|
||||
return (
|
||||
<Box position="relative" w={{ base: 12, sm: 16, md: 20, lg: 24 }} h={{ base: 4, sm: 5, md: 6, lg: 7 }} bg="bg-charcoal-outline" rounded="sm" border borderColor="border-primary-blue/20" overflow="hidden">
|
||||
<Box position="relative" w={{ base: 12, sm: 16, md: 20, lg: 24 }} h={{ base: 4, sm: 5, md: 6 }} bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
bg={position <= 3 ? 'bg-gradient-to-r from-performance-green/40 to-performance-green/20' : 'bg-gradient-to-r from-iron-gray to-charcoal-outline'}
|
||||
bg={position <= 3 ? 'primary-accent/40' : 'gray-700/40'}
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${percentage}%` }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.8, ease: 'easeOut', delay: 0.1 + position * 0.05 }}
|
||||
@@ -288,7 +268,7 @@ function AnimatedPoints({
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
font="mono"
|
||||
weight="semibold"
|
||||
weight="bold"
|
||||
color="text-white"
|
||||
>
|
||||
{shouldReduceMotion ? points : <Box as={motion.span}>{spring}</Box>}
|
||||
|
||||
@@ -16,15 +16,15 @@ export function TeamCompetitionMockup() {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
}, []);
|
||||
|
||||
const teamColors = ['#198CFF', '#6FE37A', '#FFC556', '#43C9E6', '#9333EA'];
|
||||
const teamColors = ['#198CFF', '#6FE37A', '#FFBE4D', '#4ED4E0', '#9333EA'];
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Stack gap={4}>
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={3} block>Drivers</Text>
|
||||
<Stack gap={2}>
|
||||
<Text size="xs" weight="bold" color="text-gray-500" mb={3} block className="uppercase tracking-widest">Drivers</Text>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -32,11 +32,11 @@ export function TeamCompetitionMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={2}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
bg="panel-gray/40"
|
||||
rounded="none"
|
||||
p={2}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
borderColor="border-gray/20"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Box
|
||||
@@ -44,54 +44,40 @@ export function TeamCompetitionMockup() {
|
||||
left="0"
|
||||
top="0"
|
||||
bottom="0"
|
||||
w="1"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
w="0.5"
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
/>
|
||||
<Box
|
||||
h="5"
|
||||
w="5"
|
||||
rounded="full"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
weight="semibold"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
weight="bold"
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
borderColor: teamColors[i-1],
|
||||
backgroundColor: `${teamColors[i-1]}20`,
|
||||
borderWidth: '2px'
|
||||
backgroundColor: `${teamColors[i-1]}10`,
|
||||
borderWidth: '1px'
|
||||
}}
|
||||
>
|
||||
<Text color="text-white">{i}</Text>
|
||||
</Box>
|
||||
<Box h="6" w="6" rounded="full" display="flex" alignItems="center" justifyContent="center"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ backgroundColor: `${teamColors[i-1]}20`, borderWidth: '1px', borderColor: teamColors[i-1], fontSize: '14px' }}
|
||||
>
|
||||
<Text>🏎️</Text>
|
||||
<Text color="text-white" font="mono">{i}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Box h="2.5" w="full" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1.5" w="full" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Box h="3" w="10" bg="bg-charcoal-outline" rounded="sm" display="flex" alignItems="center" justifyContent="center" color="text-white" opacity={0.7}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
/>
|
||||
<Box h="3" w="10" bg="graphite-black" rounded="none" border borderColor="border-gray/30" />
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box h="px"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="bg-gradient-to-r from-transparent via-charcoal-outline to-transparent"
|
||||
/>
|
||||
<Box h="px" bg="border-gray/30" />
|
||||
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={3} block>Constructors</Text>
|
||||
<Stack gap={2}>
|
||||
<Text size="xs" weight="bold" color="text-gray-500" mb={3} block className="uppercase tracking-widest">Constructors</Text>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -99,11 +85,11 @@ export function TeamCompetitionMockup() {
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={2}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
bg="panel-gray/40"
|
||||
rounded="none"
|
||||
p={2}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
borderColor="border-gray/20"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Box
|
||||
@@ -111,37 +97,16 @@ export function TeamCompetitionMockup() {
|
||||
left="0"
|
||||
top="0"
|
||||
bottom="0"
|
||||
w="1"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
w="0.5"
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
/>
|
||||
<Box
|
||||
h="6"
|
||||
w="6"
|
||||
rounded="sm"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
border
|
||||
borderWidth="2px"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{
|
||||
borderColor: teamColors[i-1],
|
||||
backgroundColor: `${teamColors[i-1]}20`,
|
||||
fontSize: '14px'
|
||||
}}
|
||||
>
|
||||
<Text>🏁</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Box h="2.5" w="full" bg="bg-white/10" rounded="sm" mb={1} />
|
||||
<Box position="relative" h="1.5" bg="bg-charcoal-outline" rounded="full" overflow="hidden">
|
||||
<Box h="1.5" w="full" bg="white/10" rounded="none" mb={1.5} />
|
||||
<Box position="relative" h="1" bg="graphite-black" rounded="none" overflow="hidden">
|
||||
<Box
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ backgroundColor: teamColors[i-1], width: `${100 - (i-1) * 15}%` }}
|
||||
/>
|
||||
</Box>
|
||||
@@ -160,11 +125,7 @@ export function TeamCompetitionMockup() {
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
type: 'spring' as const,
|
||||
stiffness: 100,
|
||||
damping: 20
|
||||
}
|
||||
transition: { duration: 0.4 }
|
||||
}
|
||||
};
|
||||
|
||||
@@ -173,30 +134,24 @@ export function TeamCompetitionMockup() {
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
type: 'spring' as const,
|
||||
stiffness: 100,
|
||||
damping: 20
|
||||
}
|
||||
transition: { duration: 0.4 }
|
||||
}
|
||||
};
|
||||
|
||||
const rowVariants = {
|
||||
hidden: { opacity: 0, scale: shouldReduceMotion ? 1 : 0.95 },
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -10 },
|
||||
visible: (i: number) => ({
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
delay: shouldReduceMotion ? 0 : 0.3 + i * 0.05,
|
||||
type: 'spring' as const,
|
||||
stiffness: 300,
|
||||
damping: 25
|
||||
duration: 0.3
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
|
||||
<Box display="grid" gridCols={2} gap={{ base: 2, sm: 3, md: 4, lg: 6 }} fullHeight>
|
||||
<Box
|
||||
as={motion.div}
|
||||
@@ -205,17 +160,10 @@ export function TeamCompetitionMockup() {
|
||||
animate="visible"
|
||||
position="relative"
|
||||
>
|
||||
<Box h={{ base: 3, sm: 4, md: 5 }} w={{ base: 16, sm: 20, md: 24 }} bg="bg-white/10" rounded="sm" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} display="flex" alignItems="center" justifyContent="center">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
weight="semibold"
|
||||
>
|
||||
Drivers
|
||||
</Text>
|
||||
<Box h="6" w="24" bg="panel-gray" rounded="none" mb={4} display="flex" alignItems="center" justifyContent="center" border borderColor="border-gray/30">
|
||||
<Text size="xs" color="text-gray-400" weight="bold" className="uppercase tracking-widest">DRIVERS</Text>
|
||||
</Box>
|
||||
<Stack gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -227,18 +175,18 @@ export function TeamCompetitionMockup() {
|
||||
position="relative"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
p={{ base: 1, sm: 1.5, md: 2, lg: 2.5 }}
|
||||
gap={3}
|
||||
bg="panel-gray/20"
|
||||
rounded="none"
|
||||
p={2}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
borderColor="border-gray/20"
|
||||
overflow="hidden"
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredDriver(i)}
|
||||
onHoverEnd={() => setHoveredDriver(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.02,
|
||||
boxShadow: `0 0 20px ${teamColors[i-1]}40`,
|
||||
x: 4,
|
||||
borderColor: `${teamColors[i-1]}40`,
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
@@ -248,65 +196,35 @@ export function TeamCompetitionMockup() {
|
||||
top="0"
|
||||
bottom="0"
|
||||
w="0.5"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
/>
|
||||
<Box
|
||||
h={{ base: 3.5, sm: 4, md: 5 }}
|
||||
w={{ base: 3.5, sm: 4, md: 5 }}
|
||||
rounded="full"
|
||||
h="5"
|
||||
w="5"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
weight="semibold"
|
||||
weight="bold"
|
||||
border
|
||||
borderWidth="2px"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
borderWidth="1px"
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
borderColor: teamColors[i-1],
|
||||
backgroundColor: `${teamColors[i-1]}20`
|
||||
backgroundColor: `${teamColors[i-1]}10`
|
||||
}}
|
||||
>
|
||||
<Text color="text-white">{i}</Text>
|
||||
</Box>
|
||||
<Box h={{ base: 5, sm: 6, md: 7 }} w={{ base: 5, sm: 6, md: 7 }} rounded="full" display="flex" alignItems="center" justifyContent="center"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ backgroundColor: `${teamColors[i-1]}20`, borderWidth: '1px', borderColor: teamColors[i-1], fontSize: '12px' }}
|
||||
>
|
||||
<Text>🏎️</Text>
|
||||
<Text color="text-white" font="mono">{i}</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w="full" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1.5" w="full" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
<Box h={{ base: 2, sm: 2.5, md: 3 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-charcoal-outline" rounded="sm" font="mono" display="flex" alignItems="center" justifyContent="center" color="text-white" opacity={0.7}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
/>
|
||||
{hoveredDriver === i && (
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
inset="0"
|
||||
pointerEvents="none"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${teamColors[i-1]}10 0%, transparent 100%)`
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box h="3" w="12" bg="graphite-black" rounded="none" border borderColor="border-gray/30" />
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box position="absolute" left="1/2" top="8" bottom="8" w="px"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="bg-gradient-to-b from-transparent via-charcoal-outline to-transparent backdrop-blur-sm"
|
||||
/>
|
||||
|
||||
<Box
|
||||
as={motion.div}
|
||||
variants={rightColumnVariants}
|
||||
@@ -314,17 +232,10 @@ export function TeamCompetitionMockup() {
|
||||
animate="visible"
|
||||
position="relative"
|
||||
>
|
||||
<Box h={{ base: 3, sm: 4, md: 5 }} w={{ base: 20, sm: 24, md: 32 }} bg="bg-white/10" rounded="sm" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} display="flex" alignItems="center" justifyContent="center">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-white"
|
||||
weight="semibold"
|
||||
>
|
||||
Constructors
|
||||
</Text>
|
||||
<Box h="6" w="32" bg="panel-gray" rounded="none" mb={4} display="flex" alignItems="center" justifyContent="center" border borderColor="border-gray/30">
|
||||
<Text size="xs" color="text-gray-400" weight="bold" className="uppercase tracking-widest">CONSTRUCTORS</Text>
|
||||
</Box>
|
||||
<Stack gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Stack gap={1}>
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
@@ -336,58 +247,37 @@ export function TeamCompetitionMockup() {
|
||||
position="relative"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
p={{ base: 1, sm: 1.5, md: 2, lg: 2.5 }}
|
||||
gap={3}
|
||||
bg="panel-gray/20"
|
||||
rounded="none"
|
||||
p={2}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
borderColor="border-gray/20"
|
||||
overflow="hidden"
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredTeam(i)}
|
||||
onHoverEnd={() => setHoveredTeam(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.02,
|
||||
boxShadow: `0 0 20px ${teamColors[i-1]}40`,
|
||||
x: -4,
|
||||
borderColor: `${teamColors[i-1]}40`,
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
left="0"
|
||||
right="0"
|
||||
top="0"
|
||||
bottom="0"
|
||||
w="0.5"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
/>
|
||||
<Box
|
||||
h={{ base: 5, sm: 6, md: 7 }}
|
||||
w={{ base: 5, sm: 6, md: 7 }}
|
||||
rounded="sm"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
border
|
||||
borderWidth="2px"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
borderColor: teamColors[i-1],
|
||||
backgroundColor: `${teamColors[i-1]}20`
|
||||
}}
|
||||
>
|
||||
<Text>🏁</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w="full" bg="bg-white/10" rounded="sm" mb={{ base: 0.5, sm: 1, md: 1.5 }} />
|
||||
<Box position="relative" h={{ base: 0.5, sm: 1, md: 1.5 }} bg="bg-charcoal-outline" rounded="full" overflow="hidden">
|
||||
<Box h="1.5" w="full" bg="white/10" rounded="none" mb={1.5} />
|
||||
<Box position="relative" h="1" bg="graphite-black" rounded="none" overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
insetY="0"
|
||||
left="0"
|
||||
rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ backgroundColor: teamColors[i-1] }}
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${100 - (i-1) * 15}%` }}
|
||||
@@ -395,30 +285,6 @@ export function TeamCompetitionMockup() {
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
{i === 3 && (
|
||||
<Box h={{ base: 3, sm: 3.5, md: 4 }} px={{ base: 0.5, sm: 1, md: 1.5 }} bg="bg-warning-amber/20" rounded="sm" display="flex" alignItems="center" justifyContent="center" color="text-warning-amber" weight="semibold" border borderColor="border-warning-amber/30">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
=
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
{hoveredTeam === i && (
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
inset="0"
|
||||
pointerEvents="none"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${teamColors[i-1]}10 0%, transparent 100%)`
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
|
||||
'use client';
|
||||
|
||||
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
|
||||
import { CheckCircle2, LucideIcon } from 'lucide-react';
|
||||
@@ -43,16 +43,16 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<Box position="relative" fullWidth>
|
||||
<Surface variant="muted" rounded="2xl" border={true} padding={6}>
|
||||
<Surface variant="muted" rounded="none" border={true} padding={6} bg="panel-gray/40">
|
||||
<Stack direction="row" justify="between" gap={2}>
|
||||
{steps.map((step) => (
|
||||
<Stack key={step.id} align="center" center direction="col">
|
||||
<Box width="10" height="10" rounded="lg" bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" display="flex" center mb={2}>
|
||||
<Box width="10" height="10" rounded="none" bg="graphite-black" border={true} borderColor="border-gray/50" display="flex" center mb={2}>
|
||||
<Text color={step.color}>
|
||||
<Icon icon={step.icon} size={4} />
|
||||
</Text>
|
||||
</Box>
|
||||
<Text size="xs" weight="medium" color="text-white">{step.title}</Text>
|
||||
<Text size="xs" weight="bold" color="text-white" className="uppercase tracking-widest">{step.title}</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
@@ -63,15 +63,15 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth>
|
||||
<Surface variant="muted" rounded="2xl" border={true} padding={6} overflow="hidden">
|
||||
<Surface variant="muted" rounded="none" border={true} padding={6} overflow="hidden" bg="panel-gray/40">
|
||||
{/* Connection Lines */}
|
||||
<Box position="absolute" top="3.5rem" left="8%" right="8%" display={{ base: 'none', sm: 'block' }}>
|
||||
<Box height="0.5" bg="bg-charcoal-outline" position="relative">
|
||||
<Box height="0.5" bg="white/5" position="relative">
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
fullHeight
|
||||
bg="bg-gradient-to-r from-primary-blue to-performance-green"
|
||||
bg="primary-accent"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
@@ -104,35 +104,39 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
|
||||
as={motion.div}
|
||||
w={{ base: '10', sm: '12' }}
|
||||
h={{ base: '10', sm: '12' }}
|
||||
rounded="lg"
|
||||
rounded="none"
|
||||
border={true}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
mb={2}
|
||||
transition
|
||||
bg={isActive ? 'bg-primary-blue/20' : isCompleted ? 'bg-performance-green/20' : 'bg-iron-gray'}
|
||||
borderColor={isActive ? 'border-primary-blue' : isCompleted ? 'border-performance-green/50' : 'border-charcoal-outline'}
|
||||
shadow={isActive ? 'shadow-[0_0_15px_rgba(25,140,255,0.3)]' : 'none'}
|
||||
bg={isActive ? 'primary-accent/10' : isCompleted ? 'success-green/10' : 'graphite-black'}
|
||||
borderColor={isActive ? 'primary-accent' : isCompleted ? 'success-green/50' : 'border-gray/50'}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
scale: [1, 1.08, 1],
|
||||
transition: { duration: 1, repeat: Infinity }
|
||||
opacity: [0.7, 1, 0.7],
|
||||
transition: { duration: 1.5, repeat: Infinity }
|
||||
} : {}}
|
||||
className="relative"
|
||||
>
|
||||
{isActive && (
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
)}
|
||||
{isCompleted ? (
|
||||
<Icon icon={CheckCircle2} size={5} color="text-performance-green" />
|
||||
<Icon icon={CheckCircle2} size={5} color="text-success-green" />
|
||||
) : (
|
||||
<Text color={isActive ? step.color : 'text-gray-500'}>
|
||||
<Text color={isActive ? 'text-primary-accent' : 'text-gray-600'}>
|
||||
<Icon icon={StepIcon} size={5} />
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Text
|
||||
size="xs"
|
||||
weight="medium"
|
||||
color={isActive ? 'text-white' : 'text-gray-400'}
|
||||
weight="bold"
|
||||
color={isActive ? 'text-white' : 'text-gray-500'}
|
||||
display={{ base: 'none', sm: 'block' }}
|
||||
transition
|
||||
className="uppercase tracking-widest"
|
||||
>
|
||||
{step.title}
|
||||
</Text>
|
||||
@@ -153,15 +157,15 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
|
||||
mt={4}
|
||||
pt={4}
|
||||
borderTop={true}
|
||||
borderColor="border-charcoal-outline"
|
||||
borderColor="border-gray/30"
|
||||
display={{ base: 'block', sm: 'none' }}
|
||||
>
|
||||
<Box textAlign="center">
|
||||
<Text size="xs" color="text-gray-400" block mb={1}>
|
||||
Step {activeStep + 1}: {steps[activeStep]?.title || ''}
|
||||
<Text size="xs" color="text-gray-400" block mb={1} font="mono" weight="bold" className="uppercase tracking-widest">
|
||||
STEP {activeStep + 1}: {steps[activeStep]?.title || ''}
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-500" block>
|
||||
{steps[activeStep]?.description || ''}
|
||||
<Text size="xs" color="text-gray-600" block font="mono">
|
||||
{steps[activeStep]?.description.toUpperCase() || ''}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user