wip

apps/website/components/shared/HeroSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LucideIcon } from 'lucide-react';
-import Heading from '@/ui/Heading';
-import Button from '@/ui/Button';
+import { Heading } from '@/ui/Heading';
+import { Button } from '@/ui/Button';
 
 interface HeroSectionProps {
   title: string;
@@ -9,14 +9,18 @@ interface HeroSectionProps {
   icon?: LucideIcon;
   backgroundPattern?: React.ReactNode;
   stats?: Array<{
-    icon: LucideIcon;
+    icon?: LucideIcon;
     value: string | number;
     label: string;
+    color?: string;
+    animate?: boolean;
   }>;
   actions?: Array<{
     label: string;
     onClick: () => void;
     variant?: 'primary' | 'secondary';
+    icon?: LucideIcon;
+    description?: string;
   }>;
   children?: React.ReactNode;
   className?: string;
@@ -32,15 +36,16 @@ export const HeroSection = ({
   children,
   className = ''
 }: HeroSectionProps) => (
-  <section className={`relative overflow-hidden ${className}`}>
+  <section className={`relative overflow-hidden rounded-2xl bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60 border border-charcoal-outline/50 ${className}`}>
     {/* Background Pattern */}
-    {backgroundPattern && (
-      <div className="absolute inset-0">
-        {backgroundPattern}
-      </div>
+    {backgroundPattern || (
+      <>
+        <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
+      </>
     )}
 
-    <div className="relative max-w-7xl mx-auto px-6 py-10">
+    <div className="relative max-w-7xl mx-auto px-8 py-10">
       <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
         {/* Main Content */}
         <div className="max-w-2xl">
@@ -70,7 +75,11 @@ export const HeroSection = ({
             <div className="flex flex-wrap gap-6 mt-6">
               {stats.map((stat, index) => (
                 <div key={index} className="flex items-center gap-2">
-                  <div className="w-2 h-2 rounded-full bg-primary-blue animate-pulse" />
+                  {stat.icon ? (
+                    <stat.icon className={`w-4 h-4 ${stat.color || 'text-primary-blue'}`} />
+                  ) : (
+                    <div className={`w-2 h-2 rounded-full ${stat.color || 'bg-primary-blue'} ${stat.animate ? 'animate-pulse' : ''}`} />
+                  )}
                   <span className="text-sm text-gray-400">
                     <span className="text-white font-semibold">{stat.value}</span> {stat.label}
                   </span>
@@ -84,14 +93,19 @@ export const HeroSection = ({
         {actions && actions.length > 0 && (
           <div className="flex flex-col gap-4">
             {actions.map((action, index) => (
-              <Button
-                key={index}
-                variant={action.variant || 'primary'}
-                onClick={action.onClick}
-                className="flex items-center gap-2 px-6 py-3"
-              >
-                {action.label}
-              </Button>
+              <div key={index} className="flex flex-col gap-2">
+                <Button
+                  variant={action.variant || 'primary'}
+                  onClick={action.onClick}
+                  className="flex items-center gap-2 px-6 py-3"
+                >
+                  {action.icon && <action.icon className="w-5 h-5" />}
+                  {action.label}
+                </Button>
+                {action.description && (
+                  <p className="text-xs text-gray-500 text-center">{action.description}</p>
+                )}
+              </div>
             ))}
           </div>
         )}

apps/website/components/shared/StatusBadge.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LucideIcon } from 'lucide-react';
+import { StatusBadge as UIStatusBadge } from '@/ui/StatusBadge';
 
 interface StatusBadgeProps {
   status: string;
@@ -16,51 +17,42 @@ interface StatusBadgeProps {
 export const StatusBadge = ({ status, config, className = '' }: StatusBadgeProps) => {
   const defaultConfig = {
     scheduled: {
-      icon: () => null,
-      color: 'text-primary-blue',
-      bg: 'bg-primary-blue/10',
-      border: 'border-primary-blue/30',
+      icon: undefined,
+      variant: 'info' as const,
       label: 'Scheduled',
     },
     running: {
-      icon: () => null,
-      color: 'text-performance-green',
-      bg: 'bg-performance-green/10',
-      border: 'border-performance-green/30',
+      icon: undefined,
+      variant: 'success' as const,
       label: 'LIVE',
     },
     completed: {
-      icon: () => null,
-      color: 'text-gray-400',
-      bg: 'bg-gray-500/10',
-      border: 'border-gray-500/30',
+      icon: undefined,
+      variant: 'neutral' as const,
       label: 'Completed',
     },
     cancelled: {
-      icon: () => null,
-      color: 'text-warning-amber',
-      bg: 'bg-warning-amber/10',
-      border: 'border-warning-amber/30',
+      icon: undefined,
+      variant: 'warning' as const,
       label: 'Cancelled',
     },
   };
 
-  const badgeConfig = config || defaultConfig[status as keyof typeof defaultConfig] || {
-    icon: () => null,
-    color: 'text-gray-400',
-    bg: 'bg-gray-500/10',
-    border: 'border-gray-500/30',
-    label: status,
-  };
-
-  const Icon = badgeConfig.icon;
+  const badgeConfig = config 
+    ? { ...config, variant: 'info' as const } // Fallback variant if config is provided
+    : defaultConfig[status as keyof typeof defaultConfig] || {
+        icon: undefined,
+        variant: 'neutral' as const,
+        label: status,
+      };
 
   return (
-    <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${badgeConfig.bg} ${badgeConfig.border} border ${className}`}>
-      {Icon && <Icon className={`w-3.5 h-3.5 ${badgeConfig.color}`} />}
-      <span className={`text-xs font-medium ${badgeConfig.color}`}>
-        {badgeConfig.label}
-      </span>
-    </div>
+    <UIStatusBadge 
+      variant={badgeConfig.variant} 
+      icon={badgeConfig.icon}
+      className={className}
+    >
+      {badgeConfig.label}
+    </UIStatusBadge>
   );
 };

apps/website/components/shared/state/EmptyState.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { EmptyStateProps, EmptyStateAction } from './types';
-import Button from '@/ui/Button';
+import { Button } from '@/ui/Button';
 
 // Illustration components (simple SVG representations)
 const Illustrations = {