8.4TEMPLATE

Small Business Website (one-shot)

# Small Business Website Spec

## Project

A static marketing website for [BUSINESS NAME], a [BUSINESS TYPE]
business serving [SERVICE AREA].

## Pages

1. Home (`/`)
   - Hero section with company name, tagline, and primary CTA
     ("Request an Estimate" or "Book Now").
   - 3 service cards highlighting top services with icons and short
     descriptions.
   - "About" section with one paragraph and a photo placeholder.
   - "Reviews" section with 3 placeholder testimonials.
   - Contact strip in footer with phone, email, hours.

2. Services (`/services`)
   - List of all services offered with descriptions and pricing
     ranges (placeholder text).

3. About (`/about`)
   - Company history paragraph (placeholder).
   - Team grid (placeholder photos and bios).

4. Contact (`/contact`)
   - Contact form (name, email, phone, message).
   - Embedded map (placeholder).
   - Hours and contact info.

## Design

Follow `design-tokens.md`. If absent:
- Primary color: #2563eb
- Heading font: Inter
- Body font: Inter
- Border radius: 8px
- Modern, clean, mobile-first.

## Stack

- Static HTML, CSS, JavaScript.
- Tailwind CSS (CDN is fine for this project).
- No build step required.
- Deployable to GitHub Pages, Netlify, or any static host.

## Forms

- Contact form posts to a placeholder endpoint (`/api/contact`).
- Email validation on submit.
- Show success message after submission.
- Form submissions in this MVP go to a Formspree or Basin endpoint
  (placeholder URL).

## Out of Scope

- Authentication.
- Database.
- Payment processing.
- Backend code (forms via third-party service only).

## Files to Generate

- `index.html`, `services.html`, `about.html`, `contact.html`.
- `styles.css` (custom styles beyond Tailwind).
- `script.js` (form handling, mobile menu).
- `README.md` with deployment instructions.

## Verification Checklist

- [ ] All 4 pages render without errors.
- [ ] Mobile menu opens and closes.
- [ ] Contact form validates email.
- [ ] All internal links work.
- [ ] Site looks correct on a 375px-wide viewport.
- [ ] Site looks correct on a 1440px-wide viewport.

Curriculum last updated 2026-04-30