Refactor: Implement Cloudflare Image Variants

src/components/rides/RideCard.tsx

@@ -4,6 +4,7 @@ import { Badge } from '@/components/ui/badge';
 import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train } from 'lucide-react';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Ride } from '@/types/database';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
 
 interface RideCardProps {
   ride: Ride;
@@ -57,9 +58,15 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
         <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
           {(ride.card_image_url || ride.card_image_id || ride.image_url) ? (
             <img 
-              src={ride.card_image_url || (ride.card_image_id ? `https://imagedelivery.net/${import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH}/${ride.card_image_id}/public` : ride.image_url)} 
+              src={ride.card_image_url || getCloudflareImageUrl(ride.card_image_id, 'card') || ride.image_url} 
+              srcSet={ride.card_image_id ? `
+                ${getCloudflareImageUrl(ride.card_image_id, 'cardthumb')} 600w,
+                ${getCloudflareImageUrl(ride.card_image_id, 'card')} 1200w
+              ` : undefined}
+              sizes="(max-width: 640px) 600px, 1200px"
               alt={ride.name}
               className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+              loading="lazy"
             />
           ) : (
             <div className="opacity-50 flex items-center justify-center">