website refactor

apps/website/components/home/QuickLinksPanel.tsx

@@ -5,9 +5,9 @@ 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';
+import { Stack } from '@/ui/Stack';
 
 /**
  * QuickLinksPanel - Semantic quick actions bar.
@@ -22,24 +22,19 @@ export function QuickLinksPanel() {
   ];
 
   return (
-    <Box as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
+    <Stack as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
       <Container>
-        <Box display="flex" flexWrap="wrap" justifyContent="center" gap={4}>
+        <Stack direction="row" wrap justify="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
+              className="flex items-center gap-3 transition-all hover:border-primary-accent/50 group"
             >
               <Icon 
                 icon={link.icon} 
@@ -53,8 +48,8 @@ export function QuickLinksPanel() {
               </Text>
             </Button>
           ))}
-        </Box>
+        </Stack>
       </Container>
-    </Box>
+    </Stack>
   );
 }