website refactor

apps/website/components/sponsors/SponsorWorkflowMockup.tsx

@@ -8,7 +8,7 @@ import {
   Car,
   TrendingUp,
 } from 'lucide-react';
-import { WorkflowMockup, WorkflowStep } from '@/components/mockups/WorkflowMockup';
+import { WorkflowMockup, WorkflowStep } from '@/ui/WorkflowMockup';
 
 const WORKFLOW_STEPS: WorkflowStep[] = [
   {
@@ -16,35 +16,35 @@ const WORKFLOW_STEPS: WorkflowStep[] = [
     icon: Search,
     title: 'Browse Leagues',
     description: 'Find leagues that match your target audience',
-    color: 'text-primary-blue',
+    intent: 'primary',
   },
   {
     id: 2,
     icon: MousePointer,
     title: 'Select Tier',
     description: 'Choose main or secondary sponsorship slot',
-    color: 'text-purple-400',
+    intent: 'telemetry',
   },
   {
     id: 3,
     icon: CreditCard,
     title: 'Complete Payment',
     description: 'Secure payment with automatic invoicing',
-    color: 'text-warning-amber',
+    intent: 'warning',
   },
   {
     id: 4,
     icon: Car,
     title: 'Logo Placement',
     description: 'Your brand on liveries and league pages',
-    color: 'text-performance-green',
+    intent: 'success',
   },
   {
     id: 5,
     icon: TrendingUp,
     title: 'Track Results',
     description: 'Monitor impressions and engagement',
-    color: 'text-primary-blue',
+    intent: 'primary',
   },
 ];
 

apps/website/components/sponsors/SponsorshipTierBadge.tsx

@@ -1,6 +1,7 @@
-
+'use client';
 
 import { Badge } from '@/ui/Badge';
+import React from 'react';
 
 interface SponsorshipTierBadgeProps {
   tier: 'premium' | 'standard' | 'starter';
@@ -8,18 +9,14 @@ interface SponsorshipTierBadgeProps {
 }
 
 export function SponsorshipTierBadge({ tier, entityLabel }: SponsorshipTierBadgeProps) {
-  const tierStyles = {
-    premium: 'bg-yellow-400/10 border-yellow-400/30 text-yellow-400',
-    standard: 'bg-purple-400/10 border-purple-400/30 text-purple-400',
-    starter: 'bg-primary-blue/10 border-primary-blue/30 text-primary-blue',
+  const variants: Record<string, 'warning' | 'primary' | 'info'> = {
+    premium: 'warning',
+    standard: 'primary',
+    starter: 'info',
   };
 
   return (
-    <Badge 
-      bg={tierStyles[tier].split(' ')[0]} 
-      borderColor={tierStyles[tier].split(' ')[1]} 
-      color={tierStyles[tier].split(' ')[2]}
-    >
+    <Badge variant={variants[tier]}>
       {tier.charAt(0).toUpperCase() + tier.slice(1)} {entityLabel}
     </Badge>
   );