Refactor: Optimize card density

src/components/designers/DesignerCard.tsx

@@ -26,7 +26,7 @@ export function DesignerCard({ company }: DesignerCardProps) {
       onClick={handleClick}
     >
       {/* Header Image/Logo Section */}
-      <div className="relative aspect-[4/3] bg-gradient-to-br from-background to-muted/50 flex items-center justify-center border-b border-border">
+      <div className="relative aspect-[3/2] bg-gradient-to-br from-background to-muted/50 flex items-center justify-center border-b border-border">
         {/* Background Gradient Overlay */}
         <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
         
@@ -43,20 +43,20 @@ export function DesignerCard({ company }: DesignerCardProps) {
             <img 
               src={company.logo_url} 
               alt={`${company.name} logo`}
-              className="max-w-20 max-h-20 object-contain filter drop-shadow-sm"
+              className="max-w-16 max-h-16 object-contain filter drop-shadow-sm"
               loading="lazy"
             />
           ) : (
-            <div className="p-4 rounded-full bg-muted/30 backdrop-blur-sm border border-border/30">
+            <div className="w-12 h-12 text-muted-foreground/30">
-              {getCompanyIcon()}
+              <Ruler className="w-full h-full" />
             </div>
           )}
         </div>
       </div>
 
-      <CardContent className="p-4 space-y-3">
+      <CardContent className="p-3 space-y-2">
         {/* Company Name */}
-        <h3 className="font-semibold text-lg mb-2 group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
+        <h3 className="font-semibold text-base group-hover:text-primary transition-colors line-clamp-2">
           {company.name}
         </h3>
 

src/components/manufacturers/ManufacturerCard.tsx

@@ -40,7 +40,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
       onClick={handleClick}
     >
       {/* Logo/Image Section */}
-      <div className="aspect-[4/3] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+      <div className="aspect-[3/2] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
         {(company.card_image_url || company.card_image_id) ? (
           <img 
             src={company.card_image_url || getCloudflareImageUrl(company.card_image_id, 'card')} 
@@ -67,7 +67,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
             {/* Logo Display */}
             <div className="absolute inset-0 flex items-center justify-center">
               {company.logo_url ? (
-            <div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
+            <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">
                   <img 
                     src={company.logo_url} 
                     alt={`${company.name} logo`}
@@ -76,7 +76,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
                   />
                 </div>
               ) : (
-                <div className="w-16 h-16 md:w-20 md:h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
+                <div className="w-12 h-12 text-muted-foreground/30">
                   {getCompanyIcon(company.company_type)}
                 </div>
               )}
@@ -85,9 +85,9 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
         )}
       </div>
 
-      <CardContent className="p-4 space-y-3">
+      <CardContent className="p-3 space-y-2">
         {/* Company Name */}
-        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
+        <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2">
           {company.name}
         </h3>
 

src/components/operators/OperatorCard.tsx

@@ -27,7 +27,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
       onClick={handleClick}
     >
       {/* Logo/Image Section */}
-      <div className="aspect-[4/3] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+      <div className="aspect-[3/2] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
         {(company.card_image_url || company.card_image_id) ? (
           <img 
             src={company.card_image_url || getCloudflareImageUrl(company.card_image_id, 'card')} 
@@ -54,7 +54,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
             {/* Logo Display */}
             <div className="absolute inset-0 flex items-center justify-center">
               {company.logo_url ? (
-                <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
+                <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">
                   <img 
                     src={company.logo_url} 
                     alt={`${company.name} logo`}
@@ -63,7 +63,7 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
                   />
                 </div>
               ) : (
-                <div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
+                <div className="w-12 h-12 text-muted-foreground/30">
                   {getCompanyIcon()}
                 </div>
               )}
@@ -72,9 +72,9 @@ const OperatorCard = ({ company }: OperatorCardProps) => {
         )}
       </div>
 
-      <CardContent className="p-4 space-y-3">
+      <CardContent className="p-3 space-y-2">
         {/* Company Name */}
-        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
+        <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2">
           {company.name}
         </h3>
 

src/components/park-owners/ParkOwnerCard.tsx

@@ -27,7 +27,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
       onClick={handleClick}
     >
       {/* Logo/Image Section */}
-      <div className="aspect-[4/3] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+      <div className="aspect-[3/2] relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
         {(company.card_image_url || company.card_image_id) ? (
           <img 
             src={company.card_image_url || getCloudflareImageUrl(company.card_image_id, 'card')} 
@@ -54,7 +54,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
             {/* Logo Display */}
             <div className="absolute inset-0 flex items-center justify-center">
               {company.logo_url ? (
-                <div className="w-20 h-20 bg-background/90 rounded-xl overflow-hidden shadow-lg backdrop-blur-sm border border-border/50">
+                <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">
                   <img 
                     src={company.logo_url} 
                     alt={`${company.name} logo`}
@@ -63,7 +63,7 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
                   />
                 </div>
               ) : (
-                <div className="w-20 h-20 bg-background/90 rounded-xl shadow-lg backdrop-blur-sm border border-border/50 flex items-center justify-center">
+                <div className="w-12 h-12 text-muted-foreground/30">
                   {getCompanyIcon()}
                 </div>
               )}
@@ -72,9 +72,9 @@ const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
         )}
       </div>
 
-      <CardContent className="p-4 space-y-3">
+      <CardContent className="p-3 space-y-2">
         {/* Company Name */}
-        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
+        <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2">
           {company.name}
         </h3>
 

src/components/parks/ParkCard.tsx

@@ -46,7 +46,7 @@ export function ParkCard({ park }: ParkCardProps) {
   return <Card className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 cursor-pointer hover:scale-[1.02]" onClick={handleClick}>
       <div className="relative overflow-hidden">
         {/* Image Placeholder with Gradient */}
-        <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
+        <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
           {(park.card_image_url || park.card_image_id) ? (
             <img 
               src={park.card_image_url || getCloudflareImageUrl(park.card_image_id, 'card')} 
@@ -60,7 +60,7 @@ export function ParkCard({ park }: ParkCardProps) {
               loading="lazy"
             />
           ) : (
-            <div className="opacity-50 flex items-center justify-center">
+            <div className="flex items-center justify-center w-12 h-12 text-muted-foreground/30">
               {getParkTypeIcon(park.park_type)}
             </div>
           )}
@@ -74,10 +74,10 @@ export function ParkCard({ park }: ParkCardProps) {
           </Badge>
         </div>
 
-        <CardContent className="p-4 space-y-3">
+        <CardContent className="p-3 space-y-2">
           {/* Header */}
           <div className="space-y-1">
-            <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
+            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2">
               {park.name}
             </h3>
             

src/components/rides/RideCard.tsx

@@ -55,7 +55,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
     >
       <div className="relative overflow-hidden">
         {/* Image/Icon Section */}
-        <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
+        <div className="aspect-[3/2] 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 || getCloudflareImageUrl(ride.card_image_id, 'card') || ride.image_url} 
@@ -69,7 +69,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
               loading="lazy"
             />
           ) : (
-            <div className="opacity-50 flex items-center justify-center">
+            <div className="flex items-center justify-center w-12 h-12 text-muted-foreground/30">
               {getRideIcon(ride.category)}
             </div>
           )}
@@ -85,10 +85,10 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
           </Badge>
         </div>
 
-        <CardContent className="p-4 space-y-3">
+        <CardContent className="p-3 space-y-2">
           {/* Header */}
           <div className="space-y-1">
-            <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-2 min-h-[3.5rem]">
+            <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2">
               {ride.name}
             </h3>
             

src/components/rides/RideModelCard.tsx

@@ -42,7 +42,7 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
   return (
     <Card className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group">
       <div 
-        className="aspect-[4/3] bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 relative overflow-hidden"
+        className="aspect-[3/2] bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10 relative overflow-hidden"
       >
         {(cardImageUrl || cardImageId) ? (
           <img 
@@ -58,13 +58,13 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
           />
         ) : (
           <div className="flex items-center justify-center h-full">
-            <FerrisWheel className="w-16 h-16 text-muted-foreground/30" />
+            <FerrisWheel className="w-12 h-12 text-muted-foreground/30" />
           </div>
         )}
       </div>
 
-      <CardContent className="p-4 space-y-3">
+      <CardContent className="p-3 space-y-2">
-        <h3 className="font-semibold text-lg line-clamp-2 min-h-[3.5rem] group-hover:text-primary transition-colors">
+        <h3 className="font-semibold text-base line-clamp-2 group-hover:text-primary transition-colors">
           {model.name}
         </h3>