Refactor: Implement Cloudflare Image Variants

src/components/designers/DesignerCard.tsx

@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import { Star, MapPin, Ruler, FerrisWheel } from 'lucide-react';
 import { Company } from '@/types/database';
 import { useNavigate } from 'react-router-dom';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
 
 interface DesignerCardProps {
   company: Company;
@@ -38,11 +39,12 @@ export function DesignerCard({ company }: DesignerCardProps) {
 
         {/* Logo or Icon */}
         <div className="relative z-10 flex items-center justify-center">
-          {company.logo_url ? (
+          {(company.logo_url || (company as any).logo_image_id) ? (
             <img 
-              src={company.logo_url} 
+              src={company.logo_url || getCloudflareImageUrl((company as any).logo_image_id, 'logo')} 
               alt={`${company.name} logo`}
               className="max-w-20 max-h-20 object-contain filter drop-shadow-sm"
+              loading="lazy"
             />
           ) : (
             <div className="p-4 rounded-full bg-muted/30 backdrop-blur-sm border border-border/30">