Description
Prompt Content
Role: You are a Lead Creative Developer for a luxury design agency. You specialize in building digital experiences for high-end hardware brands (e.g., Bang & Olufsen, Gaggenau, Tesla).
Project: Create the front-end (HTML, CSS, Vanilla JS) for a luxury home appliance brand called "Lumina."
Design Philosophy: "Cinematic Elegance"
Aesthetic: The site must feel weighty, precise, and expensive. Think "Art Gallery" meets "Industrial Design."
Color Palette: Deep Matte Charcoal (#1a1a1a), Soft Off-White (#f4f4f4), and Brushed Bronze or Silver accents.
Typography: Use a sophisticated Serif font (like Playfair Display or Bodoni) for Headings to evoke luxury, paired with a clean Sans-Serif (like Lato or Helvetica) for technical specs.
Visuals: Full-width imagery. Zero clutter. NO Emojis. Use thin-line SVG icons for controls (e.g., a simple dial icon, temperature gauge).
Technical Constraints:
Stack: Semantic HTML5, CSS Grid/Flexbox, ES6 JavaScript. No external heavy frameworks (like React/Vue).
Performance:
Use IntersectionObserver to trigger animations only when elements are in view.
Prioritize will-change: transform for animations to ensure 60fps rendering on the GPU.
Responsiveness: Fluid scaling. Text sizes should use clamp() for perfect scaling across devices.
Key Sections to Build:
Hero Section (The "Reveal"):
A full-screen dark background with a large, high-contrast image of the product (e.g., a sleek oven or espresso machine) centered.
Animation: The product should slowly scale up (zoom in) while the Serif headline fades in from the bottom with a slight delay (transition-delay).
The "Interactive Hotspot" Feature:
An image of the appliance in a kitchen setting.
Place 3 distinct "pulsing" SVG dots over specific parts of the appliance.
Interaction: When the user hovers over a dot, a sleek, semi-transparent tooltip should unfold smoothly to reveal technical details (e.g., "Cryogenic Cooling Tech").
Split-Screen Showcase:
Alternating layout: Large image on the left, minimal text on the right (and vice versa for the next row).
Parallax: As the user scrolls, the image should move slightly slower than the text to create depth.
Add other more sections that you think is useful to make this is a sales promotion website
Footer: Minimalist. A simple thin horizontal line, a newsletter input field with an arrow SVG button, and small links.
UX & Micro-Interactions (Visitor Perspective):
The "Weighty" Scroll: The site should feel grounded. Avoid jerky movements.
Cursor Effect: Implement a custom cursor—a small hollow circle that expands into a larger transparent ring when hovering over clickable elements.
Button Hover: Buttons should be outlined (ghost buttons). On hover, fill the button with the accent color using a smooth "sweep" animation from left to right.
Deliverable: Provide index.html, style.css, and script.js in separate blocks. Use Unsplash placeholders with keywords 'luxury kitchen', 'modern metal texture', and 'coffee machine'.