122 lines
7.2 KiB
TypeScript
122 lines
7.2 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ExternalLink, Clock, Brain, Download, RefreshCw, ShoppingCart, Info } from 'lucide-react';
|
|
|
|
const mockListings = [
|
|
{ id: 1, title: 'Lenovo ThinkPad T14 Gen 3 AMD Ryzen 7', price: '$450.00', estValue: '$800.00', site: 'eBay US', time: '14m 30s', verdict: 'HIGH_OPPORTUNITY', image: '💻' },
|
|
{ id: 2, title: 'NVIDIA RTX 3080 Founders Edition', price: '$320.00', estValue: '$450.00', site: 'HiBid', time: '1h 12m', verdict: 'GOOD_DEAL', image: '🎮' },
|
|
{ id: 3, title: 'Lot of 10x iPhone 12 Pro 128GB Unlocked', price: '$1200.00', estValue: '$2500.00', site: 'ShopGoodwill', time: '4h 05m', verdict: 'RESELLER_DREAM', image: '📱' },
|
|
{ id: 4, title: 'Sony A7IV Mirrorless Camera Body', price: '$1500.00', estValue: '$1900.00', site: 'eBay UK', time: '5m 10s', verdict: 'URGENT', image: '📸' },
|
|
];
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
show: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1,
|
|
delayChildren: 0.2
|
|
}
|
|
}
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 30, scale: 0.95 },
|
|
show: { opacity: 1, y: 0, scale: 1, transition: { type: "spring" as const, stiffness: 300, damping: 24 } }
|
|
};
|
|
|
|
export default function ListingsPage() {
|
|
return (
|
|
<div className="container mx-auto px-6 py-12 relative">
|
|
<div className="absolute top-[-20%] right-[-10%] w-[40%] h-[40%] bg-primary/10 rounded-full blur-[120px] pointer-events-none -z-10" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
|
className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4"
|
|
>
|
|
<div>
|
|
<h1 className="text-5xl font-black tracking-tight mb-2 flex items-center gap-4 drop-shadow-sm">
|
|
Active Deals <motion.div whileHover={{ rotate: 15 }}><ShoppingCart className="w-10 h-10 text-primary drop-shadow-md" /></motion.div>
|
|
</h1>
|
|
<p className="text-muted-foreground text-xl font-medium">Live opportunities filtered by your AI agents.</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
|
|
className="flex items-center gap-2 px-6 py-3 bg-secondary/80 backdrop-blur-md hover:bg-secondary border border-border/50 rounded-full font-bold transition-all shadow-sm"
|
|
>
|
|
<Download className="w-4 h-4" /> Export
|
|
</motion.button>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05, boxShadow: "0 0 20px rgba(139, 92, 246, 0.4)" }} whileTap={{ scale: 0.95 }}
|
|
className="flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-full font-bold shadow-lg transition-all relative overflow-hidden group"
|
|
>
|
|
<span className="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-500" />
|
|
<RefreshCw className="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" /> Refresh
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="show"
|
|
className="grid gap-6"
|
|
>
|
|
{mockListings.map((lot) => (
|
|
<motion.div
|
|
key={lot.id}
|
|
variants={itemVariants}
|
|
whileHover={{ y: -5, scale: 1.01 }}
|
|
className="flex flex-col md:flex-row gap-6 p-6 bg-card/80 backdrop-blur-xl border border-white/5 hover:border-primary/40 transition-colors rounded-3xl group shadow-lg hover:shadow-2xl relative overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-primary to-accent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="w-full md:w-64 h-48 bg-secondary/40 rounded-2xl flex flex-col items-center justify-center overflow-hidden relative border border-white/5 shadow-inner">
|
|
<motion.span
|
|
animate={{ y: [0, -10, 0] }}
|
|
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
|
className="text-7xl group-hover:scale-110 transition-transform duration-500 drop-shadow-xl"
|
|
>
|
|
{lot.image}
|
|
</motion.span>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
</div>
|
|
<div className="flex-1 flex flex-col justify-between py-2">
|
|
<div>
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-2">
|
|
<h3 className="font-black text-3xl leading-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-primary group-hover:to-accent transition-all">{lot.title}</h3>
|
|
<div className={`px-5 py-2 text-sm font-black rounded-full whitespace-nowrap shadow-inner border ${lot.verdict === 'URGENT' ? 'bg-red-500/10 border-red-500/20 text-red-500' : lot.verdict === 'RESELLER_DREAM' ? 'bg-purple-500/10 border-purple-500/20 text-purple-500' : 'bg-green-500/10 border-green-500/20 text-green-500'}`}>
|
|
{lot.verdict.replace('_', ' ')}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-4 text-sm font-bold text-muted-foreground mb-4">
|
|
<span className="flex items-center gap-2 bg-secondary/60 px-4 py-1.5 rounded-xl border border-white/5"><ExternalLink className="w-4 h-4" /> {lot.site}</span>
|
|
<span className="flex items-center gap-2 bg-amber-500/10 text-amber-500 px-4 py-1.5 rounded-xl border border-amber-500/20"><Clock className="w-4 h-4" /> Ends in {lot.time}</span>
|
|
<span className="flex items-center gap-2 bg-blue-500/10 text-blue-500 px-4 py-1.5 rounded-xl border border-blue-500/20"><Brain className="w-4 h-4" /> AI Verified</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row justify-between items-end gap-4 mt-4">
|
|
<div className="flex items-baseline gap-4">
|
|
<div className="text-5xl font-black text-foreground drop-shadow-md">{lot.price}</div>
|
|
<div className="text-sm font-black text-muted-foreground mb-1">
|
|
Est: <span className="line-through decoration-red-500 decoration-2">{lot.estValue}</span>
|
|
</div>
|
|
</div>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}
|
|
className="w-full sm:w-auto px-8 py-4 bg-secondary/80 hover:bg-primary hover:text-primary-foreground rounded-2xl font-black text-lg transition-all shadow-md group-hover:shadow-xl flex items-center justify-center gap-3 border border-white/5 group-hover:border-primary/50"
|
|
>
|
|
<Info className="w-5 h-5" /> Analyze Lot
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|