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-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/website/components/sponsors/PricingTableShell.tsx
View File

@@ -1,8 +1,7 @@
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Check, Info } from 'lucide-react';
@@ -32,13 +31,13 @@ interface PricingTableShellProps {
*/
export function PricingTableShell({ title, tiers, onSelect, selectedId }: PricingTableShellProps) {
return (
<Box mb={8}>
<Stack mb={8}>
<Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
{title}
</Heading>
<Box display="grid" gridCols={{ base: 1, md: 3 }} gap={6}>
<Stack display="grid" gridCols={{ base: 1, md: 3 }} gap={6}>
{tiers.map((tier) => (
<Box
<Stack
key={tier.id}
p={6}
rounded="xl"
@@ -52,7 +51,7 @@ export function PricingTableShell({ title, tiers, onSelect, selectedId }: Pricin
hoverBorderColor={selectedId === tier.id ? 'border-primary-blue' : 'border-charcoal-outline'}
>
{tier.isPopular && (
<Box
<Stack
position="absolute"
top={0}
right={6}
@@ -63,10 +62,10 @@ export function PricingTableShell({ title, tiers, onSelect, selectedId }: Pricin
rounded="full"
>
<Text size="xs" weight="bold" color="text-white" uppercase letterSpacing="wider">Popular</Text>
</Box>
</Stack>
)}
<Box mb={6}>
<Stack mb={6}>
<Text size="sm" weight="bold" color="text-primary-blue" uppercase letterSpacing="wider" block mb={2}>
{tier.name}
</Text>
@@ -77,28 +76,28 @@ export function PricingTableShell({ title, tiers, onSelect, selectedId }: Pricin
<Text size="sm" color="text-gray-400" block mt={2}>
{tier.description}
</Text>
</Box>
</Stack>
<Stack gap={3} mb={8}>
{tier.features.map((feature, i) => (
<Stack key={i} direction="row" align="start" gap={3}>
<Box mt={0.5}>
<Stack mt={0.5}>
<Icon icon={Check} size={3.5} color="text-performance-green" />
</Box>
</Stack>
<Text size="sm" color="text-gray-300">{feature}</Text>
</Stack>
))}
</Stack>
{!tier.available && (
<Box display="flex" alignItems="center" gap={2} p={3} rounded="lg" bg="bg-racing-red/10" border borderColor="border-racing-red/20">
<Stack display="flex" alignItems="center" gap={2} p={3} rounded="lg" bg="bg-racing-red/10" border borderColor="border-racing-red/20">
<Icon icon={Info} size={4} color="text-racing-red" />
<Text size="xs" weight="medium" color="text-racing-red">Currently Unavailable</Text>
</Box>
</Stack>
)}
</Box>
</Stack>
))}
</Box>
</Box>
</Stack>
</Stack>
);
}