Refactor: Enhance homepage tab styling

src/components/homepage/ContentTabs.tsx

@@ -8,6 +8,7 @@ import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { logger } from '@/lib/logger';
+import { Clock } from 'lucide-react';
 
 interface RecentChange {
   entityType: 'park' | 'ride' | 'company';
@@ -230,11 +231,22 @@ export function ContentTabs() {
     return (
       <section className="py-12">
         <div className="container mx-auto px-4">
-          <div className="animate-pulse space-y-6">
+          <div className="space-y-8">
-            <div className="h-12 bg-muted rounded w-1/3 mx-auto"></div>
+            <div className="text-center space-y-3">
-            <div className="grid md:grid-cols-3 gap-6">
+              <div className="h-8 bg-gradient-to-r from-primary/20 via-secondary/20 to-accent/20 rounded-lg w-64 mx-auto animate-pulse" />
-              {[...Array(6)].map((_, i) => (
+              <div className="h-4 bg-muted/50 rounded w-96 mx-auto animate-pulse" style={{ animationDelay: '150ms' }} />
-                <div key={i} className="h-64 bg-muted rounded-lg"></div>
+              <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
+            </div>
+            
+            <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 gap-4">
+              {[...Array(12)].map((_, i) => (
+                <div 
+                  key={i} 
+                  className="h-72 bg-gradient-to-br from-card via-card to-card/80 rounded-lg border border-border/50 animate-pulse relative overflow-hidden"
+                  style={{ animationDelay: `${i * 50}ms` }}
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-shimmer" />
+                </div>
               ))}
             </div>
           </div>
@@ -249,22 +261,22 @@ export function ContentTabs() {
         <Tabs defaultValue="trending-parks" className="w-full">
           <div className="text-center mb-8">
             <TabsList className="grid w-full max-w-5xl mx-auto grid-cols-3 md:grid-cols-6 h-auto p-2 bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 dark:from-primary/20 dark:via-secondary/20 dark:to-accent/20 dark:bg-card/50 border border-primary/20 dark:border-primary/30 rounded-xl shadow-lg backdrop-blur-sm">
-              <TabsTrigger value="trending-parks" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="trending-parks" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Trending Parks
               </TabsTrigger>
-              <TabsTrigger value="trending-rides" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="trending-rides" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Trending Rides
               </TabsTrigger>
-              <TabsTrigger value="recent-parks" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recent-parks" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 New Parks
               </TabsTrigger>
-              <TabsTrigger value="recent-rides" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recent-rides" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 New Rides
               </TabsTrigger>
-              <TabsTrigger value="recent-changes" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recent-changes" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Recent Changes
               </TabsTrigger>
-              <TabsTrigger value="recently-opened" className="text-xs md:text-sm px-2 py-3">
+              <TabsTrigger value="recently-opened" className="text-xs md:text-sm px-2 py-3 data-[state=active]:shadow-[0_0_12px_rgba(139,92,246,0.4)] transition-shadow duration-300">
                 Recently Opened
               </TabsTrigger>
             </TabsList>
@@ -272,8 +284,9 @@ export function ContentTabs() {
 
       <TabsContent value="trending-parks" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Trending Parks</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Parks</h2>
-          <p className="text-muted-foreground">Most viewed parks in the last 30 days</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed parks in the last 30 days</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {trendingParks.map((park) => (
@@ -284,8 +297,9 @@ export function ContentTabs() {
 
       <TabsContent value="trending-rides" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Trending Rides</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Trending Rides</h2>
-          <p className="text-muted-foreground">Most viewed rides in the last 30 days</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Most viewed rides in the last 30 days</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {trendingRides.map((ride) => (
@@ -296,8 +310,9 @@ export function ContentTabs() {
 
       <TabsContent value="recent-parks" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recently Added Parks</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Parks</h2>
-          <p className="text-muted-foreground">Latest parks added to our database</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest parks added to our database</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {recentParks.map((park) => (
@@ -308,8 +323,9 @@ export function ContentTabs() {
 
       <TabsContent value="recent-rides" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recently Added Rides</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Added Rides</h2>
-          <p className="text-muted-foreground">Latest attractions added to our database</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest attractions added to our database</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {recentRides.map((ride) => (
@@ -320,8 +336,9 @@ export function ContentTabs() {
 
       <TabsContent value="recent-changes" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recent Changes</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recent Changes</h2>
-          <p className="text-muted-foreground">Latest updates across all entities</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Latest updates across all entities</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         {recentChanges.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 gap-4">
@@ -343,16 +360,27 @@ export function ContentTabs() {
             ))}
           </div>
         ) : (
-          <div className="text-center py-8 text-muted-foreground">
+          <div className="flex flex-col items-center justify-center py-16 px-4">
-            No recent changes to display
+            <div className="relative mb-6">
+              <div className="absolute inset-0 rounded-full bg-primary/20 blur-2xl animate-pulse" />
+              <div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-card via-card to-card/80 flex items-center justify-center border-2 border-primary/20 shadow-xl">
+                <Clock className="w-10 h-10 text-muted-foreground" />
+              </div>
+            </div>
+            <h3 className="text-xl font-semibold mb-2 text-foreground">No Recent Changes</h3>
+            <p className="text-muted-foreground text-center max-w-md text-sm">
+              There are no recent entity changes to display yet. Check back soon for the latest updates to parks, rides, and companies!
+            </p>
+            <div className="mt-6 w-32 h-0.5 bg-gradient-to-r from-transparent via-primary/40 to-transparent rounded-full" />
           </div>
         )}
       </TabsContent>
 
       <TabsContent value="recently-opened" className="mt-8">
         <div className="text-center mb-6">
-          <h2 className="text-2xl font-bold mb-2">Recently Opened</h2>
+          <h2 className="text-2xl md:text-3xl font-bold mb-2 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent drop-shadow-[0_0_12px_rgba(139,92,246,0.3)]">Recently Opened</h2>
-          <p className="text-muted-foreground">Parks and rides that opened in the last year</p>
+          <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides that opened in the last year</p>
+          <div className="mt-4 mx-auto w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent rounded-full opacity-60"></div>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 3xl:grid-cols-8 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
           {recentlyOpened.map((entity: any) => (

tailwind.config.ts

@@ -100,10 +100,15 @@ export default {
             height: "0",
           },
         },
+        shimmer: {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(100%)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        shimmer: "shimmer 2s infinite",
       },
     },
   },