锁定客户基准版并建立首页多版本预览

design-qa.md

@@ -0,0 +1,57 @@
+# Homepage Three-Screen Prototype — Design QA
+
+- Source visual truth: `docs/homepage-prototype-qa/source-direction.jpg` plus the two supplied Douyin design references (bold business matrix and three-screen narrative funnel).
+- Implementation: `http://127.0.0.1:5173/`
+- Browser-rendered evidence:
+  - `docs/homepage-prototype-qa/implementation-hero.png`
+  - `docs/homepage-prototype-qa/implementation-themes.png`
+  - `docs/homepage-prototype-qa/implementation-story.png`
+  - `docs/homepage-prototype-qa/implementation-mobile.png`
+- Desktop viewport: 1440 × 1000 CSS px; screenshot 1440 × 872 px after app browser chrome, density 1×.
+- Mobile viewport: 390 × 844 CSS px; screenshot 390 × 838 px after app browser chrome, density 1×.
+- Source pixels: 2358 × 891. The source is directional rather than a 1:1 frame; comparison normalized by composition, hierarchy, density, palette, imagery, and narrative rhythm rather than pixel position.
+- State: default English homepage; hero slide 1; desktop and mobile initial view; second and third screens after scroll.
+
+## Full-view comparison evidence
+
+- Hero now uses a full-bleed, low-saturation travel image, oversized sans-serif statement, acid-green accent, concise explanation, and an explicit planning action. It is structurally distinct from the former split image/copy travel template.
+- The second screen uses an eight-item edge-to-edge business/experience matrix with consistent numbered cells and responsive 4/2/1-column behavior.
+- The third screen creates a clear narrative funnel: point of view → method → three-step explanation → trust statement.
+
+## Focused-region comparison evidence
+
+- Hero typography/crop checked independently at desktop and mobile widths.
+- Theme-card image crop, label contrast, and 2-row alignment checked at 1440 px.
+- Third-screen portrait crop, headline wrapping, supporting copy, and step borders checked at 1440 px.
+
+## Required fidelity surfaces
+
+- Fonts and typography: bold sans-serif display type deliberately replaces the previous classic serif-first homepage hierarchy; line breaks, weight, and mobile wrapping remain readable. Card and step headings use the same sans family to preserve the new direction.
+- Spacing and layout rhythm: three distinct near-viewport chapters; desktop margins align to a 1500 px max canvas; responsive layouts collapse cleanly without horizontal overflow.
+- Colors and tokens: deep forest, warm paper, off-white and acid green form a controlled four-color palette with adequate foreground contrast on the checked states.
+- Image quality: all visible assets are supplied high-resolution client imagery; crops are intentional, no placeholders, broken images, fake illustration, or stretched assets were observed.
+- Copy and content: English is the default. New headline and explanatory copy are specific to WanderQ, while the existing customer-approved content and downstream routes remain in place.
+
+## Primary interactions tested
+
+- Hero slideshow controls render and remain operable.
+- Primary “Design your journey” CTA resolves to `/contact/`.
+- Eight theme cards resolve to existing experience/contact routes.
+- Scroll-triggered entrances and hero parallax run without console warnings or errors.
+- Broken-image check returned zero failures.
+
+## Comparison history
+
+1. P1: global heading CSS overrode the intended bold display face, leaving hero and matrix headings in serif. Fixed with scoped, higher-specificity homepage type rules. Post-fix evidence: all four implementation screenshots.
+2. P2: theme-card and story-step headings still inherited the classic serif family. Fixed by explicitly applying the homepage sans family. Post-fix evidence: `implementation-themes.png` and `implementation-story.png`.
+3. P2: mobile hero needed separate type and spacing constraints. Added 820 px and 540 px responsive rules; verified at 390 × 844 with no clipping of the main statement or CTA.
+
+## Findings
+
+No actionable P0/P1/P2 issues remain in the three-screen prototype. The existing full-site header is intentionally retained so the concept can be judged inside the real product rather than as an isolated mock.
+
+## Follow-up polish
+
+- P3: if this direction is approved, tune the remaining homepage sections to continue the same display typography, dark/light cadence, and tighter content density.
+
+final result: passed