feat: Implement missing URL pattern routes

src/components/rides/RideModelCard.tsx

@@ -0,0 +1,84 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { FerrisWheel } from 'lucide-react';
+import { RideModel } from '@/types/database';
+import { useNavigate } from 'react-router-dom';
+
+interface RideModelCardProps {
+  model: RideModel;
+  manufacturerSlug: string;
+}
+
+export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
+  const navigate = useNavigate();
+
+  const formatCategory = (category: string) => {
+    return category.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  const formatRideType = (type: string) => {
+    return type.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  const rideCount = (model as any).rides?.[0]?.count || 0;
+
+  return (
+    <Card className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group">
+      <div 
+        className="aspect-video bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 relative overflow-hidden"
+      >
+        {((model as any).card_image_url || (model as any).card_image_id) ? (
+          <img 
+            src={(model as any).card_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${(model as any).card_image_id}/public`}
+            alt={model.name}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <FerrisWheel className="w-16 h-16 text-muted-foreground/30" />
+          </div>
+        )}
+      </div>
+
+      <CardContent className="p-4 space-y-3">
+        <div>
+          <h3 className="font-semibold text-lg line-clamp-1 group-hover:text-primary transition-colors">
+            {model.name}
+          </h3>
+          {model.description && (
+            <p className="text-sm text-muted-foreground line-clamp-2 mt-1">
+              {model.description}
+            </p>
+          )}
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="secondary" className="text-xs">
+            {formatCategory(model.category)}
+          </Badge>
+          <Badge variant="outline" className="text-xs">
+            {formatRideType(model.ride_type)}
+          </Badge>
+        </div>
+
+        <div className="pt-2 flex items-center justify-between">
+          <span className="text-sm text-muted-foreground">
+            {rideCount} {rideCount === 1 ? 'ride' : 'rides'}
+          </span>
+          <Button 
+            variant="ghost" 
+            size="sm"
+            onClick={() => navigate(`/manufacturers/${manufacturerSlug}/rides?model=${model.slug}`)}
+          >
+            View Rides
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}