website refactor
This commit is contained in:
@@ -53,21 +53,21 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={6}
|
||||
className="p-8 bg-panel-gray/40 border border-border-gray/50 rounded-none hover:border-primary-accent/30 transition-all duration-300 ease-smooth group relative overflow-hidden"
|
||||
className="p-8 bg-panel-gray/20 border border-border-gray/20 rounded-none hover:border-primary-accent/20 transition-all duration-300 ease-smooth group relative overflow-hidden"
|
||||
>
|
||||
<Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/30">
|
||||
<Box aspectRatio="video" fullWidth position="relative" className="bg-graphite-black rounded-none overflow-hidden border border-border-gray/20">
|
||||
<MockupStack index={index}>
|
||||
<feature.MockupComponent />
|
||||
</MockupStack>
|
||||
</Box>
|
||||
<Stack gap={4}>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box w="1" h="4" bg="primary-accent" />
|
||||
<Heading level={3} weight="bold" fontSize="xl" className="tracking-tight">
|
||||
<Box w="1" h="3" bg="primary-accent" />
|
||||
<Heading level={3} weight="bold" fontSize="lg" className="tracking-tighter uppercase">
|
||||
{feature.title}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Text size="sm" color="text-gray-400" leading="relaxed" weight="normal">
|
||||
<Text size="sm" color="text-gray-500" leading="relaxed" weight="normal" className="group-hover:text-gray-400 transition-colors">
|
||||
{feature.description}
|
||||
</Text>
|
||||
</Stack>
|
||||
@@ -77,7 +77,7 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
|
||||
bottom="0"
|
||||
left="0"
|
||||
w="full"
|
||||
h="1"
|
||||
h="0.5"
|
||||
bg="primary-accent"
|
||||
className="scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"
|
||||
/>
|
||||
@@ -87,24 +87,24 @@ function FeatureCard({ feature, index }: { feature: typeof features[0], index: n
|
||||
|
||||
export function FeatureGrid() {
|
||||
return (
|
||||
<Section className="bg-graphite-black border-b border-border-gray/50 py-24">
|
||||
<Section className="bg-graphite-black border-b border-border-gray/20 py-32">
|
||||
<Container position="relative" zIndex={10}>
|
||||
<Stack gap={16}>
|
||||
<Box maxWidth="2xl">
|
||||
<Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4}>
|
||||
<Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.2em]">
|
||||
<Box borderLeft borderStyle="solid" borderColor="primary-accent" pl={4} mb={4} bg="primary-accent/5" py={1}>
|
||||
<Text size="xs" weight="bold" color="text-primary-accent" className="uppercase tracking-[0.3em]">
|
||||
Engineered for Competition
|
||||
</Text>
|
||||
</Box>
|
||||
<Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '4xl' }} className="tracking-tight">
|
||||
<Heading level={2} weight="bold" fontSize={{ base: '3xl', md: '5xl' }} className="tracking-tighter uppercase leading-none">
|
||||
Building for League Racing
|
||||
</Heading>
|
||||
<Text size="lg" color="text-gray-400" block mt={6} leading="relaxed">
|
||||
<Text size="lg" color="text-gray-500" block mt={6} leading="relaxed" className="border-l border-border-gray/20 pl-6">
|
||||
Every feature is designed to reduce friction and increase immersion. Join our Discord to help shape the future of the platform.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={8}>
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard key={feature.title} feature={feature} index={index} />
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user