Refactor: Enhance Park List View

src/components/designers/DesignerListView.tsx

@@ -0,0 +1,115 @@
+import { MapPin, Star, Ruler, Calendar, Palette } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Company } from '@/types/database';
+import { cn } from '@/lib/utils';
+
+interface DesignerListViewProps {
+  designers: Company[];
+  onDesignerClick: (designer: Company) => void;
+}
+
+export function DesignerListView({ designers, onDesignerClick }: DesignerListViewProps) {
+  return (
+    <div className="space-y-3">
+      {designers.map((designer, index) => (
+        <Card 
+          key={designer.id}
+          className={cn(
+            "group overflow-hidden cursor-pointer",
+            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
+            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
+            "transition-all duration-500 animate-fade-in-up"
+          )}
+          style={{ animationDelay: `${index * 50}ms` }}
+          onClick={() => onDesignerClick(designer)}
+        >
+          <CardContent className="p-0">
+            <div className="flex flex-col sm:flex-row">
+              {/* Logo */}
+              <div className="w-full sm:w-32 h-32 md:w-40 md:h-32 flex-shrink-0 relative overflow-hidden bg-gradient-to-br from-muted/50 to-muted/30">
+                {designer.logo_url ? (
+                  <img 
+                    src={designer.logo_url} 
+                    alt={designer.name}
+                    className="w-full h-full object-contain p-4 group-hover:scale-110 transition-transform duration-700"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <Ruler className="w-12 h-12 text-muted-foreground/40" />
+                  </div>
+                )}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
+                <div className="space-y-3">
+                  {/* Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1 mb-1.5">
+                        {designer.name}
+                      </h3>
+                      
+                      {designer.headquarters_location && (
+                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <MapPin className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
+                          <span className="line-clamp-1">{designer.headquarters_location}</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Rating */}
+                    {designer.average_rating && designer.average_rating > 0 && (
+                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="font-semibold text-foreground">{designer.average_rating.toFixed(1)}</span>
+                        {designer.review_count && designer.review_count > 0 && (
+                          <span className="text-xs text-muted-foreground">({designer.review_count})</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Description */}
+                  {designer.description && (
+                    <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 line-clamp-2">
+                      {designer.description}
+                    </p>
+                  )}
+
+                  {/* Tags */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
+                      <Palette className="w-3 h-3 mr-1" />
+                      Designer
+                    </Badge>
+                    {designer.founded_year && (
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
+                        <Calendar className="w-3 h-3 mr-1" />
+                        Est. {designer.founded_year}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center justify-end mt-4 pt-3 border-t border-border/50">
+                  <Button 
+                    size="sm" 
+                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
+                  >
+                    <Palette className="w-3.5 h-3.5 mr-1.5" />
+                    <span className="hidden sm:inline">View Details</span>
+                    <span className="sm:hidden">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

src/components/manufacturers/ManufacturerListView.tsx

@@ -0,0 +1,115 @@
+import { MapPin, Star, Factory, Calendar, Wrench } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Company } from '@/types/database';
+import { cn } from '@/lib/utils';
+
+interface ManufacturerListViewProps {
+  manufacturers: Company[];
+  onManufacturerClick: (manufacturer: Company) => void;
+}
+
+export function ManufacturerListView({ manufacturers, onManufacturerClick }: ManufacturerListViewProps) {
+  return (
+    <div className="space-y-3">
+      {manufacturers.map((manufacturer, index) => (
+        <Card 
+          key={manufacturer.id}
+          className={cn(
+            "group overflow-hidden cursor-pointer",
+            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
+            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
+            "transition-all duration-500 animate-fade-in-up"
+          )}
+          style={{ animationDelay: `${index * 50}ms` }}
+          onClick={() => onManufacturerClick(manufacturer)}
+        >
+          <CardContent className="p-0">
+            <div className="flex flex-col sm:flex-row">
+              {/* Logo */}
+              <div className="w-full sm:w-32 h-32 md:w-40 md:h-32 flex-shrink-0 relative overflow-hidden bg-gradient-to-br from-muted/50 to-muted/30">
+                {manufacturer.logo_url ? (
+                  <img 
+                    src={manufacturer.logo_url} 
+                    alt={manufacturer.name}
+                    className="w-full h-full object-contain p-4 group-hover:scale-110 transition-transform duration-700"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <Factory className="w-12 h-12 text-muted-foreground/40" />
+                  </div>
+                )}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
+                <div className="space-y-3">
+                  {/* Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1 mb-1.5">
+                        {manufacturer.name}
+                      </h3>
+                      
+                      {manufacturer.headquarters_location && (
+                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <MapPin className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
+                          <span className="line-clamp-1">{manufacturer.headquarters_location}</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Rating */}
+                    {manufacturer.average_rating && manufacturer.average_rating > 0 && (
+                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="font-semibold text-foreground">{manufacturer.average_rating.toFixed(1)}</span>
+                        {manufacturer.review_count && manufacturer.review_count > 0 && (
+                          <span className="text-xs text-muted-foreground">({manufacturer.review_count})</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Description */}
+                  {manufacturer.description && (
+                    <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 line-clamp-2">
+                      {manufacturer.description}
+                    </p>
+                  )}
+
+                  {/* Tags */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
+                      <Factory className="w-3 h-3 mr-1" />
+                      Manufacturer
+                    </Badge>
+                    {manufacturer.founded_year && (
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
+                        <Calendar className="w-3 h-3 mr-1" />
+                        Est. {manufacturer.founded_year}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center justify-end mt-4 pt-3 border-t border-border/50">
+                  <Button 
+                    size="sm" 
+                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
+                  >
+                    <Wrench className="w-3.5 h-3.5 mr-1.5" />
+                    <span className="hidden sm:inline">View Details</span>
+                    <span className="sm:hidden">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

src/components/operators/OperatorListView.tsx

@@ -0,0 +1,117 @@
+import { MapPin, Star, Building2, Calendar, Globe } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Company } from '@/types/database';
+import { cn } from '@/lib/utils';
+
+interface OperatorListViewProps {
+  operators: (Company & { park_count?: number })[];
+  onOperatorClick: (operator: Company) => void;
+}
+
+export function OperatorListView({ operators, onOperatorClick }: OperatorListViewProps) {
+  return (
+    <div className="space-y-3">
+      {operators.map((operator, index) => (
+        <Card 
+          key={operator.id}
+          className={cn(
+            "group overflow-hidden cursor-pointer",
+            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
+            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
+            "transition-all duration-500 animate-fade-in-up"
+          )}
+          style={{ animationDelay: `${index * 50}ms` }}
+          onClick={() => onOperatorClick(operator)}
+        >
+          <CardContent className="p-0">
+            <div className="flex flex-col sm:flex-row">
+              {/* Logo */}
+              <div className="w-full sm:w-32 h-32 md:w-40 md:h-32 flex-shrink-0 relative overflow-hidden bg-gradient-to-br from-muted/50 to-muted/30">
+                {operator.logo_url ? (
+                  <img 
+                    src={operator.logo_url} 
+                    alt={operator.name}
+                    className="w-full h-full object-contain p-4 group-hover:scale-110 transition-transform duration-700"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center">
+                    <Building2 className="w-12 h-12 text-muted-foreground/40" />
+                  </div>
+                )}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
+                <div className="space-y-3">
+                  {/* Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1 mb-1.5">
+                        {operator.name}
+                      </h3>
+                      
+                      {operator.headquarters_location && (
+                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <MapPin className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
+                          <span className="line-clamp-1">{operator.headquarters_location}</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Rating */}
+                    {operator.average_rating && operator.average_rating > 0 && (
+                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="font-semibold text-foreground">{operator.average_rating.toFixed(1)}</span>
+                        {operator.review_count && operator.review_count > 0 && (
+                          <span className="text-xs text-muted-foreground">({operator.review_count})</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Description */}
+                  {operator.description && (
+                    <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 line-clamp-2">
+                      {operator.description}
+                    </p>
+                  )}
+
+                  {/* Tags */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    {operator.founded_year && (
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
+                        <Calendar className="w-3 h-3 mr-1" />
+                        Founded {operator.founded_year}
+                      </Badge>
+                    )}
+                    {operator.park_count !== undefined && operator.park_count > 0 && (
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
+                        <Building2 className="w-3 h-3 mr-1" />
+                        {operator.park_count} {operator.park_count === 1 ? 'park' : 'parks'}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center justify-end mt-4 pt-3 border-t border-border/50">
+                  <Button 
+                    size="sm" 
+                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
+                  >
+                    <Globe className="w-3.5 h-3.5 mr-1.5" />
+                    <span className="hidden sm:inline">View Details</span>
+                    <span className="sm:hidden">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

src/components/parks/ParkListView.tsx

@@ -1,8 +1,9 @@
-import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent } from 'lucide-react';
+import { MapPin, Star, Users, Calendar, ExternalLink, Castle, FerrisWheel, Waves, Tent, Sparkles } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Park } from '@/types/database';
+import { cn } from '@/lib/utils';
 
 interface ParkListViewProps {
   parks: Park[];
@@ -36,86 +37,103 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
-      {parks.map((park) => (
+      {parks.map((park, index) => (
         <Card 
           key={park.id} 
-          className="group overflow-hidden border-border/50 bg-gradient-to-r from-card via-card to-card/80 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 cursor-pointer"
+          className={cn(
+            "group overflow-hidden cursor-pointer",
+            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
+            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
+            "transition-all duration-500 animate-fade-in-up"
+          )}
+          style={{ animationDelay: `${index * 50}ms` }}
           onClick={() => onParkClick(park)}
         >
           <CardContent className="p-0">
-            <div className="flex">
+            <div className="flex flex-col sm:flex-row">
               {/* Image */}
-              <div className="w-32 h-32 md:w-48 md:h-32 flex-shrink-0 relative overflow-hidden">
+              <div className="w-full sm:w-40 h-40 md:w-48 md:h-40 flex-shrink-0 relative overflow-hidden">
                 {park.card_image_url ? (
-                  <img 
+                  <>
-                    src={park.card_image_url} 
+                    <img 
-                    alt={park.name}
+                      src={park.card_image_url} 
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                      alt={park.name}
-                  />
+                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  </>
                 ) : (
-                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center">
+                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative overflow-hidden">
-                    <span className="opacity-50">
+                    <span className="opacity-50 z-10 relative">
                       {getParkTypeIcon(park.park_type)}
                     </span>
+                    <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent group-hover:scale-110 transition-transform duration-700" />
                   </div>
                 )}
                 
                 {/* Status Badge */}
                 <Badge 
-                  className={`absolute top-2 left-2 text-xs ${getStatusColor(park.status)} border`}
+                  className={cn(
+                    "absolute top-2 left-2 text-xs border backdrop-blur-sm",
+                    getStatusColor(park.status)
+                  )}
                 >
                   {park.status.replace('_', ' ').toUpperCase()}
                 </Badge>
               </div>
 
               {/* Content */}
-              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[128px]">
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[160px]">
-                <div className="space-y-2">
+                <div className="space-y-3">
                   {/* Header */}
-                  <div className="flex items-start justify-between">
+                  <div className="flex items-start justify-between gap-4">
-                    <div className="flex-1">
+                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 mb-1">
+                      <div className="flex items-center gap-2 mb-1.5">
-                        <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
+                        <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1">
                           {park.name}
                         </h3>
-                        {getParkTypeIcon(park.park_type)}
+                        <span className="text-muted-foreground group-hover:text-primary transition-colors duration-300 flex-shrink-0">
+                          {getParkTypeIcon(park.park_type)}
+                        </span>
                       </div>
                       
                       {park.location && (
-                        <div className="flex items-center text-sm text-muted-foreground">
+                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
-                          <MapPin className="w-3 h-3 mr-1" />
+                          <MapPin className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
-                          {park.location.city && `${park.location.city}, `}
+                          <span className="line-clamp-1">
-                          {park.location.state_province && `${park.location.state_province}, `}
+                            {park.location.city && `${park.location.city}, `}
-                          {park.location.country}
+                            {park.location.state_province && `${park.location.state_province}, `}
+                            {park.location.country}
+                          </span>
                         </div>
                       )}
                     </div>
 
                     {/* Rating */}
                     {park.average_rating > 0 && (
-                      <div className="flex items-center gap-1 ml-4">
+                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
                         <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
-                        <span className="font-medium">{park.average_rating.toFixed(1)}</span>
+                        <span className="font-semibold text-foreground">{park.average_rating.toFixed(1)}</span>
-                        <span className="text-sm text-muted-foreground">({park.review_count})</span>
+                        <span className="text-xs text-muted-foreground">({park.review_count})</span>
                       </div>
                     )}
                   </div>
 
                   {/* Description */}
                   {park.description && (
-                    <p className="text-sm text-muted-foreground line-clamp-2">
+                    <p className="text-sm text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300 line-clamp-2">
                       {park.description}
                     </p>
                   )}
 
                   {/* Tags */}
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 flex-wrap">
-                    <Badge variant="outline" className="text-xs">
+                    <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
                       {formatParkType(park.park_type)}
                     </Badge>
                     {park.opening_date && (
-                      <Badge variant="outline" className="text-xs">
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
                         <Calendar className="w-3 h-3 mr-1" />
                         Opened {park.opening_date.split('-')[0]}
                       </Badge>
@@ -124,30 +142,33 @@ export function ParkListView({ parks, onParkClick }: ParkListViewProps) {
                 </div>
 
                 {/* Stats and Actions */}
-                <div className="flex items-center justify-between mt-4">
+                <div className="flex items-center justify-between mt-4 pt-3 border-t border-border/50">
-                  <div className="flex items-center gap-6 text-sm">
+                  <div className="flex items-center gap-4 md:gap-6 text-sm flex-wrap">
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1.5 group/stat">
-                      <span className="text-primary font-medium">{park.ride_count || 0}</span>
+                      <Sparkles className="w-3.5 h-3.5 text-primary/60 group-hover/stat:text-primary transition-colors duration-300" />
-                      <span className="text-muted-foreground">rides</span>
+                      <span className="text-primary font-semibold">{park.ride_count || 0}</span>
+                      <span className="text-muted-foreground text-xs">rides</span>
                     </div>
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1.5 group/stat">
-                      <span className="text-accent font-medium">{park.coaster_count || 0}</span>
+                      <FerrisWheel className="w-3.5 h-3.5 text-accent/60 group-hover/stat:text-accent transition-colors duration-300" />
-                      <FerrisWheel className="w-3 h-3 text-muted-foreground" />
+                      <span className="text-accent font-semibold">{park.coaster_count || 0}</span>
+                      <span className="text-muted-foreground text-xs">coasters</span>
                     </div>
                     {park.review_count > 0 && (
-                      <div className="flex items-center gap-1">
+                      <div className="flex items-center gap-1.5 group/stat">
-                        <Users className="w-3 h-3 text-muted-foreground" />
+                        <Users className="w-3.5 h-3.5 text-muted-foreground group-hover/stat:text-foreground transition-colors duration-300" />
-                        <span className="text-muted-foreground">{park.review_count} reviews</span>
+                        <span className="text-muted-foreground text-xs">{park.review_count} reviews</span>
                       </div>
                     )}
                   </div>
 
                   <Button 
                     size="sm" 
-                    className="bg-gradient-to-r from-primary/80 to-secondary/80 hover:from-primary hover:to-secondary transition-all duration-300"
+                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
                   >
-                    <ExternalLink className="w-3 h-3 mr-1" />
+                    <ExternalLink className="w-3.5 h-3.5 mr-1.5" />
-                    View Details
+                    <span className="hidden sm:inline">View Details</span>
+                    <span className="sm:hidden">View</span>
                   </Button>
                 </div>
               </div>

src/components/rides/RideListView.tsx

@@ -0,0 +1,149 @@
+import { MapPin, Star, Zap, Ruler, Clock, Factory, Castle } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Ride } from '@/types/database';
+import { cn } from '@/lib/utils';
+
+interface RideListViewProps {
+  rides: Ride[];
+  onRideClick: (ride: Ride) => void;
+}
+
+export function RideListView({ rides, onRideClick }: RideListViewProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'operating': return 'bg-green-500/20 text-green-400 border-green-500/30';
+      case 'seasonal': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+      case 'under_construction': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+      case 'closed': return 'bg-red-500/20 text-red-400 border-red-500/30';
+      default: return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+    }
+  };
+
+  const formatCategory = (category: string) => {
+    return category.split('_').map(word => 
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  };
+
+  return (
+    <div className="space-y-3">
+      {rides.map((ride, index) => (
+        <Card 
+          key={ride.id}
+          className={cn(
+            "group overflow-hidden cursor-pointer",
+            "border-border/40 bg-gradient-to-br from-card via-card/95 to-card/90",
+            "hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/5",
+            "transition-all duration-500 animate-fade-in-up"
+          )}
+          style={{ animationDelay: `${index * 50}ms` }}
+          onClick={() => onRideClick(ride)}
+        >
+          <CardContent className="p-0">
+            <div className="flex flex-col sm:flex-row">
+              {/* Image */}
+              <div className="w-full sm:w-40 h-40 md:w-48 md:h-40 flex-shrink-0 relative overflow-hidden">
+                {ride.card_image_url ? (
+                  <>
+                    <img 
+                      src={ride.card_image_url} 
+                      alt={ride.name}
+                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  </>
+                ) : (
+                  <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative overflow-hidden">
+                    <Castle className="w-12 h-12 opacity-50 z-10 relative" />
+                    <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-transparent group-hover:scale-110 transition-transform duration-700" />
+                  </div>
+                )}
+                
+                {/* Status Badge */}
+                <Badge 
+                  className={cn(
+                    "absolute top-2 left-2 text-xs border backdrop-blur-sm",
+                    getStatusColor(ride.status)
+                  )}
+                >
+                  {ride.status.replace('_', ' ').toUpperCase()}
+                </Badge>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 p-4 md:p-6 flex flex-col justify-between min-h-[160px]">
+                <div className="space-y-3">
+                  {/* Header */}
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-bold text-lg md:text-xl group-hover:text-primary transition-colors duration-300 line-clamp-1 mb-1.5">
+                        {ride.name}
+                      </h3>
+                      
+                      {ride.park && (
+                        <div className="flex items-center text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300 mb-1">
+                          <Castle className="w-3.5 h-3.5 mr-1.5 flex-shrink-0" />
+                          <span className="line-clamp-1 font-medium">{ride.park.name}</span>
+                        </div>
+                      )}
+
+                      {ride.park?.location && (
+                        <div className="flex items-center text-xs text-muted-foreground">
+                          <MapPin className="w-3 h-3 mr-1 flex-shrink-0" />
+                          <span className="line-clamp-1">
+                            {ride.park.location.city && `${ride.park.location.city}, `}
+                            {ride.park.location.country}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Rating */}
+                    {ride.average_rating > 0 && (
+                      <div className="flex items-center gap-1.5 ml-4 flex-shrink-0 bg-yellow-400/10 px-3 py-1.5 rounded-full group-hover:bg-yellow-400/20 transition-colors duration-300">
+                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+                        <span className="font-semibold text-foreground">{ride.average_rating.toFixed(1)}</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Tags */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <Badge variant="outline" className="text-xs backdrop-blur-sm border-primary/20 group-hover:border-primary/40 transition-colors duration-300">
+                      {formatCategory(ride.category)}
+                    </Badge>
+                    {ride.manufacturer && (
+                      <Badge variant="outline" className="text-xs backdrop-blur-sm border-accent/20 group-hover:border-accent/40 transition-colors duration-300">
+                        <Factory className="w-3 h-3 mr-1" />
+                        {ride.manufacturer.name}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center justify-between mt-4 pt-3 border-t border-border/50">
+                  <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                    {ride.review_count && ride.review_count > 0 && (
+                      <span className="text-xs">{ride.review_count} reviews</span>
+                    )}
+                  </div>
+
+                  <Button 
+                    size="sm" 
+                    className="bg-gradient-to-r from-primary to-secondary hover:shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all duration-300 flex-shrink-0"
+                  >
+                    <span className="hidden sm:inline">View Details</span>
+                    <span className="sm:hidden">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

src/index.css

@@ -392,3 +392,20 @@ All colors MUST be HSL.
   content-visibility: auto;
   contain-intrinsic-size: 0 200px;
 }
+
+/* Enhanced list view animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+  opacity: 0;
+}

src/pages/Designers.tsx

@@ -8,12 +8,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Search, SlidersHorizontal, Ruler, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
 import { DesignerFilters, DesignerFilterState, defaultDesignerFilters } from '@/components/designers/DesignerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { DesignerCard } from '@/components/designers/DesignerCard';
+import { DesignerListView } from '@/components/designers/DesignerListView';
 import { DesignerForm } from '@/components/admin/DesignerForm';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -33,6 +35,7 @@ export default function Designers() {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<DesignerFilterState>(defaultDesignerFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('designers-sidebar-collapsed');
@@ -200,6 +203,12 @@ export default function Designers() {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
           
@@ -246,11 +255,15 @@ export default function Designers() {
           {/* Results Area */}
           <div className="flex-1 min-w-0">
             {filteredCompanies.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+              viewMode === 'grid' ? (
-                {filteredCompanies.map((company) => (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                  <DesignerCard key={company.id} company={company} />
+                  {filteredCompanies.map((company) => (
-                ))}
+                    <DesignerCard key={company.id} company={company} />
-              </div>
+                  ))}
+                </div>
+              ) : (
+                <DesignerListView designers={filteredCompanies} onDesignerClick={(d) => navigate(`/designers/${d.slug}`)} />
+              )
             ) : (
               <div className="text-center py-12">
                 <Ruler className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />

src/pages/Manufacturers.tsx

@@ -8,12 +8,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Search, SlidersHorizontal, Factory, Plus, ChevronDown, Filter, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
 import { ManufacturerFilters, ManufacturerFilterState, defaultManufacturerFilters } from '@/components/manufacturers/ManufacturerFilters';
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
+import { ManufacturerListView } from '@/components/manufacturers/ManufacturerListView';
 import { ManufacturerForm } from '@/components/admin/ManufacturerForm';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -33,6 +35,7 @@ export default function Manufacturers() {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<ManufacturerFilterState>(defaultManufacturerFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('manufacturers-sidebar-collapsed');
@@ -213,6 +216,12 @@ export default function Manufacturers() {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
           
@@ -259,11 +268,15 @@ export default function Manufacturers() {
           {/* Results Area */}
           <div className="flex-1 min-w-0">
             {filteredCompanies.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+              viewMode === 'grid' ? (
-                {filteredCompanies.map((company) => (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                  <ManufacturerCard key={company.id} company={company} />
+                  {filteredCompanies.map((company) => (
-                ))}
+                    <ManufacturerCard key={company.id} company={company} />
-              </div>
+                  ))}
+                </div>
+              ) : (
+                <ManufacturerListView manufacturers={filteredCompanies} onManufacturerClick={(m) => navigate(`/manufacturers/${m.slug}`)} />
+              )
             ) : (
               <div className="text-center py-12">
                 <Factory className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />

src/pages/Operators.tsx

@@ -9,10 +9,12 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Search, Filter, Building, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { cn } from '@/lib/utils';
 import { supabase } from '@/integrations/supabase/client';
 import OperatorCard from '@/components/operators/OperatorCard';
+import { OperatorListView } from '@/components/operators/OperatorListView';
 import { OperatorForm } from '@/components/admin/OperatorForm';
 import { OperatorFilters, OperatorFilterState, defaultOperatorFilters } from '@/components/operators/OperatorFilters';
 import { Company } from '@/types/database';
@@ -32,6 +34,7 @@ const Operators = () => {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<OperatorFilterState>(defaultOperatorFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('operators-sidebar-collapsed');
@@ -271,6 +274,12 @@ const Operators = () => {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
           
@@ -324,13 +333,17 @@ const Operators = () => {
               </div>
             )}
 
-            {/* Operators Grid */}
+            {/* Operators Grid/List */}
             {!isLoading && filteredAndSortedOperators && filteredAndSortedOperators.length > 0 && (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+              viewMode === 'grid' ? (
-                {filteredAndSortedOperators.map((operator) => (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                  <OperatorCard key={operator.id} company={operator} />
+                  {filteredAndSortedOperators.map((operator) => (
-                ))}
+                    <OperatorCard key={operator.id} company={operator} />
-              </div>
+                  ))}
+                </div>
+              ) : (
+                <OperatorListView operators={filteredAndSortedOperators} onOperatorClick={(op) => navigate(`/operators/${op.slug}`)} />
+              )
             )}
 
             {/* Empty State */}

src/pages/Rides.tsx

@@ -7,10 +7,12 @@ import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Filter, SlidersHorizontal, FerrisWheel, Plus, ChevronDown, PanelLeftClose, PanelLeftOpen, Grid3X3, List } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
 import { RideCard } from '@/components/rides/RideCard';
+import { RideListView } from '@/components/rides/RideListView';
 import { RideForm } from '@/components/admin/RideForm';
 import { RideFilters, RideFilterState, defaultRideFilters } from '@/components/rides/RideFilters';
 import { Ride } from '@/types/database';
@@ -32,6 +34,7 @@ export default function Rides() {
   const [sortBy, setSortBy] = useState('name');
   const [filters, setFilters] = useState<RideFilterState>(defaultRideFilters);
   const [showFilters, setShowFilters] = useState(false);
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     const saved = localStorage.getItem('rides-sidebar-collapsed');
@@ -221,6 +224,13 @@ export default function Rides() {
                 <span className="hidden sm:inline">Filters</span>
                 <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
               </Button>
+
+              <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as 'grid' | 'list')} className="hidden md:inline-flex">
+                <TabsList>
+                  <TabsTrigger value="grid"><Grid3X3 className="w-4 h-4" /></TabsTrigger>
+                  <TabsTrigger value="list"><List className="w-4 h-4" /></TabsTrigger>
+                </TabsList>
+              </Tabs>
             </div>
           </div>
 
@@ -267,11 +277,15 @@ export default function Rides() {
           {/* Results Area */}
           <div className="flex-1 min-w-0">
             {filteredRides.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
+              viewMode === 'grid' ? (
-                {filteredRides.map((ride) => (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
-                  <RideCard key={ride.id} ride={ride} showParkName={true} />
+                  {filteredRides.map((ride) => (
-                ))}
+                    <RideCard key={ride.id} ride={ride} showParkName={true} />
-              </div>
+                  ))}
+                </div>
+              ) : (
+                <RideListView rides={filteredRides} onRideClick={(ride) => navigate(`/parks/${ride.park?.slug}/rides/${ride.slug}`)} />
+              )
             ) : (
               <div className="text-center py-12">
                 <FerrisWheel className="w-16 h-16 mb-4 mx-auto text-muted-foreground" />