Refactor: Apply consistent card styling

src/components/designers/DesignerCard.tsx

@@ -56,14 +56,16 @@ export function DesignerCard({ company }: DesignerCardProps) {
         </div>
       </div>
 
-      <CardContent className="p-3 space-y-2">
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         {/* Company Name */}
-        <h3 className="font-semibold text-base group-hover:text-primary transition-colors line-clamp-2">
+        <div className="space-y-0.5 min-w-0">
-          {company.name}
+          <h3 className="font-semibold text-base group-hover:text-primary transition-colors line-clamp-2 break-words">
-        </h3>
+            {company.name}
+          </h3>
+        </div>
 
         {/* Company Details */}
-        <div className="space-y-2 text-sm">
+        <div className="space-y-1 text-sm">
           {/* Founded Year */}
           {company.founded_year && (
             <div className="flex items-center gap-2">
@@ -74,8 +76,8 @@ export function DesignerCard({ company }: DesignerCardProps) {
           
           {/* Location */}
           {company.headquarters_location && (
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-1 min-w-0">
-              <MapPin className="w-3 h-3 flex-shrink-0" />
+              <MapPin className="w-3 h-3 flex-shrink-0 text-muted-foreground" />
               <span className="text-muted-foreground truncate">{company.headquarters_location}</span>
             </div>
           )}
@@ -83,10 +85,10 @@ export function DesignerCard({ company }: DesignerCardProps) {
 
         {/* Stats Display */}
         <div className="flex items-center justify-between text-sm">
-          <div className="flex flex-wrap gap-x-4 gap-y-1">
+          <div className="flex flex-wrap gap-3 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" />
+              <FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
               <span className="font-medium">{company.ride_count}</span>
               <span className="text-muted-foreground">designs</span>
             </div>
@@ -94,7 +96,6 @@ export function DesignerCard({ company }: DesignerCardProps) {
           
           {company.coaster_count && company.coaster_count > 0 && (
             <div className="flex items-center gap-1">
-              <span className="text-muted-foreground">•</span>
               <span className="font-medium">{company.coaster_count}</span>
               <span className="text-muted-foreground">coasters</span>
             </div>
@@ -102,7 +103,6 @@ export function DesignerCard({ company }: DesignerCardProps) {
           
           {company.model_count && company.model_count > 0 && (
             <div className="flex items-center gap-1">
-              <span className="text-muted-foreground">•</span>
               <span className="font-medium">{company.model_count}</span>
               <span className="text-muted-foreground">concepts</span>
             </div>
@@ -110,11 +110,11 @@ export function DesignerCard({ company }: DesignerCardProps) {
           </div>
           
           {company.average_rating > 0 && (
-            <div className="flex items-center gap-1">
+            <div className="inline-flex items-center gap-1">
-              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
-              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              <span className="font-semibold">{company.average_rating.toFixed(1)}</span>
               {company.review_count > 0 && (
-                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+                <span className="text-muted-foreground">({company.review_count})</span>
               )}
             </div>
           )}

src/components/manufacturers/ManufacturerCard.tsx

@@ -85,14 +85,16 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
         )}
       </div>
 
-      <CardContent className="p-3 space-y-2">
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         {/* Company Name */}
-        <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2">
+        <div className="space-y-0.5 min-w-0">
-          {company.name}
+          <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2 break-words">
-        </h3>
+            {company.name}
+          </h3>
+        </div>
 
         {/* Company Info */}
-        <div className="flex flex-wrap gap-x-3 md:gap-x-4 gap-y-1 text-xs md:text-sm">
+        <div className="flex flex-wrap gap-x-3 gap-y-1 text-sm">
           {company.founded_year && (
             <div className="flex items-center gap-1">
               <span className="text-muted-foreground">Founded:</span>
@@ -111,11 +113,11 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
         </div>
 
         {/* Stats Display */}
-        <div className="flex items-center justify-between text-xs md:text-sm">
+        <div className="flex items-center justify-between text-sm">
-          <div className="flex flex-wrap gap-x-3 md:gap-x-4 gap-y-1">
+          <div className="flex flex-wrap gap-3 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" />
+              <FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
               <span className="font-medium">{company.ride_count}</span>
               <span className="text-muted-foreground">rides</span>
             </div>
@@ -123,7 +125,6 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
           
           {company.coaster_count && company.coaster_count > 0 && (
             <div className="flex items-center gap-1">
-              <span className="text-muted-foreground">•</span>
               <span className="font-medium">{company.coaster_count}</span>
               <span className="text-muted-foreground">coasters</span>
             </div>
@@ -131,7 +132,6 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
           
           {company.model_count && company.model_count > 0 && (
             <div className="flex items-center gap-1">
-              <span className="text-muted-foreground">•</span>
               <span className="font-medium">{company.model_count}</span>
               <span className="text-muted-foreground">models</span>
             </div>
@@ -139,11 +139,11 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
           </div>
           
           {company.average_rating > 0 && (
-            <div className="flex items-center gap-1">
+            <div className="inline-flex items-center gap-1">
-              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
-              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              <span className="font-semibold">{company.average_rating.toFixed(1)}</span>
               {company.review_count > 0 && (
-                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+                <span className="text-muted-foreground">({company.review_count})</span>
               )}
             </div>
           )}

src/components/operators/OperatorCard.tsx

@@ -72,14 +72,16 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
         )}
       </div>
 
-      <CardContent className="p-3 space-y-2">
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         {/* Company Name */}
-        <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2">
+        <div className="space-y-0.5 min-w-0">
-          {company.name}
+          <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2 break-words">
-        </h3>
+            {company.name}
+          </h3>
+        </div>
 
         {/* Company Info */}
-        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+        <div className="flex flex-wrap gap-3 gap-y-1 text-sm">
           {company.founded_year && (
             <div className="flex items-center gap-1">
               <span className="text-muted-foreground">Founded:</span>
@@ -88,8 +90,8 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
           )}
           
           {company.headquarters_location && (
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-1 min-w-0">
-              <MapPin className="w-3 h-3" />
+              <MapPin className="w-3 h-3 flex-shrink-0" />
               <span className="text-muted-foreground truncate">
                 {company.headquarters_location}
               </span>
@@ -99,22 +101,22 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
 
         {/* Park Count Stats */}
         <div className="flex items-center justify-between text-sm">
-          <div className="flex flex-wrap gap-x-4 gap-y-1">
+          <div className="flex flex-wrap gap-3 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" />
+              <Building className="w-4 h-4 text-primary/70 flex-shrink-0" />
               <span className="font-medium">{company.park_count}</span>
-              <span className="text-muted-foreground">parks operated</span>
+              <span className="text-muted-foreground">parks</span>
             </div>
           )}
           </div>
           
           {company.average_rating > 0 && (
-            <div className="flex items-center gap-1">
+            <div className="inline-flex items-center gap-1">
-              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
-              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              <span className="font-semibold">{company.average_rating.toFixed(1)}</span>
               {company.review_count > 0 && (
-                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+                <span className="text-muted-foreground">({company.review_count})</span>
               )}
             </div>
           )}

src/components/park-owners/ParkOwnerCard.tsx

@@ -72,14 +72,16 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
         )}
       </div>
 
-      <CardContent className="p-3 space-y-2">
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         {/* Company Name */}
-        <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2">
+        <div className="space-y-0.5 min-w-0">
-          {company.name}
+          <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2 break-words">
-        </h3>
+            {company.name}
+          </h3>
+        </div>
 
         {/* Company Info */}
-        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+        <div className="flex flex-wrap gap-3 gap-y-1 text-sm">
           {company.founded_year && (
             <div className="flex items-center gap-1">
               <span className="text-muted-foreground">Founded:</span>
@@ -88,8 +90,8 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
           )}
           
           {company.headquarters_location && (
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-1 min-w-0">
-              <MapPin className="w-3 h-3" />
+              <MapPin className="w-3 h-3 flex-shrink-0" />
               <span className="text-muted-foreground truncate">
                 {company.headquarters_location}
               </span>
@@ -99,22 +101,22 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
 
         {/* Park Count Stats */}
         <div className="flex items-center justify-between text-sm">
-          <div className="flex flex-wrap gap-x-4 gap-y-1">
+          <div className="flex flex-wrap gap-3 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" />
+              <Building2 className="w-4 h-4 text-primary/70 flex-shrink-0" />
               <span className="font-medium">{company.park_count}</span>
-              <span className="text-muted-foreground">parks owned</span>
+              <span className="text-muted-foreground">parks</span>
             </div>
           )}
           </div>
           
           {company.average_rating > 0 && (
-            <div className="flex items-center gap-1">
+            <div className="inline-flex items-center gap-1">
-              <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+              <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
-              <span className="text-sm font-medium">{company.average_rating.toFixed(1)}</span>
+              <span className="font-semibold">{company.average_rating.toFixed(1)}</span>
               {company.review_count > 0 && (
-                <span className="text-xs text-muted-foreground">({company.review_count})</span>
+                <span className="text-muted-foreground">({company.review_count})</span>
               )}
             </div>
           )}

src/components/parks/ParkCard.tsx

@@ -74,55 +74,45 @@ export function ParkCard({ park }: ParkCardProps) {
           </Badge>
         </div>
 
-        <CardContent className="p-3 space-y-2">
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
-          {/* Header */}
+        {/* Header */}
-          <div className="space-y-1">
+        <div className="space-y-0.5 min-w-0">
-            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2">
+          <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 break-words">
-              {park.name}
+            {park.name}
-            </h3>
+          </h3>
           
-          {park.location && (
+        {park.location && (
-            <div className="flex items-center gap-1 text-sm text-muted-foreground">
+          <div className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
-              <MapPin className="w-3 h-3" />
+            <MapPin className="w-3 h-3 flex-shrink-0" />
-              <span className="truncate">
+            <span className="truncate">
-                {park.location.city && `${park.location.city}, `}{park.location.country}
+              {park.location.city && `${park.location.city}, `}{park.location.country}
-              </span>
+            </span>
-            </div>
-          )}
           </div>
+        )}
+        </div>
 
-          {/* Park Type */}
+        {/* Stats & Rating */}
-          <Badge variant="outline" className="text-xs">
+        <div className="flex items-center justify-between text-sm">
-            {formatParkType(park.park_type)}
+          <div className="flex items-center gap-3">
-          </Badge>
+            {park.ride_count > 0 && (
-
-          {/* Stats */}
-          <div className="flex items-center justify-between text-sm">
-            <div className="flex items-center gap-4">
-              {park.ride_count > 0 && (
-                <div className="flex items-center gap-1">
-                  <span className="text-primary font-medium">{park.ride_count}</span>
-                  <span className="text-muted-foreground">rides</span>
-                </div>
-              )}
-              {park.coaster_count > 0 && (
-                <div className="flex items-center gap-1">
-                  <span className="text-accent font-medium">{park.coaster_count}</span>
-                  <FerrisWheel className="w-3 h-3 text-muted-foreground" />
-                </div>
-              )}
-            </div>
-            
-            {park.average_rating > 0 && (
               <div className="flex items-center gap-1">
-                <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
+                <FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
-                <span className="text-sm font-medium">{park.average_rating.toFixed(1)}</span>
+                <span className="font-medium">{park.ride_count}</span>
-                {park.review_count > 0 && (
+                <span className="text-muted-foreground">rides</span>
-                  <span className="text-xs text-muted-foreground">({park.review_count})</span>
-                )}
               </div>
             )}
           </div>
+          
+          {park.average_rating > 0 && (
+            <div className="inline-flex items-center gap-1">
+              <Star className="w-4 h-4 fill-yellow-500 text-yellow-500" />
+              <span className="font-semibold">{park.average_rating.toFixed(1)}</span>
+              {park.review_count > 0 && (
+                <span className="text-muted-foreground">({park.review_count})</span>
+              )}
+            </div>
+          )}
+        </div>
         </CardContent>
       </div>
     </Card>;

src/components/rides/RideModelCard.tsx

@@ -65,23 +65,33 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
         )}
       </div>
 
-      <CardContent className="p-3 space-y-2">
+      <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
-        <h3 className="font-semibold text-base line-clamp-2 group-hover:text-primary transition-colors">
+        <div className="space-y-0.5 min-w-0">
-          {model.name}
+          <h3 className="font-semibold text-base line-clamp-2 break-words group-hover:text-primary transition-colors">
-        </h3>
+            {model.name}
-
+          </h3>
-        <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="text-sm text-muted-foreground">
+        <div className="flex flex-wrap items-center gap-2 text-sm">
-          {rideCount} {rideCount === 1 ? 'ride' : 'rides'}
+          {model.category && (
+            <Badge variant="secondary" className="text-xs">
+              {formatCategory(model.category)}
+            </Badge>
+          )}
+          {model.ride_type && (
+            <Badge variant="outline" className="text-xs">
+              {formatRideType(model.ride_type)}
+            </Badge>
+          )}
         </div>
+
+        {rideCount > 0 && (
+          <div className="flex items-center gap-1 text-sm">
+            <FerrisWheel className="w-4 h-4 text-primary/70 flex-shrink-0" />
+            <span className="font-medium">{rideCount}</span>
+            <span className="text-muted-foreground">installations</span>
+          </div>
+        )}
       </CardContent>
     </Card>
   );