website refactor
This commit is contained in:
@@ -2,8 +2,12 @@
|
||||
|
||||
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 { Heading } from '@/ui/Heading';
|
||||
|
||||
export default function LeagueHomeMockup() {
|
||||
export function LeagueHomeMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
@@ -13,49 +17,52 @@ export default function LeagueHomeMockup() {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-3 overflow-hidden">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="h-12 w-12 rounded-lg border-2 border-primary-blue/50 bg-charcoal-outline flex items-center justify-center text-2xl shadow-[0_0_20px_rgba(25,140,255,0.3)]">
|
||||
🏆
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-base font-bold text-white">Super GT</div>
|
||||
<div className="text-xs text-gray-400">Round 8/12</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<Stack gap={4}>
|
||||
<Box display="flex" alignItems="center" gap={3} mb={2}>
|
||||
<Box h="12" w="12" rounded="lg" border borderWidth="2px" borderColor="border-primary-blue/50" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" shadow="0_0_20px_rgba(25,140,255,0.3)">
|
||||
<Text size="2xl">🏆</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="base" weight="bold" color="text-white" block>Super GT</Text>
|
||||
<Text size="xs" color="text-gray-400" block>Round 8/12</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white mb-3">Next Race</div>
|
||||
<div className="relative flex items-center gap-3 bg-iron-gray rounded-lg p-3 border border-charcoal-outline">
|
||||
<div className="h-8 w-8 bg-charcoal-outline rounded border border-primary-blue/20 flex items-center justify-center text-base">
|
||||
🏁
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="h-2.5 w-28 bg-white/10 rounded mb-2"></div>
|
||||
<div className="h-2 w-20 bg-white/5 rounded"></div>
|
||||
</div>
|
||||
<div className="w-2 h-2 bg-primary-blue rounded-full shadow-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={3} block>Next Race</Text>
|
||||
<Box position="relative" display="flex" alignItems="center" gap={3} bg="bg-iron-gray" rounded="lg" p={3} border borderColor="border-charcoal-outline">
|
||||
<Box h="8" w="8" bg="bg-charcoal-outline" rounded border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size="base">🏁</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Box h="2.5" w="28" bg="bg-white/10" rounded="sm" mb={2} />
|
||||
<Box h="2" w="20" bg="bg-white/5" rounded="sm" />
|
||||
</Box>
|
||||
<Box w="2" h="2" bg="bg-primary-blue" rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="shadow-glow"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-white mb-3">Latest Result</div>
|
||||
<div className="bg-iron-gray rounded-lg p-3 border border-charcoal-outline">
|
||||
<div className="flex items-center gap-3 py-2 border-b border-charcoal-outline">
|
||||
<div className="h-2.5 w-6 bg-white/10 rounded"></div>
|
||||
<div className="h-2.5 flex-1 bg-white/10 rounded"></div>
|
||||
<div className="h-2.5 w-10 bg-white/10 rounded"></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 py-2">
|
||||
<div className="h-2 w-6 bg-white/5 rounded"></div>
|
||||
<div className="h-2 flex-1 bg-white/5 rounded"></div>
|
||||
<div className="h-2 w-10 bg-performance-green/20 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Box>
|
||||
<Text size="sm" weight="semibold" color="text-white" mb={3} block>Latest Result</Text>
|
||||
<Box bg="bg-iron-gray" rounded="lg" p={3} border borderColor="border-charcoal-outline">
|
||||
<Box display="flex" alignItems="center" gap={3} py={2} borderBottom borderColor="border-charcoal-outline">
|
||||
<Box h="2.5" w="6" bg="bg-white/10" rounded="sm" />
|
||||
<Box h="2.5" flexGrow={1} bg="bg-white/10" rounded="sm" />
|
||||
<Box h="2.5" w="10" bg="bg-white/10" rounded="sm" />
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={3} py={2}>
|
||||
<Box h="2" w="6" bg="bg-white/5" rounded="sm" />
|
||||
<Box h="2" flexGrow={1} bg="bg-white/5" rounded="sm" />
|
||||
<Box h="2" w="10" bg="bg-performance-green/20" rounded="sm" />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -73,88 +80,138 @@ export default function LeagueHomeMockup() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-1.5 sm:p-3 md:p-5 lg:p-8 overflow-hidden">
|
||||
<motion.div
|
||||
<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
|
||||
as={motion.div}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="space-y-1.5 sm:space-y-3 md:space-y-4 lg:space-y-6"
|
||||
>
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3 lg:gap-4 mb-1 sm:mb-1.5 md:mb-2">
|
||||
<div className="h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-12 lg:h-16 lg:w-16 rounded-lg border-2 border-primary-blue/50 bg-charcoal-outline flex items-center justify-center text-base sm:text-xl md:text-2xl lg:text-3xl shadow-[0_0_20px_rgba(25,140,255,0.3)]">
|
||||
🏆
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm sm:text-base md:text-lg lg:text-xl font-bold text-white mb-0.5">Super GT Championship</div>
|
||||
<div className="text-[9px] sm:text-xs md:text-sm text-gray-400">Season 3 • Round 8/12</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-white/50 mt-1 sm:mt-1.5 md:mt-2">Your league's dedicated home page</div>
|
||||
</motion.div>
|
||||
<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="lg" border borderWidth="2px" borderColor="border-primary-blue/50" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" shadow="0_0_20px_rgba(25,140,255,0.3)">
|
||||
<Text size={{ base: 'base', sm: 'xl', md: '2xl', lg: '3xl' }}>🏆</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={2} fontSize={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }} weight="bold" color="text-white" mb={0.5}>Super GT Championship</Heading>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '9px' }}
|
||||
color="text-gray-400"
|
||||
>
|
||||
Season 3 • Round 8/12
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
mt={{ base: 1, sm: 1.5, md: 2 }}
|
||||
block
|
||||
>
|
||||
Your league's dedicated home page
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="text-[10px] sm:text-sm md:text-base font-semibold text-white mb-1.5 sm:mb-2 md:mb-3 lg:mb-4">Upcoming Races</div>
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-white/50 mb-1.5 sm:mb-2 md:mb-3">Calendar automatically synced from iRacing</div>
|
||||
<div className="space-y-1.5 sm:space-y-2 md:space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="relative flex items-center gap-1.5 sm:gap-2 md:gap-3 lg:gap-4 bg-iron-gray rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 border border-charcoal-outline shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)]"
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
y: -2,
|
||||
boxShadow: '0 4px 24px rgba(0,0,0,0.4), 0 0 20px rgba(25,140,255,0.3)',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
transition={{ type: 'spring', stiffness: 200, damping: 20 }}
|
||||
>
|
||||
<div className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 lg:h-10 lg:w-10 bg-charcoal-outline rounded border border-primary-blue/20 flex items-center justify-center text-sm sm:text-base md:text-lg lg:text-xl">
|
||||
🏁
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="h-1.5 sm:h-2 md:h-2.5 lg:h-3 w-20 sm:w-24 md:w-28 lg:w-32 bg-white/10 rounded mb-1 sm:mb-1.5 md:mb-2"></div>
|
||||
<div className="h-1 sm:h-1.5 md:h-2 lg:h-2.5 w-12 sm:w-16 md:w-20 lg:w-24 bg-white/5 rounded font-mono"></div>
|
||||
</div>
|
||||
{i === 1 && (
|
||||
<motion.div
|
||||
className="absolute right-4"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
scale: [1, 1.2, 1],
|
||||
boxShadow: [
|
||||
'0 0 20px rgba(25,140,255,0.3)',
|
||||
'0 0 32px rgba(67,201,230,0.4)',
|
||||
'0 0 20px rgba(25,140,255,0.3)'
|
||||
]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<div className="w-1.5 h-1.5 sm:w-2 sm:h-2 md:w-2.5 md:h-2.5 lg:w-3 lg:h-3 bg-primary-blue rounded-full shadow-glow"></div>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} block>Upcoming Races</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
mb={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Calendar automatically synced from iRacing
|
||||
</Text>
|
||||
<Stack gap={{ base: 1.5, sm: 2, md: 3 }}>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
as={motion.div}
|
||||
position="relative"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
bg="bg-iron-gray"
|
||||
rounded="lg"
|
||||
p={{ base: 1.5, sm: 2, md: 3, lg: 4 }}
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
shadow="inset_0_1px_2px_rgba(0,0,0,0.2)"
|
||||
whileHover={shouldReduceMotion ? {} : {
|
||||
y: -2,
|
||||
boxShadow: '0 4px 24px rgba(0,0,0,0.4), 0 0 20px rgba(25,140,255,0.3)',
|
||||
transition: { duration: 0.15 }
|
||||
}}
|
||||
transition={{ type: 'spring', stiffness: 200, damping: 20 }}
|
||||
>
|
||||
<Box h={{ base: 6, sm: 7, md: 8, lg: 10 }} w={{ base: 6, sm: 7, md: 8, lg: 10 }} bg="bg-charcoal-outline" rounded border borderColor="border-primary-blue/20" display="flex" alignItems="center" justifyContent="center">
|
||||
<Text size={{ base: 'sm', sm: 'base', md: 'lg', lg: 'xl' }}>🏁</Text>
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} w={{ base: 20, sm: 24, md: 28, lg: 32 }} bg="bg-white/10" rounded="sm" mb={{ base: 1, sm: 1.5, md: 2 }} />
|
||||
<Box h={{ base: 1, sm: 1.5, md: 2, lg: 2.5 }} w={{ base: 12, sm: 16, md: 20, lg: 24 }} bg="bg-white/5" rounded="sm" font="mono" />
|
||||
</Box>
|
||||
{i === 1 && (
|
||||
<Box
|
||||
as={motion.div}
|
||||
position="absolute"
|
||||
right="4"
|
||||
animate={shouldReduceMotion ? {} : {
|
||||
scale: [1, 1.2, 1],
|
||||
boxShadow: [
|
||||
'0 0 20px rgba(25,140,255,0.3)',
|
||||
'0 0 32px rgba(67,201,230,0.4)',
|
||||
'0 0 20px rgba(25,140,255,0.3)'
|
||||
]
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<Box w={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} h={{ base: 1.5, sm: 2, md: 2.5, lg: 3 }} bg="bg-primary-blue" rounded="full"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="shadow-glow"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<motion.div variants={itemVariants}>
|
||||
<div className="text-[10px] sm:text-sm md:text-base font-semibold text-white mb-1.5 sm:mb-2 md:mb-3 lg:mb-4">Recent Results</div>
|
||||
<div className="text-[8px] sm:text-[10px] md:text-xs text-white/50 mb-1.5 sm:mb-2 md:mb-3">Results appear instantly after each race</div>
|
||||
<div className="bg-iron-gray rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 border border-charcoal-outline shadow-[0_4px_24px_rgba(0,0,0,0.4)]">
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-3 mb-1.5 sm:mb-2 md:mb-3 pb-1.5 sm:pb-2 md:pb-3 border-b border-charcoal-outline">
|
||||
<div className="h-1.5 sm:h-2 md:h-2.5 w-5 sm:w-6 md:w-8 bg-white/10 rounded font-mono"></div>
|
||||
<div className="h-1.5 sm:h-2 md:h-2.5 flex-1 bg-white/10 rounded"></div>
|
||||
<div className="h-1.5 sm:h-2 md:h-2.5 w-8 sm:w-10 md:w-12 bg-white/10 rounded font-mono"></div>
|
||||
</div>
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="flex items-center gap-1.5 sm:gap-2 md:gap-3 py-1 sm:py-1.5 md:py-2">
|
||||
<div className="h-1.5 sm:h-2 md:h-2.5 w-5 sm:w-6 md:w-8 bg-white/5 rounded font-mono"></div>
|
||||
<div className="h-1.5 sm:h-2 md:h-2.5 flex-1 bg-white/5 rounded"></div>
|
||||
<div className="h-1.5 sm:h-2 md:h-2.5 w-8 sm:w-10 md:w-12 bg-performance-green/20 rounded text-center font-mono text-performance-green"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="semibold" color="text-white" mb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} block>Recent Results</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '8px' }}
|
||||
color="text-white"
|
||||
opacity={0.5}
|
||||
mb={{ base: 1.5, sm: 2, md: 3 }}
|
||||
block
|
||||
>
|
||||
Results appear instantly after each race
|
||||
</Text>
|
||||
<Box bg="bg-iron-gray" rounded="lg" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} border borderColor="border-charcoal-outline" shadow="0_4px_24px_rgba(0,0,0,0.4)">
|
||||
<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-charcoal-outline">
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 5, sm: 6, md: 8 }} bg="bg-white/10" rounded="sm" font="mono" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} flexGrow={1} bg="bg-white/10" rounded="sm" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-white/10" rounded="sm" font="mono" />
|
||||
</Box>
|
||||
{[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={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 5, sm: 6, md: 8 }} bg="bg-white/5" rounded="sm" font="mono" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} flexGrow={1} bg="bg-white/5" rounded="sm" />
|
||||
<Box h={{ base: 1.5, sm: 2, md: 2.5 }} w={{ base: 8, sm: 10, md: 12 }} bg="bg-performance-green/20" rounded="sm" textAlign="center" font="mono" color="text-performance-green" />
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user