website refactor

apps/website/components/home/QuickLinksPanel.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Plus, Search, Shield, Users } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Text } from '@/ui/Text';
+
+/**
+ * QuickLinksPanel - Semantic quick actions bar.
+ * Replaces HomeQuickActions with a more semantic implementation.
+ */
+export function QuickLinksPanel() {
+  const links = [
+    { label: 'Find League', icon: Search, href: routes.public.leagues },
+    { label: 'Join Team', icon: Users, href: routes.public.teams },
+    { label: 'Create Race', icon: Plus, href: routes.protected.dashboard },
+    { label: 'Rulebooks', icon: Shield, href: '#' },
+  ];
+
+  return (
+    <Box as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
+      <Container>
+        <Box display="flex" flexWrap="wrap" justifyContent="center" gap={4}>
+          {links.map((link) => (
+            <Button
+              key={link.label}
+              as="a"
+              href={link.href}
+              variant="secondary"
+              display="flex"
+              alignItems="center"
+              gap={3}
+              px={6}
+              bg="graphite-black"
+              borderColor="border-gray/50"
+              hoverBorderColor="primary-accent/50"
+              transition
+              group
+            >
+              <Icon 
+                icon={link.icon} 
+                size={4} 
+                color="text-gray-500"
+                groupHoverTextColor="primary-accent"
+                transition
+              />
+              <Text size="xs" weight="bold" uppercase letterSpacing="widest">
+                {link.label}
+              </Text>
+            </Button>
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+}