← back to Handbag Auth Nextjs
src/app/deals/page.tsx
220 lines
'use client'
import { useState } from 'react'
import Link from 'next/link'
import { DealsGrid } from '@/components/DealsGrid'
export default function DealsPage() {
const [activeFilter, setActiveFilter] = useState<'all' | 'listing' | 'auction' | 'arbitrage'>('all')
return (
<div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-pink-50">
{/* Navigation */}
<nav className="bg-white/80 backdrop-blur-xl border-b border-gray-200 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Link href="/" className="flex items-center space-x-3">
<div className="w-12 h-12 bg-gradient-to-br from-yellow-400 via-amber-500 to-orange-600 rounded-xl flex items-center justify-center shadow-2xl shadow-amber-500/50">
<span className="text-2xl">💎</span>
</div>
<div>
<div className="text-xl font-bold tracking-tight">LUXVAULT</div>
<div className="text-xs text-gray-400 tracking-wide">Top Deals</div>
</div>
</Link>
</div>
<div className="hidden md:flex items-center space-x-8">
<Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors font-medium">Home</Link>
<Link href="/search" className="text-gray-600 hover:text-gray-900 transition-colors font-medium">🔍 Search</Link>
<Link href="/marketplace" className="text-gray-600 hover:text-gray-900 transition-colors font-medium">Marketplace</Link>
<Link href="/auctions" className="text-gray-600 hover:text-gray-900 transition-colors font-medium">Auctions</Link>
</div>
</div>
</div>
</nav>
{/* Header */}
<div className="max-w-7xl mx-auto px-6 py-12">
<div className="text-center mb-12">
<div className="inline-block mb-4">
<span className="bg-gradient-to-r from-red-500 to-pink-500 text-white text-sm font-bold px-6 py-2 rounded-full shadow-lg animate-pulse">
🔥 LIVE DEALS
</span>
</div>
<h1 className="text-5xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 bg-clip-text text-transparent">
Top 10 Luxury Deals
</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Curated from thousands of listings, auctions, and arbitrage opportunities across the luxury handbag market
</p>
</div>
{/* Filter Cards - Now Clickable */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-12">
{/* All Deals */}
<button
onClick={() => setActiveFilter('all')}
className={`bg-white rounded-xl shadow-lg p-6 border-l-4 transition-all hover:scale-105 hover:shadow-2xl text-left ${
activeFilter === 'all'
? 'border-amber-500 ring-2 ring-amber-500 bg-amber-50'
: 'border-gray-300'
}`}
>
<div className="flex items-center gap-3 mb-2">
<span className="text-3xl">🔥</span>
<h3 className="font-bold text-gray-900">All Deals</h3>
</div>
<p className="text-sm text-gray-600">
Show all deal types from all sources
</p>
{activeFilter === 'all' && (
<div className="mt-3 text-xs font-bold text-amber-600 uppercase tracking-wide">
✓ Active Filter
</div>
)}
</button>
{/* Marketplace Deals */}
<button
onClick={() => setActiveFilter('listing')}
className={`bg-white rounded-xl shadow-lg p-6 border-l-4 transition-all hover:scale-105 hover:shadow-2xl text-left ${
activeFilter === 'listing'
? 'border-blue-500 ring-2 ring-blue-500 bg-blue-50'
: 'border-blue-300'
}`}
>
<div className="flex items-center gap-3 mb-2">
<span className="text-3xl">🛍️</span>
<h3 className="font-bold text-gray-900">Marketplace</h3>
</div>
<p className="text-sm text-gray-600">
Premium resellers: Fashionphile, Rebag, The RealReal
</p>
{activeFilter === 'listing' && (
<div className="mt-3 text-xs font-bold text-blue-600 uppercase tracking-wide">
✓ Active Filter
</div>
)}
</button>
{/* Auction Deals */}
<button
onClick={() => setActiveFilter('auction')}
className={`bg-white rounded-xl shadow-lg p-6 border-l-4 transition-all hover:scale-105 hover:shadow-2xl text-left ${
activeFilter === 'auction'
? 'border-purple-500 ring-2 ring-purple-500 bg-purple-50'
: 'border-purple-300'
}`}
>
<div className="flex items-center gap-3 mb-2">
<span className="text-3xl">🔨</span>
<h3 className="font-bold text-gray-900">Auctions</h3>
</div>
<p className="text-sm text-gray-600">
Below estimate: Christie's, Sotheby's, Bonhams, Phillips
</p>
{activeFilter === 'auction' && (
<div className="mt-3 text-xs font-bold text-purple-600 uppercase tracking-wide">
✓ Active Filter
</div>
)}
</button>
{/* Arbitrage Deals */}
<button
onClick={() => setActiveFilter('arbitrage')}
className={`bg-white rounded-xl shadow-lg p-6 border-l-4 transition-all hover:scale-105 hover:shadow-2xl text-left ${
activeFilter === 'arbitrage'
? 'border-green-500 ring-2 ring-green-500 bg-green-50'
: 'border-green-300'
}`}
>
<div className="flex items-center gap-3 mb-2">
<span className="text-3xl">💰</span>
<h3 className="font-bold text-gray-900">Arbitrage</h3>
</div>
<p className="text-sm text-gray-600">
Cross-market opportunities: Japan, Hong Kong, USA
</p>
{activeFilter === 'arbitrage' && (
<div className="mt-3 text-xs font-bold text-green-600 uppercase tracking-wide">
✓ Active Filter
</div>
)}
</button>
</div>
{/* Deals Grid with Filter */}
<DealsGrid limit={10} autoRefresh={true} refreshInterval={120000} filterType={activeFilter} />
{/* How It Works */}
<div className="mt-16 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
<h2 className="text-3xl font-bold mb-6 text-center">How We Find the Best Deals</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<div className="text-center">
<div className="text-4xl mb-3">🤖</div>
<h3 className="font-bold mb-2">AI Analysis</h3>
<p className="text-sm text-purple-100">
Machine learning algorithms scan thousands of listings daily
</p>
</div>
<div className="text-center">
<div className="text-4xl mb-3">📊</div>
<h3 className="font-bold mb-2">Market Data</h3>
<p className="text-sm text-purple-100">
Real-time pricing from 50+ luxury marketplaces worldwide
</p>
</div>
<div className="text-center">
<div className="text-4xl mb-3">✅</div>
<h3 className="font-bold mb-2">Verification</h3>
<p className="text-sm text-purple-100">
All deals verified for authenticity and accuracy
</p>
</div>
<div className="text-center">
<div className="text-4xl mb-3">⚡</div>
<h3 className="font-bold mb-2">Live Updates</h3>
<p className="text-sm text-purple-100">
New deals added automatically every 2 minutes
</p>
</div>
</div>
</div>
{/* CTA Section */}
<div className="mt-12 text-center bg-white rounded-2xl shadow-xl p-8">
<h2 className="text-3xl font-bold mb-4">Want More Deals?</h2>
<p className="text-gray-600 mb-6">
Sign up to get instant alerts when new deals matching your preferences become available
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link
href="/search"
className="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all shadow-lg"
>
Search All Deals
</Link>
<Link
href="/marketplace"
className="px-8 py-3 bg-white text-purple-600 font-semibold rounded-lg border-2 border-purple-600 hover:bg-purple-50 transition-all"
>
Browse Marketplace
</Link>
</div>
</div>
{/* Disclaimer */}
<div className="mt-8 text-center text-sm text-gray-500">
<p>
Deals are updated automatically. Prices and availability subject to change.
Always verify details with the seller before purchasing.
</p>
</div>
</div>
</div>
)
}