website refactor
This commit is contained in:
@@ -43,86 +43,58 @@ export function LeagueDiscoveryMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={3} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={3} overflow="hidden">
|
||||
<Box mb={3}>
|
||||
<Box h="4" w="40" bg="bg-white/10" rounded="sm" mb={3} />
|
||||
<Box h="1.5" w="40" bg="white/10" rounded="none" mb={3} />
|
||||
<Box display="flex" gap={2} flexWrap="wrap">
|
||||
{['Game', 'Region'].map((filter) => (
|
||||
<Box
|
||||
key={filter}
|
||||
h="6"
|
||||
h="5"
|
||||
px={3}
|
||||
bg="bg-charcoal-outline"
|
||||
bg="panel-gray"
|
||||
border
|
||||
borderColor="border-primary-blue/30"
|
||||
rounded="full"
|
||||
borderColor="primary-accent/30"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box h="1.5" w="10" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1" w="8" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Stack gap={3}>
|
||||
<Stack gap={2}>
|
||||
{leagues.map((league) => (
|
||||
<Box
|
||||
key={league.name}
|
||||
bg="bg-iron-gray/80"
|
||||
bg="panel-gray/40"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="lg"
|
||||
borderColor="border-gray/50"
|
||||
rounded="none"
|
||||
p={3}
|
||||
>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={2}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box h="10" w="10" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center">
|
||||
<Box h="10" w="10" rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="xl">{league.icon}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box h="3" w="32" bg="bg-white/10" rounded="sm" mb={1} />
|
||||
<Box h="1.5" w="32" bg="white/10" rounded="none" mb={1.5} />
|
||||
<Box display="flex" gap={1}>
|
||||
<Box as="span" px={1.5} py={0.5} bg="bg-primary-blue/20" rounded="sm">
|
||||
<Text size="xs" color="text-primary-blue">{league.carClass}</Text>
|
||||
</Box>
|
||||
<Box as="span" px={1.5} py={0.5} bg="bg-neon-aqua/20" rounded="sm">
|
||||
<Text size="xs" color="text-neon-aqua">{league.region}</Text>
|
||||
<Box as="span" px={1.5} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
<Text size="xs" color="text-primary-accent" weight="bold" font="mono">{league.carClass}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={2}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Text size="xs" color="text-gray-400">{league.drivers} drivers</Text>
|
||||
<Text size="xs" color="text-gray-400">•</Text>
|
||||
<Text size="xs" color="text-gray-400">{league.schedule}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Box
|
||||
as="svg"
|
||||
key={i}
|
||||
w="3"
|
||||
h="3"
|
||||
color={i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="fill-current"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box as="button" px={2} py={1} bg="bg-primary-blue" rounded="sm">
|
||||
<Text size="xs" color="text-white">Join</Text>
|
||||
<Text size="xs" color="text-gray-500" font="mono">{league.drivers} DRIVERS • {league.schedule.toUpperCase()}</Text>
|
||||
<Box px={2} py={0.5} bg="primary-accent" rounded="none">
|
||||
<Text size="xs" color="text-white" weight="bold">JOIN</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -141,25 +113,25 @@ export function LeagueDiscoveryMockup() {
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
|
||||
hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: 'spring' as const, stiffness: 200, damping: 20 }
|
||||
x: 0,
|
||||
transition: { duration: 0.4 }
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position="relative" fullWidth fullHeight bg="bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite" rounded="lg" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={{ base: 1.5, sm: 3, md: 5, lg: 8 }} overflow="hidden">
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: shouldReduceMotion ? 0 : -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
mb={{ base: 1.5, sm: 3, md: 4, lg: 6 }}
|
||||
>
|
||||
<Box h={{ base: 3, sm: 4, md: 5, lg: 6 }} w={{ base: 32, sm: 40, md: 52 }} bg="bg-white/10" rounded="sm" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} />
|
||||
<Box h="2" w="48" bg="white/10" rounded="none" mb={4} />
|
||||
|
||||
<Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }} flexWrap="wrap">
|
||||
<Box display="flex" gap={2} flexWrap="wrap">
|
||||
{['Game', 'Region', 'Skill'].map((filter, i) => (
|
||||
<Box
|
||||
key={filter}
|
||||
@@ -167,16 +139,16 @@ export function LeagueDiscoveryMockup() {
|
||||
initial={{ opacity: 0, scale: shouldReduceMotion ? 1 : 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: shouldReduceMotion ? 0 : i * 0.1 }}
|
||||
h={{ base: 5, sm: 6, md: 7, lg: 8 }}
|
||||
px={{ base: 2, sm: 3, md: 4 }}
|
||||
bg="bg-charcoal-outline"
|
||||
h="6"
|
||||
px={4}
|
||||
bg="panel-gray"
|
||||
border
|
||||
borderColor="border-primary-blue/30"
|
||||
rounded="full"
|
||||
borderColor="primary-accent/30"
|
||||
rounded="none"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box h={{ base: 1, sm: 1.5, md: 2 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-white/10" rounded="sm" />
|
||||
<Box h="1" w="10" bg="white/10" rounded="none" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
@@ -188,7 +160,7 @@ export function LeagueDiscoveryMockup() {
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<Stack gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Stack gap={2}>
|
||||
{leagues.map((league, index) => (
|
||||
<Box
|
||||
key={league.name}
|
||||
@@ -197,157 +169,90 @@ export function LeagueDiscoveryMockup() {
|
||||
onHoverStart={() => !shouldReduceMotion && setHoveredIndex(index)}
|
||||
onHoverEnd={() => setHoveredIndex(null)}
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
scale: 1.02,
|
||||
y: -4,
|
||||
x: 4,
|
||||
borderColor: '#198CFF30',
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
bg="bg-iron-gray/80"
|
||||
bg="panel-gray/20"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="lg"
|
||||
borderColor="border-gray/50"
|
||||
rounded="none"
|
||||
p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="backdrop-blur-sm"
|
||||
>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/30" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" shadow="0_0_12px_rgba(25,140,255,0.2)">
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={3}>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box h={{ base: 7, sm: 8, md: 10, lg: 12 }} w={{ base: 7, sm: 8, md: 10, lg: 12 }} rounded="none" border borderWidth="1px" borderColor="primary-accent/30" bg="graphite-black" display="flex" alignItems="center" justifyContent="center" className="relative">
|
||||
<Text size={{ base: 'base', sm: 'lg', md: 'xl', lg: '2xl' }}>{league.icon}</Text>
|
||||
<Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Box h={{ base: 2.5, sm: 3, md: 4 }} w={{ base: 28, sm: 32, md: 40 }} bg="bg-white/10" rounded="sm" mb={{ base: 1, sm: 1.5, md: 2 }} />
|
||||
<Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-primary-blue/20" rounded="sm">
|
||||
<Box h="2" w="40" bg="white/10" rounded="none" mb={2} />
|
||||
<Box display="flex" gap={2}>
|
||||
<Box as="span" px={2} py={0.5} bg="primary-accent/10" border borderColor="primary-accent/20">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-primary-blue"
|
||||
color="text-primary-accent"
|
||||
weight="bold"
|
||||
font="mono"
|
||||
>
|
||||
{league.carClass}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-neon-aqua/20" rounded="sm">
|
||||
<Box as="span" px={2} py={0.5} bg="telemetry-aqua/10" border borderColor="telemetry-aqua/20">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-neon-aqua"
|
||||
color="text-telemetry-aqua"
|
||||
weight="bold"
|
||||
font="mono"
|
||||
>
|
||||
{league.region}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box as="span" px={{ base: 1, sm: 1.5, md: 2 }} py={0.5} bg="bg-charcoal-outline" rounded="sm">
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
>
|
||||
{league.skill}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between" mb={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
<Box display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Box as="svg" w={{ base: 2.5, sm: 3, md: 4 }} h={{ base: 2.5, sm: 3, md: 4 }} color="text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
>
|
||||
{league.drivers} drivers
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Box as="svg" w={{ base: 2.5, sm: 3, md: 4 }} h={{ base: 2.5, sm: 3, md: 4 }} color="text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
>
|
||||
{league.schedule}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Box
|
||||
as={motion.svg}
|
||||
key={i}
|
||||
w={{ base: 2.5, sm: 3, md: 4 }}
|
||||
h={{ base: 2.5, sm: 3, md: 4 }}
|
||||
color={i < Math.floor(league.rating) ? 'text-warning-amber' : 'text-charcoal-outline'}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="fill-current"
|
||||
viewBox="0 0 20 20"
|
||||
animate={hoveredIndex === index && !shouldReduceMotion ? {
|
||||
scale: [1, 1.2, 1],
|
||||
transition: { delay: i * 0.05, duration: 0.3 }
|
||||
} : {}}
|
||||
>
|
||||
{/* eslint-disable-next-line gridpilot-rules/component-classification */}
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</Box>
|
||||
))}
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-400"
|
||||
ml={1}
|
||||
color="text-gray-500"
|
||||
font="mono"
|
||||
weight="bold"
|
||||
>
|
||||
{league.rating}
|
||||
{league.drivers} DRIVERS
|
||||
</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-500"
|
||||
font="mono"
|
||||
weight="bold"
|
||||
>
|
||||
{league.schedule.toUpperCase()}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" gap={{ base: 1, sm: 1.5, md: 2 }}>
|
||||
<Box display="flex" gap={2}>
|
||||
<Box
|
||||
as={motion.button}
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
|
||||
px={{ base: 1.5, sm: 2, md: 3 }}
|
||||
py={0.5}
|
||||
bg="bg-primary-blue"
|
||||
px={3}
|
||||
py={1}
|
||||
bg="primary-accent"
|
||||
color="text-white"
|
||||
rounded="sm"
|
||||
transition
|
||||
hoverBg="bg-primary-blue/80"
|
||||
rounded="none"
|
||||
>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
weight="bold"
|
||||
>
|
||||
Join
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
as={motion.button}
|
||||
whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
|
||||
whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
|
||||
px={{ base: 1.5, sm: 2, md: 3 }}
|
||||
py={0.5}
|
||||
bg="bg-charcoal-outline"
|
||||
color="text-gray-300"
|
||||
rounded="sm"
|
||||
transition
|
||||
hoverBg="bg-charcoal-outline/80"
|
||||
>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
>
|
||||
View
|
||||
JOIN
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user