website refactor

apps/website/components/home/QuickLinksPanel.tsx

@@ -4,13 +4,11 @@ import { routes } from '@/lib/routing/RouteConfig';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Plus, Search, Shield, Users } from 'lucide-react';
 
 /**
  * QuickLinksPanel - Semantic quick actions bar.
- * Replaces HomeQuickActions with a more semantic implementation.
  */
 export function QuickLinksPanel() {
   const links = [
@@ -21,34 +19,20 @@ export function QuickLinksPanel() {
   ];
 
   return (
-    <Stack as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
-      <Container>
-        <Stack direction="row" wrap justify="center" gap={4}>
-          {links.map((link) => (
-            <Button
-              key={link.label}
-              as="a"
-              href={link.href}
-              variant="secondary"
-              px={6}
-              bg="graphite-black"
-              borderColor="border-gray/50"
-              className="flex items-center gap-3 transition-all hover:border-primary-accent/50 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>
-          ))}
-        </Stack>
-      </Container>
-    </Stack>
+    <Container>
+      <ButtonGroup alignment="center" gap={4} marginTop={8}>
+        {links.map((link) => (
+          <Button
+            key={link.label}
+            as="a"
+            href={link.href}
+            variant="secondary"
+            icon={<Icon icon={link.icon} size={4} intent="low" />}
+          >
+            {link.label}
+          </Button>
+        ))}
+      </ButtonGroup>
+    </Container>
   );
 }