Build a free website with one AI tool.

I want you to build me a complete, production-ready website.

==========
FILL IN THESE 4 FIELDS BEFORE RUNNING THE PROMPT
==========

1. Business / Industry: [INDUSTRY_OR_BUSINESS_TYPE]
(Example: "service-based business, chiropractic clinic in Miami" or "SaaS product for marketing agencies" or "coaching business for female founders" or "local business, boutique fitness studio")

2. Primary goal of this website: [PRIMARY_GOAL]
(Example: "book discovery calls" or "capture email signups for a waitlist" or "generate enquiry form submissions" or "drive applications to a coaching program" or "sell a single offer through a Stripe checkout")

3. Site structure: [SITE_STRUCTURE]
(Example: "single-page landing page" or "multi-page website with Home, About, Services, Case Studies, and Contact pages" or "single-page with anchor-linked sections")

4. Design style (pick ONE from the list below): [DESIGN_STYLE]

   OPTION A — EDITORIAL PREMIUM
   Best for: law firms, financial services, coaching, luxury services, dental, med spa, wellness, real estate, professional services
   Look: serif headlines, generous whitespace, cream/ivory or off-white backgrounds, magazine-style layout, soft shadows

   OPTION B — MODERN MINIMAL TECH
   Best for: SaaS, fintech, dev tools, B2B software, AI products
   Look: geometric sans-serif, monochrome with one bold accent, clean grids, subtle motion, plenty of whitespace

   OPTION C — BOLD DARK MODE
   Best for: agencies, courses, info products, fitness, high-ticket coaching, crypto, anything aiming for "premium" or "exclusive" feel
   Look: deep near-black backgrounds (never pure black), bright accent colours, glow effects, heavy contrast, atmospheric depth

   OPTION D — WARM LIFESTYLE
   Best for: lifestyle brands, food, fashion, wellness, women-focused coaching, family businesses, hospitality, beauty
   Look: earthy tones (terracotta, cream, sage, warm white), serif and sans mix, lifestyle photography-led, soft natural shadows

   OPTION E — VIBRANT MODERN
   Best for: e-commerce, consumer brands, creative services, kids and family services, modern healthcare, education
   Look: light backgrounds with bold colour blocks, playful but professional, modern sans-serif, illustrated or photographic accents

==========
PHASE 1: RESEARCH
==========
Before building anything, research the following:

1. The top 5 competitor websites in this industry. Identify their layout patterns, messaging hierarchy, calls-to-action, visual style, and what makes them convert (or fail to convert).
2. The target audience for this business: their pain points, desires, objections, and the language they use to describe their problems.
3. Conversion best practices specific to this industry and the stated primary goal.
4. Current design trends that fit this business type (without copying, use this as inspiration for an original design).

Save your research findings as a markdown file before moving to Phase 2.

==========
PHASE 2: STRATEGY & COPY
==========
Based on your research, write all the copy for the site BEFORE designing:

- A hero headline that speaks directly to the audience's biggest pain point or desire (under 12 words, never wraps to more than 2 to 3 lines on desktop)
- A supporting subheadline that clarifies the offer and outcome (1 to 2 sentences max)
- A single, clear primary call-to-action aligned with the stated goal
- Body copy for each section, written at a grade 6 to 8 reading level
- An FAQ section addressing the top 5 to 7 objections this audience would have
- Social proof placeholders (testimonials, logos, results) that I can fill in later, using realistic dummy content I can swap out

Tone: direct, benefit-driven, no fluff, no jargon, no over-promising. Write like a human, not a marketing brochure.

Section eyebrow labels must be emotional and page-specific, never generic category labels like "OUR FEATURES" or "THE PROBLEM".

Button copy must always fit on 1 line. If it doesn't fit, rewrite shorter.

No marketing-speak ("game-changing", "stunning", "amazing"). No meta-self-referential copy ("Crafting Stunning Websites").

==========
PHASE 3: DESIGN & BUILD
==========

STEP 1: APPLY THE DESIGN STYLE SELECTED IN FIELD 4

Use the specific style rules below based on which option was picked. Do not deviate. Do not pick generic defaults.

>>> IF OPTION A (EDITORIAL PREMIUM) WAS SELECTED:
- Headline font: Tiempos Headline OR Editorial New OR Canela (pick one and use consistently)
- Body font: Söhne OR Inter Display (pick one)
- Background palette: cream (#F8F5F0), ivory (#FAF7F2), or warm off-white (#F5F2EC) as primary; charcoal (#2A2A2A) for text; one brand accent
- Atmospheric treatment: subtle paper-grain texture overlay at 3-5% opacity, soft drop shadows on cards, italic accent on ONE word in the hero headline
- Layout: generous padding (128px desktop section padding), magazine-style asymmetric layouts, never centered-everything
- Imagery treatment: photos with soft warm filter, rounded corners (16px), subtle vignette

>>> IF OPTION B (MODERN MINIMAL TECH) WAS SELECTED:
- Headline font: Geist OR PP Neue Montreal OR Aeonik
- Body font: same as headline at lighter weight, or pair with Inter Display
- Background palette: pure white (#FFFFFF) and near-black (#0A0A0A) as primary; one vivid accent (electric blue #2D5BFF, or violet #7C3AED, or lime #84CC16). Never default Bootstrap blue (#2563EB).
- Atmospheric treatment: subtle dot-grid background pattern on alternating sections, soft glow under primary CTAs, thin 1px borders on cards
- Layout: precise 12-column grid, generous whitespace, geometric alignment
- Imagery treatment: high-contrast product/UI mockups, isometric or 3D renders where relevant

>>> IF OPTION C (BOLD DARK MODE) WAS SELECTED:
- Headline font: PP Neue Montreal OR Aeonik OR Söhne (semi-bold)
- Body font: same family at regular/light weight
- Background palette: deep charcoal (#0F0F12) as primary, never pure black; one bright accent (electric green #00FF88, or cyan #00E5FF, or amber #FFB800); white text at 90% opacity
- Atmospheric treatment: radial gradient mesh with off-centre light source on hero, subtle noise texture at 4% opacity across all sections, glowing borders on featured cards, animated gradient on primary CTAs
- Layout: full-bleed hero with overlaid content, layered floating cards that bleed across section boundaries
- Imagery treatment: high-contrast photography with deep shadows, or composited UI mockups with brand glow

>>> IF OPTION D (WARM LIFESTYLE) WAS SELECTED:
- Headline font: Recoleta OR Canela OR GT Sectra (with italic accent on one word)
- Body font: General Sans OR Switzer
- Background palette: warm cream (#FAF3E7), terracotta accent (#C97B5A), sage (#7A8C6F), or dusty rose (#D4A5A5); deep brown (#3D2E22) for text
- Atmospheric treatment: organic paper or linen texture overlay at 4% opacity, hand-drawn underline accent on ONE hero word, soft natural shadows (no harsh edges)
- Layout: asymmetric, editorial, with imagery breaking out of grid containers
- Imagery treatment: warm-toned lifestyle photography, never clinical or corporate; soft natural light; people in candid moments

>>> IF OPTION E (VIBRANT MODERN) WAS SELECTED:
- Headline font: General Sans OR Switzer OR Satoshi (semi-bold)
- Body font: same family at regular weight
- Background palette: white or very light tinted backgrounds (#F9F9F7), with bold colour blocks in 2 brand colours (pick from: coral #FF6B6B, teal #4ECDC4, butter yellow #FFD93D, lavender #B5A8FF, mint #95E1D3); dark navy or charcoal for text
- Atmospheric treatment: bold colour-block sections that alternate, soft pastel gradient backgrounds on selected sections, playful hand-drawn accent lines or doodles where appropriate
- Layout: dynamic, slightly asymmetric, with overlapping shapes and bold geometric accents
- Imagery treatment: bright photography with high colour saturation, or vibrant custom illustrations

STEP 2: APPLY UNIVERSAL DESIGN RULES (ALL STYLES)

Layout & responsiveness:
- Mobile-first responsive layout (must look excellent on phone, tablet, and desktop)
- Fast loading (under 2 seconds)
- Clear visual hierarchy that guides the visitor toward the primary goal
- One primary CTA repeated strategically throughout the page(s)
- Accessible (WCAG 2.1 AA compliant: proper contrast, alt text, semantic HTML)
- Generous section padding: 96 to 128px desktop, 64px mobile

Typography rules:
- Headlines 2 to 3 lines max on desktop, never 4+
- Headlines must be 2 to 3 times larger than subheadlines
- Headline weight: medium or semi-bold (not heavy/black unless the style explicitly requires it)
- Line-height must accommodate full descenders and ascenders. Letters like g, j, p, q, y must show their full descender. If using gradient text or any masked text effect, add 10 to 15% top/bottom padding to prevent clipping.
- Body copy: 16 to 18px desktop, 1.5 to 1.7 line-height, 65 to 75 characters per line max
- BANNED FONTS (never use): Montserrat, Poppins, Roboto, Open Sans, Lato, Barlow, Oswald, default Tailwind sans

Header & navigation:
- Default to a non-sticky header that scrolls away with the page for an editorial, premium feel
- For local service businesses, booking-driven sites, or e-commerce, use a scroll-aware header that hides on scroll-down and reappears on scroll-up
- Max height 72 to 80px desktop, 56 to 64px mobile
- High-contrast nav text (WCAG AA minimum)

Logo:
- Logo must combine an icon/symbol with a wordmark
- Never use a single letter inside a circle/box/square as the logo
- Design a simple custom mark that fits the chosen style. The user can replace it later with their real logo.

Buttons:
- Every button is 1 line of text, never wraps. Rewrite shorter if it wraps.
- Consistent corner radius across the page
- Primary CTAs get the atmospheric treatment specified in the chosen style
- Hover state on every interactive element

Icons & section markers:
- Never use bracketed numbers ([01], [02], [03]) as section or card markers
- Use custom premium icons matched to each card's specific content (icon style: line-based or duotone, consistent stroke width, tinted in the brand accent colour)
- Every card must have a UNIQUE icon. Never repeat the same icon for two different services or features.
- Recommended icon libraries: Phosphor, Lucide, Tabler, Iconoir. Customise the colour and stroke to match the chosen style.

STEP 3: MANDATORY VISUAL RICHNESS (no exceptions)

These rules override anything else if there's a conflict. They exist because text-and-icon-only sites feel boring and template-y.

- The HERO must contain a richly composed visual scene generated via Design View that reflects the business. A flat solid gradient background with only text is not acceptable.
- At LEAST 3 sections of the site must contain photographic or richly designed visuals (not just text and icons). A site with only text + icons + cards in white boxes fails the quality bar.
- Service/feature cards must be visually differentiated from their section background (use the style-specific treatment from Step 1: warm shadows for Editorial, thin borders for Tech, glowing borders for Dark Mode, soft natural shadows for Lifestyle, colour-block backgrounds for Vibrant). Never white cards on white backgrounds.
- The stats/numbers section (if used) must be a DESIGN MOMENT, not three identical boxes in a row. Use oversized type, overlapping elements, accompanying photography, or a layered composition.
- Every section background must have visible texture, depth, or a layered element matching the chosen style. Flat solid single-colour backgrounds are forbidden, including flat gradients without overlay treatment.
- Include at least one BENTO GRID section where appropriate. The bento grid must tessellate fully: no gaps, no empty cells, no orphan space. Every cell of the underlying grid must be filled.
- Maximum 4 columns in any grid. For 5+ items, use 2 rows or a horizontal slider.

STEP 4: IMAGERY GENERATION (MANDATORY)

Use Design View to generate all imagery for the initial build. Imagery must be:

- Photographic and realistic, matching the actual nature of the business (e.g., real-looking clinic interiors for a dental practice, real-looking restaurant scenes for a food business, real-looking team environments for a consulting firm). Never abstract, stylised, illustrative, or cartoon imagery unless the chosen style explicitly calls for it (Option E may use vibrant illustrations).
- Consistent in style, lighting, colour grading, and tone across the entire site. All photos should feel like they came from the same photo shoot.
- Generate at minimum: 1 hero visual, 1 about/team visual, 1 supporting service or feature visual, 1 closing CTA visual.
- Any element showing a person must use either a realistic AI-generated face matching the person's name and role, or a 5-star rating display. Never use gradient circles, colored circle placeholders, geometric shapes, or letter initials inside circles as avatars.
- Never use stock vector cartoons or generic clipart.

Treat all generated imagery as placeholder content that the user will replace with their own real photos later (see Phase 5).

STEP 5: MOTION

- Number counters animate up on scroll-into-view
- Logo strips use a looping horizontal marquee
- Feature sections fade-and-slide on scroll
- Subtle hover states everywhere

STEP 6: TECHNICAL FEATURES

- Built-in SEO: proper meta tags, semantic HTML structure, structured data, SEO-friendly URLs
- Built-in analytics so I can track visitors and conversions
- If the primary goal involves a form (lead capture, enquiries, applications), build a working form that saves submissions to a database I can access
- If the primary goal involves selling a single offer, integrate a Stripe Sandbox checkout flow for that one offer so I can test it before connecting my real Stripe account (do not build a multi-product store, product catalogue, or inventory system)

==========
PHASE 4: REVIEW & DELIVERY
==========
When the site is built:

1. Deploy it to a live Manus URL so I can preview it immediately
2. Give me a short summary of design decisions and why you made them (which style was applied, font choice, color story, hero treatment, section layout logic)
3. List 3 to 5 specific things I should test or review before going live
4. Suggest 3 A/B test ideas I could run after launch to improve conversions
5. Remind me that I can now upload my own images one at a time (see Phase 5) to replace any generated imagery with real photos

Before delivery, run this final check:
- The chosen design style from Field 4 has been applied throughout (correct fonts, palette, atmospheric treatment)
- No placeholder text, no lorem ipsum, no "LOGO HERE", no {{merge tags}}
- No headlines wrapping past 3 lines
- No buttons wrapping past 1 line
- No bracketed numbers as section markers
- No clipped letters in any headline
- No duplicate icons for different services or features
- Hero contains a richly composed generated visual, not just a flat gradient
- At least 3 sections contain photographic or richly designed visuals
- All generated imagery is photographic and realistic (matching the business), consistent across the site
- Stats section is a design moment, not three identical boxes
- Bento grid (where used) tessellates with zero gaps
- All person elements use realistic AI faces or star ratings (no gradient circles)
- No banned fonts used
- Default Bootstrap blue is not used

==========
PHASE 5: IMAGE SWAP WORKFLOW (AFTER INITIAL BUILD)
==========

After the initial build is complete and deployed, I will upload my real images into the chat one at a time. When I upload an image, you should:

1. Confirm what the image is (ask me if it's not obvious from my description)
2. Ask me where I want it placed on the site (or use my description if I provide one), e.g., "replace the hero image," "use as the team photo on the About section," "add to the gallery"
3. Replace the relevant generated placeholder image with my uploaded image, keeping the same dimensions, treatment (rounded corners, vignette, etc.), and placement
4. Redeploy the updated site so I can see the change
5. Wait for my next image upload and repeat

Common images I may upload over time:
- My real logo (replace the generated mark in the header and footer)
- Team or founder photos (replace the generated about/team imagery)
- Real photos of my physical location, office, or storefront
- Real product or service photos
- Before-and-after results or case study visuals
- Behind-the-scenes shots

Do not ask me to upload all images upfront. The workflow is intentionally one image at a time so I can review each change as it happens.

==========
AUTONOMY
==========
Use your judgment on layout details, copy specifics, and how to bring the chosen style to life, but justify your choices briefly in your final summary. Do not ask me clarifying questions mid-build. If something is genuinely ambiguous, make a strong default choice and flag it in your summary so I can adjust afterwards.

The chosen design style in Field 4 is non-negotiable. Apply it precisely. Do not substitute generic defaults.