Local business marketing starter (Next.js 15)

Production-ready single-page marketing template for local service businesses. Content, colors, and contact settings live in one TypeScript file so you can duplicate the repo per client and ship quickly.

Stack

• Next.js 15 (App Router)
• TypeScript (strict mode)
• Tailwind CSS v4
• Framer Motion (subtle scroll reveals)
• lucide-react (icons)
• ESLint + Prettier (with Tailwind class sorting)

Quick start

npm install
npm run dev

Open http://localhost:3000.

npm run build   # production build
npm run start   # run production server locally
npm run lint
npm run format

Customize a new client (one file)

Edit lib/site-config.ts only for typical client work:

Key	Purpose
companyName	Brand / logo text in navbar & footer
tagline	Site description (metadata + footer)
servicesIntro	Lead paragraph under the Services heading
heroHeadline, heroSubheadline	Hero messaging
phone, email, address, city	Contact + “Serving …” copy
primaryColor, accentColor	Brand colors (CSS variables)
nav	Navbar anchor links (labels + section ids)
ctas.quote, ctas.call	Primary button labels
aboutTitle, aboutBody	About / trust section intro
services	Service cards (title + description)
trustPoints	Four trust tiles (title, description, icon)
testimonials	Three quotes (author, optional role)
testimonialsSubheadline	Testimonials section subcopy
headings.*	Section titles
social	Footer social / directory links
contactFormAction	Formspree form URL (see below)
contactIntro, contactPhoneBlurb, contactForm.*	Contact column + form labels
footerTechLabel, footerTechHref	Small footer link (optional)

Formspree: create a form at formspree.io, copy the endpoint (for example https://formspree.io/f/abcxyz), and set contactFormAction to that value. The template includes a hidden _gotcha honeypot field compatible with Formspree’s spam filtering.

Resend (optional “Phase 2”): Formspree posts directly from the browser. Resend is usually used from a server route (for example app/api/contact/route.ts) so your API key never ships to the client. You would replace the static <form action> with a client fetch to your API route, validate input, then call resend.emails.send. Keep Formspree for fastest launches; move to Resend when you need custom logic, CRM hooks, or branded transactional mail.

Duplicate this template for a new project

1. Copy the folder or clone your golden template repo.
2. rm -rf node_modules .next (if copying a built tree).
3. Rename the project in package.json (name field) if you like.
4. npm install
5. Edit lib/site-config.ts for the new client.
6. git init (if not already a repo), commit, add a new remote, push.

For GitHub: create an empty repository, then git remote add origin … and git push -u origin main.

Deploy to Vercel

1. Push the project to GitHub (or GitLab / Bitbucket).
2. In Vercel, Import the repository.
3. Framework preset Next.js (auto-detected). Root directory: project root.
4. Deploy. No environment variables are required for the Formspree <form action> flow.

Sanity-check locally before deploy:

npm run build

Folder structure

app/
  layout.tsx        # fonts, metadata, CSS variables from siteConfig
  page.tsx          # composes sections
  globals.css       # Tailwind + base styles
components/
  motion/Reveal.tsx
  Navbar.tsx
  Hero.tsx
  Services.tsx
  WhyChooseUs.tsx
  Testimonials.tsx
  Contact.tsx
  Footer.tsx
lib/
  site-config.ts    # <<< edit per client
public/             # optional images / assets

Accessibility & motion

• Skip link, landmarks, visible focus styles.
• Reveal animations respect prefers-reduced-motion.

License

This project is released under the MIT License.

You may use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software for any purpose, including commercial client sites and forks of this template, subject to the conditions in LICENSE (mainly: keep the copyright notice and disclaimer included in copies or substantial portions of the software).