website refactor

apps/website/ui/QuickActionLink.tsx

@@ -1,33 +1,36 @@
 import React from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon, ArrowRight } from 'lucide-react';
+import { Link } from './Link';
 
-interface QuickActionLinkProps {
+export interface QuickActionLinkProps {
+  label: string;
+  icon: LucideIcon;
   href: string;
-  children: React.ReactNode;
-  variant?: 'blue' | 'purple' | 'orange';
-  className?: string;
 }
 
-export function QuickActionLink({ 
-  href, 
-  children, 
-  variant = 'blue',
-  className = ''
-}: QuickActionLinkProps) {
-  const variantClasses = {
-    blue: 'bg-primary-blue/20 border-primary-blue/30 text-primary-blue hover:bg-primary-blue/30',
-    purple: 'bg-purple-500/20 border-purple-500/30 text-purple-300 hover:bg-purple-500/30',
-    orange: 'bg-orange-500/20 border-orange-500/30 text-orange-300 hover:bg-orange-500/30'
-  };
-  
-  const classes = [
-    'px-4 py-3 border rounded-lg transition-colors text-sm font-medium text-center inline-block w-full',
-    variantClasses[variant],
-    className
-  ].filter(Boolean).join(' ');
-  
+export const QuickActionLink = ({ 
+  label, 
+  icon, 
+  href 
+}: QuickActionLinkProps) => {
   return (
-    <a href={href} className={classes}>
-      {children}
-    </a>
+    <Link href={href} underline="none">
+      <Box 
+        display="flex" 
+        alignItems="center" 
+        gap={3} 
+        paddingY={2}
+        className="group"
+      >
+        <Icon icon={icon} size={4} intent="low" className="group-hover:text-[var(--ui-color-intent-primary)] transition-colors" />
+        <Text size="sm" variant="med" className="group-hover:text-[var(--ui-color-text-high)] transition-colors">
+          {label}
+        </Text>
+        <Icon icon={ArrowRight} size={3} intent="low" className="opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
+      </Box>
+    </Link>
   );
-}
+};