CubeWorks — Premium Rubik's Cube Store

The user wants a storefront for Rubik's cubes built with React, TypeScript, and Tailwind CSS. Since they want it rendered in an iframe, I need to provide a single self-contained HTML file with everything inline (React via CDN, Tailwind via CDN, Babel for TypeScript/JSX transpilation). Let me design a compelling Rubik's Cube storefront: 1. **Theme**: Rubik's cubes - I should use a playful, vibrant aesthetic that reflects the colorful nature of Rubik's cubes. The classic cube has 6 colors: white, yellow, red, orange, blue, green. I can use these as accent colors. 2. **Structure**: - Header/Nav with logo, search, cart - Hero section with a featured cube - Categories/filters - Product grid with various Rubik's cubes - Featured/bestsellers section - Newsletter/footer - Cart drawer that slides in 3. **Products**: I'll create a variety of cubes: - Classic 3x3 - 2x2 - 4x4 - 5x5 - Speed cube (magnetic) - Megaminx - Pyraminx - Skewb - Square-1 - Mirror cube - Ghost cube - Mastermorphix 4. **Interactivity**: - Add to cart - Cart drawer with quantity adjustment - Filter by category - Search - Wishlist/favorites - Quick view modal - Sort options 5. **Visual flair**: - Animated rotating cube in hero (CSS 3D) - Hover effects on cards - Smooth transitions - Color accents based on Rubik's cube colors Let me build this. I'll use: - React 18 via CDN - Tailwind CSS via CDN - Babel standalone for JSX/TS - TypeScript types via comments (since Babel doesn't type-check, but I can write TS-style code) Actually, for a single HTML file with React + TS, I'll use Babel with TypeScript preset. Let me write it. Let me think about the design more carefully: - Use a dark mode aesthetic with vibrant cube colors as accents? Or light with colorful accents? - I think a clean light background with colorful accents works well for a storefront. But to make it more striking, let me go with a modern dark theme with neon cube colors. Actually, let me go with a sophisticated approach: a light theme with a vibrant, playful color palette inspired by the Rubik's cube. White background, bold typography, colorful category badges, and an animated 3D cube in the hero. Let me build a comprehensive storefront: **Color palette**: - Background: white / soft cream - Text: near-black - Primary accent: red (Rubik's red) - Secondary accents: blue, green, yellow, orange - Cards: white with subtle shadow **Font**: Let me use a modern geometric sans-serif. Something like "Space Grotesk" for headings and "Inter" for body. Or maybe "Bricolage Grotesque" for a more unique look. Let me write the code now. I'll structure components: - `App` - main container, state management - `Header` - nav, search, cart button - `Hero` - animated cube, featured text - `CategoryFilter` - filter chips - `ProductGrid` - grid of products - `ProductCard` - individual card - `CartDrawer` - slide-in cart - `QuickViewModal` - product detail modal - `Footer` - footer with links State: - `products` - product list - `cart` - items in cart - `cartOpen` - is cart drawer open - `category` - selected category filter - `searchQuery` - search text - `quickView` - product being viewed in modal - `favorites` - favorited product ids - `sortBy` - sort option Let me create the 3D cube animation for the hero. I'll use CSS 3D transforms to create a rotating cube with the 6 classic colors. Here's my plan for the cube: ```css .cube { transform-style: preserve-3d; animation: rotate 20s infinite linear; } .face { position: absolute; width: 200px; height: 200px; } ``` Each face has a 3x3 grid pattern with the classic colors. Let me code this all out now. I want it to be visually impressive and fully functional. For the products, let me create realistic data: ```typescript interface Product { id: string; name: string; brand: string; price: number; originalPrice?: number; category: string; difficulty: 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert'; rating: number; reviews: number; colors: string[]; badge?: string; description: string; features: string[]; inStock: boolean; } ``` Let me draft products: 1. Classic 3x3 Rubik's Cube - $14.99 - Beginner 2. Speed Cube Pro Magnetic - $29.99 - Intermediate 3. 2x2 Mini Cube - $9.99 - Beginner 4. 4x4 Master Cube - $24.99 - Advanced 5. 5x5 Professor Cube - $34.99 - Expert 6. Megaminx - $27.99 - Advanced 7. Pyraminx - $12.99 - Beginner 8. Skewb - $15.99 - Intermediate 9. Mirror Cube - $19.99 - Intermediate 10. Ghost Cube - $32.99 - Expert 11. Square-1 - $22.99 - Advanced 12. Mastermorphix - $18.99 - Intermediate 13. 6x6 Cube - $44.99 - Expert 14. 7x7 Cube - $54.99 - Expert 15. Magnetic 3x3 GAN - $49.99 - Intermediate 16. Stickerless 3x3 - $16.99 - Beginner For categories: - 3x3 - Big Cubes (4x4+) - Shape Mods - Specialty Let me now write the full HTML file. For visual appeal, I'll: 1. Have an animated 3D Rubik's cube in the hero 2. Cards that lift on hover 3. Color swatches showing each cube's colors 4. Smooth slide-in cart 5. Quantity steppers 6. Rating stars 7. Sort/filter dropdowns 8. Search bar 9. Toast notifications when adding to cart 10. Quick view modal Let me write it all out: ```html CubeWorks — Premium Rubik's Cube Store

``` Now let me write the React code. I'll use TypeScript syntax. Let me think about the visual design once more. I want it to feel premium but playful. I'll go with: - Light cream background (#FAF7F2 or similar) - Deep charcoal text (#1A1A1A) - A signature color — maybe a vivid red-orange like the Rubik's red (#E63946) or a bold blue - Use cube color accents throughout Actually, I'll go with a sophisticated approach: - Warm off-white background - Black text - A bold orange-red primary - Cube colors as accents Let me write the code now. For the hero cube animation, I'll create a CSS-only 3D rotating cube with each face showing a 3x3 grid of the classic colors. I'll include: - The classic Rubik's cube colors: - White #FFFFFF - Yellow #FFD500 - Red #C41E3A - Orange #FF5800 - Blue #0091D5 - Green #00A651 Let me write the full code now: ```typescript const { useState, useMemo, useEffect, useRef } = React; interface Product { id: string; name: string; brand: string; price: number; originalPrice?: number; category: string; difficulty: 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert'; rating: number; reviews: number; colors: string[]; badge?: string; description: string; features: string[]; inStock: boolean; } const PRODUCTS: Product[] = [ // ... ]; const CATEGORIES = ['All', '3x3', 'Big Cubes', 'Shape Mods', 'Specialty']; const DIFFICULTY_COLORS = { Beginner: 'bg-green-100 text-green-700', Intermediate: 'bg-blue-100 text-blue-700', Advanced: 'bg-orange-100 text-orange-700', Expert: 'bg-red-100 text-red-700', }; ``` For the cube hero, I'll build a CSS 3D cube. Now let me draft the JSX for the cube. Each face is a 3x3 grid: ```jsx function CubeFace({ color }) { return (

{Array(9).fill(0).map((_, i) => (

))}

); } function HeroCube() { return (

); } ``` With CSS: ```css .cube-scene { perspective: 1000px; width: 300px; height: 300px; } .cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: rotate 20s infinite linear; } .face { position: absolute; width: 200px; height: 200px; left: 50px; top: 50px; } .face-front { transform: translateZ(100px); } .face-back { transform: rotateY(180deg) translateZ(100px); } .face-right { transform: rotateY(90deg) translateZ(100px); } .face-left { transform: rotateY(-90deg) translateZ(100px); } .face-top { transform: rotateX(90deg) translateZ(100px); } .face-bottom { transform: rotateX(-90deg) translateZ(100px); } @keyframes rotate { from { transform: rotateX(-20deg) rotateY(0deg); } to { transform: rotateX(-20deg) rotateY(360deg); } } ``` Let me build out the whole thing now in a single file. I want to make sure I include: 1. Header with sticky nav, logo, search, wishlist count, cart count 2. Hero with animated cube and CTA 3. Featured categories quick links 4. Filter bar (category, sort, search results count) 5. Product grid 6. Quick view modal 7. Cart drawer 8. Toast notifications 9. Footer Let me write the complete code. I'll need to be careful with TypeScript syntax in Babel. I'll use the `data-presets="typescript,react"` on the script tag. Let me start writing: ```tsx const { useState, useMemo, useEffect, useCallback, useRef } = React; type Difficulty = 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert'; interface Product { id: string; name: string; brand: string; price: number; originalPrice?: number; category: '3x3' | 'Big Cubes' | 'Shape Mods' | 'Specialty'; difficulty: Difficulty; rating: number; reviews: number; colors: string[]; badge?: string; description: string; features: string[]; inStock: boolean; featured?: boolean; } interface CartItem { product: Product; quantity: number; } ``` OK let me write the complete file now. I'll be thorough and make it look great. For toast notifications, I'll use a simple state-based system. For the visual cube in each product card, I'll generate a small representation using the cube's colors. Let me also create a "MiniCube" component that shows a small 2D representation of a cube based on its colors. Actually, for product cards, I'll create a stylized cube illustration using CSS. Each cube gets a 3D-ish look with its colors. Let me make a CSS cube with up to 6 colors per product. I think a simpler approach: render a 3x3 face of the cube as the "product image", with the cube's primary colors. This will be visually distinctive. Or even better — a small isometric cube view showing 3 visible faces with the first 3 colors of the cube. Let me draft the MiniCube component: ```tsx function MiniCube({ colors, size = 120 }) { // colors is an array of up to 6 hex colors const c = colors.slice(0, 6); while (c.length < 6) c.push('#e5e5e5'); return (

{/* Top face */}

{/* Left face */} {/* Right face */}

); } ``` This isometric cube is tricky to get right. Let me use a different approach — a 3D CSS cube viewed at an angle, similar to the hero but smaller and not rotating. Actually, let me just use a clean representation: a single face of the cube as a 3x3 grid. It's simpler and looks clean. Or maybe a "folded cube" with two visible faces (front and right) using CSS transforms. Let me think... Actually I'll go with a 3D cube viewed isometrically using CSS. Let me draw it: ```css .iso-cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotateX(-25deg) rotateY(-45deg); } ``` Hmm, with three visible faces it can look great. Let me try a cleaner approach using SVG-like positioning or just CSS clip-path / transforms. Actually, the cleanest approach is the 3D CSS cube with rotateX(-25deg) rotateY(-45deg) showing 3 faces (top, front, right). Let me write it: ```jsx function ProductCube({ colors, size = 140 }) { const half = size / 2; const c = [...colors]; while (c.length < 6) c.push('#e5e5e5'); return (

{['translateZ(' + half * 0.3 + 'px)', 'rotateY(180deg) translateZ(' + half * 0.3 + 'px)', 'rotateY(90deg) translateZ(' + half * 0.3 + 'px)', 'rotateY(-90deg) translateZ(' + half * 0.3 + 'px)', 'rotateX(90deg) translateZ(' + half * 0.3 + 'px)', 'rotateX(-90deg) translateZ(' + half * 0.3 + 'px)'].map((transform, i) => (

{/* 3x3 grid pattern */}

))}

); } ``` OK let me just write everything out now. I'll think on the fly. Let me think about the layout once more: **Header** (sticky, with subtle shadow on scroll): - Logo "CubeWorks" with a small cube icon - Nav links: Cubes, Brands, Sale, About - Search bar (centered, expands on focus) - Wishlist (heart icon + count) - Cart (cart icon + count) **Hero** (split layout): - Left: Big heading "Master the twist. Solve the world." with description and CTA buttons - Right: Animated rotating 3D cube - Background: subtle gradient or pattern **Trust badges / Stats**: - "10,000+ cubes sold" - "4.9/5 rating" - "Free shipping over $50" **Featured Categories** (4 cards): - 3x3 Speed Cubes - Big Cubes (4x4-7x7) - Shape Mods - Specialty **Product Section**: - Header with "All Cubes" + count - Filters: category chips, sort dropdown - Search results filter - Product grid (responsive 1-4 columns) **Product Card**: - 3D cube illustration - Badge (Best Seller, New, Sale) - Wishlist heart toggle - Name, brand - Rating + reviews - Price (+ original price strikethrough) - Add to cart button - Quick view trigger **Quick View Modal**: - Larger cube illustration - Full details - Difficulty, features - Color swatches - Quantity selector - Add to cart **Cart Drawer** (slide from right): - List of items with mini cube, name, price, quantity - Quantity steppers - Remove - Subtotal, shipping, total - Checkout button - Empty state **Footer**: - Links, newsletter, social Let me write the code: ```tsx // Toast notification system function Toast({ message, onDismiss }) { useEffect(() => { const t = setTimeout(onDismiss, 2500); return () => clearTimeout(t); }, [message, onDismiss]); return (

{message}

); } ``` OK let me just write the complete HTML now. I'll be thorough. One more design consideration: I want the page to feel premium. Let me use: - Font: "Bricolage Grotesque" for display/headings, "Inter" for body - A warm off-white background (#FAFAF7) - Charcoal text (#1A1A1A) - Accent color: a vivid Rubik's red-orange (#E63946 or #FF4500) - Subtle borders and shadows - Generous spacing Let me also add a "compare" feature? Or keep it simple. I'll keep it focused on the storefront experience. Let me start writing: Actually, I realize I should make the cube in each product card a small actual 3D cube, since CSS 3D is supported. Let me use a small CSS cube for each product card. Let me draft a `SmallCube` component that takes an array of 6 colors and renders a 3D cube viewed at an angle. This will make every product card look distinct and cool. ```tsx function SmallCube({ colors, size = 140 }: { colors: string[]; size?: number }) { // Pad colors to 6 const c = [...colors]; while (c.length < 6) c.push('#d4d4d4'); const half = size / 2; const faceTransforms = [ 'translateZ(' + half + 'px)', // front 'rotateY(180deg) translateZ(' + half + 'px)', // back 'rotateY(90deg) translateZ(' + half + 'px)', // right 'rotateY(-90deg) translateZ(' + half + 'px)', // left 'rotateX(90deg) translateZ(' + half + 'px)', // top 'rotateX(-90deg) translateZ(' + half + 'px)', // bottom ]; return (

{faceTransforms.map((t, i) => (

{Array(9).fill(0).map((_, j) => (

))}

); } ``` Hmm, with the gap and padding this will look like a real Rubik's cube. Let me put it all together now in one big HTML file. I'll include some nice touches: - The hero cube will be larger and animated (continuous rotation) - Product cards' cubes will be static (viewed at angle) - On hover of product card, the cube will start rotating slowly - Color swatches showing all 6 cube colors per product Let me code this all out. For the toast, I'll use a simple state-driven approach where toasts auto-dismiss after 2.5s. I want to make sure I'm handling TypeScript correctly with Babel standalone. Babel can strip types if I use the typescript preset. The data-presets="typescript,react" should work. Let me write the complete file now. For search filtering, I'll filter by name and brand. For sort options: - Featured - Price: Low to High - Price: High to Low - Rating - Newest Let me also add a "Best Seller" and "New" badge for some products. Alright, let me write the code: ```html CubeWorks — Premium Rubik's Cube Store

``` Now let me write the React app code. I'll aim for around 800-1200 lines for completeness. Let me start: ```tsx type Difficulty = 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert'; type Category = '3x3' | 'Big Cubes' | 'Shape Mods' | 'Specialty'; interface Product { id: string; name: string; brand: string; price: number; originalPrice?: number; category: Category; difficulty: Difficulty; rating: number; reviews: number; colors: string[]; badge?: 'Best Seller' | 'New' | 'Sale' | 'Limited'; description: string; features: string[]; inStock: boolean; featured?: boolean; } interface CartItem { product: Product; quantity: number; } const PRODUCTS: Product[] = [ { id: 'p1', name: 'Classic 3x3 Speed Cube', brand: 'CubeWorks', price: 14.99, category: '3x3', difficulty: 'Beginner', rating: 4.8, reviews: 2847, colors: ['#C41E3A', '#FF5800', '#FFD500', '#FFFFFF', '#0091D5', '#00A651'], badge: 'Best Seller', description: 'The original brain teaser that started it all. Smooth-turning mechanism with stickerless tiles that never fade.', features: ['Stickerless design', 'Smooth corner cutting', 'Adjustable tension', 'Eco-friendly plastic'], inStock: true, featured: true, }, // ... more products ]; ``` Let me list all products: 1. Classic 3x3 Speed Cube - CubeWorks - $14.99 - Beginner - Best Seller 2. Pro Magnetic 3x3 GAN - GAN - $49.99 (orig $59.99) - Intermediate - Sale 3. 2x2 Mini Pocket Cube - CubeWorks - $9.99 - Beginner 4. 4x4 Master Cube - MoYu - $24.99 - Advanced 5. 5x5 Professor Cube - ShengShou - $34.99 - Expert 6. 6x6 Supreme Cube - MoYu - $44.99 - Expert 7. 7x7 Legend Cube - ShengShou - $54.99 - Expert 8. Megaminx Dodecahedron - CubeWorks - $27.99 - Advanced - New 9. Pyraminx Tetrahedron - Meffert's - $12.99 - Beginner 10. Skewb Cube - CubeWorks - $15.99 - Intermediate 11. Mirror Cube - MoYu - $19.99 - Intermediate - Best Seller 12. Ghost Cube - ShengShou - $32.99 - Expert 13. Square-1 - CubeWorks - $22.99 - Advanced 14. Mastermorphix Pyramid - Meffert's - $18.99 - Intermediate 15. Stickerless 3x3 Lite - QiYi - $16.99 - Beginner 16. Magnetic Megaminx Pro - GAN - $54.99 - Advanced - Limited OK let me write the final code now. I'll keep it focused but feature-rich. I need to be careful with Babel standalone + TypeScript preset. Some advanced TypeScript features might not work. Let me stick to basic TS: interfaces, types, and type annotations. No enums or advanced features. Let me finalize my code structure: 1. Types 2. Data (PRODUCTS) 3. Helper components: - `StarRating` - `SmallCube` (3D cube illustration) - `HeroCube` (large animated cube) - `Toast` 4. Main components: - `Header` - `Hero` - `Stats` - `CategoryGrid` - `ProductCard` - `ProductGrid` - `QuickViewModal` - `CartDrawer` - `Footer` 5. Main `App` component Let me write everything: For star ratings, I'll do filled/half/empty stars using SVG or just CSS. Actually for stars, I can use Unicode ★ characters with color grading. Or I'll use SVG for cleanness. ```tsx function StarRating({ rating, size = 14 }) { return (

{[1, 2, 3, 4, 5].map((i) => ( ))}

); } ``` Let me write the entire file now. This is going to be a long response but I want it to be complete and impressive. For the cart drawer slide animation, I'll use transform translateX(100%) -> 0 with transition. For the modal, I'll use opacity and scale transitions. Let me put it all together. Here's my final code plan: ```html ... all CDN imports ...

``` OK let me write the actual code now. Final version: Let me also make sure that I include a notification toast when adding to cart, and that the cart updates correctly. Also need to handle: - Cart item quantity increase/decrease - Remove from cart - Cart total calculation - Free shipping threshold - Empty cart state For the cart drawer, I'll show: - Each item with mini cube illustration, name, price, quantity stepper - Subtotal - Free shipping progress bar - Checkout button - "Continue shopping" link to close OK, writing now. Let me draft the full thing. I'll be efficient with my code but thorough. Actually one more thought: instead of using actual SVG icons for UI, I'll use inline SVG for things like cart, heart, search, etc. This way no icon library is needed. Let me write the icons inline: ```tsx const CartIcon = ({ className }) => ( ); const HeartIcon = ({ className, filled }) => ( ); const SearchIcon = ({ className }) => ( ); const CloseIcon = ({ className }) => ( ); ``` OK let me write everything now. I'm going to be careful about TypeScript with Babel — I'll keep types simple. For the cart drawer, I'll use a state `cartOpen: boolean`. When user clicks add to cart, the cart drawer can optionally open or just show a toast. Let me show a toast and update the count, but not auto-open the cart. That's less intrusive. Actually, opening the cart automatically is too aggressive. I'll just show a toast saying "Added to cart" with an option to view cart. Hmm, let me just show a simple toast and update the count in the header. OK let me finalize. Writing now: One more thing — the cube illustrations for each product. Each product has a `colors` array of up to 6 colors. The SmallCube will use these to render a 3D cube viewed at an angle (showing 3 faces). Let me think about which face to show which color. A cube viewed at rotateX(-25deg) rotateY(-35deg) will show top, front, and right faces. So I want the first 3 colors to be on those faces for variety. For some "themed" cubes (like Ghost Cube which is all one color, Mirror Cube which is all silver), I'll just use the same color for all 6 faces. Let me set up product colors thoughtfully: 1. Classic 3x3 — classic colors (red, orange, yellow, white, blue, green) 2. Magnetic 3x3 GAN — classic colors but maybe more vibrant 3. 2x2 — classic colors 4. 4x4 — classic colors 5. 5x5 — classic colors 6. 6x6 — classic colors 7. 7x7 — classic colors 8. Megaminx — multi-color, 12 colors but we'll use 6 9. Pyraminx — classic colors (4 faces but show as 6) 10. Skewb — classic colors 11. Mirror Cube — all silver (#C0C0C0) 12. Ghost Cube — all black/dark 13. Square-1 — classic colors but with diagonal split 14. Mastermorphix — purple/pink/yellow 15. Stickerless Lite — vibrant colors 16. Magnetic Megaminx — multicolor Let me just use varying color palettes to make each look distinct. OK final code time. Writing now. I realize I should also handle: - Body scroll lock when modal/cart drawer is open - Click outside to close - Escape key to close Let me add those. ```tsx useEffect(() => { if (cartOpen || quickView) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } return () => { document.body.style.overflow = ''; }; }, [cartOpen, quickView]); useEffect(() => { const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') { setCartOpen(false); setQuickView(null); } }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, []); ``` OK let me write the complete code now. I'll keep it clean and well-organized. Let me also think about what makes a Rubik's cube store "stand out": - The visual identity (cube colors throughout) - Educational angle (difficulty levels, "learn to solve" CTA) - Community feel (ratings, reviews, "speedcubing community") - Maybe a "Puzzle of the Month" feature I'll add: - A "Solve Guide" CTA in the hero or footer - Difficulty levels shown clearly on cards - A "Did you know?" stat banner - Maybe a "WCA competition" mention Alright, writing the code now. Final answer coming up. For the hero, I'll have: - Eyebrow text: "Premium puzzle collection" - Big headline: "Twist. Turn. Solve." - Sub: description - CTAs: "Shop all cubes" + "Watch solve guide" - Hero cube (animated) Below hero, a marquee of brand names or stats. For stats: 50,000+ cubes sold, 4.9/5 rating, 50+ unique puzzles, Free shipping over $50. OK, writing now. Let me finalize product list: 1. Classic 3x3 Speed Cube - CubeWorks - $14.99 - Beginner - 4.8★ - Best Seller - colors: classic 2. Pro Magnetic 3x3 GAN - GAN - $49.99/$59.99 - Intermediate - 4.9★ - Sale - colors: classic 3. 2x2 Mini Pocket Cube - CubeWorks - $9.99 - Beginner - 4.7★ - colors: classic 4. 4x4 Master Cube - MoYu - $24.99 - Advanced - 4.6★ - colors: classic 5. 5x5 Professor Cube - ShengShou - $34.99 - Expert - 4.5★ - colors: classic 6. 6x6 Supreme Cube - MoYu - $44.99 - Expert - 4.7★ - New - colors: classic 7. 7x7 Legend Cube - ShengShou - $54.99 - Expert - 4.6★ - colors: classic 8. Megaminx Dodecahedron - CubeWorks - $27.99 - Advanced - 4.8★ - New - colors: classic 9. Pyraminx Tetrahedron - Meffert's - $12.99 - Beginner - 4.7★ - colors: classic 10. Skewb Cube - CubeWorks - $15.99 - Intermediate - 4.5★ - colors: classic 11. Mirror Cube Silver - MoYu - $19.99 - Intermediate - 4.7★ - Best Seller - colors: all silver 12. Ghost Cube - ShengShou - $32.99 - Expert - 4.4★ - colors: all white/gray 13. Square-1 - CubeWorks - $22.99 - Advanced - 4.5★ - colors: classic 14. Mastermorphix Pyramid - Meffert's - $18.99 - Intermediate - 4.6★ - colors: pink, purple, yellow, blue, green, white 15. Stickerless 3x3 Lite - QiYi - $16.99 - Beginner - 4.8★ - colors: classic vibrant 16. Magnetic Megaminx Pro - GAN - $54.99 - Advanced - 4.9★ - Limited - colors: classic Wait, I want to vary the colors more. Let me give some products distinct color schemes: 11. Mirror Cube Silver: ['#C0C0C0', '#C0C0C0', '#C0C0C0', '#C0C0C0', '#C0C0C0', '#C0C0C0'] - all silver 12. Ghost Cube: ['#2a2a2a', '#2a2a2a', '#2a2a2a', '#2a2a2a', '#2a2a2a', '#2a2a2a'] - all black 14. Mastermorphix: ['#FF1493', '#9370DB', '#FFD700', '#00CED1', '#FF6347', '#FFFFFF'] - pink/purple For variety, let me adjust some: - 4x4: classic - 5x5: classic - 6x6: classic - 7x7: classic - Megaminx: classic - Pyraminx: classic - Skewb: classic - Square-1: classic - 2x2: classic - Magnetic 3x3: classic Most cubes use the classic colors, but a few have unique color schemes to stand out visually. Actually, to make the product cards more visually distinct, let me give each product a slightly different color rotation (which colors go on which face). But since we only show 3 faces, the "first 3 colors" matter most. Let me shuffle the color arrays: 1. Classic 3x3: [red, orange, yellow, white, blue, green] - shows red/orange/yellow on top-front-right 2. Magnetic 3x3: [blue, green, red, white, orange, yellow] - shows blue/green/red 3. 2x2: [yellow, white, orange, red, blue, green] - shows yellow/white/orange 4. 4x4: [green, blue, white, yellow, red, orange] - shows green/blue/white 5. 5x5: [orange, red, blue, yellow, white, green] - shows orange/red/blue 6. 6x6: [yellow, orange, green, blue, red, white] 7. 7x7: [white, yellow, red, orange, blue, green] 8. Megaminx: [purple, pink, cyan, green, yellow, orange] 9. Pyraminx: [green, yellow, blue, red, orange, white] 10. Skewb: [orange, blue, yellow, white, red, green] 11. Mirror: [silver × 6] 12. Ghost: [dark × 6] 13. Square-1: [red, white, blue, orange, green, yellow] 14. Mastermorphix: [pink, purple, yellow, cyan, white, magenta] 15. Stickerless Lite: [vivid blue, vivid red, vivid green, vivid orange, vivid yellow, vivid white] 16. Magnetic Megaminx: [pink, purple, orange, blue, green, yellow] OK this gives nice variety. Let me code now. Actually let me think about the hero again. I want the hero to be visually impressive. The animated 3D cube is great, but I could also add some "floating cubes" in the background or grid patterns. Idea: The hero has a giant rotating cube, but with multiple smaller cubes "floating" around it (using position absolute and CSS animations). This adds depth and visual interest. Or: The hero has the cube plus a subtle grid background (like a tech/cube pattern). I'll do the cube + a subtle radial gradient background and a "puzzle pieces" decorative element. Let me code it now. Here's the final draft: Wait, one more consideration. The user said "using tailwind css". The Tailwind CDN supports Tailwind v3. Some arbitrary values and modifiers might need specific syntax. I'll stick to standard Tailwind classes. OK writing now. Final answer: Let me think about a strong opening line that's NOT a heading. I'll start conversationally. "After building this out, here's a complete storefront..." OK let me write the final HTML now. Quick check on TypeScript with Babel: - Interfaces work ✓ - Type aliases work ✓ - Type annotations on function params/returns work ✓ - Generics work ✓ - Enums... might need extra config. I'll avoid them. - `as` assertions work ✓ - Union types work ✓ I think I'll avoid enums and use string literal types instead. Let me finalize the code. Writing it all out now: ```tsx const { useState, useMemo, useEffect, useRef, useCallback } = React; // === Types === type Difficulty = 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert'; type Category = '3x3' | 'Big Cubes' | 'Shape Mods' | 'Specialty'; type SortOption = 'featured' | 'price-asc' | 'price-desc' | 'rating' | 'reviews'; type Badge = 'Best Seller' | 'New' | 'Sale' | 'Limited'; interface Product { id: string; name: string; brand: string; price: number; originalPrice?: number; category: Category; difficulty: Difficulty; rating: number; reviews: number; colors: string[]; badge?: Badge; description: string; features: string[]; inStock: boolean; featured?: boolean; releaseDate: number; } interface CartItem { product: Product; quantity: number; } // === Data === const CLASSIC_COLORS = ['#C41E3A', '#FF5800', '#FFD500', '#FFFFFF', '#0091D5', '#00A651']; const PRODUCTS: Product[] = [ { id: 'cw-3x3', name: 'Classic 3x3 Speed Cube', brand: 'CubeWorks', price: 14.99, category: '3x3', difficulty: 'Beginner', rating: 4.8, reviews: 2847, colors: ['#C41E3A', '#FF5800', '#FFD500', '#FFFFFF', '#0091D5', '#00A651'], badge: 'Best Seller', description: 'The original brain teaser that started it all. Smooth-turning mechanism with stickerless tiles that never fade or peel.', features: ['Stickerless design', 'Smooth corner cutting', 'Adjustable tension', 'Eco-friendly ABS plastic', '3.5 oz lightweight'], inStock: true, featured: true, releaseDate: 2020, }, // ... ]; ``` OK, I'll write out the full HTML now. Let me proceed. For icons, I'll create a single `Icon` component or multiple inline SVGs. Let me use individual functional components for icons. Let me write the complete code now. I'll output it as one block. I want to make sure my answer is comprehensive and the code is complete and works. Let me write the JSX/TSX now. Going to be long but complete: Actually wait, I realized I should make sure Babel can transpile TypeScript with generics in arrow functions. Let me use `` syntax or avoid generics in some places. For React.useRef with initial value, I need to be careful: ```tsx const ref = useRef(null); ``` This should work with Babel typescript preset. For event handlers with type annotations: ```tsx const handler = (e: React.MouseEvent) => { ... }; ``` This should work. Let me proceed. Actually I realize I want to make sure my code doesn't fail. Let me keep TypeScript annotations simple and not use advanced features like mapped types, conditional types, etc. Let me write it now. Final answer: Actually, one more thought. I want to add a "compare" feature? No, let me not overcomplicate. Focus on: - Browsing products - Filtering/sorting - Adding to cart - Managing cart - Quick view - Wishlist That's plenty. Let me also add a subtle "scramble" animation when the hero cube mounts — like the cube spins and stops at a "solved" position, or just continuously rotates. OK writing now. For real this time. Let me draft the JSX for the hero cube: ```tsx function HeroCube() { const half = 100; // half of cube size (200) const colors = CLASSIC_COLORS; const faces = [ { transform: `translateZ(${half}px)`, color: colors[0] }, // front - red { transform: `rotateY(180deg) translateZ(${half}px)`, color: colors[1] }, // back - orange { transform: `rotateY(90deg) translateZ(${half}px)`, color: colors[2] }, // right - yellow { transform: `rotateY(-90deg) translateZ(${half}px)`, color: colors[3] }, // left - white { transform: `rotateX(90deg) translateZ(${half}px)`, color: colors[4] }, // top - blue { transform: `rotateX(-90deg) translateZ(${half}px)`, color: colors[5] }, // bottom - green ]; return (

{faces.map((f, i) => (

{Array.from({ length: 9 }).map((_, j) => (

))}

); } ``` OK this looks good. Let me write the complete code now. For the SmallCube (used in product cards), I'll do the same but smaller and without animation (or with hover-triggered animation). ```tsx function SmallCube({ colors, size = 130, animate = false }: { colors: string[]; size?: number; animate?: boolean }) { const half = size / 2; const c = [...colors]; while (c.length < 6) c.push('#d4d4d4'); const faces = [ { transform: `translateZ(${half}px)`, color: c[0] }, // front { transform: `rotateY(180deg) translateZ(${half}px)`, color: c[1] }, // back { transform: `rotateY(90deg) translateZ(${half}px)`, color: c[2] }, // right { transform: `rotateY(-90deg) translateZ(${half}px)`, color: c[3] }, // left { transform: `rotateX(90deg) translateZ(${half}px)`, color: c[4] }, // top { transform: `rotateX(-90deg) translateZ(${half}px)`, color: c[5] }, // bottom ]; return (

{faces.map((f, i) => (

{Array.from({ length: 9 }).map((_, j) => (

))}

); } ``` Hmm, for the hover rotation, I'll use a CSS rule: ```css .product-card:hover .product-cube { animation: cubeRotate 15s infinite linear; } ``` But I need to make sure the cube doesn't reset its rotation each hover — actually CSS animation handles this. On hover, animation starts; on unhover, it stops and the cube stays where it is (or resets to base state without animation). Actually, when animation stops, the cube returns to its transform: rotateX(-25deg) rotateY(-35deg) state. That's fine. OK let me write the full code. I'll be efficient. Let me think about whether I should include the full product list. Yes, let me include all 16 products for a fuller store experience. Alright, here's the full code. I'm going to write it out now in one go. Final code coming up: Actually, I want to think about the layout/styling one more time: - Header height: ~80px sticky - Hero: 500-600px tall, with split layout (text left, cube right) on desktop, stacked on mobile - Stats bar: 100px tall, 4 stats horizontally - Categories section: 4 cards, each 250px tall - Products section: header + filters + grid (4 cols on desktop, 2 on tablet, 1 on mobile) - Footer: 400px tall For colors, let me decide: - Primary: red-orange (#E63946 or #DC2626) - Background: #FAFAF7 (warm off-white) - Surface: #FFFFFF - Text primary: #1a1a1a - Text secondary: #6b7280 - Border: #e5e5e5 - Cube colors as accents Actually, let me use a more refined palette: - Background: #FAF9F6 (slightly warm white) - Surface: #FFFFFF - Text: #18181B (zinc-900) - Muted: #71717A - Border: #E4E4E7 - Accent: #E11D48 (rose-600) — Rubik's red vibe - Accent hover: #BE123C Wait, I want to differentiate. Let me use: - Accent: #E63946 (a vivid red) for primary - Secondary accent: each cube color Actually let me try a different approach: use the cube's color palette as a design element. So the brand accent is red-orange, but each product card gets a subtle color tint based on its dominant color. Hmm, but that might be too much. Let me keep it cohesive: - Accent (red): #DC2626 or #E63946 for primary CTAs - Use cube colors as decorative elements Final palette: - Background: #FAF8F4 - Surface: #FFFFFF - Surface alt: #F5F3EE - Text: #1A1A1A - Muted: #737373 - Border: #E7E5E0 - Accent: #DC2626 (red-600) - Accent dark: #B91C1C - Accent light bg: #FEE2E2 Let me write the code now. For typography: - Display: Bricolage Grotesque (for headings, big) - Body: Inter OK writing the final code now. Wait, I want to make sure the visual experience is "above average". Let me think about what makes this stand out: 1. The 3D CSS cube illustrations are unique — most storefronts use flat images. ✓ 2. The animated hero cube draws attention. ✓ 3. Color-coded difficulty levels make it informative. ✓ 4. Each product card has a 3D cube that rotates on hover. ✓ 5. Smooth transitions and micro-interactions. ✓ 6. Cart drawer with progress bar toward free shipping. ✓ 7. Quick view modal with full product details. ✓ 8. Toast notifications. ✓ 9. Search and filter that work in real-time. ✓ 10. Wishlist with heart toggle. ✓ That's a solid feature set. Let me write the code now. One more thing: let me add a "did you know" stat or feature: "Speedcubing champion endorsed" or similar. Maybe just a stats bar. Let me also include a subtle pattern or texture in the hero background to add depth. I'll use a subtle grid or noise pattern via CSS. OK writing now. Final answer: Let me also remember to include a "play scramble" button somewhere that triggers the cube animation. Maybe in the hero as a "Watch it scramble" CTA. Actually, let me make the hero cube continuously rotate. That's simpler. OK writing the final code now. I'll aim for around 600-800 lines of TSX code. One important thing: I want to ensure I use Tailwind classes throughout, with custom CSS only for the 3D cube (which requires `transform-style: preserve-3d` that can't be done via Tailwind). Let me write the code: ```tsx // === HEADER === function Header({ cartCount, wishlistCount, onCartClick, onWishlistClick, searchQuery, setSearchQuery, }: { cartCount: number; wishlistCount: number; onCartClick: () => void; onWishlistClick: () => void; searchQuery: string; setSearchQuery: (q: string) => void; }) { return (

{/* Logo */}

{CLASSIC_COLORS.slice(0, 9).map((c, i) => (

))}

CubeWorks {/* Nav links */} {/* Search */}

setSearchQuery(e.target.value)} placeholder="Search cubes, brands…" className="w-full pl-9 pr-3 py-2 text-sm bg-white border border-stone-200 rounded-full focus:outline-none focus:ring-2 focus:ring-rose-200 focus:border-rose-400 transition" />

{/* Actions */}

); } ``` OK let me write the rest. Going to compile the full file now. For Toast: ```tsx function Toast({ message }: { message: string }) { return (

{message}

); } ``` For the App component: ```tsx function App() { const [cart, setCart] = useState([]); const [cartOpen, setCartOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [category, setCategory] = useState('All'); const [sortBy, setSortBy] = useState('featured'); const [quickView, setQuickView] = useState(null); const [favorites, setFavorites] = useState([]); const [toast, setToast] = useState(null); const showToast = useCallback((msg: string) => { setToast(msg); setTimeout(() => setToast(null), 2500); }, []); const addToCart = useCallback((product: Product, qty = 1) => { setCart((prev) => { const existing = prev.find((i) => i.product.id === product.id); if (existing) { return prev.map((i) => i.product.id === product.id ? { ...i, quantity: i.quantity + qty } : i ); } return [...prev, { product, quantity: qty }]; }); showToast(`${product.name} added to cart`); }, [showToast]); const removeFromCart = useCallback((productId: string) => { setCart((prev) => prev.filter((i) => i.product.id !== productId)); }, []); const updateQty = useCallback((productId: string, delta: number) => { setCart((prev) => prev.map((i) => i.product.id === productId ? { ...i, quantity: Math.max(1, i.quantity + delta) } : i ) ); }, []); const toggleFavorite = useCallback((productId: string) => { setFavorites((prev) => prev.includes(productId) ? prev.filter((id) => id !== productId) : [...prev, productId] ); }, []); const filtered = useMemo(() => { let list = PRODUCTS.filter((p) => { if (category !== 'All' && p.category !== category) return false; if (searchQuery) { const q = searchQuery.toLowerCase(); return p.name.toLowerCase().includes(q) || p.brand.toLowerCase().includes(q) || p.category.toLowerCase().includes(q); } return true; }); switch (sortBy) { case 'price-asc': list = [...list].sort((a, b) => a.price - b.price); break; case 'price-desc': list = [...list].sort((a, b) => b.price - a.price); break; case 'rating': list = [...list].sort((a, b) => b.rating - a.rating); break; case 'reviews': list = [...list].sort((a, b) => b.reviews - a.reviews); break; case 'featured': default: list = [...list].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0)); break; } return list; }, [category, searchQuery, sortBy]); const cartCount = cart.reduce((s, i) => s + i.quantity, 0); const subtotal = cart.reduce((s, i) => s + i.product.price * i.quantity, 0); const freeShipThreshold = 50; const shipping = subtotal >= freeShipThreshold || subtotal === 0 ? 0 : 4.99; const total = subtotal + shipping; useEffect(() => { if (cartOpen || quickView) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } }, [cartOpen, quickView]); useEffect(() => { const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') { setCartOpen(false); setQuickView(null); } }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, []); return (

setCartOpen(true)} onWishlistClick={() => showToast(`${favorites.length} items in your wishlist`)} searchQuery={searchQuery} setSearchQuery={setSearchQuery} />

document.getElementById('shop')?.scrollIntoView({ behavior: 'smooth' })} />

); } ``` OK let me finalize everything and write the full HTML file. I think I've thought enough. Let me write the final code: Let me also think about the structure to keep things organized. The HTML file will have: 1. with imports 2.

``` OK I have a clear plan. Let me write it all out now in full. Hmm, for Babel with TS preset, the `!` non-null assertion might not work. Let me just use `as HTMLElement`: ```tsx const root = document.getElementById('root') as HTMLElement; ReactDOM.createRoot(root).render(); ``` Or just: ```tsx ReactDOM.createRoot(document.getElementById('root')).render(); ``` The second one should work with proper typing since `getElementById` returns `HTMLElement | null`, but `createRoot` accepts `Element | DocumentFragment`. Let me just be safe and use a cast. Actually, with Babel + TypeScript preset, the type checking is NOT done (Babel just strips types). So even if the types don't match, Babel will strip them and the JS will work. So I can write `document.getElementById('root')` and it'll work fine. OK writing now. Final answer. Let me actually write the complete code: Actually wait, I realize I should think about whether to include all 16 products in detail. The data section will be long. Let me write each product concisely: ```tsx const PRODUCTS: Product[] = [ { id: 'cw-classic-3x3', name: 'Classic 3x3 Speed Cube', brand: 'CubeWorks', price: 14.99, category: '3x3', difficulty: 'Beginner', rating: 4.8, reviews: 2847, colors: CLASSIC, badge: 'Best Seller', description: 'The original brain teaser that started it all...', features: [...], inStock: true, featured: true, }, // ... ]; ``` OK let me write the entire file now. Here's my complete plan in code form. Let me think about one more thing: how the product cards look. I want them to feel premium. Each card will have: - A neutral/cream-colored "image area" with the 3D cube centered, with subtle decorative elements behind it - A small badge in the corner (Best Seller, Sale, etc.) - A heart icon in the opposite corner for wishlist - Below the image area: - Brand (uppercase, small, muted) - Name (display font, bold) - Rating + reviews - Difficulty badge - Price (with strikethrough if on sale) - Add to cart button (full width, primary color) Card structure: ``` +-----------------------+ | [badge] [♡] | | | | [3D cube] | | | | CUBENET | <- brand | Classic 3x3 Speed... | <- name | ★★★★★ 4.8 (2,847) | <- rating | [Beginner] | <- difficulty | $14.99 [Add] | <- price + add btn +-----------------------+ ``` Hmm, but having "Add to cart" button always visible might clutter. Let me show it as an inline icon button next to price, OR as a hover-reveal button. Let me think... For accessibility and clarity, let me always show the "Add to cart" button. It can be a small button on the right of the price row, or full-width below. Let me go with: rating on its own line, then a row with price on left and "Add to cart" button on right. Quick view can be triggered by clicking the cube or a "Quick view" button revealed on hover. OK final structure: ``` +-----------------------+ | [Badge] [♡] | | | | [3D cube] | <- hover shows "Quick view" overlay | | | CUBENET | <- brand (uppercase, small, muted) | Classic 3x3 Speed | <- name | ★★★★★ 4.8 (2,847) | <- rating + reviews | [Beginner] | <- difficulty badge | $14.99 $19.99 [+] | <- price + add to cart icon button +-----------------------+ ``` OK that's the card layout. Let me write it. For the hover "Quick view" overlay: ```tsx

``` For the add to cart icon button, I'll use a plus icon or a cart icon. Let me use a small button: ```tsx ``` OK let me write the entire code now. Final answer: ```tsx function ProductCard({ product, isFavorite, onToggleFav, onQuickView, onAddToCart }: { product: Product; isFavorite: boolean; onToggleFav: (id: string) => void; onQuickView: (p: Product) => void; onAddToCart: (p: Product) => void; }) { const badgeColors: Record = { 'Best Seller': 'bg-amber-100 text-amber-800', 'New': 'bg-emerald-100 text-emerald-800', 'Sale': 'bg-rose-100 text-rose-800', 'Limited': 'bg-violet-100 text-violet-800', }; const diffColors: Record = { 'Beginner': 'bg-emerald-50 text-emerald-700 border-emerald-200', 'Intermediate': 'bg-blue-50 text-blue-700 border-blue-200', 'Advanced': 'bg-orange-50 text-orange-700 border-orange-200', 'Expert': 'bg-rose-50 text-rose-700 border-rose-200', }; return (

{/* Cube image area */}

onQuickView(product)}> {/* Badge */} {product.badge && ( {product.badge} )} {/* Wishlist */} {/* Cube */}

{/* Quick view overlay */}

{/* Info */}

{product.brand}

{product.name}

{/* Rating */}

{product.rating} · {product.reviews.toLocaleString()} reviews

{/* Difficulty */} {product.difficulty} {/* Price + Add */}

${product.price.toFixed(2)} {product.originalPrice && ( ${product.originalPrice.toFixed(2)} )}

); } ``` OK now I'll write the rest of the components and the full file. Let me also draft the CartDrawer: ```tsx function CartDrawer({ open, onClose, cart, subtotal, shipping, total, freeShipThreshold, updateQty, removeFromCart }) { if (!open) return null; const shipProgress = Math.min(100, (subtotal / freeShipThreshold) * 100); const remaining = Math.max(0, freeShipThreshold - subtotal); return (

{/* Backdrop */}

{/* Drawer */}

{/* Header */}

Your cart

{/* Free shipping progress */}

{remaining > 0 ? (

Add ${remaining.toFixed(2)} more for free shipping

) : (

You've unlocked free shipping!

)}

{/* Items */}

{cart.length === 0 ? (

Your cart is empty

Add some cubes to get started

) : ( cart.map((item) => (

{/* Mini cube */}

{/* Info */}

{item.product.brand}

{item.product.name}

${(item.product.price * item.quantity).toFixed(2)} {/* Quantity stepper */}

{item.quantity}

{/* Remove */}

)) )}

{/* Footer */} {cart.length > 0 && (

Subtotal ${subtotal.toFixed(2)}

Shipping {shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`}

Total ${total.toFixed(2)}

)}

); } ``` OK now I'll write the QuickViewModal: ```tsx function QuickViewModal({ product, onClose, onAddToCart, isFavorite, toggleFavorite }) { if (!product) return null; return (

{/* Cube display */}

{/* Details */}

{product.brand}

{product.name}

{product.rating} · {product.reviews.toLocaleString()} reviews

{product.description}

{/* Colors */}

Face colors

{product.colors.map((c, i) => (

))}

{/* Features */}

Key features

{/* Difficulty + stock */}

Difficulty: {product.difficulty} In stock

{/* Price + actions */}

${product.price.toFixed(2)} {product.originalPrice && ( ${product.originalPrice.toFixed(2)} )}

); } ``` OK I think I have all the pieces. Let me write the full final HTML now. Wait, the HeroCube I'm reusing in QuickViewModal — let me make it support both animated and non-animated modes. ```tsx function HeroCube({ size = 280, animate = true }: { size?: number; animate?: boolean }) { // ... use animate ? 'spin-cube' : '' } ``` OK let me write everything out now. I'll write the complete file in my answer. Let me make sure I get everything in one go. Let me also think about what to include in the footer: - Logo + tagline - Newsletter signup - Shop links (Cubes, Brands, Sale, New) - Support links (Help, Returns, Shipping, Warranty) - Company links (About, Careers, Blog, Press) - Social links - Copyright OK let me write it all out now. This is going to be a long answer but worth it. Actually, let me think about how to ensure the answer stays within reasonable bounds. I want it to be complete and impressive but not absurdly long. Let me aim for ~800-1000 lines of code in total, which should be enough for a complete storefront with all the features. OK writing now. One more consideration: the TypeScript preset with Babel. To use it, I need to include the preset. The `data-presets="typescript,react"` should be correct, but let me double-check. Babel standalone supports these presets: - `env` (or just use script type="text/babel" without presets) - `react` (for JSX) - `typescript` (for TS) - `stage-0` through `stage-3` (for proposals) Using `data-presets="typescript,react"` should work for TypeScript + JSX. Babel standalone handles these as built-in presets. Actually, I just realized — Babel standalone might need `data-presets="env,react,typescript"` or similar. Let me check... Looking at Babel docs: the `@babel/standalone` package supports `data-presets` with comma-separated values. The available presets include `typescript` and `react`. They're available without separate installation. So `data-presets="typescript,react"` should work. Actually let me be safer and use `data-presets="typescript,react"` and add `data-type="module"` if needed. Hmm, not needed for our case. Wait, there's another consideration. Babel standalone might need a `data-presets` attribute or similar. Let me just use the standard syntax: ```html ``` OK that should work. One issue: TypeScript's enum feature might require `allowDeclareFields` or similar config. I'll avoid enums and use string literal types instead. OK let me write the final answer now. Hmm, let me also think about Babel preset issues. I want to make sure my TS code compiles. Let me use: - Basic interfaces - Type aliases (type X = ...) - Function parameter type annotations - Generic functions where needed (use simple syntax) - Avoid advanced TS features Actually let me re-read Babel TypeScript preset docs... Babel TypeScript preset: - Strips type annotations - Does NOT do type checking (just stripping) - Supports: interfaces, type aliases, type annotations, generics, conditional types, etc. - Limitations: requires `onlyRemoveTypeImports` for some cases, no `const enum`, no namespace with merged declarations I should be fine with what I'm using. OK writing the final answer now. Let me code: I'll structure my code carefully. Let me write a complete file. OK let me draft the full file. Here it is: Hmm, I realize I should make this answer concise enough to fit reasonably. Let me cut some products to make the data section shorter. Actually, 16 products is reasonable for a store. Let me keep them. For features lists per product, let me keep them short (3-5 items). OK writing now. One more thing — the announcement bar. Let me include it: ```tsx

Free shipping on orders over $50 · Every cube backed by our 30-day twist guarantee

``` OK writing the full code now. Let me also remember to wrap the marquee properly. Actually let me skip the marquee — it's nice but takes up space and time. Let me focus on the core features. Final feature list: 1. Sticky header with logo, nav, search, wishlist, cart 2. Announcement bar 3. Hero with animated 3D cube 4. Stats bar (4 stats) 5. Categories section (4 cards) 6. Product grid with filters (search, category, sort) 7. Product cards with 3D cube, badge, wishlist, quick view, add to cart 8. Quick view modal with full details 9. Cart drawer with quantity steppers, free shipping progress, totals, checkout 10. Toast notifications 11. Footer with links, newsletter, social OK writing now. Final answer: Let me just write it. I'll structure my response as: 1. Brief intro (one or two sentences) 2. The complete HTML file in a code block 3. Brief explanation of what's included OK let me write the final answer. I'm going to keep my intro brief and focused. Actually, I want to make sure I handle React's strict mode and proper createRoot usage: ```tsx const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` Or: ```tsx ReactDOM.createRoot(document.getElementById('root')).render(); ``` Either works. Let me use the latter for brevity. OK writing the final code. I'll make sure it's complete, working, and visually impressive. Let me think about what could go wrong: 1. Babel can't transpile some TS features - I'm using simple TS, should be fine 2. CDN unavailable - using unpkg and tailwind CDN, should be reliable 3. CSS not loading - I'm using Tailwind CDN, should work 4. Fonts not loading - using Google Fonts CDN, should work OK writing now. Final concern: let me make sure the 3D cube renders properly. I need `transform-style: preserve-3d` on the parent of the faces, and the faces need to be positioned absolutely with transforms. The Tailwind class for `transform-style: preserve-3d` doesn't exist by default. I'll use my custom `.preserve-3d` class defined in the CSS. OK writing the final code now. Let me do this: ```tsx function Cube3D({ colors, size = 140, spin = false }) { const half = size / 2; const c = [...colors]; while (c.length < 6) c.push('#e5e5e5'); const faces = [ { transform: `translateZ(${half}px)`, color: c[0] }, { transform: `rotateY(180deg) translateZ(${half}px)`, color: c[1] }, { transform: `rotateY(90deg) translateZ(${half}px)`, color: c[2] }, { transform: `rotateY(-90deg) translateZ(${half}px)`, color: c[3] }, { transform: `rotateX(90deg) translateZ(${half}px)`, color: c[4] }, { transform: `rotateX(-90deg) translateZ(${half}px)`, color: c[5] }, ]; return (

{faces.map((face, i) => (

{Array.from({ length: 9 }).map((_, j) => (

))}

); } ``` Hmm, I realize the cube will have all 6 faces visible from one angle (depending on rotation), but only 3 will be visible from a typical perspective. The 3 hidden faces are still useful for the rotating animation in the hero. For the small cubes in product cards, I want to show 3 visible faces (top, front, right). I'll use `rotateX(-25deg) rotateY(-35deg)` to show top-front-right. But wait, the rotation `rotateY(-35deg)` shows the left-front faces, not right-front. Let me check... If the cube is rotated -35deg around Y, the right face moves toward the back and the left face moves toward the front. So I'd see left, front, top. To see right, front, top, I need rotateY(35deg). Hmm let me think again. With rotateY(angle): - angle = 0: see front face - angle = 90: see right face (turned right) - angle = -90: see left face - angle = 180: see back face So to see "front + right + top", I want rotateY(45deg) and rotateX(-30deg). Let me use: - transform: 'rotateX(-25deg) rotateY(35deg)' This shows the right face + front face + top face. Good. Actually I want to show the FRONT, RIGHT, and TOP faces. With the camera at +Z looking at the origin: - Front face is at +Z (no rotation needed) - Right face is at +X, visible when cube rotates clockwise around Y (negative Y rotation in left-handed... hmm) - In CSS, rotateY(positive) rotates clockwise when looking from +Y (top), so right face moves away from camera. OK CSS rotations: looking from the +Y axis (looking down), rotateY(positive) is counter-clockwise (right-hand rule). So the cube's right side moves AWAY from the camera. To show the right face, I need rotateY(negative). Let me try rotateY(-30deg) — this should rotate the cube's left side toward the back, bringing the right side toward the front. So I'd see front + right (right side is now visible). Wait no, that's confusing. Let me think again. If the cube's right side is at +X, and I rotate the cube around Y by -30deg (CSS), then: - The +X axis rotates by -30 deg around Y (right-hand rule) - Looking from +Y (top), -30deg is clockwise - So the +X axis moves toward +Z direction (which is toward the camera) Wait, CSS uses left-handed coordinate system? No, CSS uses right-handed: +X right, +Y down, +Z toward viewer. Actually CSS uses left-handed Y-axis (Y is down). But for transforms, rotateY is around the Y axis (vertical). Hmm, let me just test mentally: a cube viewed straight on shows its FRONT face. If I rotateY(-45deg), the cube rotates -45deg around the Y axis. In a right-handed system (Y up), -45deg around Y means the cube rotates clockwise when viewed from above. So the front face moves toward the left, and the right face moves toward the front. So I'd see the front+right faces. OK so rotateY(-35deg) shows front + right (the right face moves to where front was). And rotateX(-25deg) tilts the top toward the viewer. So I see front + right + top. Let me use `transform: 'rotateX(-25deg) rotateY(-35deg)'` to show front, right, top. The colors: - Front face: colors[0] (will be visible) - Right face: colors[2] (will be visible) - Top face: colors[4] (will be visible) So the first 3 visible colors should be colors[0], colors[2], colors[4] (front, right, top). For products, the most visible colors are the front and right. Hmm but I want a nice variety. Let me arrange: - colors[0] = front - colors[1] = back - colors[2] = right - colors[3] = left - colors[4] = top - colors[5] = bottom For the classic cube colors, I'll do: - colors[0] = red (front) - colors[1] = orange (back) - colors[2] = yellow (right) - colors[3] = white (left) - colors[4] = blue (top) - colors[5] = green (bottom) So the visible faces show red, yellow, blue. That's a nice vibrant combo. OK now writing the final code. Let me also add a slight glow/shadow under the cube for grounding effect: Actually the gradient background in the cube area will provide visual interest. Let me skip the shadow under the cube for simplicity. OK writing now. Actually I realize there's one more important thing — the `HeroCube` component will be a larger version of `Cube3D`. Let me just have one component: ```tsx function Cube3D({ colors, size = 140, spin = false }: { colors: string[]; size?: number; spin?: boolean }) { // ... } ``` And in the hero, I'll use it with `spin={true}` and a larger size. Wait, the spinning cube in the hero has a continuous rotation. The non-spinning cubes in product cards use a static `rotateX(-25deg) rotateY(-35deg)`. For the hover effect on product cards, I want the cube to start spinning. I'll use a CSS class `.card-cube-wrapper:hover .cube-3d` to trigger animation. OK let me write the final code now. Here goes: ```tsx function Cube3D({ colors, size = 140, spin = false, hoverSpin = false }: { colors: string[]; size?: number; spin?: boolean; hoverSpin?: boolean; }) { const half = size / 2; const c = [...colors]; while (c.length < 6) c.push('#e5e5e5'); const faces = [ { transform: `translateZ(${half}px)`, color: c[0] }, { transform: `rotateY(180deg) translateZ(${half}px)`, color: c[1] }, { transform: `rotateY(90deg) translateZ(${half}px)`, color: c[2] }, { transform: `rotateY(-90deg) translateZ(${half}px)`, color: c[3] }, { transform: `rotateX(90deg) translateZ(${half}px)`, color: c[4] }, { transform: `rotateX(-90deg) translateZ(${half}px)`, color: c[5] }, ]; const cubeClassName = `relative preserve-3d ${spin ? 'spin-cube' : ''} ${hoverSpin ? 'hover-spin-cube' : ''}`; const cubeTransform = spin ? '' : 'rotateX(-25deg) rotateY(-35deg)'; return (

{faces.map((face, i) => (

{Array.from({ length: 9 }).map((_, j) => (

))}

); } ``` And CSS: ```css .hover-spin-cube { /* nothing by default */ } .card-cube-wrapper:hover .hover-spin-cube { animation: cubeSpin 12s infinite linear; transform: rotateX(-25deg); /* override the static transform */ } ``` Hmm, the issue is that the hover animation needs to override the static transform. Let me think... Actually, when the animation is active, it controls the transform. When it's not active (no hover), the static transform from inline style is used. So: - No hover: inline style `transform: rotateX(-25deg) rotateY(-35deg)` is active - Hover: animation takes over, controls transform When animation starts, the inline transform is overridden. When hover ends, animation is removed and inline transform is restored. But there might be a "jump" if the animation's frame doesn't match the inline transform. For smooth transition, I could use: - Always set the static transform via class - Use CSS transition for the transform when hover But that's complex. Let me just have the hover rotation start fresh each time — there will be a small visual jump but it's fine. Actually let me use a CSS variable approach or just simpler approach: ```css .card-cube-wrapper .hover-spin-cube { transform: rotateX(-25deg) rotateY(-35deg); transition: none; } .card-cube-wrapper:hover .hover-spin-cube { animation: cubeSpin 12s infinite linear; } ``` This way, without hover, the cube is static. With hover, the animation takes over and the cube spins (starting from 0deg Y rotation, which means the front face is fully visible at first, then rotates). The transition from "static at -35deg Y" to "spinning starting at 0deg Y" might cause a small jump, but it should be minor. OK let me just write the code and move on. Final answer: Let me write the complete HTML now. Here it is: Final HTML: ```html CubeWorks — Premium Rubik's Cube Storefront

``` Let me finalize and write the full file. I'm going to write it out as my final answer. OK writing now. I realize I should also briefly mention in my response what's included (in 1-2 sentences after the code). Let me keep that concise. Let me write the final answer now. Here's the complete file: Below is a single self-contained HTML file that builds a polished, fully interactive Rubik's cube storefront in React + TypeScript + Tailwind CSS. The standout touch: every product is rendered as a real CSS 3D cube (six stickered faces, 3×3 grids) that spins on hover, and the hero features a continuously rotating cube. ```html CubeWorks — Premium Rubik's Cube Storefront

``` ### What's inside - **Real CSS 3D cubes everywhere.** Every product is rendered as a six-faced, stickered 3D cube built with `transform-style: preserve-3d`. The hero cube spins continuously; product cubes stay tilted at an isometric angle and start spinning when you hover the card. - **Full storefront flow.** Sticky header with announcement bar, animated hero, category cards, sortable/searchable/filterable product grid, quick-view modal, slide-in cart drawer with quantity steppers and free-shipping progress bar, wishlist with live counts, and toast notifications. - **TypeScript throughout.** Typed `Product`, `CartItem`, `Category`, `Difficulty`, `SortOption`, `Badge` interfaces and a fully typed `App` with `useState`/`useMemo`/`useEffect`/`useCallback`. - **Tailwind for everything visual.** Custom theme tokens, badge/difficulty color maps via `Record<…>` typed objects, gradient backgrounds, focus-visible rings, custom scrollbar, and a marquee ticker. - **16 unique products** spanning 3×3 speed cubes, 4×4–7×7 big cubes, shape mods (Mirror, Ghost, Mastermorphix), and specialty puzzles (Megaminx, Pyraminx, Skewb, Square-1, 2×2), each with its own color palette feeding the 3D render. Open the file in any browser — no build step needed.