Refactor code structure and remove redundant changes

src-old/components/homepage/ContentTabs.tsx

@@ -0,0 +1,474 @@
+import { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ParkCard } from '@/components/parks/ParkCard';
+import { RideCard } from '@/components/rides/RideCard';
+import { RecentChangeCard } from './RecentChangeCard';
+import { Badge } from '@/components/ui/badge';
+import { Clock } from 'lucide-react';
+import { useHomepageTrendingParks, useHomepageTrendingRides } from '@/hooks/homepage/useHomepageTrending';
+import { useHomepageRecentParks, useHomepageRecentRides } from '@/hooks/homepage/useHomepageRecent';
+import { useHomepageRecentChanges } from '@/hooks/homepage/useHomepageRecentChanges';
+import { useHomepageRecentlyOpenedParks, useHomepageRecentlyOpenedRides } from '@/hooks/homepage/useHomepageOpened';
+import { useHomepageHighestRatedParks, useHomepageHighestRatedRides } from '@/hooks/homepage/useHomepageRated';
+import { useHomepageOpeningSoonParks, useHomepageOpeningSoonRides } from '@/hooks/homepage/useHomepageOpeningSoon';
+import { useHomepageClosingSoonParks, useHomepageClosingSoonRides } from '@/hooks/homepage/useHomepageClosing';
+import { useHomepageRecentlyClosedParks, useHomepageRecentlyClosedRides } from '@/hooks/homepage/useHomepageClosed';
+
+export function ContentTabs() {
+  const [activeTab, setActiveTab] = useState('trending-parks');
+
+  // Lazy load data - only fetch when tab is active
+  const trendingParks = useHomepageTrendingParks(activeTab === 'trending-parks');
+  const trendingRides = useHomepageTrendingRides(activeTab === 'trending-rides');
+  const recentParks = useHomepageRecentParks(activeTab === 'recent-parks');
+  const recentRides = useHomepageRecentRides(activeTab === 'recent-rides');
+  const recentChanges = useHomepageRecentChanges(activeTab === 'recent-changes');
+  const recentlyOpenedParks = useHomepageRecentlyOpenedParks(activeTab === 'recently-opened');
+  const recentlyOpenedRides = useHomepageRecentlyOpenedRides(activeTab === 'recently-opened');
+  const highestRatedParks = useHomepageHighestRatedParks(activeTab === 'highest-rated-parks');
+  const highestRatedRides = useHomepageHighestRatedRides(activeTab === 'highest-rated-rides');
+  const openingSoonParks = useHomepageOpeningSoonParks(activeTab === 'opening-soon');
+  const openingSoonRides = useHomepageOpeningSoonRides(activeTab === 'opening-soon');
+  const closingSoonParks = useHomepageClosingSoonParks(activeTab === 'closing-soon');
+  const closingSoonRides = useHomepageClosingSoonRides(activeTab === 'closing-soon');
+  const recentlyClosedParks = useHomepageRecentlyClosedParks(activeTab === 'recently-closed');
+  const recentlyClosedRides = useHomepageRecentlyClosedRides(activeTab === 'recently-closed');
+
+  // Combine parks and rides for mixed tabs
+  const recentlyOpened = [
+    ...(recentlyOpenedParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
+    ...(recentlyOpenedRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
+  ].sort((a, b) => new Date(b.opening_date || 0).getTime() - new Date(a.opening_date || 0).getTime()).slice(0, 24);
+
+  const openingSoon = [
+    ...(openingSoonParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
+    ...(openingSoonRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
+  ].sort((a, b) => new Date(a.opening_date || 0).getTime() - new Date(b.opening_date || 0).getTime()).slice(0, 24);
+
+  const closingSoon = [
+    ...(closingSoonParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
+    ...(closingSoonRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
+  ].sort((a, b) => new Date(a.closing_date || 0).getTime() - new Date(b.closing_date || 0).getTime()).slice(0, 24);
+
+  const recentlyClosed = [
+    ...(recentlyClosedParks.data || []).map(p => ({ ...p, entityType: 'park' as const })),
+    ...(recentlyClosedRides.data || []).map(r => ({ ...r, entityType: 'ride' as const }))
+  ].sort((a, b) => new Date(b.closing_date || 0).getTime() - new Date(a.closing_date || 0).getTime()).slice(0, 24);
+
+  const isLoadingInitial = activeTab === 'trending-parks' && trendingParks.isLoading;
+
+  if (isLoadingInitial) {
+    return (
+      <section className="py-12">
+        <div className="container mx-auto px-4">
+          <div className="space-y-8">
+            <div className="text-center space-y-3">
+              <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" />
+              <div className="h-4 bg-muted/50 rounded w-96 mx-auto animate-pulse" style={{ animationDelay: '150ms' }} />
+              <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>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-8">
+      <div className="container mx-auto px-4">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <div className="text-center mb-8">
+            <TabsList className="flex flex-wrap justify-center gap-2 p-3 bg-muted/30 rounded-lg max-w-5xl mx-auto">
+              <TabsTrigger value="trending-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Trending Parks
+              </TabsTrigger>
+              <TabsTrigger value="trending-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Trending Rides
+              </TabsTrigger>
+              <TabsTrigger value="recent-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                New Parks
+              </TabsTrigger>
+              <TabsTrigger value="recent-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                New Rides
+              </TabsTrigger>
+              <TabsTrigger value="recent-changes" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Recent Changes
+              </TabsTrigger>
+              <TabsTrigger value="highest-rated-parks" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Top Parks
+              </TabsTrigger>
+              <TabsTrigger value="highest-rated-rides" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Top Rides
+              </TabsTrigger>
+              <TabsTrigger value="opening-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Opening Soon
+              </TabsTrigger>
+              <TabsTrigger value="recently-opened" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Recently Opened
+              </TabsTrigger>
+              <TabsTrigger value="closing-soon" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Closing Soon
+              </TabsTrigger>
+              <TabsTrigger value="recently-closed" className="px-4 py-2.5 text-sm font-medium rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:bg-muted/50 transition-colors text-center md:w-[calc(25%-0.375rem)]">
+                Recently Closed
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value="trending-parks" className="mt-8">
+            <div className="text-center mb-6">
+              <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 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>
+            {trendingParks.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </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.data?.map((park) => (
+                  <ParkCard key={park.id} park={park} />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="trending-rides" className="mt-8">
+            <div className="text-center mb-6">
+              <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 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>
+            {trendingRides.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </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.data?.map((ride) => (
+                  <RideCard key={ride.id} ride={ride} />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="recent-parks" className="mt-8">
+            <div className="text-center mb-6">
+              <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 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>
+            {recentParks.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </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.data?.map((park) => (
+                  <ParkCard key={park.id} park={park} />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="recent-rides" className="mt-8">
+            <div className="text-center mb-6">
+              <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 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>
+            {recentRides.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </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.data?.map((ride) => (
+                  <RideCard key={ride.id} ride={ride} />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="recent-changes" className="mt-8">
+            <div className="text-center mb-6">
+              <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 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.isLoading ? (
+              <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-64 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </div>
+            ) : recentChanges.data && recentChanges.data.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">
+                {recentChanges.data.map((change) => (
+                  <RecentChangeCard
+                    key={`${change.type}-${change.id}-${change.changedAt}`}
+                    entityType={change.type}
+                    entityId={change.id}
+                    entityName={change.name}
+                    entitySlug={change.slug}
+                    parkSlug={change.parkSlug}
+                    imageUrl={change.imageUrl}
+                    changeType={change.changeType}
+                    changedAt={change.changedAt}
+                    changedByUsername={change.changedBy?.username}
+                    changedByAvatar={change.changedBy?.avatarUrl}
+                    changeReason={change.changeReason}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-16 px-4">
+                <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 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 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>
+            {recentlyOpenedParks.isLoading || recentlyOpenedRides.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </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) => (
+                  entity.entityType === 'park' ? (
+                    <div key={entity.id} className="relative">
+                      <ParkCard park={entity} />
+                      {entity.opening_date && (
+                        <Badge className="absolute top-2 right-2 bg-green-500/90 text-white backdrop-blur-sm">
+                          {new Date(entity.opening_date).getFullYear()}
+                        </Badge>
+                      )}
+                    </div>
+                  ) : (
+                    <div key={entity.id} className="relative">
+                      <RideCard ride={entity} />
+                      {entity.opening_date && (
+                        <Badge className="absolute top-2 right-2 bg-green-500/90 text-white backdrop-blur-sm">
+                          {new Date(entity.opening_date).getFullYear()}
+                        </Badge>
+                      )}
+                    </div>
+                  )
+                ))}
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="highest-rated-parks" className="mt-8">
+            <div className="text-center mb-6">
+              <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)]">Highest Rated Parks</h2>
+              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Top-rated theme parks based on visitor reviews</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>
+            {highestRatedParks.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </div>
+            ) : highestRatedParks.data && highestRatedParks.data.length > 0 ? (
+              <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">
+                {highestRatedParks.data.map((park) => (
+                  <ParkCard key={park.id} park={park} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                No rated parks available yet. Be the first to leave a review!
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="highest-rated-rides" className="mt-8">
+            <div className="text-center mb-6">
+              <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)]">Highest Rated Rides</h2>
+              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Top-rated attractions based on rider reviews</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>
+            {highestRatedRides.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </div>
+            ) : highestRatedRides.data && highestRatedRides.data.length > 0 ? (
+              <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">
+                {highestRatedRides.data.map((ride) => (
+                  <RideCard key={ride.id} ride={ride} />
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                No rated rides available yet. Be the first to leave a review!
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="opening-soon" className="mt-8">
+            <div className="text-center mb-6">
+              <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)]">Opening Soon</h2>
+              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides opening in the next 6 months</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>
+            {openingSoonParks.isLoading || openingSoonRides.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </div>
+            ) : openingSoon.length > 0 ? (
+              <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">
+                {openingSoon.map((entity: unknown) => {
+                  const typedEntity = entity as { id: string; entityType: string; opening_date: string };
+                  return typedEntity.entityType === 'park' ? (
+                    <div key={typedEntity.id} className="relative">
+                      <ParkCard park={entity as never} />
+                      <Badge className="absolute top-2 right-2 bg-blue-500/90 text-white backdrop-blur-sm">
+                        {new Date(typedEntity.opening_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                      </Badge>
+                    </div>
+                  ) : (
+                    <div key={typedEntity.id} className="relative">
+                      <RideCard ride={entity as never} />
+                      <Badge className="absolute top-2 right-2 bg-blue-500/90 text-white backdrop-blur-sm">
+                        {new Date(typedEntity.opening_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                      </Badge>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                No parks or rides scheduled to open in the next 6 months.
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="closing-soon" className="mt-8">
+            <div className="text-center mb-6">
+              <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)]">Closing Soon</h2>
+              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Last chance: Parks and rides closing in the next 6 months</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>
+            {closingSoonParks.isLoading || closingSoonRides.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </div>
+            ) : closingSoon.length > 0 ? (
+              <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">
+                {closingSoon.map((entity: unknown) => {
+                  const typedEntity = entity as { id: string; entityType: string; closing_date: string };
+                  return typedEntity.entityType === 'park' ? (
+                    <div key={typedEntity.id} className="relative">
+                      <ParkCard park={entity as never} />
+                      <Badge className="absolute top-2 right-2 bg-red-500/90 text-white backdrop-blur-sm">
+                        Closes {new Date(typedEntity.closing_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                      </Badge>
+                    </div>
+                  ) : (
+                    <div key={typedEntity.id} className="relative">
+                      <RideCard ride={entity as never} />
+                      <Badge className="absolute top-2 right-2 bg-red-500/90 text-white backdrop-blur-sm">
+                        Closes {new Date(typedEntity.closing_date).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                      </Badge>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                No parks or rides scheduled to close in the next 6 months.
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="recently-closed" className="mt-8">
+            <div className="text-center mb-6">
+              <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 Closed</h2>
+              <p className="text-muted-foreground text-sm md:text-base animate-fade-in">Parks and rides that closed 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>
+            {recentlyClosedParks.isLoading || recentlyClosedRides.isLoading ? (
+              <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">
+                {[...Array(12)].map((_, i) => (
+                  <div key={i} className="h-72 bg-card rounded-lg border border-border animate-pulse" />
+                ))}
+              </div>
+            ) : recentlyClosed.length > 0 ? (
+              <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">
+                {recentlyClosed.map((entity: unknown) => {
+                  const typedEntity = entity as { id: string; entityType: string; closing_date: string };
+                  return typedEntity.entityType === 'park' ? (
+                    <div key={typedEntity.id} className="relative">
+                      <ParkCard park={entity as never} />
+                      <Badge className="absolute top-2 right-2 bg-gray-500/90 text-white backdrop-blur-sm">
+                        Closed {new Date(typedEntity.closing_date).getFullYear()}
+                      </Badge>
+                    </div>
+                  ) : (
+                    <div key={typedEntity.id} className="relative">
+                      <RideCard ride={entity as never} />
+                      <Badge className="absolute top-2 right-2 bg-gray-500/90 text-white backdrop-blur-sm">
+                        Closed {new Date(typedEntity.closing_date).getFullYear()}
+                      </Badge>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                No parks or rides closed in the last year.
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </section>
+  );
+}

src-old/components/homepage/FeaturedParks.tsx

@@ -0,0 +1,189 @@
+import { useState, useEffect } from 'react';
+import { Star, TrendingUp, Award, Castle, FerrisWheel, Waves, Tent, LucideIcon } from 'lucide-react';
+import { formatLocationShort } from '@/lib/locationFormatter';
+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 { supabase } from '@/lib/supabaseClient';
+import { getErrorMessage } from '@/lib/errorHandler';
+
+export function FeaturedParks() {
+  const [topRatedParks, setTopRatedParks] = useState<Park[]>([]);
+  const [mostRidesParks, setMostRidesParks] = useState<Park[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchFeaturedParks();
+  }, []);
+
+  const fetchFeaturedParks = async () => {
+    try {
+      // Fetch top rated parks
+      const { data: topRated } = await supabase
+        .from('parks')
+        .select(`
+          *,
+          location:locations(*),
+          operator:companies!parks_operator_id_fkey(*)
+        `)
+        .order('average_rating', { ascending: false })
+        .limit(3);
+
+      // Fetch parks with most rides
+      const { data: mostRides } = await supabase
+        .from('parks')
+        .select(`
+          *,
+          location:locations(*),
+          operator:companies!parks_operator_id_fkey(*)
+        `)
+        .order('ride_count', { ascending: false })
+        .limit(3);
+
+      setTopRatedParks(topRated || []);
+      setMostRidesParks(mostRides || []);
+    } catch (error: unknown) {
+      // Featured parks fetch failed - display empty sections
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const FeaturedParkCard = ({ park, icon: Icon, label }: { park: Park; icon: LucideIcon; label: string }) => (
+    <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 hover:scale-[1.02]">
+      <div className="relative">
+        {/* Gradient Background */}
+        <div className="aspect-video bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 flex items-center justify-center relative">
+          <div className="opacity-50">
+            {park.park_type === 'theme_park' ? <Castle className="w-16 h-16" /> : 
+             park.park_type === 'amusement_park' ? <FerrisWheel className="w-16 h-16" /> :
+             park.park_type === 'water_park' ? <Waves className="w-16 h-16" /> : <Tent className="w-16 h-16" />}
+          </div>
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+          
+          {/* Featured Badge */}
+          <Badge className="absolute top-3 left-3 bg-primary/90 text-primary-foreground border-0">
+            <Icon className="w-3 h-3 mr-1" />
+            {label}
+          </Badge>
+
+          {/* Rating Badge */}
+          <Badge className="absolute top-3 right-3 bg-background/90 text-foreground border-0">
+            <Star className="w-3 h-3 mr-1 fill-yellow-400 text-yellow-400" />
+            {park.average_rating ? park.average_rating.toFixed(1) : 'N/A'}
+          </Badge>
+        </div>
+
+        <CardContent className="p-4">
+          <div className="space-y-2">
+            <h3 className="font-bold text-lg group-hover:text-primary transition-colors line-clamp-1">
+              {park.name}
+            </h3>
+            
+            {park.location && (
+              <p className="text-sm text-muted-foreground">
+                {formatLocationShort(park.location)}
+              </p>
+            )}
+
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-3">
+                <span className="text-primary font-medium">{park.ride_count} rides</span>
+                <div className="flex items-center gap-1">
+                  <span className="text-accent font-medium">{park.coaster_count}</span>
+                  <FerrisWheel className="w-3 h-3 text-accent" />
+                </div>
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {park.review_count} reviews
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </div>
+    </Card>
+  );
+
+  if (loading) {
+    return (
+      <section className="py-12">
+        <div className="container mx-auto px-4">
+          <div className="animate-pulse space-y-6">
+            <div className="h-8 bg-muted rounded w-1/3"></div>
+            <div className="grid md:grid-cols-3 gap-6">
+              {[...Array(6)].map((_, i) => (
+                <div key={i} className="h-64 bg-muted rounded-lg"></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="py-16 bg-muted/20">
+      <div className="container mx-auto px-4">
+        <div className="text-center max-w-3xl mx-auto mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">
+            Featured
+            <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"> Destinations</span>
+          </h2>
+          <p className="text-xl text-muted-foreground">
+            Discover the highest-rated parks and thrill capitals around the world
+          </p>
+        </div>
+
+        {/* Top Rated Parks */}
+        <div className="mb-12">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
+              <Award className="w-4 h-4 text-primary" />
+            </div>
+            <h3 className="text-2xl font-bold">Top Rated Parks</h3>
+          </div>
+          
+          <div className="grid md:grid-cols-3 gap-6">
+            {topRatedParks.map((park) => (
+              <FeaturedParkCard 
+                key={park.id} 
+                park={park}
+                icon={Award}
+                label="Top Rated"
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Most Rides */}
+        <div>
+          <div className="flex items-center gap-3 mb-6">
+            <div className="w-8 h-8 bg-secondary/20 rounded-full flex items-center justify-center">
+              <TrendingUp className="w-4 h-4 text-secondary" />
+            </div>
+            <h3 className="text-2xl font-bold">Thrill Capitals</h3>
+          </div>
+          
+          <div className="grid md:grid-cols-3 gap-6">
+            {mostRidesParks.map((park) => (
+              <FeaturedParkCard 
+                key={park.id} 
+                park={park}
+                icon={TrendingUp}
+                label="Most Rides"
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Call to Action */}
+        <div className="text-center mt-12">
+          <Button size="lg" variant="outline" className="border-primary/30 hover:bg-primary/10">
+            Explore All Parks
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

src-old/components/homepage/HeroSearch.tsx

@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Search, MapPin, Calendar, Filter } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+export function HeroSearch() {
+  const navigate = useNavigate();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedType, setSelectedType] = useState('all');
+  const [selectedCountry, setSelectedCountry] = useState('all');
+
+  const popularSearches = [
+    'Cedar Point', 'Disney World', 'Europa-Park', 'Six Flags Magic Mountain',
+    'Alton Towers', 'Roller Coasters', 'Theme Parks', 'Water Parks'
+  ];
+
+  const parkTypes = [
+    { value: 'all', label: 'All Parks' },
+    { value: 'theme_park', label: 'Theme Parks' },
+    { value: 'amusement_park', label: 'Amusement Parks' },
+    { value: 'water_park', label: 'Water Parks' }
+  ];
+
+  const countries = [
+    { value: 'all', label: 'All Countries' },
+    { value: 'United States', label: 'United States' },
+    { value: 'Germany', label: 'Germany' },
+    { value: 'United Kingdom', label: 'United Kingdom' },
+    { value: 'Netherlands', label: 'Netherlands' }
+  ];
+
+  const handleSearch = () => {
+    // Search functionality handled by AutocompleteSearch component in Header
+  };
+
+  return (
+    <div className="relative max-w-4xl mx-auto">
+      {/* Main Search Card */}
+      <div className="bg-background/95 backdrop-blur-sm rounded-2xl border border-border/50 p-6 shadow-2xl shadow-primary/20">
+        <div className="space-y-4">
+          {/* Search Input Row */}
+          <div className="flex flex-col md:flex-row gap-3">
+            {/* Main Search */}
+            <div className="relative flex-1">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
+              <Input
+                placeholder="Search parks, rides, or locations..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-12 pr-4 h-12 text-lg bg-muted/50 border-border/50 focus:border-primary/50 rounded-xl"
+                onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+              />
+            </div>
+
+            {/* Park Type Filter */}
+            <Select value={selectedType} onValueChange={setSelectedType}>
+              <SelectTrigger className="w-full md:w-48 h-12 bg-muted/50 border-border/50 rounded-xl">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {parkTypes.map((type) => (
+                  <SelectItem key={type.value} value={type.value}>
+                    {type.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {/* Country Filter */}
+            <Select value={selectedCountry} onValueChange={setSelectedCountry}>
+              <SelectTrigger className="w-full md:w-48 h-12 bg-muted/50 border-border/50 rounded-xl">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {countries.map((country) => (
+                  <SelectItem key={country.value} value={country.value}>
+                    {country.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {/* Search Button */}
+            <Button 
+              onClick={handleSearch}
+              className="h-12 px-8 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-xl"
+            >
+              <Search className="w-5 h-5 md:mr-2" />
+              <span className="hidden md:inline">Search</span>
+            </Button>
+          </div>
+
+          {/* Quick Action Buttons */}
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" className="text-xs rounded-full">
+              <MapPin className="w-3 h-3 mr-1" />
+              Near Me
+            </Button>
+            <Button variant="outline" size="sm" className="text-xs rounded-full">
+              <Calendar className="w-3 h-3 mr-1" />
+              Open Today
+            </Button>
+            <Button variant="outline" size="sm" className="text-xs rounded-full">
+              <Filter className="w-3 h-3 mr-1" />
+              Advanced Filters
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Popular Searches */}
+      <div className="mt-6 text-center">
+        <p className="text-sm text-muted-foreground mb-3">Popular searches:</p>
+        <div className="flex flex-wrap justify-center gap-2">
+          {popularSearches.map((search, index) => (
+            <Badge
+              key={index}
+              variant="secondary"
+              className="cursor-pointer hover:bg-primary/20 transition-colors"
+              onClick={() => setSearchTerm(search)}
+            >
+              {search}
+            </Badge>
+          ))}
+        </div>
+      </div>
+
+      {/* Stats Row */}
+      <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
+        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
+          <div className="text-2xl font-bold text-primary">12+</div>
+          <div className="text-xs text-muted-foreground">Parks Listed</div>
+        </div>
+        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
+          <div className="text-2xl font-bold text-secondary">500+</div>
+          <div className="text-xs text-muted-foreground">Rides Tracked</div>
+        </div>
+        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
+          <div className="text-2xl font-bold text-accent">10+</div>
+          <div className="text-xs text-muted-foreground">Countries</div>
+        </div>
+        <div className="bg-background/50 rounded-xl p-4 border border-border/30">
+          <div className="text-2xl font-bold text-primary">50K+</div>
+          <div className="text-xs text-muted-foreground">Reviews</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src-old/components/homepage/QuickActions.tsx

@@ -0,0 +1,114 @@
+import { MapPin, Search, Star, TrendingUp, Globe, Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+export function QuickActions() {
+  const actions = [
+    {
+      icon: MapPin,
+      title: 'Find Parks Near Me',
+      description: 'Discover theme parks in your area',
+      badge: 'Popular',
+      color: 'from-primary/20 to-primary/10',
+      borderColor: 'border-primary/20'
+    },
+    {
+      icon: Search,
+      title: 'Advanced Search',
+      description: 'Filter by rides, location, and ratings',
+      badge: 'New',
+      color: 'from-secondary/20 to-secondary/10',
+      borderColor: 'border-secondary/20'
+    },
+    {
+      icon: Star,
+      title: 'Top Rated Parks',
+      description: 'Browse the highest-rated destinations',
+      badge: 'Trending',
+      color: 'from-accent/20 to-accent/10',
+      borderColor: 'border-accent/20'
+    },
+    {
+      icon: TrendingUp,
+      title: 'Coaster Rankings',
+      description: 'See the world\'s best roller coasters',
+      badge: 'Hot',
+      color: 'from-primary/20 to-secondary/10',
+      borderColor: 'border-primary/20'
+    },
+    {
+      icon: Globe,
+      title: 'Browse by Country',
+      description: 'Explore parks around the world',
+      badge: null,
+      color: 'from-secondary/20 to-accent/10',
+      borderColor: 'border-secondary/20'
+    },
+    {
+      icon: Users,
+      title: 'Join Community',
+      description: 'Connect with fellow enthusiasts',
+      badge: 'Free',
+      color: 'from-accent/20 to-primary/10',
+      borderColor: 'border-accent/20'
+    }
+  ];
+
+  return (
+    <section className="py-16">
+      <div className="container mx-auto px-4">
+        <div className="text-center max-w-3xl mx-auto mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">
+            Quick
+            <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"> Actions</span>
+          </h2>
+          <p className="text-xl text-muted-foreground">
+            Jump right into exploring with these popular features
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {actions.map((action, index) => (
+            <Card 
+              key={index}
+              className={`group cursor-pointer border-0 bg-gradient-to-br ${action.color} ${action.borderColor} border hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:scale-[1.02]`}
+            >
+              <CardContent className="p-6 text-center space-y-4">
+                <div className="relative">
+                  <div className="w-12 h-12 bg-background/80 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
+                    <action.icon className="w-6 h-6 text-foreground" />
+                  </div>
+                  {action.badge && (
+                    <Badge 
+                      className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs px-2 py-1"
+                    >
+                      {action.badge}
+                    </Badge>
+                  )}
+                </div>
+                
+                <div>
+                  <h3 className="font-semibold text-lg mb-2 group-hover:text-primary transition-colors">
+                    {action.title}
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    {action.description}
+                  </p>
+                </div>
+
+                <Button 
+                  variant="ghost" 
+                  size="sm"
+                  className="w-full bg-background/50 hover:bg-background/80 transition-colors"
+                >
+                  Get Started
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src-old/components/homepage/RecentChangeCard.tsx

@@ -0,0 +1,132 @@
+import { Link } from 'react-router-dom';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Clock, User } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+
+interface RecentChangeCardProps {
+  entityType: 'park' | 'ride' | 'company';
+  entityId: string;
+  entityName: string;
+  entitySlug: string;
+  parkSlug?: string;
+  imageUrl?: string | null;
+  changeType: string;
+  changedAt: string;
+  changedByUsername?: string | null;
+  changedByAvatar?: string | null;
+  changeReason?: string | null;
+}
+
+const changeTypeColors = {
+  created: 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20',
+  updated: 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20',
+  deleted: 'bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20',
+  restored: 'bg-purple-500/10 text-purple-700 dark:text-purple-400 border-purple-500/20',
+  archived: 'bg-muted text-muted-foreground border-muted',
+};
+
+const entityTypeColors = {
+  park: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20',
+  ride: 'bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-500/20',
+  company: 'bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 border-indigo-500/20',
+};
+
+const formatEntityType = (type: string): string => {
+  return type
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+const formatChangeType = (type: string): string => {
+  return type
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+export function RecentChangeCard({
+  entityType,
+  entityId,
+  entityName,
+  entitySlug,
+  parkSlug,
+  imageUrl,
+  changeType,
+  changedAt,
+  changedByUsername,
+  changedByAvatar,
+  changeReason,
+}: RecentChangeCardProps) {
+  const getEntityPath = () => {
+    if (entityType === 'park') return `/parks/${entitySlug}`;
+    if (entityType === 'ride') {
+      // For rides, use park slug if available, otherwise fallback to global rides list
+      if (parkSlug) {
+        return `/parks/${parkSlug}/rides/${entitySlug}`;
+      }
+      return `/rides`;
+    }
+    // Company paths - link to the appropriate company page
+    return '/';
+  };
+
+  return (
+    <Link to={getEntityPath()}>
+      <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-[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 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-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]}>
+                {formatEntityType(entityType)}
+              </Badge>
+              <Badge variant="outline" className={changeTypeColors[changeType as keyof typeof changeTypeColors] || changeTypeColors.archived}>
+                {formatChangeType(changeType)}
+              </Badge>
+            </div>
+            <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 && (
+            <p className="text-xs text-muted-foreground line-clamp-2 italic">
+              {changeReason}
+            </p>
+          )}
+
+          <div className="flex items-center justify-between text-xs text-muted-foreground gap-2">
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              <span className="line-clamp-1">{formatDistanceToNow(new Date(changedAt), { addSuffix: true })}</span>
+            </div>
+            
+            {changedByUsername && (
+              <div className="flex items-center gap-1">
+                <Avatar className="h-4 w-4">
+                  <AvatarImage src={changedByAvatar || undefined} />
+                  <AvatarFallback>
+                    <User className="h-2 w-2" />
+                  </AvatarFallback>
+                </Avatar>
+                <span className="line-clamp-1">{changedByUsername}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}

src-old/components/homepage/SimpleHeroSearch.tsx

@@ -0,0 +1,32 @@
+import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';
+
+export function SimpleHeroSearch() {
+  return (
+    <section className="relative py-8 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
+      <div className="container mx-auto px-4 text-center">
+        <div className="max-w-4xl mx-auto space-y-8">
+          <h1 className="text-5xl md:text-6xl font-bold leading-tight">
+            <span className="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent text-7xl">
+              ThrillWiki
+            </span>
+          </h1>
+          
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            The ultimate theme park database. Discover parks, track rides, and connect with enthusiasts.
+          </p>
+          
+          {/* Modern Autocomplete Search */}
+          <div className="max-w-2xl mx-auto">
+            <AutocompleteSearch
+              placeholder="Search parks, rides, or locations..."
+              variant="hero"
+              types={['park', 'ride', 'company']}
+              limit={6}
+              showRecentSearches={true}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}