website refactor
This commit is contained in:
@@ -25,7 +25,6 @@ const ICON_MAP: Record<string, LucideIcon> = {
|
||||
};
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
@@ -143,8 +142,8 @@ export function SponsorInsightsCard({
|
||||
borderColor="border-primary-blue/30"
|
||||
bg={`linear-gradient(to right, ${tierStyles.gradient.split(' ')[1]}, ${tierStyles.gradient.split(' ')[2]})`}
|
||||
>
|
||||
<Box display="flex" alignItems="start" justifyContent="between" mb={4}>
|
||||
<Box>
|
||||
<Stack display="flex" alignItems="start" justifyContent="between" mb={4}>
|
||||
<Stack>
|
||||
<Stack direction="row" align="center" gap={2} mb={1}>
|
||||
<Icon icon={Target} size={5} color="rgb(59, 130, 246)" />
|
||||
<Heading level={3}>Sponsorship Opportunity</Heading>
|
||||
@@ -152,11 +151,11 @@ export function SponsorInsightsCard({
|
||||
<Text size="sm" color="text-gray-400">
|
||||
{getSponsorshipTagline(entityType)}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<SponsorshipTierBadge tier={tier} entityLabel={getEntityLabel(entityType)} />
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box display="grid" gridCols={{ base: 2, md: 4 }} gap={3} mb={4}>
|
||||
<Stack display="grid" gridCols={{ base: 2, md: 4 }} gap={3} mb={4}>
|
||||
{metrics.slice(0, 4).map((metric, index) => {
|
||||
const IconComponent = typeof metric.icon === 'string' ? ICON_MAP[metric.icon] || Target : metric.icon;
|
||||
return (
|
||||
@@ -170,10 +169,10 @@ export function SponsorInsightsCard({
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{(trustScore !== undefined || discordMembers !== undefined || monthlyActivity !== undefined) && (
|
||||
<Box display="flex" flexWrap="wrap" gap={4} mb={4} pb={4} borderBottom borderColor="border-charcoal-outline/50">
|
||||
<Stack display="flex" flexWrap="wrap" gap={4} mb={4} pb={4} borderBottom borderColor="border-charcoal-outline/50">
|
||||
{trustScore !== undefined && (
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Shield} size={4} color="rgb(16, 185, 129)" />
|
||||
@@ -195,10 +194,10 @@ export function SponsorInsightsCard({
|
||||
<Text size="sm" weight="semibold" color="text-white">{monthlyActivity}%</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={3} mb={4}>
|
||||
<Stack display="grid" gridCols={{ base: 1, md: 2 }} gap={3} mb={4}>
|
||||
{mainSlot && (
|
||||
<SponsorSlotCard
|
||||
variant="main"
|
||||
@@ -266,12 +265,12 @@ export function SponsorInsightsCard({
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{additionalStats && (
|
||||
<Box mb={4} pb={4} borderBottom borderColor="border-charcoal-outline/50">
|
||||
<Stack mb={4} pb={4} borderBottom borderColor="border-charcoal-outline/50">
|
||||
<Heading level={4} mb={2} color="text-gray-400">{additionalStats.label}</Heading>
|
||||
<Box display="flex" flexWrap="wrap" gap={4}>
|
||||
<Stack display="flex" flexWrap="wrap" gap={4}>
|
||||
{additionalStats.items.map((item, index) => (
|
||||
<Stack key={index} direction="row" align="center" gap={2}>
|
||||
<Text size="sm" color="text-gray-500">{item.label}:</Text>
|
||||
@@ -280,8 +279,8 @@ export function SponsorInsightsCard({
|
||||
</Text>
|
||||
</Stack>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
@@ -293,7 +292,7 @@ export function SponsorInsightsCard({
|
||||
/>
|
||||
)}
|
||||
|
||||
<Box display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-charcoal-outline/50">
|
||||
<Stack display="flex" alignItems="center" justifyContent="between" pt={3} borderTop borderColor="border-charcoal-outline/50">
|
||||
<Text size="xs" color="text-gray-500">
|
||||
10% platform fee applies • Logos burned on all liveries • Sponsorships are attached to seasons
|
||||
{appliedTiers.size > 0 && ' • Application pending review'}
|
||||
@@ -305,7 +304,7 @@ export function SponsorInsightsCard({
|
||||
>
|
||||
{ctaLabel || 'View Full Details'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user