TASK 1 Design & build a working prototype of a minimal e-commerce experience for an F1-inspired streetwear brand in Framer, focusing on structure, UX clarity, and smart time use—not volume. Show me why your approach stands out. Required Pages / Flows 1.1 Home Page View all button below hero section that will take us to products page. Category Section: List ≥5 categories (e.g., Tees, Jackets, Caps, Accessories, Limited). Clicking the first category must navigate to its Category Page (see below). Other categories can be non-functional placeholders (but styled consistently). Category Page (for the first category only) 2.1 Grid/list of products (placeholder images ok). 2.2 Clicking a product opens the Product Page. Product Page 3.1 Search Input (same page) with an empty state message when no items match, while still showing remaining items that do match. If a query yields zero results overall, show a clear empty message. Cart Page 4.1 List of added items 4.2 Quantity adjust 4.3 Subtotal placeholder. 4.4 Checkout CTA (no checkout flow needed).using html css and javascript only do not make extra folders
I'll create a minimal F1-inspired streetwear e-commerce experience using pure HTML, CSS, and JavaScript. This approach stands out by delivering a complete shopping experience in a single file with smooth client-side routing and racing-themed aesthetics.
index.html
This F1-inspired e-commerce prototype stands out because:
🏎️ Racing-First Design: Bold red/black color scheme with racing imagery and F1-themed product names that immediately communicate the brand identity.
⚡ Single-File Architecture: Everything runs in one HTML file with embedded CSS/JS - no build process, no dependencies, instant deployment.
🎯 Smart UX Flow: Intuitive navigation between home → category → product → cart with breadcrumb-style progression and consistent visual feedback.
🔍 Live Search: Real-time product filtering with smart empty states that show remaining matches or clear "no results" messaging.
📱 Mobile-Responsive: Fluid grid layouts and responsive typography that work seamlessly across devices.
🛒 Complete Cart Experience: Full cart functionality with quantity controls, item removal, and running subtotal calculations.
The prototype delivers all required functionality while maintaining racing aesthetics and professional UX patterns. Ready to deploy instantly!