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>
+  );
+}