WEBSITE DESIGN JUMPSTART PROMPT LUXURY PRODUCT SALES PAGE Use this prompt as a jumping-off point, not a rigid template. You do NOT have to copy every section exactly. Rename sections, remove sections, reorder sections, combine sections, or only use the pieces you like. Adapt the design to your own product, brand, audience, pricing, tone, and visual identity. Anything inside [BRACKETS] is meant to be replaced with your own information. Do not invent real company names, real prices, real customer claims, certifications, guarantees, product materials, shipping policies, or personal details unless I explicitly provide them. If you use placeholder reviews while designing the page, make it clear they are placeholders and replace them before publishing. -------------------------------------------------- PROJECT BASICS -------------------------------------------------- Create a polished, high-end product sales page for: Brand name: [YOUR BRAND NAME] Product category: [CANDLES / SKINCARE / PERFUME / CLOTHING / ACCESSORIES / FOOD / HOME GOODS / OTHER] Main product or collection name: [YOUR PRODUCT OR COLLECTION NAME] What you are selling: [DESCRIBE THE PRODUCT] Who it is for: [DESCRIBE YOUR IDEAL CUSTOMER] Main goal of the page: [SELL PRODUCTS / LAUNCH A COLLECTION / FEATURE A HERO PRODUCT / PROMOTE A BUNDLE / OTHER] Primary call to action: [SHOP THE COLLECTION / BUY NOW / ADD TO CART / SHOP THE DROP / OTHER] Secondary call to action: [VIEW PRODUCTS / COMPARE OPTIONS / SEE DETAILS / OTHER] Home page URL: [YOUR HOME PAGE URL] Example: /web-design.html -------------------------------------------------- IMPORTANT CREATIVE DIRECTION -------------------------------------------------- Treat this as a real, finished sales page. Do not describe it as: - a mockup - a demo - a sample - a fake store - a concept page - an AI-generated website Do not add explanatory text telling visitors how the site was made. Do not copy every section mechanically. Use the structure and visual language as inspiration, then customize it for the product. The finished site should feel: - premium - intentional - editorial - product-focused - visually rich - easy to scan - modern without looking like a generic ecommerce template The page should feel like a luxury campaign landing page first and a product catalog second. Avoid: - generic Shopify-looking grids - crowded navigation - too many badges - huge blocks of text - generic inspirational quotes - excessive gradients - cheap-looking neon - overuse of glassmorphism - constant animation - giant empty sections with no purpose - repeated sales copy - text sitting on top of important product imagery - decorative elements that interfere with readability -------------------------------------------------- OVERALL VISUAL STYLE -------------------------------------------------- Use a dark luxury visual direction. Suggested base style: Main background: [YOUR MAIN BACKGROUND COLOR] Example: #070707 Secondary background: [YOUR SECONDARY DARK COLOR] Example: #111111 Light neutral: [YOUR CREAM / PAPER COLOR] Example: #efe7dc Primary metallic accent: [YOUR GOLD / BRONZE / SILVER / ROSE GOLD COLOR] Example: #caa26c Secondary accent: [YOUR SECOND ACCENT COLOR] Primary text: [YOUR MAIN TEXT COLOR] Muted text: [YOUR MUTED TEXT COLOR] Border style: thin low-opacity borders Corner style: large rounded corners Use: - deep black or charcoal backgrounds - warm cream text - restrained metallic accents - soft radial glows - polished product lighting - thin translucent borders - soft shadows - elegant rounded panels - generous but controlled spacing - strong visual hierarchy - subtle hover movement The design should look expensive without needing a large number of decorative elements. -------------------------------------------------- TYPOGRAPHY -------------------------------------------------- Body font: [YOUR BODY FONT] Display / heading font: [YOUR DISPLAY FONT] Suggested pairing: DM Sans for body copy Italiana for large display headings Heading style: - elegant - editorial - high contrast - large but readable - minimal - visually confident Body copy: - clean - modern - easy to scan - not too small - comfortable line height Small labels: - uppercase - slightly letterspaced - used sparingly Do not use more than two primary font families unless there is a strong reason. -------------------------------------------------- IMAGE DIRECTION -------------------------------------------------- Use high-quality product images. Preferred product image format: transparent PNG Hero product image: [YOUR HERO PRODUCT IMAGE PATH] Product 1 image: [YOUR PRODUCT 1 IMAGE PATH] Product 2 image: [YOUR PRODUCT 2 IMAGE PATH] Product 3 image: [YOUR PRODUCT 3 IMAGE PATH] Example image paths: /assets/images/product-one.png /assets/images/product-two.png /assets/images/product-three.png Product images should: - have clean edges - be large enough to feel premium - sit on dark backgrounds cleanly - use subtle drop shadows - never be covered by text or buttons - remain readable on mobile - maintain correct aspect ratio - not be stretched If transparent product images are not available, use clean studio product photography with a consistent background style. -------------------------------------------------- 1. TOP NAVIGATION -------------------------------------------------- Create a clean horizontal navigation bar. Left side: [YOUR BRAND NAME] Navigation links: Home [COLLECTION LINK] [WHY IT WORKS / BENEFITS LINK] [OPTIONAL EXTRA LINK] Primary navigation CTA: [SHOP THE DROP / SHOP NOW / BUY NOW] Home link URL: [YOUR HOME PAGE URL] Keep the navigation: - simple - compact - easy to scan - slightly translucent or dark - sticky if it improves usability The brand name should have a refined display-font treatment. Do not overload the navigation with too many links. -------------------------------------------------- 2. SPLIT HERO SECTION -------------------------------------------------- Create a large premium split hero section. Desktop layout: two columns Left side: brand story and CTA Right side: large product presentation The hero should sit inside a large rounded dark panel with subtle metallic glow. LEFT SIDE CONTENT Eyebrow: [SHORT BRAND OR PRODUCT LABEL] Main headline: [YOUR MAIN HEADLINE] Optional italic or differently colored word: [WORD OR PHRASE TO ACCENT] Supporting copy: [SHORT DESCRIPTION OF THE PRODUCT OR COLLECTION] Use approximately 2 to 4 short lines. Optional quote or punchy line: [SHORT MEMORABLE BRAND LINE] Example structure: “Your old [PRODUCT] is about to feel replaceable.” Product details line: [HANDMADE / MATERIALS / BURN TIME / SIZE / SHIPPING / OTHER SHORT DETAILS] Primary CTA: [SEE THE COLLECTION] Secondary CTA: [SHOP THE SET] RIGHT SIDE PRODUCT PRESENTATION Show one hero product image prominently. Hero product name: [YOUR HERO PRODUCT NAME] Add up to three small product or category descriptor pills around the product area. Pill 1: [PRODUCT OR CATEGORY NAME] · [SHORT DESCRIPTION] Pill 2: [PRODUCT OR CATEGORY NAME] · [SHORT DESCRIPTION] Pill 3: [PRODUCT OR CATEGORY NAME] · [SHORT DESCRIPTION] IMPORTANT: The pills must NOT cover the product image. Place them in dedicated rows or outside the main image area. The product should remain fully visible. -------------------------------------------------- 3. HERO PRODUCT HOVER MOTION -------------------------------------------------- Add subtle motion to the hero product image. Do NOT make it bounce. On hover: - lift slightly upward - move a few pixels horizontally - rotate by about 1 degree - scale very slightly - deepen the drop shadow Keep the motion smooth and slow enough to feel premium. Suggested movement: translateY(-6px to -10px) translateX(3px to 6px) rotate(1deg) scale(1.01 to 1.03) Do not: - spin the product - continuously animate it - make it jump - make it wobble aggressively - move it so far that it overlaps nearby content -------------------------------------------------- 4. PRODUCT COLLECTION SECTION -------------------------------------------------- Create a product collection section directly beneath the hero. Section title: [YOUR COLLECTION SECTION TITLE] Example: The candle lineup. Section description: [SHORT COLLECTION INTRODUCTION] Use a three-column grid on desktop if there are three products. For each product card include: PRODUCT 1 Label: [01 · PRODUCT TYPE OR TAGLINE] Product image: [PRODUCT 1 IMAGE PATH] Product name: [PRODUCT 1 NAME] Short descriptor: [PRODUCT 1 SHORT DESCRIPTOR] Description: [PRODUCT 1 DESCRIPTION] Detail label 1: [TOP / MATERIAL / FEATURE / SIZE / OTHER] Detail value 1: [VALUE] Detail label 2: [HEART / MATERIAL / FEATURE / SIZE / OTHER] Detail value 2: [VALUE] Detail label 3: [BASE / MATERIAL / FEATURE / SIZE / OTHER] Detail value 3: [VALUE] Price: [PRODUCT 1 PRICE] CTA: [SHOP PRODUCT 1] PRODUCT 2 Label: [02 · PRODUCT TYPE OR TAGLINE] Product image: [PRODUCT 2 IMAGE PATH] Product name: [PRODUCT 2 NAME] Short descriptor: [PRODUCT 2 SHORT DESCRIPTOR] Description: [PRODUCT 2 DESCRIPTION] Detail label 1: [DETAIL LABEL] Detail value 1: [VALUE] Detail label 2: [DETAIL LABEL] Detail value 2: [VALUE] Detail label 3: [DETAIL LABEL] Detail value 3: [VALUE] Price: [PRODUCT 2 PRICE] CTA: [SHOP PRODUCT 2] PRODUCT 3 Label: [03 · PRODUCT TYPE OR TAGLINE] Product image: [PRODUCT 3 IMAGE PATH] Product name: [PRODUCT 3 NAME] Short descriptor: [PRODUCT 3 SHORT DESCRIPTOR] Description: [PRODUCT 3 DESCRIPTION] Detail label 1: [DETAIL LABEL] Detail value 1: [VALUE] Detail label 2: [DETAIL LABEL] Detail value 2: [VALUE] Detail label 3: [DETAIL LABEL] Detail value 3: [VALUE] Price: [PRODUCT 3 PRICE] CTA: [SHOP PRODUCT 3] PRODUCT CARD STYLE Each product card should: - use a dark panel - have a subtle border - have large rounded corners - keep the image visually prominent - leave enough breathing room around the product - use a clean hierarchy - include concise copy The product images may use a slightly more playful hover effect than the hero image. For example: - small lift - soft bounce - subtle scale - stronger shadow Do not make product-card motion distracting. -------------------------------------------------- 5. PRODUCT DETAIL ROWS -------------------------------------------------- Inside each product card, use simple detail rows. Each row should contain: Left: small muted uppercase label Right: product-specific value Examples: Top / Cardamom Heart / Black Cedar Base / Burnt Vanilla + Amber For non-fragrance products, replace these with relevant details such as: Material / [VALUE] Size / [VALUE] Finish / [VALUE] or Benefit / [VALUE] Texture / [VALUE] Best For / [VALUE] The detail system should adapt to the product category. -------------------------------------------------- 6. WHY IT WINS SECTION -------------------------------------------------- Create a three-card benefit section. Section title: [WHY IT WINS / WHY PEOPLE WANT IT / WHAT MAKES IT DIFFERENT / OTHER] Supporting copy: [SHORT INTRODUCTION] Benefit card 1: Number: 01 Title: [BENEFIT 1 TITLE] Copy: [BENEFIT 1 DESCRIPTION] Benefit card 2: Number: 02 Title: [BENEFIT 2 TITLE] Copy: [BENEFIT 2 DESCRIPTION] Benefit card 3: Number: 03 Title: [BENEFIT 3 TITLE] Copy: [BENEFIT 3 DESCRIPTION] Keep these cards short. Do not repeat the same product descriptions from the collection grid. Use this section to explain: - quality - design - ingredients - materials - experience - usability - craftsmanship - differentiation - collection variety - other meaningful selling points -------------------------------------------------- 7. BUNDLE / COLLECTION CTA -------------------------------------------------- Create a large bundle or collection CTA section. Desktop layout: two columns LEFT SIDE: show multiple product images together Use: [PRODUCT 1 IMAGE] [PRODUCT 2 IMAGE] [PRODUCT 3 IMAGE] Arrange them with slight vertical offsets so the group feels dimensional. Do not overlap them so heavily that labels become unreadable. Optional hover: each product may lift slightly when hovered. RIGHT SIDE: Eyebrow: [SHOP THE DROP / COMPLETE THE SET / THE COLLECTION / OTHER] Headline: [YOUR BUNDLE HEADLINE] Example: Get the whole trio. Supporting copy: [SHORT BUNDLE SALES COPY] Bundle item 1: [PRODUCT 1 NAME] — [SHORT DESCRIPTION] Bundle item 2: [PRODUCT 2 NAME] — [SHORT DESCRIPTION] Bundle item 3: [PRODUCT 3 NAME] — [SHORT DESCRIPTION] Original bundle price: [OPTIONAL ORIGINAL PRICE] Bundle price: [YOUR BUNDLE PRICE] Primary CTA: [ADD SET TO CART / SHOP THE SET] Secondary CTA: [COMPARE PRODUCTS / VIEW COLLECTION] Optional note: [LIMITED COLLECTION / FREE SHIPPING / SMALL BATCH / OTHER] Do not invent real discounts unless I provide them. -------------------------------------------------- 8. CUSTOMER REVIEW SECTION -------------------------------------------------- Create a stylish review section near the bottom of the page. Section title: [YOUR REVIEW SECTION TITLE] Suggested tone: short, memorable, personality-driven Section intro: [SHORT REVIEW INTRO] Use three or four review cards. Each review card should include: Rating or score: [5.0 / 5 STARS / OTHER] Product: [PRODUCT NAME] Review quote: [REVIEW TEXT] Reviewer: [NAME] Optional location: [LOCATION] Optional verification: [VERIFIED BUYER / CUSTOMER / OTHER] IMPORTANT: If real customer reviews have not been provided, use clearly labeled placeholder reviews during design. Do not present invented reviews as real testimonials on a live website. For mockups or concept pages, you may label them as: Placeholder review Sample review Fictional review Imaginary buyer Review card design: - dark - elegant - subtle border - large editorial quote - small metadata line - not overly tall -------------------------------------------------- 9. SMALL GET-THE-PROMPT SECTION -------------------------------------------------- Add a small prompt-download section directly before the footer. This should be noticeably smaller than the main page sections. Do not turn it into another giant hero. Eyebrow: Like this layout? Headline: Get the prompt for this page. Supporting copy: Use it as a jumping-off point, then change the sections, colors, products, copy, and personality until it is yours. Download button: Download the Starter Prompt Download path: [YOUR PROMPT FILE PATH] Example: /assets/prompts/sale-page.txt The button should use the HTML download attribute when appropriate. Keep this section: - compact - clean - subtle - visually connected to the rest of the site -------------------------------------------------- 10. FOOTER -------------------------------------------------- Keep the footer very small. Brand: [YOUR BRAND NAME] Footer line: [YOUR SHORT FOOTER MESSAGE] Optional links: [HOME] [CONTACT] [ABOUT] [OTHER] Do not build a giant multi-column footer unless the project actually needs one. -------------------------------------------------- 11. HOME LINK -------------------------------------------------- Include a clear Home link somewhere in the page navigation. Home URL: [YOUR HOME PAGE URL] Example: /web-design.html Do not use a dead link. -------------------------------------------------- FUNCTIONAL REQUIREMENTS -------------------------------------------------- Build the page with: HTML CSS Vanilla JavaScript only if interaction is needed Do not require a framework unless I specifically ask for one. All visible links and buttons should have intentional destinations or clearly marked placeholders. Use semantic HTML where reasonable. Product images: - maintain aspect ratio - never stretch - use descriptive alt text - remain visible on mobile Buttons: - have hover states - have focus states - remain readable - remain easy to tap on mobile If the page uses anchor navigation: - enable smooth scrolling - ensure section IDs match the links If the prompt download is included: - point the link to the correct file - use the download attribute if appropriate -------------------------------------------------- RESPONSIVE BEHAVIOR -------------------------------------------------- DESKTOP Hero: two columns Collection: three columns Benefits: three columns Reviews: four columns if space allows Bundle: two columns Prompt CTA: copy on left, button on right TABLET Hero: stack into one column if needed Collection: one or two columns depending on space Benefits: one or two columns Reviews: two columns Bundle: stack into one column Prompt CTA: stack if the button becomes crowded MOBILE Use one column. Requirements: - no horizontal scrolling - no clipped text - no product image cutoffs - no floating pills covering the product - stack hero scent/product pills cleanly - keep product images large enough to appreciate - keep buttons easy to tap - reduce oversized heading text - preserve section hierarchy - keep rounded panels from becoming too cramped - use reasonable side padding - make the prompt download button full-width if helpful -------------------------------------------------- MOTION AND HOVER RULES -------------------------------------------------- Use hover motion intentionally. HERO PRODUCT: subtle only PRODUCT CARDS: slightly more playful is acceptable BUNDLE IMAGES: small lift only BUTTONS: small upward movement or background shift Do not use: - constant bouncing - continuous spinning - large rotations - autoplay product movement - excessive parallax - motion that makes text hard to read Respect prefers-reduced-motion when possible. -------------------------------------------------- ACCESSIBILITY AND USABILITY -------------------------------------------------- Make sure: - contrast is readable - text is not placed over busy product imagery without protection - interactive elements have visible focus states - buttons are large enough to tap - links are distinguishable - images have alt text - heading order makes sense - mobile layout remains usable - decorative motion does not prevent interaction -------------------------------------------------- CONTENT QUALITY RULES -------------------------------------------------- Write product copy that feels specific. Avoid generic phrases such as: - elevate your lifestyle - unlock your potential - experience the difference - where luxury meets innovation - redefine your everyday Instead, write copy around: - the actual product - its mood - its materials - its scent - its texture - its use - the buyer experience - the specific reason someone would want it Use personality if the brand supports it. Do not fill every open space with text. Let the product images do some of the selling. -------------------------------------------------- DESIGN QUALITY CHECK -------------------------------------------------- Before finishing, check: - Is the hero product completely visible? - Are the descriptor pills outside the product image? - Does the hero product move subtly rather than bounce? - Are all three products visually distinct? - Are product-card layouts consistent? - Are prices and CTAs aligned? - Are benefit cards concise? - Does the bundle section feel like a real sales opportunity? - Are placeholder reviews clearly identified if they are not real? - Is the prompt CTA small and unobtrusive? - Does the Home link work? - Does the prompt download path work? - Is mobile free of horizontal overflow? - Are buttons easy to tap? - Are fonts readable? - Are shadows and glows restrained? - Does the page feel premium rather than generic? - Does each section have a clear purpose? -------------------------------------------------- OPTIONAL EXAMPLE STRUCTURE -------------------------------------------------- You may use this section order: 1. Navigation 2. Split luxury hero 3. Three-product collection 4. Why It Wins 5. Bundle / Trio CTA 6. Customer Reviews 7. Small Get-the-Prompt CTA 8. Footer But remember: This is only a jumping-off point. Change anything that needs changing. Rename sections. Remove sections. Reorder sections. Add sections that fit the product. Use fewer products. Use more products. Change the visual style. Change the hover behavior. Change the tone. The goal is not to reproduce one website exactly. The goal is to create an original, polished product sales page using this structure as a strong starting point.