Appearance
Home page (/)
The public front door (issue #262). It orients each persona (architect/pro, builder, homeowner), teaches the right-sizing value proposition, and routes visitors into the guided flow, a persona track, or the comparison view. Education first: the page carries no lead-capture form or gate — hand-offs are offered inside the flow, never up front (a vision non-goal).
Sections
| Section | Content | Data source |
|---|---|---|
| Resume banner | "Pick up where you left off" with answered-count (or completed) state; routes back into the session's track while that track is still published, else /select | Anonymous session (#113/#115) via getSession + parseStoredAnswers |
| Hero | Value proposition + the single primary CTA into /select; secondary text link to /compare. An admin-set hero media (image or a still-that-plays) renders above the copy when the media.home.hero slot is assigned (#412); unset → the text-only hero. | Static copy; optional media from getPageMedia (media.home.hero), rendered via EntityHeroMedia. Managed in managing-page-media. |
| Persona track cards | One card per published track — its primary attached media as a hero (#411), then name + buyer-facing description — linking to /select/<slug>. A track with no attached media renders the original text-only card. | listPublishedTracks + primaryEntityImages('track', …) (one batched lookup); rendered via EntityHeroMedia. The track description and attached media are managed in managing-tracks. |
| How it works | Three steps: answer project questions → right-sized recommendation with cheaper-alternative call-outs → hand off to the nanawall.com configurator and product resources. An optional admin-set banner renders above the steps when the media.home.how-it-works slot is assigned (#412). | Static copy; optional media from getPageMedia (media.home.how-it-works). |
| Operation-type strip | The three families (Folding / Sliding / Stacking) with the admin enum's education copy + attached family photo; each card deep-links to its family group in the compare picker (#841). A family without media renders text-only; no enum data drops the section. | listEnumDescriptions (system-operation-type) + primaryEntityImages('enum_value', …), filtered to families the active catalog uses. |
| Right-sizing story | The over-specification problem (the 645 → 640 → SL45 example) — why this tool differs from a filter. Renders as a full-bleed photographic band when the media.home.story slot holds an image (#842): bleed per layout (--ns-layout-band-bleed), text on the measured scrim, the three example systems named with equal-weight tier chips, ending in a "See how right-sizing works" CTA into /select. | Static copy; optional band photo from getPageMedia (media.home.story); chips from the live catalog (listSystems budget tiers). |
| Showcase imagery | Primary gen-4 system images as a slideshow inside the contained story band (the zero-image variant only — the photographic band replaces it) | Entity-media pipeline (#245) via primaryEntityImages('system', …) |
| Compare entry | Secondary path for visitors who already know their candidates | Static |
Degradation model (static-first)
Unlike /select and /compare (which 503 without a DB binding), the home page is static-first: every dynamic section degrades to nothing rather than erroring, so the front door renders its hero, how-it-works, and right-sizing story even with no database at all.
- No published tracks (or a track query failure) → no cards section; the default-flow CTA is the single entry. A published track with no attached media still renders — as the original text-only card (#411).
- No usable session (expired, all-stale answers, or read failure) → no resume banner; the visitor is treated as new.
- No primary system images → no showcase strip (and no
og:image). - No page-media assigned (or a read failure, or a slot pointing at a since-deleted asset) → the hero and how-it-works sections render text-only (#412), and the right-sizing story keeps its contained text band (#842). The configured media is a garnish, never a dependency.
- No enum education data (or a read failure) → no operation-type strip (#841).
Metadata
The page sets <title>, meta description, and OG tags (og:type, og:title, og:description, og:url, and og:image from the first showcase rendition when one exists — absolute URL, hero variant JPEG).
Accessibility
Mobile-first single-column layout widening at 48rem; one <main> landmark; sections labelled via aria-labelledby/aria-label; visible :focus-visible outlines on all interactive elements; all colors resolve through the --ns-* theme-token contract (theming), so contrast is governed by the active theme.