Luxe — High-End Fashion E-Commerce Hero — hero section preview

📐 Hero section component (above the fold)⚡ React 18 + TypeScript + Vite + Tailwind CSS 3📄 ~~280 lines of code

Two-column layout with a cursor-reactive floating product card, Cormorant Garamond editorial typography, ivory/charcoal/gold palette, staggered fade-up animations, and an infinite scrolling marquee.

FontsCormorant Garamond (300, 400, italic) + Inter Tight (300, 400, 500)

PaletteIvory #F7F3EE · Charcoal #1C1B18 · Gold #B89A6A · Warm line #E2DDD6

E-commerce

Luxe — High-End Fashion E-Commerce Hero

A two-column fashion hero section with a floating product card that drifts and tilts as the cursor moves. Outputs a complete, ready-to-use React component — not a full website. Drop it into any project as your above-the-fold section.

ecommercefashionluxuryminimalpremiumhigh-end

Full prompt hidden — copy to use in your AI tool

3 free copies remaining

How to use

01
Copy the prompt
Click the button above to copy the full prompt to your clipboard.
02
Paste into your AI tool
Works in Claude, ChatGPT, Cursor, v0, Lovable, or Bolt.
03
Swap in your brand details
Replace the brand name, copy, and image URLs with your own.
04
Drop the code into your project
The output is a self-contained React component — paste it straight in.

What it generates

✓Sticky announcement bar + full navigation with mobile hamburger menu
✓Two-column hero: editorial image panel left (58%), copy + CTAs right (42%)
✓Cursor-reactive floating product card — lerp drift ±22px, 3D tilt ±4° on each axis
✓Staggered fade-up entrance animations on all copy elements (6 delays)
✓Primary + secondary CTA buttons with hover state transitions
✓Infinite scrolling editorial marquee strip below the hero
✓Fully responsive — single column stack on mobile with static image
✓Google Fonts loaded in index.html — no install required
✓prefers-reduced-motion respected throughout
✓ARIA labels, focus rings, and semantic HTML throughout

Best for

→Luxury fashion and womenswear brand launch pages
→High-end accessories, jewellery, and perfume stores
→Editorial-style seasonal collection drops
→Premium DTC e-commerce above-the-fold heroes
→Agency client deliverables in the fashion vertical

Not suitable for

✕Full multi-page websites (hero only)
✕Backend or database logic
✕Non-React frameworks (Vue, Svelte, etc.)

Works with

✓Claude (Sonnet, Opus)Best results
✓ChatGPT (GPT-4o)Excellent
✓CursorGreat for editing
✓v0 by VercelVisual preview
✓LovableFull-stack ready
✓BoltFast output

Licence

Commercial use included. Use in client projects, products, and paid work — no attribution required.

Common questions

Does this generate a full website?

No — this prompt generates a single hero section (the above-the-fold area). It includes the navigation, hero layout, and any supporting elements like a marquee or footer strip, but it is not a full multi-page site.

What do I need to run the output?

A React project with Tailwind CSS 3. The prompt uses React 18 + TypeScript + Vite + Tailwind CSS 3. No additional packages are required unless specified in the prompt.

Can I customise the brand, colours, and copy?

Yes — the prompt uses a demo brand as a concrete example. Simply swap in your own brand name, headline, body copy, image URLs, and colour values when prompted by your AI tool.

Will the output look exactly like the preview?

The preview shows one possible output. Different AI tools render prompts slightly differently, but the core layout, interaction, and structure will match. Claude and GPT-4o produce the closest results.

Can I use this for client work?

Yes. A commercial licence is included with every copy. You can use the output in client projects, paid products, and agencies without attribution.

What if the output has bugs?

Paste the error back into your AI tool and ask it to fix it — most issues resolve in one or two follow-up messages. You can also re-paste the original prompt to start fresh.