website refactor

apps/website/components/sponsors/SponsorBrandingPreview.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { SponsorLogo } from '@/ui/SponsorLogo';
+
+interface SponsorBrandingPreviewProps {
+  name: string;
+  logoUrl?: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+/**
+ * SponsorBrandingPreview
+ * 
+ * Visualizes how a sponsor's branding (logo and colors) will appear on the platform.
+ */
+export function SponsorBrandingPreview({ 
+  name, 
+  logoUrl, 
+  primaryColor = '#198CFF', 
+  secondaryColor = '#141619' 
+}: SponsorBrandingPreviewProps) {
+  return (
+    <Card p={0} overflow="hidden">
+      <Box p={4} borderBottom borderColor="border-charcoal-outline">
+        <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-400">
+          Branding Preview
+        </Text>
+      </Box>
+      
+      <Box p={6}>
+        <Stack gap={6}>
+          {/* Logo Preview */}
+          <Stack align="center" gap={4}>
+            <Surface 
+              variant="muted" 
+              rounded="xl" 
+              padding={8} 
+              bg="bg-iron-gray/10" 
+              border 
+              borderColor="border-charcoal-outline/50"
+              w="full"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <SponsorLogo src={logoUrl} alt={name} size={64} />
+            </Surface>
+            <Text size="sm" color="text-gray-400">Primary Logo Asset</Text>
+          </Stack>
+
+          {/* Color Palette */}
+          <Box>
+            <Text size="xs" weight="bold" uppercase letterSpacing="wider" color="text-gray-500" block mb={3}>
+              Color Palette
+            </Text>
+            <Stack direction="row" gap={4}>
+              <Stack gap={2} flexGrow={1}>
+                <Box h={12} rounded="lg" backgroundColor={primaryColor} border borderColor="border-white/10" />
+                <Text size="xs" color="text-gray-400" textAlign="center">{primaryColor}</Text>
+              </Stack>
+              <Stack gap={2} flexGrow={1}>
+                <Box h={12} rounded="lg" backgroundColor={secondaryColor} border borderColor="border-white/10" />
+                <Text size="xs" color="text-gray-400" textAlign="center">{secondaryColor}</Text>
+              </Stack>
+            </Stack>
+          </Box>
+
+          {/* Mockup Hint */}
+          <Surface variant="muted" rounded="lg" padding={3} bg="bg-primary-blue/5" border borderColor="border-primary-blue/20">
+            <Text size="xs" color="text-primary-blue" textAlign="center">
+              These assets will be used for broadcast overlays and car liveries.
+            </Text>
+          </Surface>
+        </Stack>
+      </Box>
+    </Card>
+  );
+}