Refactor: Implement Cloudflare Image Variants

src/components/rides/RideModelCard.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { FerrisWheel } from 'lucide-react';
 import { RideModel } from '@/types/database';
 import { useNavigate } from 'react-router-dom';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
 
 interface RideModelCardProps {
   model: RideModel;
@@ -45,9 +46,15 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
       >
         {(cardImageUrl || cardImageId) ? (
           <img 
-            src={cardImageUrl || `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${cardImageId}/public`}
+            src={cardImageUrl || getCloudflareImageUrl(cardImageId, 'card')}
+            srcSet={cardImageId ? `
+              ${getCloudflareImageUrl(cardImageId, 'cardthumb')} 600w,
+              ${getCloudflareImageUrl(cardImageId, 'card')} 1200w
+            ` : undefined}
+            sizes="(max-width: 640px) 600px, 1200px"
             alt={model.name}
             className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            loading="lazy"
           />
         ) : (
           <div className="flex items-center justify-center h-full">