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-19 18:01:30 +01:00
parent 6154d54435
commit 61b5cf3b64
120 changed files with 2226 additions and 2021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/website/components/landing/BenefitCard.tsx
View File

@@ -44,8 +44,13 @@ export function BenefitCard({
rounded="xl"
border={true}
padding={6}
className={`relative h-full transition-all duration-300 group ${isHighlight ? 'border-primary-blue/30' : 'border-charcoal-outline hover:border-charcoal-outline/80'}`}
style={isHighlight ? { background: 'linear-gradient(to bottom right, rgba(25, 140, 255, 0.1), rgba(25, 140, 255, 0.05))' } : {}}
borderColor={isHighlight ? 'rgba(25, 140, 255, 0.3)' : 'var(--ui-color-border-low)'}
hoverBorderColor={isHighlight ? 'rgba(25, 140, 255, 0.5)' : 'var(--ui-color-border-default)'}
transition="all 0.3s ease"
group
position="relative"
fullHeight
bg={isHighlight ? 'linear-gradient(to bottom right, rgba(25, 140, 255, 0.1), rgba(25, 140, 255, 0.05))' : undefined}
>
{/* Icon */}
<Box
@@ -55,25 +60,25 @@ export function BenefitCard({
display="flex"
center
mb={4}
bg={isHighlight ? 'bg-primary-blue/20' : 'bg-iron-gray'}
bg={isHighlight ? 'rgba(25, 140, 255, 0.2)' : 'var(--ui-color-bg-surface-muted)'}
border={!isHighlight}
borderColor="border-charcoal-outline"
borderColor="var(--ui-color-border-low)"
>
<Icon icon={icon} size={6} className={isHighlight ? 'text-primary-blue' : 'text-gray-400'} />
<Icon icon={icon} size={6} intent={isHighlight ? 'primary' : 'low'} />
</Box>
{/* Content */}
<Heading level={3} mb={2}>{title}</Heading>
<Text size="sm" color="text-gray-400" block style={{ lineHeight: 1.625 }}>{description}</Text>
<Text size="sm" variant="low" block leading="relaxed">{description}</Text>
{/* Stats */}
{stats && (
<Box mt={4} pt={4} borderTop={true} borderColor="border-charcoal-outline/50">
<Box mt={4} pt={4} borderTop={true} borderColor="var(--ui-color-border-low)">
<Box display="flex" alignItems="baseline" gap={2}>
<Text size="2xl" weight="bold" color={isHighlight ? 'text-primary-blue' : 'text-white'}>
<Text size="2xl" weight="bold" variant={isHighlight ? 'primary' : 'high'}>
{stats.value}
</Text>
<Text size="sm" color="text-gray-500">{stats.label}</Text>
<Text size="sm" variant="low">{stats.label}</Text>
</Box>
</Box>
)}
@@ -84,7 +89,11 @@ export function BenefitCard({
position="absolute"
inset="0"
rounded="xl"
className="bg-gradient-to-br from-primary-blue/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), transparent)"
opacity={0}
groupHoverOpacity={1}
transition="opacity 0.3s ease"
pointerEvents="none"
/>
)}
</Surface>