Fertig
This commit is contained in:
99
plan.md
Normal file
99
plan.md
Normal file
@@ -0,0 +1,99 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user