import { useState, useEffect, useRef } from "react"; const products = [ { id: 1, category: "Tech", badge: "Editor's Pick", name: "Sony WH-1000XM5 Noise Cancelling Headphones", rating: 4.8, reviews: 12483, price: "$279.99", oldPrice: "$349.99", img: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&q=80", tag: "Best Seller", }, { id: 2, category: "Home", badge: "Top Rated", name: "Ninja Foodi 9-in-1 Pressure Cooker & Air Fryer", rating: 4.7, reviews: 8920, price: "$159.99", oldPrice: "$229.99", img: "https://images.unsplash.com/photo-1585515320310-259814833e62?w=400&q=80", tag: "Deal", }, { id: 3, category: "Tech", badge: "New Arrival", name: "iPad Pro 12.9" M2 Chip — Space Gray", rating: 4.9, reviews: 5311, price: "$1,099.00", oldPrice: null, img: "https://images.unsplash.com/photo-1544244015-0df4592c6d8d?w=400&q=80", tag: "Premium", }, { id: 4, category: "Fashion", badge: "Editor's Pick", name: "Levi's 501 Original Fit Jeans — Classic Blue", rating: 4.5, reviews: 21034, price: "$59.99", oldPrice: "$79.99", img: "https://images.unsplash.com/photo-1542272604-787c3835535d?w=400&q=80", tag: "Best Seller", }, { id: 5, category: "Home", badge: "Top Rated", name: "Dyson V15 Detect Cordless Vacuum Cleaner", rating: 4.8, reviews: 6724, price: "$649.99", oldPrice: "$749.99", img: "https://images.unsplash.com/photo-1558317374-067fb5f30001?w=400&q=80", tag: "Premium", }, { id: 6, category: "Deals", badge: "Hot Deal", name: "Kindle Paperwhite Signature Edition", rating: 4.7, reviews: 9401, price: "$139.99", oldPrice: "$189.99", img: "https://images.unsplash.com/photo-1512820790803-83ca734da794?w=400&q=80", tag: "Deal", }, ]; const categories = [ { name: "All", icon: "✦" }, { name: "Tech", icon: "⚡" }, { name: "Home", icon: "🏠" }, { name: "Fashion", icon: "✨" }, { name: "Deals", icon: "🔥" }, ]; const badgeColor = { "Editor's Pick": "#e8642a", "Top Rated": "#2a7ae8", "New Arrival": "#2aae6a", "Hot Deal": "#c0392b", }; const tagStyle = { "Best Seller": { bg: "#fff3e0", color: "#e65100" }, Deal: { bg: "#fce4ec", color: "#c62828" }, Premium: { bg: "#ede7f6", color: "#4527a0" }, }; function Stars({ rating }) { return ( {"★".repeat(Math.floor(rating))} {rating % 1 >= 0.5 ? "½" : ""} {"☆".repeat(5 - Math.ceil(rating))} ); } function ProductCard({ product, visible }) { const [hovered, setHovered] = useState(false); const t = tagStyle[product.tag] || { bg: "#f0f0f0", color: "#333" }; return ( setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: "#fff", borderRadius: "16px", overflow: "hidden", boxShadow: hovered ? "0 20px 60px rgba(0,0,0,0.14)" : "0 4px 20px rgba(0,0,0,0.06)", transform: hovered ? "translateY(-6px) scale(1.01)" : visible ? "translateY(0)" : "translateY(30px)", opacity: visible ? 1 : 0, transition: "all 0.45s cubic-bezier(0.23,1,0.32,1)", cursor: "pointer", display: "flex", flexDirection: "column", }} > {product.badge} {product.tag} {product.category} {product.name} ({product.reviews.toLocaleString()}) {product.price} {product.oldPrice && ( {product.oldPrice} )} View on Amazon → ); } export default function App() { const [activeCategory, setActiveCategory] = useState("All"); const [visibleCards, setVisibleCards] = useState([]); const [menuOpen, setMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const heroRef = useRef(null); const filtered = activeCategory === "All" ? products : products.filter((p) => p.category === activeCategory); useEffect(() => { setVisibleCards([]); const timers = filtered.map((_, i) => setTimeout(() => setVisibleCards((prev) => [...prev, i]), i * 100 + 80) ); return () => timers.forEach(clearTimeout); }, [activeCategory]); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return ( {/* Google Fonts */} {` @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;700&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f0ede8; } ::-webkit-scrollbar-thumb { background: #FF9900; border-radius: 3px; } html { scroll-behavior: smooth; } @keyframes fadeUp { from { opacity:0; transform: translateY(40px); } to { opacity:1; transform: translateY(0); } } @keyframes shimmer { 0%,100% { opacity:1; } 50% { opacity:0.6; } } @keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } `} {/* Navbar */} ✦ PrimeFinds {/* Desktop Nav */} {["Tech", "Home", "Fashion", "Deals"].map((c) => ( setActiveCategory(c)} style={{ background: "none", border: "none", color: activeCategory === c ? "#FF9900" : "#ccc", fontWeight: "600", fontSize: "14px", cursor: "pointer", fontFamily: "'DM Sans', sans-serif", letterSpacing: "0.5px", transition: "color 0.2s", borderBottom: activeCategory === c ? "2px solid #FF9900" : "2px solid transparent", paddingBottom: "2px", }}>{c} ))} Today's Deals {/* Hero */} {/* Decorative blobs */} Curated Amazon Picks Find Products Worth Buying Hand-picked, editor-reviewed products from Amazon — so you never waste money on the wrong thing. document.getElementById("products").scrollIntoView({ behavior: "smooth" })} style={{ background: "#FF9900", color: "#1a1a2e", padding: "14px 34px", borderRadius: "40px", fontWeight: "800", fontSize: "15px", border: "none", cursor: "pointer", fontFamily: "'Playfair Display', serif", letterSpacing: "0.3px", boxShadow: "0 8px 30px rgba(255,153,0,0.35)", transition: "transform 0.2s", }}> Shop Top Picks ↓ See Today's Deals {/* Stats */} {[["500+", "Products Reviewed"], ["4.8★", "Avg. Rating"], ["50K+", "Happy Readers"]].map(([val, label]) => ( {val} {label} ))} {/* Disclosure Banner */} 📢 As an Amazon Associate, I earn from qualifying purchases. Prices & availability subject to change. {/* Category Filters */} {categories.map((c) => ( setActiveCategory(c.name)} style={{ padding: "10px 22px", borderRadius: "30px", border: "none", cursor: "pointer", fontWeight: "700", fontSize: "14px", fontFamily: "'DM Sans', sans-serif", background: activeCategory === c.name ? "#1a1a2e" : "#fff", color: activeCategory === c.name ? "#FF9900" : "#555", boxShadow: activeCategory === c.name ? "0 4px 20px rgba(26,26,46,0.2)" : "0 2px 10px rgba(0,0,0,0.06)", transition: "all 0.25s ease", transform: activeCategory === c.name ? "scale(1.05)" : "scale(1)", }} > {c.icon} {c.name} ))} {/* Section heading */} {activeCategory === "All" ? "All Top Picks" : `Top ${activeCategory} Picks`} {filtered.length} curated recommendations View All → {/* Product Grid */} {filtered.map((product, i) => ( ))} {/* Feature strips */} {[ { icon: "🔍", title: "Expert Reviewed", desc: "Every product is tested and curated by our editorial team." }, { icon: "💸", title: "Best Value", desc: "We only recommend products with the best price-to-quality ratio." }, { icon: "🔄", title: "Always Updated", desc: "Our picks are refreshed regularly to reflect new releases and deals." }, { icon: "🛡️", title: "Trusted Source", desc: "Read by 50,000+ shoppers monthly who trust our honest reviews." }, ].map((f) => ( {f.icon} {f.title} {f.desc} ))} {/* Footer */} ✦ PrimeFinds PrimeFinds is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com. {["Privacy", "Terms", "Contact"].map((l) => ( {l} ))} ); }