New Page

New Page

Overview

Create new pages that match the Future Water Systems design system and page conventions while meeting the required section constraints.

Workflow

1. Read the design sources of truth:
   • design_rules.md
   • client/src/design-tokens.ts
2. Review canonical section patterns:
   • Buy Now Pay Later layout: client/src/components/sections/home/buy-now-pay-later.tsx
   • Full-blue trust-gradient section: client/src/components/sections/home/why-choose-us.tsx
   • Standard page hero usage: client/src/pages/home-kitchen-systems.tsx and client/src/components/sections/kitchen/hero-carousel.tsx
3. Draft the page outline and ensure all required sections are present (see Requirements).
4. Implement the page and sections using tokenized utilities and shared components.
5. Update routing in client/src/App.tsx if a new route is required.
6. Run linting (see Validation).

Requirements (non-negotiable)

• Use the Home Kitchen Systems hero pattern (KitchenHeroCarousel). Default to a single image (single slide); use a carousel only when explicitly requested. Never reuse the Home page hero.
• Include at least one full-blue section using the trust-gradient pattern.
• Include at least one Buy Now Pay Later style section with the same layout DNA.
• Include at least two sections that display placeholder images.
• Do not add the red Risk section unless the user explicitly requests it.
• Follow the section header structure from design_rules.md (badge, split-color heading, subheading, supporting copy).

Implementation Notes

• Use design tokens and utilities only (tw-heading-, tw-body-, section-padding, container-width).
• Use existing component patterns (Card, Button, card-surface, card-surface-hover, btn-primary, btn-secondary).
• Keep the background rhythm from design_rules.md: alternate white and light-gradient sections; after the blue section, return to a white section.
• For full-blue sections, use inverse badge styling and white text per design_rules.md.
• If the user explicitly requests the Risk section, place it immediately after the hero, follow the red Risk section styling in design_rules.md, treat it as the "white" slot, and follow it with a white section before resuming the white/gradient alternation.

Placeholder Images

• Use /images/placeholders/educational-placeholder.svg for image placeholders.
• Ensure at least two distinct sections include placeholder images (e.g., a split visual section plus a grid or timeline).
• Keep alt text descriptive and note that images are placeholders.

Validation

• Run: npx eslint . --config eslint.config.cjs
• Run: npm run build
• Fix any warnings or errors before finishing.