# Pinx website library

This is the shared index for the Color House website system. The website copy is at https://pinxpainting.com/brand-system/ and the brand-studio copy is at https://pinx-brand-kit.vercel.app/studio-11/website-library/.

## Reuse the real implementation

- **Page templates** show the live page in context. Service and location templates use the verified data in `clients/pinx/website-content.ts`.
- **Components** preview the exact shared website implementation in an isolated component page. Available sections are approved reusable components not currently placed on the homepage. Download their source from a card, or search the complete source inventory below the cards.
- **Design proposals** are alternatives for consideration, not automatic replacements for production.
- **Brand chapters** lead to the wider brand system, social templates, email, Brazilian and community components.

The canonical catalog is `clients/pinx/website-library.json` in the Pinx repository. The portable library interface is `branding/pinx/website-library/`. Run `npm run export:brand-library` after approved component changes to refresh the website library, source copies and download. Publish that same export to the brand guide. Do not maintain a separate handwritten component implementation in the brand guide.

The downloadable source package is a UI reference, not a standalone deployable app. API routes, runtime credentials, customer information and provider settings are deliberately excluded. Integrate the files within the Pinx repository, where their data contracts and dependencies already exist. Booking components retain the existing delivery/calendar gates; previewing a template is not a booking confirmation.

## Navigation contract

Desktop: fixed header, full cream Original Script, direct links, contact actions and menu. Mobile: full cream script initially, compact approved P after64px of scroll, and a hamburger that opens the full-screen menu. The native dialog traps focus; Escape/Close restores focus to Menu. The page behind it does not scroll.

The mobile contact dock appears after64px of scroll and stays visible until returning to the top. It contains the actual phone number and Book Consultation. It respects the device safe area, is removed from keyboard access while hidden, and is hidden while a modal is open. The existing consultation draft survives closing and reopening.

Pink remains central; orange is supporting. The header is pink plaster. The footer matches the header’s pink plaster, with the cream logo and dark green body text for readability. No new logo geometry was drawn: all cream masters come from the approved01A Original Script package.

## Review before release

Test320px,390px and1440px; initial load and scrolled state; menu keyboard access/Escape; phone link and booking; source downloads; the library filters and preview widths. Check performance after material code changes. Do not describe a variable lab score as a permanent100 guarantee.

## Surface rhythm and map composition

Never place two major sections with the same background next to each other. The homepage sequence is pink hero → cream services → pink service areas → cream artists → orange pricing promise → cream fee table → pink process → cream FAQ → pink contact → cream map → pink footer. Keep the pricing-guide link inside the fee table. Nested cards and artwork retain their own colors.

Inner-page introductions use cream, then alternate pink and cream. If the last content section would meet the pink contact section in pink, use orange for that last panel. Pricing includes two surfaces of its own, so its final contact section uses orange. Utility pages use an orange map section after cream content. The reusable composition rules live in `src/site/surfaces.css`.

The map sign-off brings back the Houston/Texas typography, state stamp and arched invitation. The map remains rectangular inside the pink frame: never crop Google controls, attribution or the business listing. This is a service-area business, not a storefront invitation. Use the actual approved Google Business Profile and “We come to you” wording.

Service-link arrows are fixed 20px SVG icons, not large font glyphs. Keep the title and icon in separate grid columns so the arrow cannot wrap onto its own line.