website refactor

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>
   );