Add sample data

src/components/homepage/FeaturedParks.tsx

@@ -0,0 +1,184 @@
+import { useState, useEffect } from 'react';
+import { Star, TrendingUp, Award } 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 { supabase } from '@/integrations/supabase/client';
+
+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) {
+      console.error('Error fetching featured parks:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const FeaturedParkCard = ({ park, icon: Icon, label }: { park: Park; icon: any; 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="text-6xl opacity-50">
+            {park.park_type === 'theme_park' ? '🏰' : 
+             park.park_type === 'amusement_park' ? '🎢' :
+             park.park_type === 'water_park' ? '🏊' : '🎪'}
+          </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.toFixed(1)}
+          </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">
+                {park.location.city}, {park.location.country}
+              </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>
+                <span className="text-accent font-medium">{park.coaster_count} 🎢</span>
+              </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/components/homepage/HeroSearch.tsx

@@ -0,0 +1,151 @@
+import { useState } from 'react';
+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 [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 = () => {
+    console.log('Searching for:', searchTerm, selectedType, selectedCountry);
+    // TODO: Implement actual search functionality
+  };
+
+  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/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/pages/Index.tsx

@@ -1,53 +1,22 @@
 import { Header } from '@/components/layout/Header';
 import { ParkGrid } from '@/components/parks/ParkGrid';
+import { FeaturedParks } from '@/components/homepage/FeaturedParks';
+import { QuickActions } from '@/components/homepage/QuickActions';
+import { HeroSearch } from '@/components/homepage/HeroSearch';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Zap, MapPin, Star, TrendingUp, Users } from 'lucide-react';
+import { Zap, MapPin, Star, TrendingUp, Users, Globe, Award } from 'lucide-react';
 
 const Index = () => {
   return (
     <div className="min-h-screen bg-background">
       <Header />
       
-      {/* Hero Section */}
+      {/* Enhanced Hero Section */}
-      <section className="relative overflow-hidden">
+      <section className="relative overflow-hidden min-h-screen flex items-center">
+        {/* Animated Background */}
         <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-secondary/10 to-accent/20" />
-        <div className="container mx-auto px-4 py-16 relative">
+        <div className="absolute inset-0">
-          <div className="text-center max-w-4xl mx-auto space-y-6">
-            <div className="flex items-center justify-center gap-2 mb-4">
-              <Badge className="bg-primary/20 text-primary border-primary/30">
-                🚀 Beta Version
-              </Badge>
-              <Badge className="bg-secondary/20 text-secondary border-secondary/30">
-                Community Driven
-              </Badge>
-            </div>
-            
-            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight">
-              The Ultimate
-              <br />
-              <span className="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
-                Theme Park Database
-              </span>
-            </h1>
-            
-            <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
-              Discover amazing theme parks, track your ride credits, share reviews, and connect with fellow thrill seekers worldwide.
-            </p>
-            
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
-              <Button size="lg" className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-lg px-8 py-3">
-                <Zap className="w-5 h-5 mr-2" />
-                Start Exploring
-              </Button>
-              <Button variant="outline" size="lg" className="text-lg px-8 py-3 border-primary/30 hover:bg-primary/10">
-                <MapPin className="w-5 h-5 mr-2" />
-                Browse Parks
-              </Button>
-            </div>
-          </div>
-        </div>
-        
           {/* Floating Elements */}
           <div className="absolute top-20 left-10 animate-pulse">
             <div className="w-3 h-3 bg-primary rounded-full shadow-lg shadow-primary/50" />
@@ -58,38 +27,73 @@ const Index = () => {
           <div className="absolute bottom-20 left-1/4 animate-pulse delay-500">
             <div className="w-4 h-4 bg-secondary rounded-full shadow-lg shadow-secondary/50" />
           </div>
+          <div className="absolute top-1/3 right-1/3 animate-pulse delay-700">
+            <div className="w-2 h-2 bg-primary rounded-full shadow-lg shadow-primary/50" />
+          </div>
+        </div>
+        
+        <div className="container mx-auto px-4 py-16 relative z-10">
+          <div className="text-center max-w-5xl mx-auto space-y-8">
+            <div className="flex items-center justify-center gap-3 mb-6">
+              <Badge className="bg-primary/20 text-primary border-primary/30 animate-bounce">
+                <Zap className="w-3 h-3 mr-1" />
+                Beta Version
+              </Badge>
+              <Badge className="bg-secondary/20 text-secondary border-secondary/30">
+                <Users className="w-3 h-3 mr-1" />
+                Community Driven
+              </Badge>
+              <Badge className="bg-accent/20 text-accent border-accent/30">
+                <Globe className="w-3 h-3 mr-1" />
+                Worldwide
+              </Badge>
+            </div>
+            
+            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold leading-tight">
+              Discover
+              <br />
+              <span className="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
+                Epic Thrills
+              </span>
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+              The ultimate theme park database. Discover amazing parks, track your ride credits, 
+              share reviews, and connect with fellow thrill seekers worldwide.
+            </p>
+            
+            {/* Enhanced Search Component */}
+            <div className="mt-12">
+              <HeroSearch />
+            </div>
+
+            {/* Quick CTA Buttons */}
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
+              <Button size="lg" className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-lg px-8 py-4 rounded-xl shadow-xl shadow-primary/25">
+                <MapPin className="w-5 h-5 mr-2" />
+                Explore Parks
+              </Button>
+              <Button variant="outline" size="lg" className="text-lg px-8 py-4 rounded-xl border-primary/30 hover:bg-primary/10">
+                <Star className="w-5 h-5 mr-2" />
+                Top Rated
+              </Button>
+            </div>
+          </div>
+        </div>
       </section>
 
-      {/* Stats Section */}
+      {/* Quick Actions */}
-      <section className="py-16 bg-muted/30">
+      <QuickActions />
-        <div className="container mx-auto px-4">
+
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+      {/* Featured Parks */}
-            <div className="text-center space-y-2">
+      <FeaturedParks />
-              <div className="text-3xl md:text-4xl font-bold text-primary">2,500+</div>
-              <div className="text-muted-foreground">Theme Parks</div>
-            </div>
-            <div className="text-center space-y-2">
-              <div className="text-3xl md:text-4xl font-bold text-secondary">15,000+</div>
-              <div className="text-muted-foreground">Rides Tracked</div>
-            </div>
-            <div className="text-center space-y-2">
-              <div className="text-3xl md:text-4xl font-bold text-accent">50,000+</div>
-              <div className="text-muted-foreground">User Reviews</div>
-            </div>
-            <div className="text-center space-y-2">
-              <div className="text-3xl md:text-4xl font-bold text-primary">180+</div>
-              <div className="text-muted-foreground">Countries</div>
-            </div>
-          </div>
-        </div>
-      </section>
 
       {/* Features Section */}
-      <section className="py-16">
+      <section className="py-16 bg-muted/10">
-        <div className="container mx-auto px-4 mb-12">
+        <div className="container mx-auto px-4">
           <div className="text-center max-w-3xl mx-auto mb-16">
             <h2 className="text-3xl md:text-4xl font-bold mb-4">
-              Everything You Need for Your
+              Everything for Your
               <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"> Thrill Journey</span>
             </h2>
             <p className="text-xl text-muted-foreground">
@@ -98,59 +102,102 @@ const Index = () => {
           </div>
           
           <div className="grid md:grid-cols-3 gap-8">
-            <div className="text-center space-y-4 p-6 rounded-2xl bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20">
+            <div className="text-center space-y-4 p-8 rounded-2xl bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300">
-              <div className="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
+              <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
-                <MapPin className="w-6 h-6 text-primary" />
+                <MapPin className="w-8 h-8 text-primary" />
               </div>
-              <h3 className="text-xl font-semibold">Discover Parks</h3>
+              <h3 className="text-2xl font-semibold">Discover Parks</h3>
-              <p className="text-muted-foreground">
+              <p className="text-muted-foreground leading-relaxed">
-                Explore thousands of theme parks worldwide with detailed information, photos, and reviews.
+                Explore thousands of theme parks worldwide with detailed information, photos, and authentic reviews from fellow enthusiasts.
               </p>
+              <Button variant="outline" className="mt-4">
+                Start Exploring
+              </Button>
             </div>
             
-            <div className="text-center space-y-4 p-6 rounded-2xl bg-gradient-to-br from-secondary/5 to-secondary/10 border border-secondary/20">
+            <div className="text-center space-y-4 p-8 rounded-2xl bg-gradient-to-br from-secondary/5 to-secondary/10 border border-secondary/20 hover:shadow-xl hover:shadow-secondary/10 transition-all duration-300">
-              <div className="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mx-auto">
+              <div className="w-16 h-16 bg-secondary/20 rounded-full flex items-center justify-center mx-auto">
-                <TrendingUp className="w-6 h-6 text-secondary" />
+                <TrendingUp className="w-8 h-8 text-secondary" />
               </div>
-              <h3 className="text-xl font-semibold">Track Credits</h3>
+              <h3 className="text-2xl font-semibold">Track Credits</h3>
-              <p className="text-muted-foreground">
+              <p className="text-muted-foreground leading-relaxed">
-                Keep track of every ride you've experienced and build your personal coaster portfolio.
+                Keep track of every ride you've experienced and build your personal coaster portfolio with detailed statistics.
               </p>
+              <Button variant="outline" className="mt-4">
+                Track Rides
+              </Button>
             </div>
             
-            <div className="text-center space-y-4 p-6 rounded-2xl bg-gradient-to-br from-accent/5 to-accent/10 border border-accent/20">
+            <div className="text-center space-y-4 p-8 rounded-2xl bg-gradient-to-br from-accent/5 to-accent/10 border border-accent/20 hover:shadow-xl hover:shadow-accent/10 transition-all duration-300">
-              <div className="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center mx-auto">
+              <div className="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mx-auto">
-                <Users className="w-6 h-6 text-accent" />
+                <Users className="w-8 h-8 text-accent" />
               </div>
-              <h3 className="text-xl font-semibold">Join Community</h3>
+              <h3 className="text-2xl font-semibold">Join Community</h3>
-              <p className="text-muted-foreground">
+              <p className="text-muted-foreground leading-relaxed">
-                Share reviews, create top lists, and connect with fellow theme park enthusiasts.
+                Share reviews, create top lists, and connect with thousands of passionate theme park enthusiasts.
               </p>
+              <Button variant="outline" className="mt-4">
+                Join Now
+              </Button>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Parks Section */}
+      {/* All Parks Section */}
-      <section className="py-16 bg-muted/20">
+      <section className="py-16">
+        <div className="container mx-auto px-4 mb-8">
+          <div className="text-center max-w-3xl mx-auto mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              Browse All
+              <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"> Parks</span>
+            </h2>
+            <p className="text-xl text-muted-foreground">
+              Discover every park in our comprehensive database
+            </p>
+          </div>
+        </div>
         <ParkGrid />
       </section>
 
-      {/* CTA Section */}
+      {/* Final CTA Section */}
-      <section className="py-16 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
+      <section className="py-20 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-3xl mx-auto space-y-6">
+          <div className="max-w-4xl mx-auto space-y-8">
-            <h2 className="text-3xl md:text-4xl font-bold">
+            <div className="flex items-center justify-center gap-3 mb-6">
-              Ready to Start Your
+              <Badge className="bg-primary/20 text-primary border-primary/30">
-              <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"> Thrill Adventure?</span>
+                <Award className="w-3 h-3 mr-1" />
+                Free Forever
+              </Badge>
+              <Badge className="bg-secondary/20 text-secondary border-secondary/30">
+                <Zap className="w-3 h-3 mr-1" />
+                No Ads
+              </Badge>
+            </div>
+            
+            <h2 className="text-4xl md:text-5xl font-bold">
+              Ready for Your Next
+              <br />
+              <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+                Thrill Adventure?
+              </span>
             </h2>
-            <p className="text-xl text-muted-foreground">
+            
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
               Join thousands of theme park enthusiasts and start tracking your rides today! 
+              Completely free, no ads, just pure passion for thrills.
             </p>
-            <Button size="lg" className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-lg px-8 py-3">
+            
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button size="lg" className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-lg px-10 py-4 rounded-xl shadow-2xl shadow-primary/25">
                 <Star className="w-5 h-5 mr-2" />
                 Join ThrillWiki Free
               </Button>
+              <Button variant="outline" size="lg" className="text-lg px-8 py-4 rounded-xl border-primary/30 hover:bg-primary/10">
+                <MapPin className="w-5 h-5 mr-2" />
+                Explore First
+              </Button>
+            </div>
           </div>
         </div>
       </section>

supabase/migrations/20250920002316_6db5c5b5-48bc-41d5-970a-968b0bf0f066.sql

@@ -0,0 +1,52 @@
+-- Insert sample data for ThrillWiki (without reviews for now)
+
+-- Insert sample locations
+INSERT INTO public.locations (id, name, country, state_province, city, postal_code, latitude, longitude, timezone) VALUES
+('550e8400-e29b-41d4-a716-446655440001', 'Orlando, Florida', 'United States', 'Florida', 'Orlando', '32819', 28.3852, -81.5639, 'America/New_York'),
+('550e8400-e29b-41d4-a716-446655440002', 'Anaheim, California', 'United States', 'California', 'Anaheim', '92802', 33.8121, -117.9190, 'America/Los_Angeles'),
+('550e8400-e29b-41d4-a716-446655440003', 'Sandusky, Ohio', 'United States', 'Ohio', 'Sandusky', '44870', 41.4814, -82.6830, 'America/New_York'),
+('550e8400-e29b-41d4-a716-446655440004', 'Busch Gardens Tampa', 'United States', 'Florida', 'Tampa', '33612', 28.0373, -82.4194, 'America/New_York'),
+('550e8400-e29b-41d4-a716-446655440005', 'Valencia, California', 'United States', 'California', 'Valencia', '91355', 34.4208, -118.5973, 'America/Los_Angeles'),
+('550e8400-e29b-41d4-a716-446655440006', 'Doswell, Virginia', 'United States', 'Virginia', 'Doswell', '23047', 37.7606, -77.4472, 'America/New_York'),
+('550e8400-e29b-41d4-a716-446655440007', 'Williamsburg, Virginia', 'United States', 'Virginia', 'Williamsburg', '23185', 37.2707, -76.7075, 'America/New_York'),
+('550e8400-e29b-41d4-a716-446655440008', 'Alton, England', 'United Kingdom', 'Staffordshire', 'Alton', 'ST10 4DB', 52.9875, -1.8889, 'Europe/London'),
+('550e8400-e29b-41d4-a716-446655440009', 'Rust, Germany', 'Germany', 'Baden-Württemberg', 'Rust', '77977', 48.2665, 7.7221, 'Europe/Berlin'),
+('550e8400-e29b-41d4-a716-446655440010', 'Kaatsheuvel, Netherlands', 'Netherlands', 'North Brabant', 'Kaatsheuvel', '5171 KW', 51.6500, 5.0431, 'Europe/Amsterdam');
+
+-- Insert sample companies
+INSERT INTO public.companies (id, name, slug, description, company_type, website_url, founded_year, headquarters_location, logo_url) VALUES
+('660e8400-e29b-41d4-a716-446655440001', 'The Walt Disney Company', 'disney', 'American multinational mass media and entertainment conglomerate', 'operator', 'https://www.disney.com', 1923, 'Burbank, California', null),
+('660e8400-e29b-41d4-a716-446655440002', 'Cedar Fair Entertainment Company', 'cedar-fair', 'American amusement park operator', 'operator', 'https://www.cedarfair.com', 1983, 'Sandusky, Ohio', null),
+('660e8400-e29b-41d4-a716-446655440003', 'SeaWorld Parks & Entertainment', 'seaworld', 'American theme park and entertainment company', 'operator', 'https://seaworldparks.com', 1959, 'Orlando, Florida', null),
+('660e8400-e29b-41d4-a716-446655440004', 'Six Flags Entertainment Corporation', 'six-flags', 'American amusement park corporation', 'operator', 'https://www.sixflags.com', 1961, 'Arlington, Texas', null),
+('660e8400-e29b-41d4-a716-446655440005', 'Bolliger & Mabillard', 'bolliger-mabillard', 'Swiss roller coaster manufacturer', 'manufacturer', 'https://www.bolliger-mabillard.com', 1988, 'Monthey, Switzerland', null),
+('660e8400-e29b-41d4-a716-446655440006', 'Intamin Amusement Rides', 'intamin', 'Swiss amusement ride manufacturer', 'manufacturer', 'https://www.intamin.com', 1967, 'Schaan, Liechtenstein', null),
+('660e8400-e29b-41d4-a716-446655440007', 'Merlin Entertainments', 'merlin', 'British entertainment company', 'operator', 'https://www.merlinentertainments.biz', 1999, 'Poole, England', null),
+('660e8400-e29b-41d4-a716-446655440008', 'Europa-Park GmbH & Co', 'europa-park', 'German theme park operator', 'operator', 'https://www.europapark.de', 1975, 'Rust, Germany', null),
+('660e8400-e29b-41d4-a716-446655440009', 'Efteling', 'efteling', 'Dutch theme park operator', 'operator', 'https://www.efteling.com', 1952, 'Kaatsheuvel, Netherlands', null);
+
+-- Insert sample parks
+INSERT INTO public.parks (id, name, slug, description, status, park_type, opening_date, website_url, phone, email, location_id, operator_id, property_owner_id, banner_image_url, card_image_url, average_rating, review_count, ride_count, coaster_count) VALUES
+('770e8400-e29b-41d4-a716-446655440001', 'Magic Kingdom', 'magic-kingdom', 'The most magical place on Earth! Experience classic Disney attractions, meet beloved characters, and create unforgettable memories in this iconic theme park.', 'operating', 'theme_park', '1971-10-01', 'https://disneyworld.disney.go.com/parks/magic-kingdom/', '(407) 939-5277', null, '550e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440001', null, null, 4.6, 15432, 23, 3),
+
+('770e8400-e29b-41d4-a716-446655440002', 'Cedar Point', 'cedar-point', 'Known as "America''s Roller Coast," Cedar Point features world-class roller coasters and thrilling rides on the shores of Lake Erie.', 'operating', 'amusement_park', '1870-01-01', 'https://www.cedarpoint.com/', '(419) 627-2350', null, '550e8400-e29b-41d4-a716-446655440003', '660e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440002', null, null, 4.8, 8976, 68, 17),
+
+('770e8400-e29b-41d4-a716-446655440003', 'Disneyland Park', 'disneyland', 'The original Disney theme park where it all began. Experience the magic that started Walt Disney''s dream in Anaheim, California.', 'operating', 'theme_park', '1955-07-17', 'https://disneyland.disney.go.com/parks/disneyland/', '(714) 781-4636', null, '550e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440001', null, null, 4.5, 12847, 35, 5),
+
+('770e8400-e29b-41d4-a716-446655440004', 'Busch Gardens Tampa Bay', 'busch-gardens-tampa', 'African-themed adventure park combining thrilling rides with one of North America''s largest zoos featuring over 300 species.', 'operating', 'theme_park', '1975-03-31', 'https://buschgardens.com/tampa/', '(813) 884-4386', null, '550e8400-e29b-41d4-a716-446655440004', '660e8400-e29b-41d4-a716-446655440003', '660e8400-e29b-41d4-a716-446655440003', null, null, 4.4, 6234, 42, 9),
+
+('770e8400-e29b-41d4-a716-446655440005', 'Six Flags Magic Mountain', 'six-flags-magic-mountain', 'The Thrill Capital of the World! Home to more roller coasters than any other theme park, with 19 world-class coasters.', 'operating', 'amusement_park', '1971-05-29', 'https://www.sixflags.com/magicmountain', '(661) 255-4100', null, '550e8400-e29b-41d4-a716-446655440005', '660e8400-e29b-41d4-a716-446655440004', '660e8400-e29b-41d4-a716-446655440004', null, null, 4.3, 9876, 45, 19),
+
+('770e8400-e29b-41d4-a716-446655440006', 'Kings Dominion', 'kings-dominion', 'Virginia''s premier amusement park featuring 60+ rides including 13 roller coasters and the iconic Eiffel Tower replica.', 'operating', 'amusement_park', '1975-05-03', 'https://www.kingsdominion.com/', '(804) 876-5000', null, '550e8400-e29b-41d4-a716-446655440006', '660e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440002', null, null, 4.2, 5432, 60, 13),
+
+('770e8400-e29b-41d4-a716-446655440007', 'Busch Gardens Williamsburg', 'busch-gardens-williamsburg', 'European-themed park known as "The Most Beautiful Theme Park in the World" with world-class roller coasters and shows.', 'operating', 'theme_park', '1975-05-25', 'https://buschgardens.com/williamsburg/', '(757) 229-4386', null, '550e8400-e29b-41d4-a716-446655440007', '660e8400-e29b-41d4-a716-446655440003', '660e8400-e29b-41d4-a716-446655440003', null, null, 4.7, 7123, 32, 8),
+
+('770e8400-e29b-41d4-a716-446655440008', 'Alton Towers', 'alton-towers', 'Britain''s greatest escape! Home to world-class roller coasters including The Smiler, Nemesis, and Oblivion in stunning historic grounds.', 'operating', 'theme_park', '1980-04-04', 'https://www.altontowers.com/', '+44 1538 704000', null, '550e8400-e29b-41d4-a716-446655440008', '660e8400-e29b-41d4-a716-446655440007', '660e8400-e29b-41d4-a716-446655440007', null, null, 4.4, 8765, 28, 7),
+
+('770e8400-e29b-41d4-a716-446655440009', 'Europa-Park', 'europa-park', 'Germany''s largest theme park with 18 themed areas representing different European countries and over 100 attractions.', 'operating', 'theme_park', '1975-07-12', 'https://www.europapark.de/en', '+49 7822 770', null, '550e8400-e29b-41d4-a716-446655440009', '660e8400-e29b-41d4-a716-446655440008', '660e8400-e29b-41d4-a716-446655440008', null, null, 4.8, 11234, 100, 13),
+
+('770e8400-e29b-41d4-a716-446655440010', 'Efteling', 'efteling', 'One of the world''s oldest theme parks, famous for its fairy tale forest, magical attractions, and enchanting atmosphere for all ages.', 'operating', 'theme_park', '1952-05-31', 'https://www.efteling.com/en', '+31 416 537 777', null, '550e8400-e29b-41d4-a716-446655440010', '660e8400-e29b-41d4-a716-446655440009', '660e8400-e29b-41d4-a716-446655440009', null, null, 4.6, 9876, 45, 6),
+
+('770e8400-e29b-41d4-a716-446655440011', 'Knott''s Berry Farm', 'knotts-berry-farm', 'America''s First Theme Park! Experience the Old West with thrilling rides, delicious food, and rich history dating back to 1920.', 'operating', 'theme_park', '1920-01-01', 'https://www.knotts.com/', '(714) 220-5200', null, '550e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440002', null, null, 4.1, 6543, 40, 8),
+
+('770e8400-e29b-41d4-a716-446655440012', 'Carowinds', 'carowinds', 'The Thrill Capital of the Southeast! Featuring 13 roller coasters including Fury 325, one of the world''s tallest and fastest giga coasters.', 'operating', 'amusement_park', '1973-03-31', 'https://www.carowinds.com/', '(704) 588-2600', null, '550e8400-e29b-41d4-a716-446655440006', '660e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440002', null, null, 4.3, 7890, 50, 13);