American Fireplaces — Website

Marketing website for American Fireplaces, the premium hearth & outdoor living showroom in Sevierville, TN (family-owned since 1990). Built with Next.js 15 (App Router), React 19, TypeScript, and Tailwind CSS 4.

Design

A cinematic, firelit identity: warm near-black grounds, ember/gold accents, Bodoni Moda display type paired with Jost, an animated ember-particle hero, and scroll-triggered reveals. All graphics are inline SVG/CSS/canvas — the site ships zero raster images and zero client-side dependencies beyond React. Animations respect prefers-reduced-motion.

Stack

Layer	Choice
Framework	Next.js 15 (App Router, React Server Components)
Language	TypeScript (strict)
Styling	Tailwind CSS 4 (CSS-first @theme tokens)
Fonts	next/font/google — Bodoni Moda + Jost (self-hosted at build, zero layout shift)
SEO	Metadata API, per-page titles/descriptions/canonicals, Open Graph, sitemap.xml, robots.txt, JSON-LD LocalBusiness schema

Project structure

src/
  app/
    layout.tsx        # Root layout: fonts, global metadata, JSON-LD, header/footer
    page.tsx          # Home — full landing experience
    about/page.tsx    # Story, stats, process
    collection/page.tsx # Product categories + brands
    visit/page.tsx    # Showroom hours, address, directions
    not-found.tsx     # Branded 404
    sitemap.ts        # /sitemap.xml
    robots.ts         # /robots.txt
    icon.svg          # Favicon (flame mark)
    globals.css       # Tailwind theme tokens + bespoke CSS
  components/         # Reusable UI (Header, Hero, EmberField, cards, …)
  lib/site.ts         # Single source of truth for business info & nav

Getting started

npm install
npm run dev       # http://localhost:3000

Production build

npm run build     # compiles + type-checks; must pass with no errors
npm start         # serve the production build locally

Deploying to Vercel

1. Push this repository to GitHub (or GitLab/Bitbucket).
2. In Vercel, click Add New → Project and import the repository.
3. If the app lives in a subdirectory (e.g. american-fireplaces/), set Root Directory to that folder in the project settings.
4. Framework preset: Next.js (auto-detected). No environment variables are required.
5. Click Deploy. Every push to the production branch redeploys automatically; other branches get preview deployments.

Or from the CLI:

npm i -g vercel
vercel            # preview deployment
vercel --prod     # production deployment

After you have a domain

Update site.url in src/lib/site.ts to the real production URL — it drives canonical URLs, Open Graph metadata, sitemap.xml, and robots.txt.

Editing business info

All contact details, hours, brands, and navigation live in src/lib/site.ts. Edit once; every page, the footer, the JSON-LD schema, and the sitemap pick it up.

Note: Customer-facing copy (including the founder quote) is draft marketing copy — review it before launch.