From 34ed211fa3121afdce9e74304674d0ec5354f87d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:55:29 +0000
Subject: [PATCH] Refactor ManufacturerCard to match Park/RideCard

---
 .../manufacturers/ManufacturerCard.tsx        | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/components/manufacturers/ManufacturerCard.tsx b/src/components/manufacturers/ManufacturerCard.tsx
index 6da9253a..23435cab 100644
--- a/src/components/manufacturers/ManufacturerCard.tsx
+++ b/src/components/manufacturers/ManufacturerCard.tsx
@@ -38,69 +38,82 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
       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}
     >
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <div className="flex items-center gap-2 mb-2">
-              <Badge variant="outline" className="text-xs">
-                {formatCompanyType(company.company_type)}
-              </Badge>
-            </div>
-            <CardTitle className="text-lg group-hover:text-primary transition-colors line-clamp-2">
-              {company.name}
-            </CardTitle>
-          </div>
-          {company.logo_url && (
-            <div className="w-12 h-12 bg-muted rounded-lg overflow-hidden flex-shrink-0">
+      {/* Logo/Image Section */}
+      <div className="aspect-video relative bg-gradient-to-br from-primary/20 via-primary/10 to-transparent overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
+        
+        {/* Company Type Badge */}
+        <div className="absolute top-3 right-3 z-10">
+          <Badge variant="outline" className="bg-background/80 backdrop-blur-sm">
+            {formatCompanyType(company.company_type)}
+          </Badge>
+        </div>
+
+        {/* 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">
               <img 
                 src={company.logo_url} 
                 alt={`${company.name} logo`}
-                className="w-full h-full object-cover"
+                className="w-full h-full object-contain p-2"
               />
             </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">
+              {getCompanyIcon(company.company_type)}
+            </div>
           )}
         </div>
-      </CardHeader>
+      </div>
 
-      <CardContent className="space-y-3">
+      <CardContent className="p-4 space-y-3">
+        {/* Company Name */}
+        <h3 className="text-lg font-semibold group-hover:text-primary transition-colors line-clamp-2">
+          {company.name}
+        </h3>
+
+        {/* Description */}
         {company.description && (
-          <p className="text-sm text-muted-foreground line-clamp-3">
+          <p className="text-sm text-muted-foreground line-clamp-2">
             {company.description}
           </p>
         )}
 
-        <div className="space-y-2 text-sm">
+        {/* Company Info */}
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
           {company.founded_year && (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
               <span className="text-muted-foreground">Founded:</span>
               <span className="font-medium">{company.founded_year}</span>
             </div>
           )}
           
           {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" />
-              <span className="text-muted-foreground text-xs">
+              <span className="text-muted-foreground truncate">
                 {company.headquarters_location}
               </span>
             </div>
           )}
         </div>
 
-        {/* Ratings Display */}
+        {/* Rating */}
         {company.average_rating > 0 && (
           <div className="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-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})</span>
+            <span className="text-xs text-muted-foreground">({company.review_count} reviews)</span>
           </div>
         )}
 
+        {/* Action Button */}
         {company.website_url && (
           <Button 
             variant="outline" 
             size="sm" 
-            className="w-full"
+            className="w-full bg-gradient-to-r from-primary/5 to-primary/10 hover:from-primary/10 hover:to-primary/20 transition-all duration-200"
             onClick={(e) => {
               e.stopPropagation();
               window.open(company.website_url, '_blank');