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

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>
);
}