Build Your Small Business
Website with AI

You are a professional web designer helping a small business owner plan their website.

My business:
- Name: [your business name]
- Type: [e.g. plumbing, photography, coaching, bakery, consulting]
- Location: [city, state OR fully remote/online]
- Target customer: [who you help — e.g. homeowners, small businesses, new parents]
- Top 3 services or products: [list them]
- Unique selling point: [what makes you different]
- Tone I want: [e.g. professional, friendly, modern, rustic, luxury]
- One competitor site I like: [optional URL]

Using this information, create a complete website brief that includes:
1. A compelling homepage headline and subheadline
2. The 5-page site structure with a purpose statement for each page
3. Suggested color palette (hex codes) and font pairings
4. A list of sections for the homepage (e.g. hero, features, testimonials)
5. Three calls-to-action I should use throughout the site
6. SEO page title and meta description for the homepage

Format it as a structured document I can reference throughout the build.

I'm building a [5-page business website] for [business name]. 
The site will have: Homepage, About, Services, Contact pages, and a blog index.

Create the complete file and folder structure for this project as a static HTML/CSS/JS site.
Include:
- The folder tree (show it as a tree diagram)  
- What goes in each file (one sentence each)
- A base HTML template I can reuse for all pages that includes: 
  - Correct doctype and meta tags for SEO
  - Navigation with links to all 5 pages
  - A content placeholder area
  - Footer with copyright
  - Link to a shared styles.css and main.js

Color palette from my brief: [paste colors from Step 1]
Font: [paste font from Step 1]

Create a complete CSS design system (styles.css) for a small business website.

Brand:
- Primary color: [hex from brief]
- Secondary color: [hex from brief]
- Accent color: [hex from brief]
- Background: [dark/light — e.g. #0a0a0f or #ffffff]
- Font: [font name from Google Fonts]
- Tone: [professional/friendly/modern/etc]

Include CSS for these components:
1. CSS custom properties (variables) for all colors, fonts, spacing
2. CSS reset and base styles
3. Navigation bar (sticky, with mobile hamburger menu)
4. Hero section (full-width, centered text, CTA button)
5. Cards grid layout (3 columns, collapses to 1 on mobile)
6. Testimonial section
7. Contact form (full styling, focus states)
8. Buttons: primary (filled) and secondary (outlined)
9. Footer with 3-column grid
10. Mobile-first responsive breakpoints at 768px and 480px

Make it clean, modern, and fully responsive. Use CSS Grid and Flexbox. No frameworks — pure CSS only.

Build a complete homepage (index.html) for my small business website.

Business: [name, type, location]
Headline: [from your brief]
Subheadline: [from your brief]
Services (3): [from your brief]
Primary CTA: [e.g. "Get a Free Quote", "Book a Consultation"]
Testimonials: [write 2 fake placeholders I can replace with real ones]

The page must include these sections in this order:
1. Sticky navigation (links: Home, About, Services, Contact)
2. Hero section — big headline, subheadline, two CTA buttons
3. Trust bar — 4 stats or trust signals (e.g. "500+ clients", "10 years experience")
4. Services section — 3 cards with icon, title, and description
5. How it works — 3-step numbered process
6. Testimonials — 2 quote cards with name and title
7. Final CTA section — colored band with headline and button
8. Footer — 3 columns (About, Links, Contact) + copyright

Use the class names from my styles.css. Link to styles.css and main.js.
Output clean, semantic, accessible HTML. Include all section IDs for anchor links.
Add placeholder comments where I should replace content.

Create an about.html page for [business name].

Copy the header/nav and footer exactly from the homepage.
Between them, build these sections:
1. Page hero — "About [Name]" headline with a short brand statement
2. Our story — 2-3 paragraph narrative about the business (tone: [your tone])
   Key details: founded [year], focus on [specialty], mission is [mission]
3. Why choose us — 4 icon cards highlighting values (e.g. reliability, experience, local, guarantee)
4. Team section — 1 owner card with name, title, and bio placeholder
5. CTA — "Ready to work together?" with link to contact page

Match the same CSS class names and layout patterns as the homepage. Output full HTML.

Create a contact.html page for [business name] with a fully functional contact form.

Copy the header/nav and footer from the homepage.
Build these sections:
1. Page hero — "Get in Touch" with a short welcoming line
2. Two-column layout:
   Left: Contact form with fields: Name, Email, Phone (optional), Message, Submit button
   Right: Contact details block — Address, Phone, Email, Business hours
3. The form should use Formspree for submission — show placeholder action URL

Also generate the JavaScript (inline or in main.js) to:
- Validate the form before submission (required fields, valid email format)
- Show a success message after submission without page reload
- Show inline error messages in red below each invalid field

Output complete HTML with styled form matching the site design.

Review this homepage HTML for SEO completeness. Check:
1. Title tag — Is it under 60 characters and includes the primary keyword?
2. Meta description — Is it under 160 characters, compelling, and includes CTA?
3. H1 tag — Is there exactly one, and does it reflect the page's main purpose?
4. Image alt text — Are all images (if any) described?
5. Canonical tag — Is it present with the full URL?
6. Open Graph tags — Are og:title, og:description, og:image present?
7. Schema markup — Add LocalBusiness schema for a [business type] in [city, state]
8. Page speed — Flag anything that might slow the page down

[paste your homepage HTML here]

For any issues found, show me the corrected HTML snippet.