Add binding to card components to display data correctly

Update various HTML templates to use Vue.js binding syntax (':') for passing data to custom components like `c-park_card` and `c-ride_card`, resolving issues with data not being displayed.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/0bdea3fb-49ea-4863-b501-fa6f5af0cbf0/DkyJkDK

templates/cotton/park_card.html

@@ -41,7 +41,7 @@ Features:
 {% endcomment %}
 
 <c-vars 
-    park=""
+    park
     view_mode="grid"
     class=""
 />

templates/cotton/ride_card.html

@@ -54,7 +54,7 @@ Features:
 {% endcomment %}
 
 <c-vars 
-    ride=""
+    ride
     url_variant="global"
     class=""
     fallback_gradient="from-blue-500 to-purple-600"

templates/home.html

@@ -72,7 +72,7 @@
         </h2>
         <div class="space-y-4">
             {% for park in popular_parks %}
-                <c-park_card park=park view_mode="grid" class="h-48" />
+                <c-park_card :park="park" view_mode="grid" class="h-48" />
             {% empty %}
                 <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
                     <div class="mb-4 text-4xl">🎢</div>
@@ -90,7 +90,7 @@
         </h2>
         <div class="space-y-4">
             {% for ride in popular_rides %}
-                <c-ride_card ride=ride class="h-48" url_variant="park" />
+                <c-ride_card :ride="ride" class="h-48" url_variant="park" />
             {% empty %}
                 <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
                     <div class="mb-4 text-4xl">🎠</div>
@@ -110,10 +110,10 @@
             {% for item in highest_rated %}
                 {% if item.park %}
                     <!-- This is a ride -->
-                    <c-ride_card ride=item class="h-48" url_variant="park" />
+                    <c-ride_card :ride="item" class="h-48" url_variant="park" />
                 {% else %}
                     <!-- This is a park -->
-                    <c-park_card park=item view_mode="grid" class="h-48" />
+                    <c-park_card :park="item" view_mode="grid" class="h-48" />
                 {% endif %}
             {% empty %}
                 <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">

templates/parks/park_detail.html

@@ -171,7 +171,7 @@
                 {% if park.rides.exists %}
                     <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
                         {% for ride in park.rides.all|slice:":6" %}
-                            <c-ride_card ride=ride url_variant="park" />
+                            <c-ride_card :ride="ride" url_variant="park" />
                         {% endfor %}
                     </div>
                 {% else %}

templates/partials/homepage/featured_parks.html

@@ -2,7 +2,7 @@
 
 <!-- Featured Parks Grid -->
 {% for park in featured_parks %}
-<c-park_card park=park view_mode="grid" class="h-full" />
+<c-park_card :park="park" view_mode="grid" class="h-full" />
 {% empty %}
 <div class="col-span-full text-center py-12">
     <svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

templates/partials/homepage/featured_rides.html

@@ -2,7 +2,7 @@
 
 <!-- Featured Rides Grid -->
 {% for ride in featured_rides %}
-    <c-ride_card ride=ride url_variant="global" class="h-full" />
+    <c-ride_card :ride="ride" url_variant="global" class="h-full" />
 {% empty %}
 <div class="col-span-full text-center py-12">
     <svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

templates/rides/partials/ride_list_results.html

@@ -85,7 +85,7 @@
 {% if rides %}
 <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
   {% for ride in rides %}
-  <c-ride_card ride=ride />
+  <c-ride_card :ride="ride" />
   {% endfor %}
 </div>