Fix: Standardize card fields for consistency

src/components/designers/DesignerCard.tsx

@@ -31,7 +31,7 @@ export function DesignerCard({ company }: DesignerCardProps) {
         <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
         
         {/* Company Type Badge */}
-        <div className="absolute top-3 left-3">
+        <div className="absolute top-3 right-3">
           <Badge variant="secondary" className="text-xs bg-background/80 backdrop-blur-sm border border-border/50">
             Designer
           </Badge>
@@ -40,15 +40,17 @@ export function DesignerCard({ company }: DesignerCardProps) {
         {/* Logo or Icon */}
         <div className="relative z-10 flex items-center justify-center">
           {company.logo_url ? (
-            <img 
+            <div className="w-12 h-12 md:w-16 md:h-16 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
-              src={company.logo_url} 
+              <img 
-              alt={`${company.name} logo`}
+                src={company.logo_url} 
-              className="max-w-16 max-h-16 object-contain filter drop-shadow-sm"
+                alt={`${company.name} logo`}
-              loading="lazy"
+                className="w-full h-full object-contain p-2"
-            />
+                loading="lazy"
+              />
+            </div>
           ) : (
             <div className="w-12 h-12 text-muted-foreground/30">
-              <Ruler className="w-full h-full" />
+              <Ruler className="w-5 h-5" />
             </div>
           )}
         </div>
@@ -72,26 +74,16 @@ export function DesignerCard({ company }: DesignerCardProps) {
           
           {/* Location */}
           {company.headquarters_location && (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
-              <MapPin className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+              <MapPin className="w-3 h-3 flex-shrink-0" />
-              <span className="text-muted-foreground line-clamp-1">{company.headquarters_location}</span>
+              <span className="text-muted-foreground truncate">{company.headquarters_location}</span>
-            </div>
-          )}
-          
-          {/* Rating */}
-          {company.average_rating > 0 && (
-            <div className="flex items-center gap-2">
-              <Star className="w-3 h-3 text-yellow-500 fill-yellow-500 flex-shrink-0" />
-              <span className="font-medium">{company.average_rating.toFixed(1)}</span>
-              {company.review_count > 0 && (
-                <span className="text-muted-foreground">({company.review_count} reviews)</span>
-              )}
             </div>
           )}
         </div>
 
         {/* Stats Display */}
-        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex flex-wrap gap-x-4 gap-y-1">
           {company.ride_count && company.ride_count > 0 && (
             <div className="flex items-center gap-1">
               <FerrisWheel className="w-3 h-3 text-muted-foreground" />
@@ -115,6 +107,17 @@ export function DesignerCard({ company }: DesignerCardProps) {
               <span className="text-muted-foreground">concepts</span>
             </div>
           )}
+          </div>
+          
+          {company.average_rating > 0 && (
+            <div className="flex items-center gap-1">
+              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              {company.review_count > 0 && (
+                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+              )}
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

src/components/manufacturers/ManufacturerCard.tsx

@@ -58,7 +58,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
             <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
             
             {/* Company Type Badge */}
-            <div className="absolute top-2 right-2 md:top-3 md:right-3 z-10">
+            <div className="absolute top-3 right-3 z-10">
               <Badge variant="outline" className="bg-background/80 backdrop-blur-sm text-xs">
                 {formatCompanyType(company.company_type)}
               </Badge>
@@ -102,7 +102,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
           
           {company.headquarters_location && (
             <div className="flex items-center gap-1 min-w-0">
-              <MapPin className="w-3 h-3 text-muted-foreground shrink-0" />
+              <MapPin className="w-3 h-3 shrink-0" />
               <span className="text-muted-foreground truncate">
                 {company.headquarters_location}
               </span>
@@ -110,19 +110,9 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
           )}
         </div>
 
-        {/* Rating */}
-        {company.average_rating > 0 && (
-          <div className="flex items-center gap-1">
-            <Star className="w-3.5 h-3.5 md:w-4 md:h-4 fill-yellow-400 text-yellow-400" />
-            <span className="text-xs md:text-sm font-medium">{company.average_rating.toFixed(1)}</span>
-            {company.review_count > 0 && (
-              <span className="text-xs text-muted-foreground">({company.review_count})</span>
-            )}
-          </div>
-        )}
-
         {/* Stats Display */}
-        <div className="flex flex-wrap gap-x-3 md:gap-x-4 gap-y-1 text-xs md:text-sm">
+        <div className="flex items-center justify-between text-xs md:text-sm">
+          <div className="flex flex-wrap gap-x-3 md:gap-x-4 gap-y-1">
           {company.ride_count && company.ride_count > 0 && (
             <div className="flex items-center gap-1">
               <FerrisWheel className="w-3 h-3 text-muted-foreground" />
@@ -146,6 +136,17 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
               <span className="text-muted-foreground">models</span>
             </div>
           )}
+          </div>
+          
+          {company.average_rating > 0 && (
+            <div className="flex items-center gap-1">
+              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              {company.review_count > 0 && (
+                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+              )}
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

src/components/operators/OperatorCard.tsx

@@ -89,7 +89,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
           
           {company.headquarters_location && (
             <div className="flex items-center gap-1">
-              <MapPin className="w-3 h-3 text-muted-foreground" />
+              <MapPin className="w-3 h-3" />
               <span className="text-muted-foreground truncate">
                 {company.headquarters_location}
               </span>
@@ -97,17 +97,9 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
           )}
         </div>
 
-        {/* Rating */}
-        {company.average_rating > 0 && (
-          <div className="flex items-center gap-1">
-            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
-            <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
-            <span className="text-xs text-muted-foreground">({company.review_count} reviews)</span>
-          </div>
-        )}
-
         {/* Park Count Stats */}
-        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex flex-wrap gap-x-4 gap-y-1">
           {company.park_count && company.park_count > 0 && (
             <div className="flex items-center gap-1">
               <Building className="w-3 h-3 text-muted-foreground" />
@@ -115,6 +107,17 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
               <span className="text-muted-foreground">parks operated</span>
             </div>
           )}
+          </div>
+          
+          {company.average_rating > 0 && (
+            <div className="flex items-center gap-1">
+              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              {company.review_count > 0 && (
+                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+              )}
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

src/components/park-owners/ParkOwnerCard.tsx

@@ -89,7 +89,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
           
           {company.headquarters_location && (
             <div className="flex items-center gap-1">
-              <MapPin className="w-3 h-3 text-muted-foreground" />
+              <MapPin className="w-3 h-3" />
               <span className="text-muted-foreground truncate">
                 {company.headquarters_location}
               </span>
@@ -97,17 +97,9 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
           )}
         </div>
 
-        {/* Rating */}
-        {company.average_rating > 0 && (
-          <div className="flex items-center gap-1">
-            <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
-            <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
-            <span className="text-xs text-muted-foreground">({company.review_count} reviews)</span>
-          </div>
-        )}
-
         {/* Park Count Stats */}
-        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+        <div className="flex items-center justify-between text-sm">
+          <div className="flex flex-wrap gap-x-4 gap-y-1">
           {company.park_count && company.park_count > 0 && (
             <div className="flex items-center gap-1">
               <Building2 className="w-3 h-3 text-muted-foreground" />
@@ -115,6 +107,17 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
               <span className="text-muted-foreground">parks owned</span>
             </div>
           )}
+          </div>
+          
+          {company.average_rating > 0 && (
+            <div className="flex items-center gap-1">
+              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              {company.review_count > 0 && (
+                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+              )}
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

src/components/parks/ParkCard.tsx

@@ -81,10 +81,14 @@ export function ParkCard({ park }: ParkCardProps) {
               {park.name}
             </h3>
             
-          {park.location && <div className="flex items-center text-sm text-muted-foreground">
+          {park.location && (
-                <MapPin className="w-3 h-3 mr-1" />
+            <div className="flex items-center gap-1 text-sm text-muted-foreground">
+              <MapPin className="w-3 h-3" />
+              <span className="truncate">
                 {park.location.city && `${park.location.city}, `}{park.location.country}
-              </div>}
+              </span>
+            </div>
+          )}
           </div>
 
           {/* Park Type */}

src/components/rides/RideCard.tsx

@@ -93,10 +93,12 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
             </h3>
             
             {showParkName && ride.park?.name && (
-              <div className="flex items-center text-sm text-muted-foreground">
+              <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                <MapPin className="w-3 h-3 mr-1" />
+                <MapPin className="w-3 h-3" />
-                {ride.park.name}
+                <span className="truncate">
-                {ride.park.location?.city && `, ${ride.park.location.city}`}
+                  {ride.park.name}
+                  {ride.park.location?.city && `, ${ride.park.location.city}`}
+                </span>
               </div>
             )}
           </div>

src/components/rides/RideModelCard.tsx

@@ -1,6 +1,5 @@
 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';
@@ -40,7 +39,10 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
   const cardImageId = extendedModel.card_image_id;
 
   return (
-    <Card className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group">
+    <Card 
+      className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group"
+      onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${model.slug}`)}
+    >
       <div 
         className="aspect-[3/2] bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 relative overflow-hidden"
       >
@@ -77,17 +79,8 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
           </Badge>
         </div>
 
-        <div className="pt-2 flex items-center justify-between">
+        <div className="text-sm text-muted-foreground">
-          <span className="text-sm text-muted-foreground">
+          {rideCount} {rideCount === 1 ? 'ride' : 'rides'}
-            {rideCount} {rideCount === 1 ? 'ride' : 'rides'}
-          </span>
-          <Button 
-            variant="ghost" 
-            size="sm"
-            onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${model.slug}`)}
-          >
-            View Details
-          </Button>
         </div>
       </CardContent>
     </Card>