website refactor
This commit is contained in:
@@ -1,8 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
|
||||
export default function SimPlatformMockup() {
|
||||
export function SimPlatformMockup() {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -15,119 +18,189 @@ export default function SimPlatformMockup() {
|
||||
// Simple mobile version - just the essence of cross-platform
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite to-iron-gray rounded-lg p-4 overflow-hidden flex items-center justify-center">
|
||||
<div className="space-y-3 w-full">
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite to-iron-gray" rounded="lg" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
|
||||
<Stack gap={3} w="full">
|
||||
{/* Active Platform - Clean */}
|
||||
<div className="bg-iron-gray/60 border-2 border-primary-blue rounded-xl p-4 relative">
|
||||
<div className="absolute top-3 right-3">
|
||||
<div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary-blue/20 flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-2xl font-bold text-primary-blue">iR</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-base font-semibold text-white">iRacing</div>
|
||||
<div className="text-xs text-performance-green">Active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Box bg="bg-iron-gray/60" border borderWidth="2px" borderColor="border-primary-blue" rounded="xl" p={4} position="relative">
|
||||
<Box position="absolute" top="3" right="3">
|
||||
<Box w="2" h="2" rounded="full" bg="bg-performance-green"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="animate-pulse"
|
||||
/>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box w="12" h="12" rounded="lg" bg="bg-primary-blue/20" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
|
||||
<Text size="2xl" weight="bold" color="text-primary-blue">iR</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="base" weight="semibold" color="text-white" block>iRacing</Text>
|
||||
<Text size="xs" color="text-performance-green" block>Active</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Simple "more coming" indicator */}
|
||||
<div className="bg-iron-gray/30 rounded-xl p-3 border border-charcoal-outline/50">
|
||||
<div className="text-xs text-center text-slate-500">More platforms coming</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Box bg="bg-iron-gray/30" rounded="xl" p={3} border borderColor="border-charcoal-outline/50">
|
||||
<Text size="xs" textAlign="center" color="text-slate-500" block>More platforms coming</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Desktop version
|
||||
return (
|
||||
<div className="relative w-full max-w-3xl mx-auto">
|
||||
<div className="bg-iron-gray border border-charcoal-outline rounded-lg p-1.5 sm:p-3 md:p-4 lg:p-6 shadow-2xl">
|
||||
<div className="space-y-1.5 sm:space-y-2 md:space-y-3 lg:space-y-4">
|
||||
<div className="flex items-center justify-between pb-1.5 sm:pb-2 md:pb-3 lg:pb-4 border-b border-charcoal-outline">
|
||||
<div className="text-[9px] sm:text-xs md:text-sm font-semibold text-slate-300">Platform Support</div>
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-slate-500">Active: 1 | Planned: 3</div>
|
||||
</div>
|
||||
<Box position="relative" fullWidth maxWidth="3xl" mx="auto">
|
||||
<Box bg="bg-iron-gray" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} shadow="2xl">
|
||||
<Stack gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" pb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderBottom borderColor="border-charcoal-outline">
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-300">Platform Support</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-500"
|
||||
>
|
||||
Active: 1 | Planned: 3
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-1.5 sm:gap-2 md:gap-3">
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
{/* iRacing - Active */}
|
||||
<div className="bg-deep-graphite border-2 border-primary-blue rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 relative overflow-hidden">
|
||||
<div className="absolute top-1 sm:top-1.5 md:top-2 right-1 sm:right-1.5 md:right-2">
|
||||
<div className="w-1 sm:w-1.5 md:w-2 h-1 sm:h-1.5 md:h-2 rounded-full bg-performance-green animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-primary-blue/10 flex items-center justify-center">
|
||||
<span className="text-base sm:text-xl md:text-2xl font-bold text-primary-blue">iR</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs sm:text-sm md:text-base font-semibold text-white">iRacing</div>
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-performance-green">Active</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-400">
|
||||
<Box bg="bg-deep-graphite" border borderWidth="2px" borderColor="border-primary-blue" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} position="relative" overflow="hidden">
|
||||
<Box position="absolute" top={{ base: 1, sm: 1.5, md: 2 }} right={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box w={{ base: 1, sm: 1.5, md: 2 }} h={{ base: 1, sm: 1.5, md: 2 }} rounded="full" bg="bg-performance-green"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="animate-pulse"
|
||||
/>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-primary-blue/10" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-primary-blue">iR</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" block>iRacing</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-performance-green"
|
||||
block
|
||||
>
|
||||
Active
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-400"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Full integration
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* ACC - Future */}
|
||||
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 opacity-40">
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-slate-700/20 flex items-center justify-center">
|
||||
<span className="text-base sm:text-xl md:text-2xl font-bold text-slate-600">AC</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs sm:text-sm font-semibold text-slate-500">ACC</div>
|
||||
<div className="text-[9px] sm:text-xs text-slate-600">Planned</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-600">
|
||||
<Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">AC</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>ACC</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
block
|
||||
>
|
||||
Planned
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Coming later
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* rFactor 2 - Future */}
|
||||
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 opacity-40">
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-slate-700/20 flex items-center justify-center">
|
||||
<span className="text-base sm:text-xl md:text-2xl font-bold text-slate-600">rF</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs sm:text-sm md:text-base font-semibold text-slate-500">rFactor 2</div>
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-slate-600">Planned</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-600">
|
||||
<Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">rF</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>rFactor 2</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
block
|
||||
>
|
||||
Planned
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Coming later
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* LMU - Future */}
|
||||
<div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 opacity-40">
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-slate-700/20 flex items-center justify-center">
|
||||
<span className="text-base sm:text-xl md:text-2xl font-bold text-slate-600">LM</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs sm:text-sm md:text-base font-semibold text-slate-500">Le Mans Ult.</div>
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-slate-600">Planned</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-600">
|
||||
<Box bg="bg-deep-graphite" border borderColor="border-charcoal-outline" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.4}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="sm" bg="bg-slate-700/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-slate-600">LM</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} weight="semibold" color="text-slate-500" block>Le Mans Ult.</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
block
|
||||
>
|
||||
Planned
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-600"
|
||||
mt={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Coming later
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div className="pt-1.5 sm:pt-2 md:pt-3 lg:pt-4 border-t border-charcoal-outline">
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-slate-500 text-center">
|
||||
<Box pt={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderTop borderColor="border-charcoal-outline">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-slate-500"
|
||||
textAlign="center"
|
||||
block
|
||||
>
|
||||
Your identity stays with you across platforms
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user