website refactor
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user