← back to Wine Finder Next
app/page.tsx
192 lines
'use client'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import Image from 'next/image'
import WineCard from '@/components/WineCard'
import SearchBar from '@/components/SearchBar'
import FeaturedSection from '@/components/FeaturedSection'
import BestDealHero from '@/components/BestDealHero'
export default function Home() {
const router = useRouter()
const [loading, setLoading] = useState(true)
const [featuredWines, setFeaturedWines] = useState([])
const [newVintages, setNewVintages] = useState([])
const [deals, setDeals] = useState([])
useEffect(() => {
// Load featured wines on mount
loadFeaturedContent()
}, [])
const loadFeaturedContent = async () => {
try {
setLoading(true)
const response = await fetch('/api/featured')
const data = await response.json()
setFeaturedWines(data.featured || [])
setNewVintages(data.newVintages || [])
setDeals(data.deals || [])
} catch (error) {
console.error('Error loading featured content:', error)
} finally {
setLoading(false)
}
}
const handleSearch = (query: string) => {
router.push(`/search?q=${encodeURIComponent(query)}`)
}
return (
<main className="min-h-screen">
{/* Best Deal Hero - Always at Top */}
<BestDealHero />
{/* Hero Section */}
<div className="bg-gradient-to-r from-gray-900 via-black to-purple-900 text-white relative overflow-hidden">
{/* Decorative Background Pattern */}
<div className="absolute inset-0 opacity-10">
<div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
<div className="absolute bottom-0 right-0 w-96 h-96 bg-gold-400 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
</div>
<div className="container mx-auto px-4 py-12 sm:py-16 relative z-10">
<div className="text-center mb-8 sm:mb-12 animate-fade-in">
{/* Logo/Icon */}
<div className="text-6xl sm:text-7xl mb-4 animate-bounce-subtle">🍷</div>
<h1 className="text-4xl sm:text-5xl md:text-7xl font-bold mb-4 text-white drop-shadow-lg font-display">
Red Thunder Wine Tracker
</h1>
<p className="text-lg sm:text-xl md:text-2xl text-gray-200 mb-6 sm:mb-8 max-w-3xl mx-auto font-semibold">
Discover 500,000+ Wines • Track Prices • Find Exclusive Deals
</p>
{/* Search Bar */}
<div className="max-w-3xl mx-auto animate-slide-up">
<SearchBar onSearch={handleSearch} />
</div>
</div>
{/* Quick Stats */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mt-8 sm:mt-12 animate-slide-up">
<div className="text-center p-4 sm:p-6 bg-black/40 rounded-2xl backdrop-blur border-2 border-purple-500 hover:bg-black/60 transition-all duration-300 hover:scale-105">
<div className="text-2xl sm:text-3xl font-bold text-white mb-1">500K+</div>
<div className="text-xs sm:text-sm text-gray-200 font-semibold">Wine Images</div>
</div>
<div className="text-center p-4 sm:p-6 bg-black/40 rounded-2xl backdrop-blur border-2 border-purple-500 hover:bg-black/60 transition-all duration-300 hover:scale-105">
<div className="text-2xl sm:text-3xl font-bold text-white mb-1">3+</div>
<div className="text-xs sm:text-sm text-gray-200 font-semibold">Price Sources</div>
</div>
<div className="text-center p-4 sm:p-6 bg-black/40 rounded-2xl backdrop-blur border-2 border-purple-500 hover:bg-black/60 transition-all duration-300 hover:scale-105">
<div className="text-2xl sm:text-3xl font-bold text-white mb-1">Live</div>
<div className="text-xs sm:text-sm text-gray-200 font-semibold">Price Updates</div>
</div>
<div className="text-center p-4 sm:p-6 bg-black/40 rounded-2xl backdrop-blur border-2 border-purple-500 hover:bg-black/60 transition-all duration-300 hover:scale-105">
<div className="text-2xl sm:text-3xl font-bold text-white mb-1">24/7</div>
<div className="text-xs sm:text-sm text-gray-200 font-semibold">Deal Tracking</div>
</div>
</div>
</div>
</div>
{/* Main Content */}
<div className="container mx-auto px-4 py-8 sm:py-12">
{loading ? (
<div className="text-center py-20">
<div className="inline-block animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-wine-600 mb-4"></div>
<p className="text-gray-600 text-lg">Loading exclusive wines...</p>
</div>
) : (
<>
{/* Hot Deals Section */}
<FeaturedSection
title="🔥 Hot Deals"
subtitle="Limited time offers and price drops"
wines={deals}
gradient="from-red-500 to-pink-600"
/>
{/* New Vintages Section */}
<FeaturedSection
title="🍇 New Vintages Available"
subtitle="Fresh arrivals from premium wineries"
wines={newVintages}
gradient="from-green-500 to-emerald-600"
/>
{/* Featured Wines Section */}
<FeaturedSection
title="⭐ Featured Selections"
subtitle="Hand-picked recommendations from our experts"
wines={featuredWines}
gradient="from-purple-500 to-indigo-600"
/>
</>
)}
{/* Features Section */}
<section className="mt-16 sm:mt-20 bg-gradient-to-br from-wine-50 to-purple-50 rounded-3xl p-6 sm:p-12 shadow-wine-lg">
<h2 className="text-3xl sm:text-4xl font-bold text-center mb-8 sm:mb-12 bg-gradient-to-r from-wine-700 to-burgundy-700 bg-clip-text text-transparent">
Why Choose Red Thunder?
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
<div className="text-center p-6 bg-white rounded-2xl shadow-md hover:shadow-wine-lg transition-all duration-300 hover:scale-105">
<div className="text-5xl mb-4">💰</div>
<h3 className="text-xl font-bold text-gray-900 mb-3">Best Prices</h3>
<p className="text-gray-600">
Compare prices across multiple retailers to find the best deals on your favorite wines.
</p>
</div>
<div className="text-center p-6 bg-white rounded-2xl shadow-md hover:shadow-wine-lg transition-all duration-300 hover:scale-105">
<div className="text-5xl mb-4">📊</div>
<h3 className="text-xl font-bold text-gray-900 mb-3">Price Tracking</h3>
<p className="text-gray-600">
Monitor wine prices over time and get alerts when your favorites go on sale.
</p>
</div>
<div className="text-center p-6 bg-white rounded-2xl shadow-md hover:shadow-wine-lg transition-all duration-300 hover:scale-105">
<div className="text-5xl mb-4">🔍</div>
<h3 className="text-xl font-bold text-gray-900 mb-3">Easy Discovery</h3>
<p className="text-gray-600">
Search 500,000+ wines with real bottle photos from trusted affiliate partners.
</p>
</div>
</div>
</section>
</div>
{/* Footer */}
<footer className="bg-gradient-to-r from-wine-900 to-burgundy-900 text-white py-8 sm:py-12 mt-20">
<div className="container mx-auto px-4">
<div className="text-center">
<div className="flex items-center justify-center gap-4 mb-4 flex-wrap">
<span className="text-sm text-purple-200">Powered by:</span>
<div className="flex items-center gap-2 text-gold-300 font-semibold text-sm">
<span>Vivino</span>
<span>•</span>
<span>Total Wine</span>
<span>•</span>
<span>K&L</span>
</div>
</div>
<p className="text-purple-200 text-sm sm:text-base mb-2">
Tracking prices from premium wine retailers
</p>
<p className="text-sm text-purple-300">
Red Thunder Wine Tracker © 2025 • By Steve Abrams
</p>
</div>
</div>
</footer>
</main>
)
}