website refactor

apps/website/components/sponsors/SponsorInsightsCard.tsx

@@ -8,8 +8,21 @@ import {
   MessageCircle,
   Shield,
   Target,
+  Users,
+  Zap,
+  Calendar,
   LucideIcon
 } from 'lucide-react';
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  users: Users,
+  zap: Zap,
+  calendar: Calendar,
+  activity: Activity,
+  shield: Shield,
+  target: Target,
+  message: MessageCircle,
+};
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
@@ -144,16 +157,19 @@ export function SponsorInsightsCard({
       </Box>
 
       <Box display="grid" gridCols={{ base: 2, md: 4 }} gap={3} mb={4}>
-        {metrics.slice(0, 4).map((metric, index) => (
-          <SponsorMetricCard
-            key={index}
-            label={metric.label}
-            value={metric.value}
-            icon={metric.icon as LucideIcon}
-            color={metric.color}
-            trend={metric.trend}
-          />
-        ))}
+        {metrics.slice(0, 4).map((metric, index) => {
+          const IconComponent = typeof metric.icon === 'string' ? ICON_MAP[metric.icon] || Target : metric.icon;
+          return (
+            <SponsorMetricCard
+              key={index}
+              label={metric.label}
+              value={metric.value}
+              icon={IconComponent as LucideIcon}
+              color={metric.color}
+              trend={metric.trend}
+            />
+          );
+        })}
       </Box>
 
       {(trustScore !== undefined || discordMembers !== undefined || monthlyActivity !== undefined) && (

apps/website/components/sponsors/SponsorInsightsCardTypes.ts

@@ -1,7 +1,7 @@
 import { ComponentType } from 'react';
 
 export interface SponsorMetric {
-  icon: ComponentType;
+  icon: string | ComponentType;
   label: string;
   value: string | number;
   color?: string;