mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 17:31:13 -05:00
Add sample data
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,95 +1,99 @@
|
||||
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 */}
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Enhanced Hero Section */}
|
||||
<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="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 className="absolute inset-0">
|
||||
{/* 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" />
|
||||
</div>
|
||||
<div className="absolute top-40 right-20 animate-pulse delay-1000">
|
||||
<div className="w-2 h-2 bg-accent rounded-full shadow-lg shadow-accent/50" />
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* 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" />
|
||||
</div>
|
||||
<div className="absolute top-40 right-20 animate-pulse delay-1000">
|
||||
<div className="w-2 h-2 bg-accent rounded-full shadow-lg shadow-accent/50" />
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 bg-muted/30">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div className="text-center space-y-2">
|
||||
<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>
|
||||
{/* 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>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<QuickActions />
|
||||
|
||||
{/* Featured Parks */}
|
||||
<FeaturedParks />
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto px-4 mb-12">
|
||||
<section className="py-16 bg-muted/10">
|
||||
<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="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
|
||||
<MapPin className="w-6 h-6 text-primary" />
|
||||
<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-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto">
|
||||
<MapPin className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Discover Parks</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Explore thousands of theme parks worldwide with detailed information, photos, and reviews.
|
||||
<h3 className="text-2xl font-semibold">Discover Parks</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
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="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mx-auto">
|
||||
<TrendingUp className="w-6 h-6 text-secondary" />
|
||||
<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-16 h-16 bg-secondary/20 rounded-full flex items-center justify-center mx-auto">
|
||||
<TrendingUp className="w-8 h-8 text-secondary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Track Credits</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Keep track of every ride you've experienced and build your personal coaster portfolio.
|
||||
<h3 className="text-2xl font-semibold">Track Credits</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
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="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center mx-auto">
|
||||
<Users className="w-6 h-6 text-accent" />
|
||||
<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-16 h-16 bg-accent/20 rounded-full flex items-center justify-center mx-auto">
|
||||
<Users className="w-8 h-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold">Join Community</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Share reviews, create top lists, and connect with fellow theme park enthusiasts.
|
||||
<h3 className="text-2xl font-semibold">Join Community</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
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 */}
|
||||
<section className="py-16 bg-muted/20">
|
||||
{/* All Parks Section */}
|
||||
<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 */}
|
||||
<section className="py-16 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
|
||||
{/* Final CTA Section */}
|
||||
<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">
|
||||
<h2 className="text-3xl md:text-4xl font-bold">
|
||||
Ready to Start Your
|
||||
<span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"> Thrill Adventure?</span>
|
||||
<div className="max-w-4xl 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">
|
||||
<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">
|
||||
Join thousands of theme park enthusiasts and start tracking your rides today!
|
||||
|
||||
<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">
|
||||
<Star className="w-5 h-5 mr-2" />
|
||||
Join ThrillWiki Free
|
||||
</Button>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user