Refactor: Standardize card component styles

src/components/blog/BlogPostCard.tsx

@@ -32,24 +32,32 @@ export function BlogPostCard({
   
   return (
     <Link to={`/blog/${slug}`}>
-      <Card className="overflow-hidden hover:scale-[1.02] hover:shadow-xl transition-all duration-300 group">
+      <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 hover:border-primary/30 transition-all duration-300 hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300">
-        <div className="aspect-[16/9] overflow-hidden bg-gradient-to-br from-primary/20 to-secondary/20">
+        <div className="aspect-[3/2] overflow-hidden bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative">
           {featuredImageId ? (
-            <img
+            <>
-              src={getCloudflareImageUrl(featuredImageId, 'public')}
+              <img
-              alt={title}
+                src={getCloudflareImageUrl(featuredImageId, 'public')}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                alt={title}
-              loading="lazy"
+                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-            />
+                loading="lazy"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
+            </>
           ) : (
             <div className="w-full h-full flex items-center justify-center">
-              <span className="text-6xl opacity-20">📝</span>
+              <div className="relative">
+                <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+                <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                  <span className="text-4xl opacity-80">📝</span>
+                </div>
+              </div>
             </div>
           )}
         </div>
 
-        <div className="p-6 space-y-3">
+        <div className="p-3 space-y-2 border-t border-border/30">
-          <h3 className="text-xl font-bold line-clamp-2 group-hover:text-primary transition-colors">
+          <h3 className="text-base font-bold line-clamp-2 group-hover:text-primary transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
             {title}
           </h3>
 

src/components/designers/DesignerCard.tsx

@@ -22,13 +22,13 @@ export function DesignerCard({ company }: DesignerCardProps) {
 
   return (
     <Card 
-      className="group cursor-pointer transition-all duration-200 hover:shadow-lg hover:scale-[1.02] bg-card border border-border overflow-hidden"
+      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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300"
       onClick={handleClick}
     >
       {/* Header Image/Logo Section */}
-      <div className="relative aspect-[3/2] 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-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center overflow-hidden">
         {/* Background Gradient Overlay */}
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5" />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
         
         {/* Company Type Badge */}
         <div className="absolute top-3 right-3">
@@ -49,8 +49,11 @@ export function DesignerCard({ company }: DesignerCardProps) {
               />
             </div>
           ) : (
-            <div className="w-12 h-12 text-muted-foreground/30">
+            <div className="relative">
-              <Ruler className="w-5 h-5" />
+              <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+              <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                <Ruler className="w-8 h-8 text-primary/70" />
+              </div>
             </div>
           )}
         </div>
@@ -59,7 +62,7 @@ export function DesignerCard({ company }: DesignerCardProps) {
       <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         {/* Company Name */}
         <div className="space-y-0.5 min-w-0">
-          <h3 className="font-semibold text-base group-hover:text-primary transition-colors line-clamp-2 break-words">
+          <h3 className="font-bold text-base group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
             {company.name}
           </h3>
         </div>

src/components/homepage/RecentChangeCard.tsx

@@ -56,19 +56,20 @@ export function RecentChangeCard({
 
   return (
     <Link to={getEntityPath()}>
-      <Card className="overflow-hidden hover:shadow-lg transition-shadow h-full">
+      <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 hover:border-primary/30 transition-all duration-300 hover:scale-[1.02] h-full relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300">
         {imageUrl && (
-          <div className="aspect-video w-full overflow-hidden bg-muted">
+          <div className="aspect-[3/2] w-full overflow-hidden bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative">
             <img
               src={imageUrl}
               alt={entityName}
-              className="w-full h-full object-cover"
+              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
               loading="lazy"
             />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
           </div>
         )}
         
-        <div className="p-4 space-y-3">
+        <div className="p-2.5 space-y-1.5 border-t border-border/30">
           <div className="space-y-2">
             <div className="flex items-center gap-2 flex-wrap">
               <Badge variant="outline" className={entityTypeColors[entityType]}>
@@ -78,7 +79,7 @@ export function RecentChangeCard({
                 {changeType}
               </Badge>
             </div>
-            <h3 className="font-semibold line-clamp-2 text-sm">{entityName}</h3>
+            <h3 className="font-bold line-clamp-2 text-sm group-hover:text-primary transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">{entityName}</h3>
           </div>
 
           {changeReason && (

src/components/manufacturers/ManufacturerCard.tsx

@@ -36,7 +36,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
 
   return (
     <Card 
-      className="group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 cursor-pointer active:scale-[0.98] md:hover:scale-[1.02]"
+      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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300"
       onClick={handleClick}
     >
       {/* Logo/Image Section */}
@@ -76,8 +76,13 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
                   />
                 </div>
               ) : (
-                <div className="w-12 h-12 text-muted-foreground/30">
+                <div className="relative">
-                  {getCompanyIcon(company.company_type)}
+                  <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+                  <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                    <div className="w-8 h-8 text-primary/70">
+                      {getCompanyIcon(company.company_type)}
+                    </div>
+                  </div>
                 </div>
               )}
             </div>
@@ -88,7 +93,7 @@ export function ManufacturerCard({ company }: ManufacturerCardProps) {
       <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         {/* Company Name */}
         <div className="space-y-0.5 min-w-0">
-          <h3 className="text-base font-semibold group-hover:text-primary transition-colors line-clamp-2 break-words">
+          <h3 className="text-base font-bold group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
             {company.name}
           </h3>
         </div>

src/components/moderation/QueueItem.tsx

@@ -8,6 +8,7 @@ import { getSubmissionTypeLabel } from '@/lib/moderation/entities';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { UserAvatar } from '@/components/ui/user-avatar';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';

src/components/parks/ParkCard.tsx

@@ -17,13 +17,26 @@ export function ParkCard({ park }: ParkCardProps) {
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'operating':
-        return 'bg-green-500/20 text-green-400 border-green-500/30';
+        return 'bg-green-500/50 text-green-200 border-green-500/50';
       case 'seasonal':
-        return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+        return 'bg-yellow-500/50 text-yellow-200 border-yellow-500/50';
       case 'under_construction':
-        return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+        return 'bg-blue-500/50 text-blue-200 border-blue-500/50';
       default:
-        return 'bg-red-500/20 text-red-400 border-red-500/30';
+        return 'bg-red-500/50 text-red-200 border-red-500/50';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'operating':
+        return <Clock className="w-3 h-3" />;
+      case 'seasonal':
+        return <Clock className="w-3 h-3" />;
+      case 'under_construction':
+        return <Clock className="w-3 h-3" />;
+      default:
+        return <Clock className="w-3 h-3" />;
     }
   };
   const getParkTypeIcon = (type: string) => {
@@ -43,7 +56,7 @@ export function ParkCard({ park }: ParkCardProps) {
   const formatParkType = (type: string) => {
     return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
   };
-  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}>
+  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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300" onClick={handleClick}>
       <div className="relative overflow-hidden">
         {/* Image Placeholder with Gradient */}
         <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
@@ -60,24 +73,28 @@ export function ParkCard({ park }: ParkCardProps) {
               loading="lazy"
             />
           ) : (
-            <div className="flex items-center justify-center w-12 h-12 text-muted-foreground/30">
+            <div className="relative flex items-center justify-center">
-              {getParkTypeIcon(park.park_type)}
+              <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+              <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                {getParkTypeIcon(park.park_type)}
+              </div>
             </div>
           )}
           
           {/* Gradient Overlay */}
-          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent group-hover:scale-110 transition-transform duration-500" />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
           
           {/* Status Badge */}
-          <Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} border`}>
+          <Badge className={`absolute top-3 right-3 ${getStatusColor(park.status)} backdrop-blur-sm border shadow-lg font-medium text-xs px-2.5 py-1 inline-flex items-center gap-1.5`}>
-            {park.status.replace('_', ' ').toUpperCase()}
+            {getStatusIcon(park.status)}
+            <span>{park.status.replace('_', ' ').toUpperCase()}</span>
           </Badge>
         </div>
 
       <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         {/* Header */}
         <div className="space-y-0.5 min-w-0">
-          <h3 className="font-bold text-base group-hover:text-primary transition-colors line-clamp-2 break-words">
+          <h3 className="font-bold text-base group-hover:text-primary transition-all duration-300 line-clamp-2 break-words group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
             {park.name}
           </h3>
           

src/components/rides/RideModelCard.tsx

@@ -40,34 +40,40 @@ export function RideModelCard({ model, manufacturerSlug }: RideModelCardProps) {
 
   return (
     <Card 
-      className="overflow-hidden hover:shadow-lg transition-shadow cursor-pointer group"
+      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 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300"
       onClick={() => navigate(`/manufacturers/${manufacturerSlug}/models/${model.slug}`)}
     >
-      <div 
+      <div className="aspect-[3/2] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 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 
+          <>
-            src={cardImageUrl || getCloudflareImageUrl(cardImageId, 'card')}
+            <img 
-            srcSet={cardImageId ? `
+              src={cardImageUrl || getCloudflareImageUrl(cardImageId, 'card')}
-              ${getCloudflareImageUrl(cardImageId, 'cardthumb')} 600w,
+              srcSet={cardImageId ? `
-              ${getCloudflareImageUrl(cardImageId, 'card')} 1200w
+                ${getCloudflareImageUrl(cardImageId, 'cardthumb')} 600w,
-            ` : undefined}
+                ${getCloudflareImageUrl(cardImageId, 'card')} 1200w
-            sizes="(max-width: 640px) 600px, 1200px"
+              ` : undefined}
-            alt={model.name}
+              sizes="(max-width: 640px) 600px, 1200px"
-            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+              alt={model.name}
-            loading="lazy"
+              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-          />
+              loading="lazy"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
+          </>
         ) : (
           <div className="flex items-center justify-center h-full">
-            <FerrisWheel className="w-12 h-12 text-muted-foreground/30" />
+            <div className="relative">
+              <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl animate-pulse" />
+              <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center border border-primary/20">
+                <FerrisWheel className="w-8 h-8 text-primary/70" />
+              </div>
+            </div>
           </div>
         )}
       </div>
 
       <CardContent className="p-2.5 space-y-1.5 border-t border-border/30">
         <div className="space-y-0.5 min-w-0">
-          <h3 className="font-semibold text-base line-clamp-2 break-words group-hover:text-primary transition-colors">
+          <h3 className="font-bold text-base line-clamp-2 break-words group-hover:text-primary transition-all duration-300 group-hover:drop-shadow-[0_0_8px_rgba(139,92,246,0.5)]">
             {model.name}
           </h3>
         </div>