mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
apps/website/components/mockups/CareerProgressionMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
export function CareerProgressionMockup() {
const shouldReduceMotion = useReducedMotion();
@@ -25,8 +24,8 @@ export function CareerProgressionMockup() {
// Simple mobile version - just the essence
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
<Stack
as={motion.div}
initial="hidden"
animate="visible"
@@ -37,13 +36,13 @@ export function CareerProgressionMockup() {
>
<Stack gap={4}>
{/* Clean stat cards */}
<Box as={motion.div} variants={itemVariants} display="grid" gridCols={3} gap={3}>
<Stack as={motion.div} variants={itemVariants} display="grid" gridCols={3} gap={3}>
{[
{ value: '24', label: 'Wins' },
{ value: '48', label: 'Podiums' },
{ value: '156', label: 'Races' }
].map((stat, i) => (
<Box key={i} bg="panel-gray/60" rounded="none" p={3} border borderColor="primary-accent/20" textAlign="center">
<Stack 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
@@ -57,31 +56,31 @@ export function CareerProgressionMockup() {
>
{stat.label}
</Text>
</Box>
</Stack>
))}
</Box>
</Stack>
{/* Single elegant season card */}
<Box as={motion.div} variants={itemVariants}>
<Box bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
<Box display="flex" alignItems="center" justifyContent="between">
<Stack as={motion.div} variants={itemVariants}>
<Stack bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
<Stack display="flex" alignItems="center" justifyContent="between">
<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">
<Stack 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>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}
// Desktop version - more detailed
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Stack
as={motion.div}
initial="hidden"
animate="visible"
@@ -91,14 +90,14 @@ 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-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">
<Stack 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">
<Stack 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}>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
</Stack>
<Stack flexGrow={1}>
<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 }}>
<Stack display="flex" alignItems="center" gap={{ base: 1, sm: 2, md: 3 }}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -117,20 +116,20 @@ export function CareerProgressionMockup() {
>
Career tracking
</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
{/* Career Stats */}
<Box as={motion.div} variants={itemVariants}>
<Stack as={motion.div} variants={itemVariants}>
<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 }}>
<Stack display="grid" gridCols={3} gap={{ base: 1, sm: 2, md: 3 }}>
{[
{ label: 'Wins', value: '24' },
{ label: 'Podiums', value: '48' },
{ label: 'Races', value: '156' }
].map((stat, i) => (
<Box
<Stack
key={i}
as={motion.div}
bg="panel-gray/40"
@@ -146,13 +145,13 @@ export function CareerProgressionMockup() {
>
<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>
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
{/* Season Timeline */}
<Box as={motion.div} variants={itemVariants}>
<Stack as={motion.div} variants={itemVariants}>
<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 }}>
{[
@@ -160,7 +159,7 @@ export function CareerProgressionMockup() {
{ league: 'Endurance Series', season: 'S2', position: 'P1', points: '312' },
{ league: 'Formula Sprint', season: 'S1', position: 'P5', points: '186' }
].map((season, i) => (
<Box
<Stack
key={i}
as={motion.div}
display="flex"
@@ -177,44 +176,44 @@ export function CareerProgressionMockup() {
transition: { duration: 0.15 }
}}
>
<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">
<Stack 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}>
</Stack>
<Stack flexGrow={1}>
<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="success-green/10" border borderColor="success-green/30">
</Stack>
<Stack display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
<Stack 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="primary-accent/10" border borderColor="primary-accent/30">
</Stack>
<Stack 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>
</Stack>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
{/* Multi-League Badge */}
<Box as={motion.div} variants={itemVariants}>
<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"
<Stack as={motion.div} variants={itemVariants}>
<Stack 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">
<Stack 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="panel-gray" rounded="full" border borderWidth="2px" borderColor="border-gray" display="flex" alignItems="center" justifyContent="center">
<Stack 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>
</Stack>
))}
</Box>
</Stack>
<Text size={{ base: 'xs', sm: 'sm' }} color="text-gray-400" weight="medium">Active in 3 leagues across seasons</Text>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}

139
apps/website/components/mockups/CompanionAutomationMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
export function CompanionAutomationMockup() {
@@ -21,8 +20,8 @@ export function CompanionAutomationMockup() {
// Simple mobile version - just the essence of automation
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
<Stack
as={motion.div}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
@@ -30,9 +29,9 @@ export function CompanionAutomationMockup() {
>
<Stack gap={4}>
{/* Simple progress indicator */}
<Box bg="panel-gray/60" rounded="none" p={4} border borderColor="primary-accent/40">
<Box display="flex" alignItems="center" gap={3} mb={3}>
<Box
<Stack bg="panel-gray/60" rounded="none" p={4} border borderColor="primary-accent/40">
<Stack display="flex" alignItems="center" gap={3} mb={3}>
<Stack
as={motion.div}
h="8"
w="8"
@@ -52,16 +51,16 @@ export function CompanionAutomationMockup() {
transition={{ duration: 1.5, repeat: Infinity }}
className="relative"
>
<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>
<Stack h="2" w="2" bg="success-green" />
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="success-green" />
</Stack>
<Stack>
<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="1" fullWidth bg="white/5" rounded="none" overflow="hidden">
<Box
</Stack>
</Stack>
<Stack h="1" fullWidth bg="white/5" rounded="none" overflow="hidden">
<Stack
as={motion.div}
h="full"
bg="primary-accent"
@@ -69,25 +68,25 @@ export function CompanionAutomationMockup() {
animate={{ width: '75%' }}
transition={{ duration: 2, ease: 'easeInOut' }}
/>
</Box>
</Box>
</Stack>
</Stack>
{/* Simple CTA */}
<Box display="flex" justifyContent="center">
<Box bg="primary-accent/10" color="text-primary-accent" px={6} py={2.5} rounded="none" border borderColor="primary-accent/30">
<Stack display="flex" justifyContent="center">
<Stack 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>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}
// Desktop version - richer with more automation steps
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 3, md: 4, lg: 6 }} overflow="hidden">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 3, md: 4, lg: 6 }} overflow="hidden">
<Stack
as={motion.div}
initial="hidden"
animate="visible"
@@ -101,22 +100,22 @@ export function CompanionAutomationMockup() {
>
<Stack gap={{ base: 3, md: 4, lg: 5 }}>
{/* 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="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>
<Stack as={motion.div} variants={{ hidden: { opacity: 0, y: -10 }, visible: { opacity: 1, y: 0 } }}>
<Stack display="flex" alignItems="center" gap={{ base: 2.5, md: 3, lg: 4 }} mb={{ base: 3, md: 4, lg: 5 }}>
<Stack 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">
<Stack h={{ base: 6, md: 7, lg: 8 }} w={{ base: 6, md: 7, lg: 8 }} bg="primary-accent/40" />
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
<Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
</Stack>
<Stack>
<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>
</Stack>
</Stack>
</Stack>
{/* Browser Automation Visual - Full workflow */}
<Box
<Stack
as={motion.div}
variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}
position="relative"
@@ -130,11 +129,11 @@ export function CompanionAutomationMockup() {
>
{/* 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-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">
<Stack display="flex" alignItems="center" gap={{ base: 2, md: 2.5 }} pb={{ base: 3, md: 4 }} borderBottom borderColor="border-gray/30">
<Stack h="2" w="2" bg="critical-red/40" rounded="none" />
<Stack h="2" w="2" bg="warning-amber/40" rounded="none" />
<Stack h="2" w="2" bg="success-green/40" rounded="none" />
<Stack 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' }}
@@ -143,8 +142,8 @@ export function CompanionAutomationMockup() {
>
members.iracing.com
</Text>
</Box>
</Box>
</Stack>
</Stack>
{/* Automation Steps - More detailed */}
<Stack gap={{ base: 3, md: 4 }}>
@@ -154,7 +153,7 @@ export function CompanionAutomationMockup() {
{ label: 'Create Session', status: 'Running', detail: 'Filling form...' },
{ label: 'Configure Settings', status: 'Pending', detail: 'Waiting...' }
].map((step, index) => (
<Box
<Stack
key={index}
as={motion.div}
initial={{ opacity: 0, x: -10 }}
@@ -165,8 +164,8 @@ export function CompanionAutomationMockup() {
}}
>
<Stack gap={2}>
<Box display="flex" alignItems="center" gap={{ base: 2.5, md: 3 }}>
<Box
<Stack display="flex" alignItems="center" gap={{ base: 2.5, md: 3 }}>
<Stack
as={motion.div}
h={{ base: 7, md: 8, lg: 9 }}
w={{ base: 7, md: 8, lg: 9 }}
@@ -197,23 +196,23 @@ export function CompanionAutomationMockup() {
transition={{ duration: 1.5, repeat: Infinity }}
>
{step.status === 'Complete' && (
<Box w="2" h="2" bg="success-green" />
<Stack w="2" h="2" bg="success-green" />
)}
{step.status === 'Running' && (
<Box h="2" w="2" bg="primary-accent" />
<Stack h="2" w="2" bg="primary-accent" />
)}
{step.status === 'Pending' && (
<Box h="1" w="1" bg="gray-700" />
<Stack h="1" w="1" bg="gray-700" />
)}
</Box>
<Box flexGrow={1}>
</Stack>
<Stack flexGrow={1}>
<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>
</Stack>
</Stack>
{step.status !== 'Pending' && (
<Box h="1" fullWidth bg="white/5" rounded="none" overflow="hidden" ml={{ base: 9, md: 10, lg: 11 }}>
<Box
<Stack h="1" fullWidth bg="white/5" rounded="none" overflow="hidden" ml={{ base: 9, md: 10, lg: 11 }}>
<Stack
as={motion.div}
h="full"
bg={step.status === 'Complete' ? 'success-green/60' : 'primary-accent/60'}
@@ -221,16 +220,16 @@ export function CompanionAutomationMockup() {
animate={{ width: step.status === 'Complete' ? '100%' : '65%' }}
transition={{ duration: 2, ease: 'easeInOut' }}
/>
</Box>
</Stack>
)}
</Stack>
</Box>
</Stack>
))}
</Stack>
</Stack>
{/* Automation Running Indicator */}
<Box
<Stack
as={motion.div}
position="absolute"
top="3"
@@ -254,7 +253,7 @@ export function CompanionAutomationMockup() {
}}
transition={{ duration: 2, repeat: Infinity }}
>
<Box
<Stack
as={motion.div}
h="1.5"
w="1.5"
@@ -265,11 +264,11 @@ export function CompanionAutomationMockup() {
transition={{ duration: 1.5, repeat: Infinity }}
/>
<Text size="xs" color="text-primary-accent" weight="bold" className="uppercase tracking-widest">Running</Text>
</Box>
</Box>
</Stack>
</Stack>
{/* One-Click Action - Enhanced */}
<Box
<Stack
as={motion.div}
variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}
display="flex"
@@ -277,7 +276,7 @@ export function CompanionAutomationMockup() {
alignItems="center"
gap={3}
>
<Box
<Stack
as={motion.div}
bg="primary-accent/10"
color="text-primary-accent"
@@ -296,9 +295,9 @@ export function CompanionAutomationMockup() {
className="relative"
>
<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>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
<Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -308,9 +307,9 @@ export function CompanionAutomationMockup() {
>
One click. All fields automated.
</Text>
</Box>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}

121
apps/website/components/mockups/DriverProfileMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion, useMotionValue, useSpring, useTransform } from 'framer-motion';
import { useEffect, useState } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
export function DriverProfileMockup() {
const shouldReduceMotion = useReducedMotion();
@@ -29,42 +28,42 @@ export function DriverProfileMockup() {
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Stack 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="none" border borderWidth="1px" borderColor="primary-accent/50" overflow="hidden" bg="panel-gray" display="flex" alignItems="center" justifyContent="center">
<Stack>
<Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
<Stack display="flex" alignItems="center" gap={3}>
<Stack 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>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
</Stack>
<Stack>
<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>
</Stack>
</Stack>
<Text size="2xl" weight="bold" color="text-gray-800" font="mono">#33</Text>
</Box>
</Stack>
<Box position="relative" h="1" bg="white/5" rounded="none" overflow="hidden" mb={1}>
<Box
<Stack position="relative" h="1" bg="white/5" rounded="none" overflow="hidden" mb={1}>
<Stack
position="absolute"
insetY="0"
left="0"
bg="primary-accent"
style={{ width: '86%' }}
/>
</Box>
<Box display="flex" justifyContent="end">
</Stack>
<Stack display="flex" justifyContent="end">
<Text size="xs" color="text-primary-accent" font="mono" weight="bold">2150 GP RATING</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box>
<Stack>
<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}>
<Stack display="grid" gridCols={3} gap={2}>
{stats.slice(0, 3).map((stat) => (
<Box
<Stack
key={stat.label}
bg="panel-gray/40"
border
@@ -77,12 +76,12 @@ export function DriverProfileMockup() {
{stat.value}{stat.suffix}
</Text>
<Text size="xs" color="text-gray-500" mt={0.5} block className="uppercase tracking-tighter">{stat.label}</Text>
</Box>
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Stack>
);
}
@@ -104,20 +103,20 @@ export function DriverProfileMockup() {
};
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Stack
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 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="none" border borderWidth="1px" borderColor="primary-accent/50" overflow="hidden" bg="panel-gray" display="flex" alignItems="center" justifyContent="center">
<Stack display="flex" alignItems="center" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
<Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
<Stack 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>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
</Stack>
<Stack>
<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
@@ -129,20 +128,20 @@ export function DriverProfileMockup() {
>
Cross-league racing identity
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Text size={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }} weight="bold" color="text-gray-800" font="mono">#33</Text>
</Box>
</Stack>
<Box display="flex" flexWrap="wrap" alignItems="center" gap={{ base: 1, sm: 2, md: 3, lg: 4 }} mb={{ base: 1, sm: 1.5, md: 2 }}>
<Stack 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-500" weight="bold" className="uppercase tracking-widest">GP RATING:</Text>
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} value={2150} />
<Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-widest ml-4">iRATING:</Text>
<AnimatedRating shouldReduceMotion={shouldReduceMotion ?? false} value={3200} />
</Box>
</Stack>
<Box position="relative" h="1" bg="white/5" rounded="none" overflow="hidden">
<Box
<Stack position="relative" h="1" bg="white/5" rounded="none" overflow="hidden">
<Stack
as={motion.div}
position="absolute"
insetY="0"
@@ -152,10 +151,10 @@ export function DriverProfileMockup() {
animate={{ width: '86%' }}
transition={{ delay: shouldReduceMotion ? 0 : 0.4, duration: 0.8, ease: 'easeOut' }}
/>
</Box>
</Box>
</Stack>
</Stack>
<Box
<Stack
as={motion.div}
variants={containerVariants}
initial="hidden"
@@ -164,9 +163,9 @@ export function DriverProfileMockup() {
>
<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 }}>
<Stack display="grid" gridCols={{ base: 2, md: 5 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
{stats.map((stat, index) => (
<Box
<Stack
key={stat.label}
as={motion.div}
variants={itemVariants}
@@ -184,21 +183,21 @@ export function DriverProfileMockup() {
suffix={stat.suffix ?? ''}
/>
<Text size="xs" color="text-gray-500" mt={0.5} block className="uppercase tracking-tighter font-bold">{stat.label}</Text>
</Box>
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
<Box
<Stack
as={motion.div}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
>
<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}>
<Stack 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
<Stack
key={i}
as={motion.div}
flexGrow={1}
@@ -214,9 +213,9 @@ export function DriverProfileMockup() {
}}
/>
))}
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
);
}
@@ -235,9 +234,9 @@ function AnimatedRating({ shouldReduceMotion, value }: { shouldReduceMotion: boo
}, [shouldReduceMotion, count, value]);
return (
<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>
<Stack as={motion.span} weight="bold" color="text-primary-accent" font="mono" size={{ base: 'sm', sm: 'base' }}>
{shouldReduceMotion ? value : <Stack as={motion.span}>{rounded}</Stack>}
</Stack>
);
}
@@ -265,8 +264,8 @@ function AnimatedCounter({
}, [shouldReduceMotion, count, value, delay]);
return (
<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>
<Stack weight="bold" color="text-white" font="mono" size={{ base: 'sm', sm: 'base', md: 'lg' }}>
{shouldReduceMotion ? value : <Stack as={motion.span}>{rounded}</Stack>}{suffix}
</Stack>
);
}

137
apps/website/components/mockups/LeagueDiscoveryMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
export function LeagueDiscoveryMockup() {
const shouldReduceMotion = useReducedMotion();
@@ -43,12 +42,12 @@ export function LeagueDiscoveryMockup() {
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Box mb={3}>
<Box h="1.5" w="40" bg="white/10" rounded="none" mb={3} />
<Box display="flex" gap={2} flexWrap="wrap">
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Stack mb={3}>
<Stack h="1.5" w="40" bg="white/10" rounded="none" mb={3} />
<Stack display="flex" gap={2} flexWrap="wrap">
{['Game', 'Region'].map((filter) => (
<Box
<Stack
key={filter}
h="5"
px={3}
@@ -59,15 +58,15 @@ export function LeagueDiscoveryMockup() {
display="flex"
alignItems="center"
>
<Box h="1" w="8" bg="white/10" rounded="none" />
</Box>
<Stack h="1" w="8" bg="white/10" rounded="none" />
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
<Stack gap={2}>
{leagues.map((league) => (
<Box
<Stack
key={league.name}
bg="panel-gray/40"
border
@@ -75,32 +74,32 @@ export function LeagueDiscoveryMockup() {
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="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center">
<Stack display="flex" alignItems="start" justifyContent="between" mb={2}>
<Stack display="flex" alignItems="center" gap={2}>
<Stack 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="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="primary-accent/10" border borderColor="primary-accent/20">
</Stack>
<Stack>
<Stack h="1.5" w="32" bg="white/10" rounded="none" mb={1.5} />
<Stack display="flex" gap={1}>
<Stack 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>
</Stack>
</Stack>
</Stack>
</Stack>
</Stack>
<Box display="flex" alignItems="center" justifyContent="between">
<Stack display="flex" alignItems="center" justifyContent="between">
<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">
<Stack px={2} py={0.5} bg="primary-accent" rounded="none">
<Text size="xs" color="text-white" weight="bold">JOIN</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
);
}
@@ -122,18 +121,18 @@ export function LeagueDiscoveryMockup() {
};
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Stack
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="2" w="48" bg="white/10" rounded="none" mb={4} />
<Stack h="2" w="48" bg="white/10" rounded="none" mb={4} />
<Box display="flex" gap={2} flexWrap="wrap">
<Stack display="flex" gap={2} flexWrap="wrap">
{['Game', 'Region', 'Skill'].map((filter, i) => (
<Box
<Stack
key={filter}
as={motion.div}
initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
@@ -148,13 +147,13 @@ export function LeagueDiscoveryMockup() {
display="flex"
alignItems="center"
>
<Box h="1" w="10" bg="white/10" rounded="none" />
</Box>
<Stack h="1" w="10" bg="white/10" rounded="none" />
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
<Box
<Stack
as={motion.div}
variants={containerVariants}
initial="hidden"
@@ -162,7 +161,7 @@ export function LeagueDiscoveryMockup() {
>
<Stack gap={2}>
{leagues.map((league, index) => (
<Box
<Stack
key={league.name}
as={motion.div}
variants={cardVariants}
@@ -179,16 +178,16 @@ export function LeagueDiscoveryMockup() {
rounded="none"
p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
>
<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">
<Stack display="flex" alignItems="start" justifyContent="between" mb={3}>
<Stack display="flex" alignItems="center" gap={3}>
<Stack 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="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">
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
</Stack>
<Stack>
<Stack h="2" w="40" bg="white/10" rounded="none" mb={2} />
<Stack display="flex" gap={2}>
<Stack 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' }}
@@ -198,8 +197,8 @@ export function LeagueDiscoveryMockup() {
>
{league.carClass}
</Text>
</Box>
<Box as="span" px={2} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
</Stack>
<Stack 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' }}
@@ -209,14 +208,14 @@ export function LeagueDiscoveryMockup() {
>
{league.region}
</Text>
</Box>
</Box>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
</Stack>
<Box display="flex" alignItems="center" justifyContent="between">
<Box display="flex" alignItems="center" gap={4}>
<Stack display="flex" alignItems="center" justifyContent="between">
<Stack display="flex" alignItems="center" gap={4}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -235,10 +234,10 @@ export function LeagueDiscoveryMockup() {
>
{league.schedule.toUpperCase()}
</Text>
</Box>
</Stack>
<Box display="flex" gap={2}>
<Box
<Stack display="flex" gap={2}>
<Stack
as={motion.button}
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
px={3}
@@ -254,13 +253,13 @@ export function LeagueDiscoveryMockup() {
>
JOIN
</Text>
</Box>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}

151
apps/website/components/mockups/LeagueHomeMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
export function LeagueHomeMockup() {
@@ -17,50 +16,50 @@ export function LeagueHomeMockup() {
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Stack 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="none" border borderWidth="1px" borderColor="primary-accent/50" bg="panel-gray" display="flex" alignItems="center" justifyContent="center" className="relative">
<Stack display="flex" alignItems="center" gap={3} mb={2}>
<Stack 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>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
</Stack>
<Stack>
<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>
</Stack>
</Stack>
<Box>
<Stack>
<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">
<Stack position="relative" display="flex" alignItems="center" gap={3} bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
<Stack 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" w="28" bg="white/10" rounded="none" mb={2} />
<Box h="1.5" w="20" bg="white/5" rounded="none" />
</Box>
<Box w="1.5" h="1.5" bg="primary-accent" rounded="full" className="animate-pulse" />
</Box>
</Box>
</Stack>
<Stack flexGrow={1}>
<Stack h="2" w="28" bg="white/10" rounded="none" mb={2} />
<Stack h="1.5" w="20" bg="white/5" rounded="none" />
</Stack>
<Stack w="1.5" h="1.5" bg="primary-accent" rounded="full" className="animate-pulse" />
</Stack>
</Stack>
<Box>
<Stack>
<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="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>
<Stack bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
<Stack display="flex" alignItems="center" gap={3} py={2} borderBottom borderColor="border-gray/30">
<Stack h="1.5" w="6" bg="white/10" rounded="none" />
<Stack h="1.5" flexGrow={1} bg="white/10" rounded="none" />
<Stack h="1.5" w="10" bg="white/10" rounded="none" />
</Stack>
<Stack display="flex" alignItems="center" gap={3} py={2}>
<Stack h="1.5" w="6" bg="white/5" rounded="none" />
<Stack h="1.5" flexGrow={1} bg="white/5" rounded="none" />
<Stack h="1.5" w="10" bg="success-green/20" rounded="none" />
</Stack>
</Stack>
</Stack>
</Stack>
</Box>
</Stack>
);
}
@@ -78,21 +77,21 @@ export function LeagueHomeMockup() {
};
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Stack
as={motion.div}
variants={containerVariants}
initial="hidden"
animate="visible"
>
<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="none" border borderWidth="1px" borderColor="primary-accent/50" bg="panel-gray" display="flex" alignItems="center" justifyContent="center" className="relative">
<Stack as={motion.div} variants={itemVariants}>
<Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }} mb={{ base: 1, sm: 1.5, md: 2 }}>
<Stack 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>
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
</Stack>
<Stack>
<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
@@ -103,15 +102,15 @@ export function LeagueHomeMockup() {
>
SEASON 3 • ROUND 8/12
</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
<Box as={motion.div} variants={itemVariants}>
<Stack as={motion.div} variants={itemVariants}>
<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
<Stack
key={i}
as={motion.div}
position="relative"
@@ -129,15 +128,15 @@ export function LeagueHomeMockup() {
transition: { duration: 0.15 }
}}
>
<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">
<Stack 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="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>
</Stack>
<Stack flexGrow={1}>
<Stack h="1.5" w={i === 1 ? "32" : "24"} bg="white/10" rounded="none" mb={{ base: 1, sm: 1.5, md: 2 }} />
<Stack h="1" w="16" bg="white/5" rounded="none" />
</Stack>
{i === 1 && (
<Box
<Stack
as={motion.div}
position="absolute"
right="4"
@@ -146,33 +145,33 @@ export function LeagueHomeMockup() {
}}
transition={{ duration: 2, repeat: Infinity }}
>
<Box w="1.5" h="1.5" bg="primary-accent" rounded="full" />
</Box>
<Stack w="1.5" h="1.5" bg="primary-accent" rounded="full" />
</Stack>
)}
</Box>
</Stack>
))}
</Stack>
</Box>
</Stack>
<Box as={motion.div} variants={itemVariants}>
<Stack as={motion.div} variants={itemVariants}>
<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>
<Stack bg="panel-gray/20" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} border borderColor="border-gray/50">
<Stack 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">
<Stack h="1" w="6" bg="white/10" rounded="none" />
<Stack h="1" flexGrow={1} bg="white/10" rounded="none" />
<Stack h="1" w="10" bg="white/10" rounded="none" />
</Stack>
{[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="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>
<Stack key={i} display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }} py={{ base: 1, sm: 1.5, md: 2 }}>
<Stack h="1" w="6" bg="white/5" rounded="none" />
<Stack h="1" flexGrow={1} bg="white/5" rounded="none" />
<Stack h="1" w="10" bg={i === 1 ? "success-green/20" : "white/5"} rounded="none" />
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}

167
apps/website/components/mockups/RaceHistoryMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
export function RaceHistoryMockup() {
@@ -26,8 +25,8 @@ export function RaceHistoryMockup() {
// Simple, elegant mobile version - just the core story
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
<Stack
as={motion.div}
initial="hidden"
animate="visible"
@@ -39,28 +38,28 @@ export function RaceHistoryMockup() {
>
<Stack gap={4}>
{/* Race result - clean and simple */}
<Box as={motion.div} variants={itemVariants}>
<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="primary-accent/10" rounded="none" display="flex" alignItems="center" justifyContent="center" flexShrink={0} border borderColor="primary-accent/30">
<Stack as={motion.div} variants={itemVariants}>
<Stack bg="panel-gray/60" rounded="none" p={4} border borderWidth="1px" borderColor="primary-accent/40">
<Stack display="flex" alignItems="center" gap={3}>
<Stack 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>
</Stack>
<Stack>
<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>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
{/* Simple arrow */}
<Box as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
<Stack as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
<Text color="text-primary-accent" size="2xl">↓</Text>
</Box>
</Stack>
{/* Updates - minimal */}
<Box as={motion.div} variants={itemVariants}>
<Box bg="panel-gray/40" rounded="none" p={3} border borderColor="border-gray/50">
<Stack as={motion.div} variants={itemVariants}>
<Stack 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
@@ -75,27 +74,27 @@ export function RaceHistoryMockup() {
>
Profile Updated
</Text>
<Box display="flex" gap={2}>
<Box flexGrow={1} bg="graphite-black" rounded="none" py={2} textAlign="center" border borderColor="primary-accent/30">
<Stack display="flex" gap={2}>
<Stack 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="graphite-black" rounded="none" py={2} textAlign="center" border borderColor="success-green/30">
</Stack>
<Stack 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>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}
// Desktop version - richer with more updates
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Box
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
<Stack
as={motion.div}
initial="hidden"
animate="visible"
@@ -105,22 +104,22 @@ 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="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="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">
<Stack as={motion.div} variants={itemVariants}>
<Stack bg="panel-gray/40" rounded="none" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderWidth="1px" borderColor="primary-accent/40">
<Stack display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
<Stack 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}>
<Stack position="absolute" inset="0" bg="gradient-to-br from-primary-accent/10 to-success-green/10" />
<Stack 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" 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}>
<Box w="1" h="4" bg="primary-accent" />
</Stack>
</Stack>
<Stack flexGrow={1} minWidth="0">
<Stack display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }} mb={1}>
<Stack 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>
</Stack>
<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 }}>
<Stack display="flex" alignItems="center" gap={{ base: 2, sm: 3, md: 4 }}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -144,15 +143,15 @@ export function RaceHistoryMockup() {
>
45 MIN
</Text>
</Box>
</Box>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
</Stack>
{/* Connection Flow with Animation */}
<Box as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
<Box
<Stack as={motion.div} variants={itemVariants} display="flex" justifyContent="center">
<Stack
as={motion.div}
display="flex"
flexDirection="col"
@@ -173,20 +172,20 @@ export function RaceHistoryMockup() {
>
Auto-sync
</Text>
</Box>
</Box>
</Stack>
</Stack>
{/* Profile Updates Grid - More detailed */}
<Box as={motion.div} variants={itemVariants}>
<Box bg="panel-gray/20" rounded="none" p={{ base: 2, sm: 3, md: 4, lg: 5 }} border borderColor="border-gray/50">
<Stack as={motion.div} variants={itemVariants}>
<Stack 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 }}>
<Stack display="grid" gridCols={2} gap={{ base: 2, sm: 3, md: 4 }}>
{/* Career Stats Update */}
<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}>
<Stack bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="primary-accent/30">
<Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -196,7 +195,7 @@ export function RaceHistoryMockup() {
>
Career Stats
</Text>
<Box
<Stack
as={motion.span}
color="text-success-green"
weight="bold"
@@ -206,8 +205,8 @@ export function RaceHistoryMockup() {
transition={{ duration: 0.5, delay: 0.5 }}
>
↑
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '9px' }}
@@ -218,11 +217,11 @@ export function RaceHistoryMockup() {
>
WINS: 24 → 25
</Text>
</Box>
</Stack>
{/* Rating Update */}
<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}>
<Stack bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="success-green/30">
<Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -232,7 +231,7 @@ export function RaceHistoryMockup() {
>
Rating
</Text>
<Box
<Stack
as={motion.span}
color="text-success-green"
weight="bold"
@@ -243,8 +242,8 @@ export function RaceHistoryMockup() {
transition={{ duration: 0.5, delay: 0.6 }}
>
+12
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '9px' }}
@@ -255,11 +254,11 @@ export function RaceHistoryMockup() {
>
1342 → 1354
</Text>
</Box>
</Stack>
{/* Season Points Update */}
<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}>
<Stack bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="warning-amber/30">
<Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -269,7 +268,7 @@ export function RaceHistoryMockup() {
>
Season
</Text>
<Box
<Stack
as={motion.span}
color="text-warning-amber"
weight="bold"
@@ -280,8 +279,8 @@ export function RaceHistoryMockup() {
transition={{ duration: 0.5, delay: 0.7 }}
>
+18
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '9px' }}
@@ -292,11 +291,11 @@ export function RaceHistoryMockup() {
>
248 → 266 PTS
</Text>
</Box>
</Stack>
{/* Team Points Update */}
<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}>
<Stack bg="graphite-black" rounded="none" p={{ base: 2, sm: 3, md: 4 }} border borderColor="telemetry-aqua/30">
<Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -306,7 +305,7 @@ export function RaceHistoryMockup() {
>
Team
</Text>
<Box
<Stack
as={motion.span}
color="text-telemetry-aqua"
weight="bold"
@@ -317,8 +316,8 @@ export function RaceHistoryMockup() {
transition={{ duration: 0.5, delay: 0.8 }}
>
+18
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '9px' }}
@@ -329,12 +328,12 @@ export function RaceHistoryMockup() {
>
CONTRIBUTING
</Text>
</Box>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}

123
apps/website/components/mockups/SimPlatformMockup.tsx
View File

@@ -1,9 +1,8 @@
'use client';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
export function SimPlatformMockup() {
const [isMobile, setIsMobile] = useState(false);
@@ -18,42 +17,42 @@ export function SimPlatformMockup() {
// Simple mobile version - just the essence of cross-platform
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
<Stack 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="panel-gray/60" border borderWidth="1px" borderColor="primary-accent" rounded="none" p={4} position="relative">
<Box position="absolute" top="3" right="3">
<Box w="1.5" h="1.5" rounded="full" bg="success-green"
<Stack bg="panel-gray/60" border borderWidth="1px" borderColor="primary-accent" rounded="none" p={4} position="relative">
<Stack position="absolute" top="3" right="3">
<Stack 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="none" bg="primary-accent/10" display="flex" alignItems="center" justifyContent="center" flexShrink={0} border borderColor="primary-accent/30">
</Stack>
<Stack display="flex" alignItems="center" gap={3}>
<Stack 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>
</Stack>
<Stack>
<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>
</Stack>
</Stack>
</Stack>
{/* Simple "more coming" indicator */}
<Box bg="panel-gray/20" rounded="none" p={3} border borderStyle="dashed" borderColor="border-gray/30">
<Stack 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>
</Stack>
</Box>
</Stack>
);
}
// Desktop version
return (
<Box position="relative" fullWidth maxWidth="3xl" mx="auto">
<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 position="relative" fullWidth maxWidth="3xl" mx="auto">
<Stack 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-gray/30">
<Stack 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
@@ -63,22 +62,22 @@ export function SimPlatformMockup() {
>
ACTIVE: 1 | PLANNED: 3
</Text>
</Box>
</Stack>
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
<Stack display="grid" gridCols={{ base: 1, md: 2 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
{/* iRacing - Active */}
<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="1.5" h="1.5" rounded="full" bg="success-green"
<Stack 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">
<Stack position="absolute" top={{ base: 1, sm: 1.5, md: 2 }} right={{ base: 1, sm: 1.5, md: 2 }}>
<Stack 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="none" bg="primary-accent/10" display="flex" alignItems="center" justifyContent="center" border borderColor="primary-accent/20">
</Stack>
<Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
<Stack 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>
</Stack>
<Stack>
<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
@@ -89,8 +88,8 @@ export function SimPlatformMockup() {
>
ACTIVE
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -101,15 +100,15 @@ export function SimPlatformMockup() {
>
FULL INTEGRATION
</Text>
</Box>
</Stack>
{/* ACC - Future */}
<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="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
<Stack bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
<Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
<Stack 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>
</Stack>
<Stack>
<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
@@ -120,8 +119,8 @@ export function SimPlatformMockup() {
>
PLANNED
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -132,15 +131,15 @@ export function SimPlatformMockup() {
>
COMING LATER
</Text>
</Box>
</Stack>
{/* rFactor 2 - Future */}
<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="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
<Stack bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
<Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
<Stack 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>
</Stack>
<Stack>
<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
@@ -151,8 +150,8 @@ export function SimPlatformMockup() {
>
PLANNED
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -163,15 +162,15 @@ export function SimPlatformMockup() {
>
COMING LATER
</Text>
</Box>
</Stack>
{/* LMU - Future */}
<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="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
<Stack bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
<Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
<Stack 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>
</Stack>
<Stack>
<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
@@ -182,8 +181,8 @@ export function SimPlatformMockup() {
>
PLANNED
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -194,10 +193,10 @@ export function SimPlatformMockup() {
>
COMING LATER
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box pt={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderTop borderStyle="dashed" borderColor="border-gray/30">
<Stack 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' }}
@@ -209,9 +208,9 @@ export function SimPlatformMockup() {
>
Your identity stays with you across platforms
</Text>
</Box>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</Stack>
);
}

91
apps/website/components/mockups/StandingsTableMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion, useMotionValue, useSpring } from 'framer-motion';
import { useEffect, useState } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
export function StandingsTableMockup() {
const shouldReduceMotion = useReducedMotion();
@@ -17,9 +16,9 @@ export function StandingsTableMockup() {
if (isMobile) {
return (
<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-gray/30">
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Stack mb={3}>
<Stack display="flex" alignItems="center" gap={2} pb={2} borderBottom borderColor="border-gray/30">
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -37,12 +36,12 @@ export function StandingsTableMockup() {
>
PTS
</Text>
</Box>
</Box>
</Stack>
</Stack>
<Stack gap={1}>
{[1, 2, 3, 4, 5].map((i) => (
<Box
<Stack
key={i}
display="flex"
alignItems="center"
@@ -54,7 +53,7 @@ export function StandingsTableMockup() {
bg={i <= 3 ? 'panel-gray/40' : 'transparent'}
borderColor={i <= 3 ? 'primary-accent/20' : 'border-gray/20'}
>
<Box
<Stack
h="6"
w="6"
rounded="none"
@@ -69,12 +68,12 @@ export function StandingsTableMockup() {
weight="bold"
>
{i}
</Box>
<Box flexGrow={1} display="flex" alignItems="center" gap={2}>
<Box h="1.5" fullWidth maxWidth="80px" bg="white/10" rounded="none" />
</Box>
<Box position="relative" w="12" h="4" bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
<Box
</Stack>
<Stack flexGrow={1} display="flex" alignItems="center" gap={2}>
<Stack h="1.5" fullWidth maxWidth="80px" bg="white/10" rounded="none" />
</Stack>
<Stack position="relative" w="12" h="4" bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
<Stack
position="absolute"
insetY="0"
left="0"
@@ -82,16 +81,16 @@ export function StandingsTableMockup() {
// 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">
<Stack position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
<Text size="xs" font="mono" weight="bold" color="text-white">
{300 - i * 20}
</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
);
}
@@ -108,8 +107,8 @@ export function StandingsTableMockup() {
});
return (
<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 }}>
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
<Stack mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -122,7 +121,7 @@ export function StandingsTableMockup() {
>
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-gray/30">
<Stack 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' }}
@@ -150,7 +149,7 @@ export function StandingsTableMockup() {
>
Wins
</Text>
<Box display="flex" alignItems="center" gap={1}>
<Stack display="flex" alignItems="center" gap={1}>
<Text
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
@@ -160,13 +159,13 @@ export function StandingsTableMockup() {
>
Points
</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
<Stack gap={1}>
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
<Box
<Stack
key={i}
as={motion.div}
variants={getRowAnimation(i)}
@@ -191,7 +190,7 @@ export function StandingsTableMockup() {
transition: { duration: 0.15 }
}}
>
<Box
<Stack
as={motion.div}
h={{ base: 6, sm: 7 }}
w={{ base: 6, sm: 7 }}
@@ -207,25 +206,25 @@ export function StandingsTableMockup() {
font="mono"
>
{i}
</Box>
<Box flexGrow={1} display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }}>
<Box h="1.5" fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="white/10" rounded="none" />
</Box>
<Box h="1" w={{ base: 10, sm: 12, md: 16 }} bg="white/5" rounded="none"
</Stack>
<Stack flexGrow={1} display="flex" alignItems="center" gap={{ base: 1, sm: 1.5, md: 2 }}>
<Stack h="1.5" fullWidth maxWidth={{ base: '80px', sm: '100px', md: '140px' }} bg="white/10" rounded="none" />
</Stack>
<Stack 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"
/>
<Box position="relative">
<Stack position="relative">
<AnimatedPoints
points={300 - i * 20}
position={i}
shouldReduceMotion={shouldReduceMotion ?? false}
/>
</Box>
</Box>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
);
}
@@ -252,8 +251,8 @@ 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 }} bg="graphite-black" rounded="none" border borderColor="border-gray/30" overflow="hidden">
<Box
<Stack 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">
<Stack
as={motion.div}
position="absolute"
insetY="0"
@@ -263,17 +262,17 @@ function AnimatedPoints({
animate={{ width: `${percentage}%` }}
transition={{ duration: shouldReduceMotion ? 0 : 0.8, ease: 'easeOut', delay: 0.1 + position * 0.05 }}
/>
<Box position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
<Box as={motion.span}
<Stack position="relative" h="full" display="flex" alignItems="center" justifyContent="center">
<Stack as={motion.span}
// eslint-disable-next-line gridpilot-rules/component-classification
style={{ fontSize: '10px' }}
font="mono"
weight="bold"
color="text-white"
>
{shouldReduceMotion ? points : <Box as={motion.span}>{spring}</Box>}
</Box>
</Box>
</Box>
{shouldReduceMotion ? points : <Stack as={motion.span}>{spring}</Stack>}
</Stack>
</Stack>
</Stack>
);
}

113
apps/website/components/mockups/TeamCompetitionMockup.tsx
View File

@@ -2,9 +2,8 @@
import { motion, useReducedMotion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
export function TeamCompetitionMockup() {
const shouldReduceMotion = useReducedMotion();
@@ -20,13 +19,13 @@ export function TeamCompetitionMockup() {
if (isMobile) {
return (
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
<Stack gap={4}>
<Box>
<Stack>
<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
<Stack
key={i}
position="relative"
display="flex"
@@ -39,7 +38,7 @@ export function TeamCompetitionMockup() {
borderColor="border-gray/20"
overflow="hidden"
>
<Box
<Stack
position="absolute"
left="0"
top="0"
@@ -47,7 +46,7 @@ export function TeamCompetitionMockup() {
w="0.5"
style={{ backgroundColor: teamColors[i-1] }}
/>
<Box
<Stack
h="5"
w="5"
rounded="none"
@@ -63,23 +62,23 @@ export function TeamCompetitionMockup() {
}}
>
<Text color="text-white" font="mono">{i}</Text>
</Box>
<Box flexGrow={1}>
<Box h="1.5" w="full" bg="white/10" rounded="none" />
</Box>
<Box h="3" w="10" bg="graphite-black" rounded="none" border borderColor="border-gray/30" />
</Box>
</Stack>
<Stack flexGrow={1}>
<Stack h="1.5" w="full" bg="white/10" rounded="none" />
</Stack>
<Stack h="3" w="10" bg="graphite-black" rounded="none" border borderColor="border-gray/30" />
</Stack>
))}
</Stack>
</Box>
</Stack>
<Box h="px" bg="border-gray/30" />
<Stack h="px" bg="border-gray/30" />
<Box>
<Stack>
<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
<Stack
key={i}
position="relative"
display="flex"
@@ -92,7 +91,7 @@ export function TeamCompetitionMockup() {
borderColor="border-gray/20"
overflow="hidden"
>
<Box
<Stack
position="absolute"
left="0"
top="0"
@@ -100,23 +99,23 @@ export function TeamCompetitionMockup() {
w="0.5"
style={{ backgroundColor: teamColors[i-1] }}
/>
<Box flexGrow={1}>
<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
<Stack flexGrow={1}>
<Stack h="1.5" w="full" bg="white/10" rounded="none" mb={1.5} />
<Stack position="relative" h="1" bg="graphite-black" rounded="none" overflow="hidden">
<Stack
position="absolute"
insetY="0"
left="0"
style={{ backgroundColor: teamColors[i-1], width: `${100 - (i-1) * 15}%` }}
/>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Stack>
</Stack>
</Box>
</Stack>
);
}
@@ -151,21 +150,21 @@ export function TeamCompetitionMockup() {
};
return (
<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
<Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} overflow="hidden">
<Stack display="grid" gridCols={2} gap={{ base: 2, sm: 3, md: 4, lg: 6 }} fullHeight>
<Stack
as={motion.div}
variants={leftColumnVariants}
initial="hidden"
animate="visible"
position="relative"
>
<Box h="6" w="24" bg="panel-gray" rounded="none" mb={4} display="flex" alignItems="center" justifyContent="center" border borderColor="border-gray/30">
<Stack 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>
<Stack gap={1}>
{[1, 2, 3, 4, 5].map((i) => (
<Box
<Stack
key={i}
as={motion.div}
custom={i}
@@ -190,7 +189,7 @@ export function TeamCompetitionMockup() {
transition: { duration: 0.15 }
}}
>
<Box
<Stack
position="absolute"
left="0"
top="0"
@@ -198,7 +197,7 @@ export function TeamCompetitionMockup() {
w="0.5"
style={{ backgroundColor: teamColors[i-1] }}
/>
<Box
<Stack
h="5"
w="5"
rounded="none"
@@ -215,29 +214,29 @@ export function TeamCompetitionMockup() {
}}
>
<Text color="text-white" font="mono">{i}</Text>
</Box>
<Box flexGrow={1} minWidth="0">
<Box h="1.5" w="full" bg="white/10" rounded="none" />
</Box>
<Box h="3" w="12" bg="graphite-black" rounded="none" border borderColor="border-gray/30" />
</Box>
</Stack>
<Stack flexGrow={1} minWidth="0">
<Stack h="1.5" w="full" bg="white/10" rounded="none" />
</Stack>
<Stack h="3" w="12" bg="graphite-black" rounded="none" border borderColor="border-gray/30" />
</Stack>
))}
</Stack>
</Box>
</Stack>
<Box
<Stack
as={motion.div}
variants={rightColumnVariants}
initial="hidden"
animate="visible"
position="relative"
>
<Box h="6" w="32" bg="panel-gray" rounded="none" mb={4} display="flex" alignItems="center" justifyContent="center" border borderColor="border-gray/30">
<Stack 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>
<Stack gap={1}>
{[1, 2, 3, 4, 5].map((i) => (
<Box
<Stack
key={i}
as={motion.div}
custom={i}
@@ -262,7 +261,7 @@ export function TeamCompetitionMockup() {
transition: { duration: 0.15 }
}}
>
<Box
<Stack
position="absolute"
right="0"
top="0"
@@ -270,10 +269,10 @@ export function TeamCompetitionMockup() {
w="0.5"
style={{ backgroundColor: teamColors[i-1] }}
/>
<Box flexGrow={1} minWidth="0">
<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
<Stack flexGrow={1} minWidth="0">
<Stack h="1.5" w="full" bg="white/10" rounded="none" mb={1.5} />
<Stack position="relative" h="1" bg="graphite-black" rounded="none" overflow="hidden">
<Stack
as={motion.div}
position="absolute"
insetY="0"
@@ -283,13 +282,13 @@ export function TeamCompetitionMockup() {
animate={{ width: `${100 - (i-1) * 15}%` }}
transition={{ duration: shouldReduceMotion ? 0 : 0.8, delay: 0.4 + i * 0.05 }}
/>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
))}
</Stack>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
);
}

43
apps/website/components/mockups/WorkflowMockup.tsx
View File

@@ -3,9 +3,8 @@
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
import { CheckCircle2, LucideIcon } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
@@ -42,32 +41,32 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
if (!isMounted) {
return (
<Box position="relative" fullWidth>
<Stack position="relative" fullWidth>
<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="none" bg="graphite-black" border={true} borderColor="border-gray/50" display="flex" center mb={2}>
<Stack 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>
</Stack>
<Text size="xs" weight="bold" color="text-white" className="uppercase tracking-widest">{step.title}</Text>
</Stack>
))}
</Stack>
</Surface>
</Box>
</Stack>
);
}
return (
<Box position="relative" fullWidth>
<Stack position="relative" fullWidth>
<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="white/5" position="relative">
<Box
<Stack position="absolute" top="3.5rem" left="8%" right="8%" display={{ base: 'none', sm: 'block' }}>
<Stack height="0.5" bg="white/5" position="relative">
<Stack
as={motion.div}
position="absolute"
fullHeight
@@ -76,8 +75,8 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
animate={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
transition={{ duration: 0.5, ease: 'easeInOut' }}
/>
</Box>
</Box>
</Stack>
</Stack>
{/* Steps */}
<Stack direction="row" justify="between" gap={2} position="relative">
@@ -87,7 +86,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
const StepIcon = step.icon;
return (
<Box
<Stack
as={motion.div}
key={step.id}
display="flex"
@@ -100,7 +99,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<Box
<Stack
as={motion.div}
w={{ base: '10', sm: '12' }}
h={{ base: '10', sm: '12' }}
@@ -120,7 +119,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
className="relative"
>
{isActive && (
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
<Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
)}
{isCompleted ? (
<Icon icon={CheckCircle2} size={5} color="text-success-green" />
@@ -129,7 +128,7 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
<Icon icon={StepIcon} size={5} />
</Text>
)}
</Box>
</Stack>
<Text
size="xs"
weight="bold"
@@ -140,14 +139,14 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
>
{step.title}
</Text>
</Box>
</Stack>
);
})}
</Stack>
{/* Active Step Preview - Mobile */}
<AnimatePresence mode="wait">
<Box
<Stack
as={motion.div}
key={activeStep}
initial={{ opacity: 0, y: 5 }}
@@ -160,17 +159,17 @@ export function WorkflowMockup({ steps }: WorkflowMockupProps) {
borderColor="border-gray/30"
display={{ base: 'block', sm: 'none' }}
>
<Box textAlign="center">
<Stack textAlign="center">
<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-600" block font="mono">
{steps[activeStep]?.description.toUpperCase() || ''}
</Text>
</Box>
</Box>
</Stack>
</Stack>
</AnimatePresence>
</Surface>
</Box>
</Stack>
);
}