1o1-deals

byIM Jackreacher

System Role: Senior React Developer & Luxury UI/UX Architect Project: Build "1o1 Deals", an ultra-premium e-commerce storefront for flagship audio gear and liquidated electronics. Tech Stack: React, TypeScript, Tailwind CSS, GSAP, Vite. Aesthetic: Architectural minimalism (Apple / Bang & Olufsen style). Deep blacks, crisp whites, soft neutral grays. Strict Technical & Layout Requirements (CRITICAL): Unbreakable CSS Grid: Implement a rigid catalog grid (grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6). Product cards must maintain uniform height and absolute alignment. Zero wobbling, scattered spacing, or layout shifts when applying category filters. Dynamic Hover Interactions: Eliminate the "static poster" look. Every product card must feature a primary and secondary image. Implement smooth CSS/GSAP transitions (duration-700 ease-out) so the secondary angle cross-fades and scales up (group-hover:scale-105) when the user hovers. Flawless Card Typography & Hierarchy: Brand Name: Uppercase, wide tracking (e.g., tracking-widest), subtle neutral color. Product Title: Bold, truncated to one line to prevent pushing the price down. Price: Instantly visible, distinct, and never obscured by images. Status: Add a premium "In Stock" badge or text. CTA: A sleek "Quick View" button that fades in on hover over the image. Cinematic Hero Section: Build a top hero showcase utilizing GSAP for smooth, buttery fade-ins and staggered text reveals on page load. Trust Elements: Include a clean, minimalist Testimonials/Social Proof section beneath the catalog grid. Product Data Injection (src/data/products.ts): CRITICAL INSTRUCTION FOR AI: I have already provided a list of 90+ products earlier in this conversation. You must parse that entire list and populate the products.ts file with ALL 90+ items. Do not truncate or limit the inventory to a few examples. Ensure every single item has high-resolution dual image placeholders, accurate pricing, and specs formatting matching the luxury aesthetic. Required Deliverables: Provide complete, production-ready code for: products.ts (Full inventory data containing all 90+ items I provided earlier) Hero.tsx (GSAP animated showcase) Catalog.tsx (Filter rails and grid structure handling the large inventory smoothly) ProductCard.tsx (Card UI, typography, and hover states) Ensure all components are fully responsive and completely free of visual alignment bugs. Write the complete code for these files.