PROJECTTEMPLATE

Small Business Website

Five pages, a contact form, a domain: the site a small business actually needs, specced completely enough for an agent to build it in an afternoon. Swap in your business name, your services, and your words, then hand the whole thing over. Spend your review time on how it looks on a phone, because that is where your customers are.

markdown

# 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.

Contribute an improvement →