southernmonsarysupply/plan.md

Southern Masonry Supply Next.js Rebuild Plan

Summary

Build a production-ready Next.js site in TypeScript with App Router, using the provided screenshots as structural
inspiration, info.md as content source, and public/images as the visual asset base. The v1 will ship as a 5-page
marketing/catalog site with strong local SEO, reusable content-driven sections, a placeholder-ready contact API,
and Dockerized local/dev deployment so npm run dev works immediately.

Key Changes

• Initialize a new Next.js App Router project in TypeScript with a clean component/content structure, responsive
  layout system, shared header/footer, global theme tokens, and SEO-safe metadata defaults.
• Create these routes with preserved slugs:
  • /
  • /about
  • /masonry-supplies
  • /landscaping-supplies
  • /contact
• Implement a strong local-business visual direction rather than a generic template:
  • warm stone/terracotta/sand palette
  • editorial serif display + refined body font
  • real masonry/landscaping imagery from public/images
  • clear quote-first CTA treatment
• Model content in static TypeScript data modules for v1:
  • siteConfig for business identity, address, phone, hours, socials, CTAs
  • materials dataset for masonry and landscaping items with category, subcategory, image, description, purchase
    unit, tags, featured flag
  • page-specific hero, trust, delivery, and FAQ content
• Home page behavior:
  • local SEO hero with Corpus Christi positioning
  • split entry cards for masonry vs landscaping
  • trust/value section
  • featured materials
  • delivery minimums and service summary
  • direct links into contact/quote flow
• About page behavior:
  • family-owned story and 30+ year credibility
  • mission/service philosophy
  • sourcing and expertise differentiators
  • no invented team bios or fake history beyond info.md
• Supplies pages behavior:
  • hero/banner
  • filterable client-side product grid by subcategory/tags
  • quote CTA on every card
  • delivery/purchase-unit notes surfaced in-page
  • breadcrumb support and internal links between supply pages and contact
• Contact page behavior:
  • business info, hours, address, phone, social links
  • delivery rules from info.md
  • contact form with client validation and a Next.js API placeholder endpoint returning structured success/error
    responses
  • map section as external Google Maps link/embed placeholder, not a hard dependency
• SEO and schema:
  • route-level metadata, titles, descriptions, canonical defaults, Open Graph/Twitter cards
  • JSON-LD for LocalBusiness/Organization, WebSite, and BreadcrumbList
  • semantic headings, accessible nav, internal linking, crawl-friendly page structure
• Delivery/runtime assets:
  • Dockerfile for containerized app build/run
  • docker-compose.yml for local container startup
  • .dockerignore
  • README updates with npm install, npm run dev, docker compose up instructions

Public Interfaces and Data Contracts

• Route contract:
  • /contact submits to /api/contact
• Contact API response contract:
  • success: { success: true, message: string }
  • validation/server error: { success: false, message: string, fieldErrors?: Record<string,string> }
• Material data contract:
  • slug
  • name
  • category
  • subcategory
  • image
  • description
  • purchaseUnit
  • availabilityNote?
  • featured
  • tags
• Shared config contract:
  • business name, tagline, NAP, hours, socials, delivery notes, nav items, footer groups, default SEO fields

Test Plan

• Verify header nav, footer links, breadcrumbs, and CTA flows between pages.

• Verify /api/contact handles valid submission, missing required fields, and invalid email/phone formats.

• Verify metadata and JSON-LD render per page and match visible content.

• Verify images load through Next.js without layout shift regressions.

• Verify Docker build succeeds and docker compose up serves the app successfully.

• Preserve the existing English content direction from info.md, even though the planning conversation is in German.

• Keep the classic page slugs: /about, /masonry-supplies, /landscaping-supplies, /contact.

• Contact form will be implementation-ready but not wired to real email delivery yet; the placeholder API is the
  accepted v1 behavior.

• No cart, checkout, pricing engine, CMS, or live inventory in v1.

• Only provided assets in public/images are used unless implementation reveals a missing critical visual, in which
  case the design falls back to text-first sections rather than invented media.