website refactor

apps/website/components/leagues/LeagueRulesPanel.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+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 { Shield, Info } from 'lucide-react';
+
+interface Rule {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface LeagueRulesPanelProps {
+  rules: Rule[];
+}
+
+export function LeagueRulesPanel({ rules }: LeagueRulesPanelProps) {
+  return (
+    <Box as="section">
+      <Stack gap={8}>
+        <Box display="flex" alignItems="start" gap={4} p={4} bg="blue-500/5" border borderColor="blue-500/20">
+          <Box color="text-blue-500" mt={0.5}><Info size={20} /></Box>
+          <Stack gap={1}>
+            <Text size="sm" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">Code of Conduct</Text>
+            <Text size="sm" color="text-zinc-400" leading="relaxed">
+              All drivers are expected to maintain a high standard of sportsmanship. 
+              Intentional wrecking or abusive behavior will result in immediate disqualification.
+            </Text>
+          </Stack>
+        </Box>
+
+        <Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
+          {rules.map((rule) => (
+            <Box as="article" key={rule.id} display="flex" flexDirection="col" gap={3} p={6} border borderColor="zinc-800" bg="zinc-900/30">
+              <Box display="flex" alignItems="center" gap={3}>
+                <Box p={2} bg="zinc-800" color="text-zinc-400">
+                  <Shield size={18} />
+                </Box>
+                <Heading level={3} fontSize="md" weight="bold" color="text-white">{rule.title}</Heading>
+              </Box>
+              <Text size="sm" color="text-zinc-400" leading="relaxed">
+                {rule.content}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}