完成首页 V1 并新增旅行杂志版 V2

design-qa.md

@@ -1,57 +1,35 @@
-# Homepage Three-Screen Prototype — Design QA
+# Homepage version 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.
+Date: 2026-08-13
 
-## Full-view comparison evidence
+## Visual source
 
-- 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.
+- Direction: MI Travel / Tran Mau Tri Tam travel editorial design reference supplied through the client's Douyin link.
+- Compared at a desktop viewport against the source's defining visual traits: cinematic destination hero, navy/cyan/coral palette, asymmetric editorial image grids, mixed feature-story modules, and a strong planning CTA.
+- WanderQ's approved Guizhou photography, bilingual content, routes, service proof, and existing navigation remain the product source of truth.
 
-## Focused-region comparison evidence
+## V1 — bold business narrative
 
-- 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.
+- Full page now uses one scoped visual system from hero through final inquiry.
+- Remaining legacy sections were unified through square geometry, oversize display type, paper/ink/acid palette, stronger section pacing, and consistent editorial dividers.
+- Desktop browser inspection completed at 1280px.
+- Broken image check: 0.
+- Horizontal overflow check: passed (`scrollWidth === clientWidth`).
+- Primary content and CTA routes: present and valid.
 
-## Required fidelity surfaces
+## V2 — travel journal
 
-- 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.
+- Full homepage contains six complete story chapters plus final conversion: hero, experience entry points, village feature, routes, field collage, local-team proof, and planning CTA.
+- Source influence is visible in the cinematic hero, asymmetric image grids, editorial rhythm, dark feature chapter, cyan story panel, and coral CTA; WanderQ-specific content prevents brand cloning.
+- Desktop browser inspection completed at 1280px.
+- Responsive layouts implemented for tablet and mobile breakpoints.
+- Broken image check: 0.
+- Horizontal overflow check: passed (`scrollWidth === clientWidth`).
+- Primary CTA and experience-card navigation tested in browser.
 
-## Primary interactions tested
+## Remaining polish
 
-- 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.
+- P3: customer may prefer a different hero photograph after comparing all three versions; this is a content choice, not a layout defect.
+- P3: final English line breaks can be tuned after the customer confirms which direction to pursue.
 
 final result: passed

src/TravelSite.css

@@ -21,6 +21,394 @@
   font-family: 'Assistant', Arial, sans-serif;
 }
 
+/* -------------------------------------------------------------------------- */
+/* Homepage V2 — travel journal / MI Travel-inspired editorial direction      */
+/* -------------------------------------------------------------------------- */
+
+.oc-home-v2 {
+  --v2-navy: #111d26;
+  --v2-paper: #f2eee7;
+  --v2-cyan: #c8eced;
+  --v2-coral: #ef755d;
+  --v2-line: rgba(17, 29, 38, .18);
+  background: var(--v2-paper);
+  color: var(--v2-navy);
+  overflow: clip;
+}
+
+.oc-v2-hero { position: relative; min-height: calc(100svh - 91px); color: #fff; isolation: isolate; overflow: hidden; }
+.oc-v2-hero > img,
+.oc-v2-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
+.oc-v2-hero > img { z-index: -2; object-fit: cover; object-position: center 46%; filter: saturate(.72) contrast(1.06); }
+.oc-v2-hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(10,22,30,.78), rgba(10,22,30,.13) 68%), linear-gradient(0deg, rgba(10,22,30,.72), transparent 55%); }
+.oc-v2-hero-copy { width: min(calc(100% - 120px), 1500px); min-height: calc(100svh - 91px); margin: 0 auto; padding: 70px 0 82px; display: flex; flex-direction: column; justify-content: space-between; }
+.oc-v2-hero-copy > p { margin: 0; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.74); }
+.oc-site .oc-v2-hero h1 { margin: auto 0 54px; max-width: 1070px; color: #fff; font: 500 clamp(70px, 9.2vw, 150px)/.82 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; }
+.oc-v2-hero h1 em { color: var(--v2-cyan); font-weight: 400; }
+.oc-v2-hero-bottom { display: grid; grid-template-columns: minmax(280px, 470px) auto; gap: 60px; align-items: end; }
+.oc-v2-hero-bottom > span { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.75); }
+.oc-v2-hero-bottom > a,
+.oc-v2-final a { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-width: 218px; padding: 20px 24px; background: var(--v2-coral); color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: background .25s ease, transform .25s ease; }
+.oc-v2-hero-bottom > a:hover,
+.oc-v2-final a:hover { background: #da604c; transform: translateY(-2px); }
+.oc-v2-hero-scroll { position: absolute; right: 0; bottom: 0; width: 76px; height: 76px; display: grid; place-items: center; background: var(--v2-cyan); color: var(--v2-navy); }
+.oc-v2-hero-scroll svg { transform: rotate(90deg); }
+
+.oc-v2-discover,
+.oc-v2-routes,
+.oc-v2-field { padding: clamp(100px, 11vw, 175px) clamp(24px, 5.5vw, 88px); }
+.oc-v2-section-intro { display: grid; grid-template-columns: 190px 1fr; gap: 5vw; align-items: start; max-width: 1510px; margin: 0 auto 82px; border-top: 1px solid var(--v2-line); padding-top: 23px; }
+.oc-v2-section-intro > span,
+.oc-v2-feature-copy > span,
+.oc-v2-field-heading > span,
+.oc-v2-local-copy > span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
+.oc-v2-section-intro > div { display: grid; grid-template-columns: minmax(340px, 1.2fr) minmax(280px, .55fr); gap: 7vw; align-items: start; }
+.oc-site .oc-v2-section-intro h2 { margin: 0; color: var(--v2-navy); font: 500 clamp(48px, 6.1vw, 94px)/.92 'Cormorant Garamond', Georgia, serif; letter-spacing: -.05em; }
+.oc-v2-section-intro p { margin: 7px 0 0; color: #5c666b; font-size: 15px; line-height: 1.8; }
+
+.oc-v2-experience-grid { max-width: 1510px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 330px 460px; gap: 14px; }
+.oc-v2-experience-card { position: relative; min-height: 0; overflow: hidden; isolation: isolate; color: #fff; }
+.oc-v2-experience-card.is-1 { grid-column: 1 / 8; grid-row: 1 / 3; }
+.oc-v2-experience-card.is-2 { grid-column: 8 / 13; grid-row: 1; }
+.oc-v2-experience-card.is-3 { grid-column: 8 / 11; grid-row: 2; }
+.oc-v2-experience-card.is-4 { grid-column: 11 / 13; grid-row: 2; }
+.oc-v2-experience-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,16,22,.75), transparent 65%); }
+.oc-v2-experience-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s ease; }
+.oc-v2-experience-card:hover > img { transform: scale(1.045); filter: saturate(1); }
+.oc-v2-experience-card > span { position: absolute; top: 20px; left: 22px; font-size: 10px; letter-spacing: .15em; }
+.oc-v2-experience-card > div { position: absolute; left: 24px; right: 24px; bottom: 26px; }
+.oc-v2-experience-card small { display: block; margin-bottom: 8px; color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
+.oc-site .oc-v2-experience-card h3 { margin: 0; color: #fff; font: 500 clamp(30px, 3.3vw, 56px)/.9 'Cormorant Garamond', Georgia, serif; letter-spacing: -.04em; }
+.oc-v2-experience-card > svg { position: absolute; right: 22px; top: 19px; transition: transform .25s ease; }
+.oc-v2-experience-card:hover > svg { transform: translate(5px,-3px); }
+
+.oc-v2-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); min-height: 850px; background: var(--v2-cyan); }
+.oc-v2-feature-image { position: relative; min-height: 760px; }
+.oc-v2-feature-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); }
+.oc-v2-feature-image > span { position: absolute; bottom: 22px; left: 25px; padding: 10px 13px; background: var(--v2-paper); color: var(--v2-navy); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
+.oc-v2-feature-copy { padding: clamp(70px, 8vw, 130px) clamp(44px, 7vw, 110px); align-self: center; }
+.oc-site .oc-v2-feature-copy h2 { margin: 38px 0 32px; color: var(--v2-navy); font: 500 clamp(51px, 6.1vw, 94px)/.88 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; }
+.oc-v2-feature-copy > p { max-width: 580px; color: #415257; font-size: 16px; line-height: 1.8; }
+.oc-v2-feature-copy > a,
+.oc-v2-local-copy > a { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding-bottom: 7px; border-bottom: 1px solid; color: var(--v2-navy); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
+.oc-v2-feature-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 72px; padding-top: 26px; border-top: 1px solid rgba(17,29,38,.23); }
+.oc-v2-feature-facts b { display: block; font: 500 clamp(28px, 3vw, 44px)/1 'Cormorant Garamond', Georgia, serif; }
+.oc-v2-feature-facts span { display: block; margin-top: 9px; color: #536367; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
+
+.oc-v2-routes { background: var(--v2-navy); color: #fff; }
+.oc-v2-section-intro.is-light { border-color: rgba(255,255,255,.2); }
+.oc-v2-section-intro.is-light > span,
+.oc-v2-section-intro.is-light p { color: rgba(255,255,255,.64); }
+.oc-site .oc-v2-section-intro.is-light h2 { color: #fff; }
+.oc-v2-route-grid { max-width: 1510px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 290px 430px; gap: 15px; }
+.oc-v2-route-card { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
+.oc-v2-route-card.is-1 { grid-column: 1 / 8; grid-row: 1 / 3; }
+.oc-v2-route-card.is-2 { grid-column: 8 / 13; grid-row: 1; }
+.oc-v2-route-card.is-3 { grid-column: 8 / 13; grid-row: 2; }
+.oc-v2-route-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,14,20,.88), rgba(6,14,20,.05) 75%); }
+.oc-v2-route-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s; }
+.oc-v2-route-card:hover img { transform: scale(1.04); filter: saturate(.93); }
+.oc-v2-route-card > div { position: absolute; left: clamp(22px, 3vw, 45px); right: clamp(22px, 3vw, 45px); bottom: clamp(24px, 3vw, 44px); }
+.oc-v2-route-card span { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.67); }
+.oc-site .oc-v2-route-card h3 { margin: 11px 0 13px; color: #fff; font: 500 clamp(33px, 4vw, 67px)/.9 'Cormorant Garamond', Georgia, serif; letter-spacing: -.045em; }
+.oc-v2-route-card p { max-width: 570px; margin: 0 0 17px; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; }
+.oc-v2-route-card b { display: inline-flex; align-items: center; gap: 9px; color: var(--v2-cyan); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
+
+.oc-v2-field { background: #e8e3da; }
+.oc-v2-field-heading { max-width: 1510px; margin: 0 auto 75px; display: grid; grid-template-columns: 190px minmax(0, 900px); gap: 5vw; border-top: 1px solid var(--v2-line); padding-top: 23px; }
+.oc-site .oc-v2-field-heading h2 { margin: 0; color: var(--v2-navy); font: 500 clamp(52px, 6.7vw, 103px)/.88 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; }
+.oc-v2-field-collage { max-width: 1510px; height: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 300px 240px 330px; gap: 14px; }
+.oc-v2-field-collage figure { position: relative; margin: 0; overflow: hidden; }
+.oc-v2-field-collage figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74); }
+.oc-v2-field-collage figure.is-1 { grid-column: 1 / 8; grid-row: 1 / 3; }
+.oc-v2-field-collage figure.is-2 { grid-column: 8 / 13; grid-row: 1; }
+.oc-v2-field-collage figure.is-3 { grid-column: 8 / 11; grid-row: 2; }
+.oc-v2-field-collage figure.is-4 { grid-column: 11 / 13; grid-row: 2; }
+.oc-v2-field-collage figure.is-5 { grid-column: 5 / 13; grid-row: 3; }
+.oc-v2-field-collage figcaption { position: absolute; left: 22px; bottom: 22px; padding: 9px 12px; background: var(--v2-paper); font-size: 10px; letter-spacing: .08em; }
+.oc-v2-field-note { grid-column: 1 / 5; grid-row: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 31px; background: var(--v2-coral); color: #fff; }
+.oc-v2-field-note p { margin: 0; font: 500 clamp(27px, 2.5vw, 40px)/1.02 'Cormorant Garamond', Georgia, serif; letter-spacing: -.03em; }
+
+.oc-v2-local { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 900px; background: var(--v2-paper); }
+.oc-v2-local-media { position: relative; min-height: 760px; margin: clamp(70px, 8vw, 120px) 0 clamp(70px, 8vw, 120px) clamp(24px, 5.5vw, 88px); }
+.oc-v2-local-media img:first-child { width: 83%; height: 82%; object-fit: cover; filter: saturate(.65); }
+.oc-v2-local-media img:last-child { position: absolute; right: 0; bottom: 0; width: 46%; height: 42%; object-fit: cover; border: 12px solid var(--v2-paper); filter: saturate(.72); }
+.oc-v2-local-copy { align-self: center; padding: 80px clamp(44px, 7vw, 120px); }
+.oc-site .oc-v2-local-copy h2 { margin: 38px 0 30px; color: var(--v2-navy); font: 500 clamp(50px, 6vw, 94px)/.89 'Cormorant Garamond', Georgia, serif; letter-spacing: -.055em; }
+.oc-v2-local-copy > p { max-width: 560px; color: #59646a; font-size: 15px; line-height: 1.8; }
+.oc-v2-local-copy ul { padding: 0; margin: 43px 0 0; list-style: none; border-top: 1px solid var(--v2-line); }
+.oc-v2-local-copy li { position: relative; padding: 19px 0 19px 23px; border-bottom: 1px solid var(--v2-line); font-size: 13px; }
+.oc-v2-local-copy li::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; background: var(--v2-coral); transform: translateY(-50%); }
+
+.oc-v2-final { position: relative; min-height: 760px; display: grid; place-items: center; text-align: center; color: #fff; isolation: isolate; }
+.oc-v2-final > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) brightness(.7); }
+.oc-v2-final::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(10,22,30,.38); }
+.oc-v2-final > div { padding: 50px 24px; }
+.oc-v2-final span { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.7); }
+.oc-site .oc-v2-final h2 { margin: 28px auto 50px; color: #fff; font: 500 clamp(72px, 10vw, 155px)/.82 'Cormorant Garamond', Georgia, serif; letter-spacing: -.06em; }
+.oc-v2-final a { justify-self: center; }
+
+.oc-home-v2 :is(a, button):focus-visible { outline: 3px solid var(--v2-coral); outline-offset: 4px; }
+
+@media (max-width: 960px) {
+  .oc-v2-hero-copy { width: calc(100% - 48px); }
+  .oc-v2-section-intro,
+  .oc-v2-field-heading { grid-template-columns: 1fr; gap: 25px; }
+  .oc-v2-section-intro > div { grid-template-columns: 1fr; gap: 22px; }
+  .oc-v2-experience-grid { grid-template-rows: 470px 300px 300px; }
+  .oc-v2-experience-card.is-1 { grid-column: 1 / 13; grid-row: 1; }
+  .oc-v2-experience-card.is-2 { grid-column: 1 / 7; grid-row: 2; }
+  .oc-v2-experience-card.is-3 { grid-column: 7 / 13; grid-row: 2; }
+  .oc-v2-experience-card.is-4 { grid-column: 1 / 13; grid-row: 3; }
+  .oc-v2-feature { grid-template-columns: 1fr; }
+  .oc-v2-feature-image { min-height: 650px; }
+  .oc-v2-route-grid { grid-template-rows: 550px 360px 360px; }
+  .oc-v2-route-card.is-1 { grid-column: 1 / 13; grid-row: 1; }
+  .oc-v2-route-card.is-2 { grid-column: 1 / 13; grid-row: 2; }
+  .oc-v2-route-card.is-3 { grid-column: 1 / 13; grid-row: 3; }
+  .oc-v2-local { grid-template-columns: 1fr; }
+  .oc-v2-local-media { min-height: 680px; margin-right: 24px; }
+}
+
+@media (max-width: 640px) {
+  .oc-v2-hero { min-height: calc(100svh - 76px); }
+  .oc-v2-hero-copy { width: calc(100% - 40px); min-height: calc(100svh - 76px); padding: 39px 0 64px; }
+  .oc-site .oc-v2-hero h1 { font-size: 62px; margin-bottom: 35px; }
+  .oc-v2-hero-bottom { grid-template-columns: 1fr; gap: 23px; }
+  .oc-v2-hero-bottom > a { justify-self: start; }
+  .oc-v2-hero-scroll { display: none; }
+  .oc-v2-discover,
+  .oc-v2-routes,
+  .oc-v2-field { padding-inline: 20px; }
+  .oc-site .oc-v2-section-intro h2,
+  .oc-site .oc-v2-field-heading h2 { font-size: 49px; }
+  .oc-v2-experience-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 360px); }
+  .oc-v2-experience-card.is-1,
+  .oc-v2-experience-card.is-2,
+  .oc-v2-experience-card.is-3,
+  .oc-v2-experience-card.is-4 { grid-column: 1; grid-row: auto; }
+  .oc-v2-feature-image { min-height: 520px; }
+  .oc-v2-feature-copy { padding: 74px 20px; }
+  .oc-site .oc-v2-feature-copy h2,
+  .oc-site .oc-v2-local-copy h2 { font-size: 51px; }
+  .oc-v2-feature-facts { grid-template-columns: 1fr; }
+  .oc-v2-field-collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 420px 230px 230px 300px; }
+  .oc-v2-field-collage figure.is-1 { grid-column: 1 / 3; grid-row: 1; }
+  .oc-v2-field-collage figure.is-2 { grid-column: 1; grid-row: 2; }
+  .oc-v2-field-collage figure.is-3 { grid-column: 2; grid-row: 2; }
+  .oc-v2-field-collage figure.is-4 { grid-column: 1; grid-row: 3; }
+  .oc-v2-field-collage figure.is-5 { grid-column: 2; grid-row: 3; }
+  .oc-v2-field-note { grid-column: 1 / 3; grid-row: 4; }
+  .oc-v2-local-media { min-height: 480px; margin: 70px 20px 0; }
+  .oc-v2-local-copy { padding: 70px 20px 90px; }
+  .oc-v2-final { min-height: 620px; }
+}
+
+/* -------------------------------------------------------------------------- */
+/* Homepage V1 complete system — bold editorial / business narrative          */
+/* -------------------------------------------------------------------------- */
+
+.oc-home-v1 {
+  --v1-ink: #172319;
+  --v1-paper: #f2efe5;
+  --v1-acid: #d9f266;
+  --v1-line: rgba(23, 35, 25, .22);
+  background: var(--v1-paper);
+  color: var(--v1-ink);
+  overflow: clip;
+}
+
+.oc-home-v1 .oc-home-trust {
+  background: var(--v1-ink);
+  color: #f7f3e9;
+  border: 0;
+}
+
+.oc-home-v1 .oc-home-trust-grid {
+  max-width: none;
+  padding-inline: clamp(24px, 5vw, 78px);
+}
+
+.oc-home-v1 .oc-home-trust-item { border-color: rgba(255,255,255,.18); }
+.oc-home-v1 .oc-home-trust-item svg { color: var(--v1-acid); }
+.oc-home-v1 .oc-home-trust-item span { color: rgba(255,255,255,.64); }
+
+.oc-home-v1 .oc-home-plan-row {
+  max-width: none;
+  margin: 0;
+  padding: 0 clamp(24px, 5vw, 78px) clamp(92px, 10vw, 150px);
+  background: var(--v1-ink);
+  color: #fff;
+  border-radius: 0;
+  border: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0;
+}
+
+.oc-home-v1 .oc-plan-panel .oc-step {
+  min-height: 260px;
+  padding: 54px 34px 30px 0;
+  border-top: 1px solid rgba(255,255,255,.25);
+  border-right: 1px solid rgba(255,255,255,.18);
+}
+
+.oc-home-v1 .oc-plan-panel .oc-step + .oc-step { padding-left: 34px; }
+.oc-home-v1 .oc-plan-panel .oc-step:last-child { border-right: 0; }
+.oc-home-v1 .oc-plan-panel .oc-step b { color: var(--v1-acid); font: 500 13px/1 var(--oc-sans); }
+.oc-home-v1 .oc-plan-panel .oc-step h3 { margin-top: 68px; color: #fff; font-size: clamp(25px, 2.2vw, 36px); letter-spacing: -.035em; }
+.oc-home-v1 .oc-plan-panel .oc-step p { color: rgba(255,255,255,.62); max-width: 330px; }
+
+.oc-home-v1 .oc-home-section,
+.oc-home-v1 .oc-home-team,
+.oc-home-v1 .oc-quote,
+.oc-home-v1 .oc-live {
+  max-width: none;
+  padding-inline: clamp(24px, 5vw, 78px);
+}
+
+.oc-home-v1 .oc-home-experiences {
+  padding-top: clamp(92px, 11vw, 165px);
+  padding-bottom: clamp(100px, 12vw, 180px);
+}
+
+.oc-home-v1 .oc-section-title {
+  display: grid;
+  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
+  align-items: end;
+  gap: 8vw;
+  border-top: 1px solid var(--v1-line);
+  padding-top: 24px;
+  margin-bottom: 72px;
+}
+
+.oc-home-v1 .oc-section-title h2 {
+  max-width: 730px;
+  font-size: clamp(54px, 7vw, 116px);
+  line-height: .88;
+  letter-spacing: -.065em;
+  color: var(--v1-ink);
+}
+
+.oc-home-v1 .oc-section-title p {
+  margin: 0 0 8px;
+  max-width: 520px;
+  color: #516052;
+  font-size: 16px;
+  line-height: 1.75;
+}
+
+.oc-home-v1 .oc-experience-stack { display: grid; gap: 1px; background: var(--v1-line); border-block: 1px solid var(--v1-line); }
+.oc-home-v1 .oc-experience-band {
+  min-height: 500px;
+  border: 0;
+  border-radius: 0;
+  background: var(--v1-paper);
+  box-shadow: none;
+}
+.oc-home-v1 .oc-experience-band:nth-child(even) { background: #e3e8dc; }
+.oc-home-v1 .oc-experience-band img { filter: saturate(.78) contrast(.96); }
+.oc-home-v1 .oc-experience-band:hover img { filter: saturate(.95) contrast(1); }
+.oc-home-v1 .oc-experience-band-copy { padding: clamp(32px, 5vw, 76px); }
+.oc-home-v1 .oc-experience-band-copy > span { color: #6f7f6f; font-size: 12px; letter-spacing: .14em; }
+.oc-home-v1 .oc-experience-band-copy h3 { max-width: 620px; color: var(--v1-ink); font-size: clamp(38px, 5vw, 76px); line-height: .95; letter-spacing: -.055em; }
+.oc-home-v1 .oc-experience-band-copy p { max-width: 500px; color: #526052; }
+
+.oc-home-v1 .oc-home-safaris-section {
+  background: #cfd7ca;
+  padding-top: clamp(92px, 11vw, 160px);
+  padding-bottom: clamp(100px, 12vw, 165px);
+}
+.oc-home-v1 .oc-home-safaris { gap: 1px; background: rgba(23,35,25,.2); }
+.oc-home-v1 .oc-home-safari { border: 0; border-radius: 0; box-shadow: none; background: #f6f3e9; }
+.oc-home-v1 .oc-home-safari-media { min-height: 380px; }
+.oc-home-v1 .oc-home-safari-image { filter: saturate(.74); }
+.oc-home-v1 .oc-home-safari:hover .oc-home-safari-image { transform: scale(1.035); filter: saturate(.95); }
+.oc-home-v1 .oc-home-safari-media > span { background: var(--v1-acid); color: var(--v1-ink); border: 0; }
+.oc-home-v1 .oc-home-safari-body { padding: 30px 28px 34px; }
+.oc-home-v1 .oc-home-safari-body h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.045em; }
+.oc-home-v1 .oc-home-safari-footer { border-top-color: var(--v1-line); }
+.oc-home-v1 .oc-clay-btn { border-radius: 0; background: var(--v1-ink); color: #fff; border: 1px solid var(--v1-ink); }
+.oc-home-v1 .oc-clay-btn:hover { background: var(--v1-acid); color: var(--v1-ink); }
+
+.oc-home-v1 .oc-home-team { padding-top: clamp(100px, 12vw, 180px); padding-bottom: clamp(100px, 12vw, 180px); }
+.oc-home-v1 .oc-home-team-layout { gap: clamp(54px, 9vw, 150px); align-items: start; }
+.oc-home-v1 .oc-home-team-main-image { border-radius: 0; filter: saturate(.75); }
+.oc-home-v1 .oc-home-team-field-image { border-radius: 0; border: 10px solid var(--v1-paper); width: 48%; }
+.oc-home-v1 .oc-home-team-copy h2 { color: var(--v1-ink); font-size: clamp(50px, 6vw, 92px); line-height: .93; letter-spacing: -.06em; }
+.oc-home-v1 .oc-home-team-intro { max-width: 570px; color: #506051; }
+.oc-home-v1 .oc-home-team-service { border-top-color: var(--v1-line); }
+.oc-home-v1 .oc-home-team-service > span { color: #738072; }
+.oc-home-v1 .oc-outline-btn { border-radius: 0; border-color: var(--v1-ink); color: var(--v1-ink); }
+.oc-home-v1 .oc-outline-btn:hover { background: var(--v1-ink); color: #fff; }
+
+.oc-home-v1 .oc-quote {
+  padding-block: clamp(80px, 9vw, 135px);
+  background: var(--v1-ink);
+  color: #fff;
+}
+.oc-home-v1 .oc-quote-media img { border-radius: 0; filter: saturate(.68); }
+.oc-home-v1 .oc-quote-copy blockquote p { color: #fff; font-size: clamp(35px, 5vw, 72px); letter-spacing: -.045em; line-height: 1.02; }
+.oc-home-v1 .oc-quote-copy > span { color: var(--v1-acid); }
+
+.oc-home-v1 .oc-home-social-strip { padding-top: 0; padding-bottom: 0; background: var(--v1-ink); }
+.oc-home-v1 .oc-social-channel-list { border-block: 1px solid rgba(255,255,255,.18); }
+.oc-home-v1 .oc-social-channel { border-color: rgba(255,255,255,.18); color: #fff; border-radius: 0; background: transparent; }
+.oc-home-v1 .oc-social-channel span { color: rgba(255,255,255,.58); }
+
+.oc-home-v1 .oc-live { padding-top: clamp(100px, 12vw, 175px); padding-bottom: clamp(100px, 12vw, 175px); }
+.oc-home-v1 .oc-live-heading { display: grid; grid-template-columns: 150px 1.15fr .65fr; gap: 4vw; align-items: start; border-top: 1px solid var(--v1-line); padding-top: 24px; }
+.oc-home-v1 .oc-live-heading h2 { margin: 0; color: var(--v1-ink); font-size: clamp(50px, 6.3vw, 96px); line-height: .9; letter-spacing: -.06em; }
+.oc-home-v1 .oc-live-heading p { margin: 0; color: #526052; line-height: 1.7; }
+.oc-home-v1 .oc-live-grid { margin-top: 70px; gap: 10px; }
+.oc-home-v1 .oc-live-photo { border-radius: 0; }
+.oc-home-v1 .oc-live-photo img { filter: saturate(.74); }
+.oc-home-v1 .oc-live-photo:hover img { filter: saturate(.98); }
+
+.oc-home-v1 .oc-home-comparison { background: #d9ded3; padding-block: clamp(92px, 11vw, 160px); }
+.oc-home-v1 .oc-comparison-heading { display: grid; grid-template-columns: 150px 1.1fr .7fr; gap: 4vw; align-items: start; }
+.oc-home-v1 .oc-comparison-heading h2 { margin: 0; color: var(--v1-ink); font-size: clamp(48px, 5.7vw, 88px); line-height: .92; letter-spacing: -.055em; }
+.oc-home-v1 .oc-comparison-heading p { margin: 0; color: #4b594d; }
+.oc-home-v1 .oc-comparison-table { border-collapse: collapse; border-radius: 0; }
+.oc-home-v1 .oc-comparison-table :is(th, td) { border-color: rgba(23,35,25,.18); }
+.oc-home-v1 .oc-comparison-table .is-wanderq { background: var(--v1-ink); color: #fff; }
+
+.oc-home-v1 .oc-home-final-cta { background: #b9cf46; color: var(--v1-ink); padding-block: clamp(90px, 10vw, 150px); }
+.oc-home-v1 .oc-home-final-cta-copy h2 { color: var(--v1-ink); font-size: clamp(58px, 7vw, 110px); line-height: .87; letter-spacing: -.065em; }
+.oc-home-v1 .oc-home-final-cta-copy p { color: rgba(23,35,25,.74); }
+.oc-home-v1 .oc-home-final-eyebrow { color: var(--v1-ink); }
+.oc-home-v1 .oc-home-final-cta .oc-orange-btn { border-radius: 0; background: var(--v1-ink); color: #fff; }
+.oc-home-v1 .oc-home-inquiry-prompts { border-color: rgba(23,35,25,.35); }
+.oc-home-v1 .oc-home-inquiry-prompt { border-color: rgba(23,35,25,.27); }
+.oc-home-v1 .oc-home-inquiry-prompt > span,
+.oc-home-v1 .oc-home-inquiry-prompts-label { color: rgba(23,35,25,.65); }
+
+@media (max-width: 900px) {
+  .oc-home-v1 .oc-home-plan-row { grid-template-columns: 1fr; }
+  .oc-home-v1 .oc-plan-panel .oc-step,
+  .oc-home-v1 .oc-plan-panel .oc-step + .oc-step { min-height: 0; padding: 34px 0 38px; border-right: 0; }
+  .oc-home-v1 .oc-plan-panel .oc-step h3 { margin-top: 28px; }
+  .oc-home-v1 .oc-section-title,
+  .oc-home-v1 .oc-live-heading,
+  .oc-home-v1 .oc-comparison-heading { grid-template-columns: 1fr; gap: 24px; }
+  .oc-home-v1 .oc-live-heading h2,
+  .oc-home-v1 .oc-comparison-heading h2 { max-width: 700px; }
+}
+
+@media (max-width: 640px) {
+  .oc-home-v1 .oc-home-trust-grid { padding-inline: 20px; }
+  .oc-home-v1 .oc-home-plan-row,
+  .oc-home-v1 .oc-home-section,
+  .oc-home-v1 .oc-home-team,
+  .oc-home-v1 .oc-quote,
+  .oc-home-v1 .oc-live { padding-inline: 20px; }
+  .oc-home-v1 .oc-section-title h2 { font-size: 50px; }
+  .oc-home-v1 .oc-experience-band { min-height: 560px; }
+  .oc-home-v1 .oc-home-safari-media { min-height: 290px; }
+  .oc-home-v1 .oc-live-heading h2,
+  .oc-home-v1 .oc-comparison-heading h2 { font-size: 47px; }
+}
+
 /* Homepage concept 2026 — bold destination matrix + narrative funnel */
 .oc-prototype-hero {
   position: relative;

src/TravelSite.tsx

@@ -2002,6 +2002,7 @@ function routeDetailPillars(safari: SafariCardItem, language: SiteLanguage = 'zh
 function selectPage(path: string) {
   if (path === '/preview/classic') return <HomePage variant="classic" />;
   if (path === '/preview/v1') return <HomePage variant="v1" />;
+  if (path === '/preview/v2') return <EditorialHomePage />;
   if (path === '/safari-faqs' || path === '/faqs') return <SafariFaqsPage />;
   if (path.startsWith('/our-guides')) return <GuidesPage />;
   if (path.startsWith('/meet-the-team')) return <TeamPage />;
@@ -2038,6 +2039,119 @@ function selectPage(path: string) {
   return <HomePage />;
 }
 
+function EditorialHomePage() {
+  const { content, language } = useTravelSite();
+  const home = content.home;
+  const editorialExperiences = [
+    { number: '01', title: pickText('山野', 'Wild Karst', language), eyebrow: pickText('徒步 · 骑行 · 洞穴', 'Hike · Cycle · Caves', language), image: '/client-assets/karst-hike-ridge.jpg', href: '/experiences/karst-hiking/' },
+    { number: '02', title: pickText('村寨', 'Village Life', language), eyebrow: pickText('日常 · 家宴 · 手作', 'Homes · Tables · Craft', language), image: '/client-assets/villages-xijiang-dusk.jpg', href: '/experiences/indigenous-ethnic-villages/' },
+    { number: '03', title: pickText('水世界', 'Water Worlds', language), eyebrow: pickText('瀑布 · 峡谷 · 河流', 'Falls · Canyons · Rivers', language), image: '/client-assets/waterfall-huangguoshu-curtain.jpg', href: '/experiences/iconic-waterfall-clusters/' },
+    { number: '04', title: pickText('贵州味道', 'Taste Guizhou', language), eyebrow: pickText('家宴 · 市场 · 山野咖啡', 'Tables · Markets · Coffee', language), image: '/client-assets/culinary-long-table-banquet.jpg', href: '/experiences/culinary-cultural-journeys/' },
+  ];
+  const editorialRoutes = home.safaris.cards.slice(0, 3);
+  const fieldImages = [
+    '/client-assets/team-field-day.webp',
+    '/client-assets/culture-batik-making.jpg',
+    '/client-assets/river-packraft-shore.jpg',
+    '/client-assets/ancient-towns-zhenyuan-night.jpg',
+    '/client-assets/culinary-long-table-banquet.jpg',
+  ];
+
+  return (
+    <main className="oc-home-v2" data-no-translate>
+      <section className="oc-v2-hero" aria-labelledby="v2-hero-title">
+        <img src={asset(home.hero.imageUrl)} alt={pickText('贵州喀斯特山野中的万趣私家旅行', 'A private WanderQ journey in the karst landscape of Guizhou', language)} />
+        <div className="oc-v2-hero-shade" aria-hidden="true" />
+        <div className="oc-v2-hero-copy">
+          <p>{pickText('贵州，中国西南 · 私家旅行', 'Guizhou, Southwest China · Private travel', language)}</p>
+          <h1 id="v2-hero-title">
+            {pickText('大地，', 'Earth', language)}<br />
+            <em>{pickText('邀请你走近。', 'invites you closer.', language)}</em>
+          </h1>
+          <div className="oc-v2-hero-bottom">
+            <span>{pickText('山水不是背景，生活也不是表演。跟随真正生活在这里的人，去往贵州更深处。', 'Landscapes are not a backdrop, and local life is not a performance. Travel deeper with people who live here.', language)}</span>
+            <a href="/contact/">{pickText('设计我的旅程', 'Design my journey', language)} <ArrowRight size={18} aria-hidden="true" /></a>
+          </div>
+        </div>
+        <a className="oc-v2-hero-scroll" href="#v2-discover" aria-label={pickText('向下探索', 'Scroll to discover', language)}>
+          <ArrowRight size={20} weight="light" aria-hidden="true" />
+        </a>
+      </section>
+
+      <section className="oc-v2-discover" id="v2-discover" aria-labelledby="v2-discover-title">
+        <div className="oc-v2-section-intro">
+          <span>01 / {pickText('选择一种靠近方式', 'Choose how to get closer', language)}</span>
+          <div>
+            <h2 id="v2-discover-title">{pickText('贵州不只有一个入口。', 'There is more than one way into Guizhou.', language)}</h2>
+            <p>{pickText('从喀斯特山野、村寨日常、水世界或贵州餐桌出发。每一种体验都可以成为一条私家路线的起点。', 'Begin with wild karst, village life, water worlds or the local table. Each can become the first chapter of a private route.', language)}</p>
+          </div>
+        </div>
+        <div className="oc-v2-experience-grid">
+          {editorialExperiences.map((item, index) => (
+            <a className={`oc-v2-experience-card is-${index + 1}`} href={item.href} key={item.number}>
+              <img src={item.image} alt={item.title} />
+              <span>{item.number}</span>
+              <div><small>{item.eyebrow}</small><h3>{item.title}</h3></div>
+              <ArrowRight size={20} aria-hidden="true" />
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <section className="oc-v2-feature" aria-labelledby="v2-feature-title">
+        <div className="oc-v2-feature-image">
+          <img src="/client-assets/brand-real-guizhou.webp" alt={pickText('贵州村寨真实生活', 'Everyday life in a Guizhou village', language)} />
+          <span>{pickText('贵州 · 黔东南', 'Southeast Guizhou', language)}</span>
+        </div>
+        <div className="oc-v2-feature-copy">
+          <span>02 / {pickText('本期故事', 'Featured story', language)}</span>
+          <h2 id="v2-feature-title">{pickText('去一个地方，也理解一个地方。', 'Go somewhere. Understand it, too.', language)}</h2>
+          <p>{pickText('在村寨里留下一晚，在家常饭桌上多坐一会，听懂一门手艺和一栋木楼背后的生活。我们把“看见”变成真正的相遇。', 'Stay a night in the village. Linger at the family table. Understand the life behind a craft and a timber home. We turn seeing into meeting.', language)}</p>
+          <a href="/experiences/village-immersion/">{pickText('阅读村寨故事', 'Read the village story', language)} <ArrowRight size={16} aria-hidden="true" /></a>
+          <div className="oc-v2-feature-facts">
+            <div><b>100%</b><span>{pickText('私家定制', 'private planning', language)}</span></div>
+            <div><b>24/7</b><span>{pickText('在地协调', 'local support', language)}</span></div>
+            <div><b>EN / 中</b><span>{pickText('双语支持', 'bilingual support', language)}</span></div>
+          </div>
+        </div>
+      </section>
+
+      <section className="oc-v2-routes" aria-labelledby="v2-routes-title">
+        <div className="oc-v2-section-intro is-light">
+          <span>03 / {pickText('旅行灵感', 'Journey inspiration', language)}</span>
+          <div><h2 id="v2-routes-title">{pickText('三条路线，都是讨论的开始。', 'Three routes. Each starts a conversation.', language)}</h2><p>{pickText('先选一个接近你的方向，再按日期、兴趣、体力和住宿偏好重新编排。', 'Choose the direction closest to you, then reshape it around dates, interests, energy and stays.', language)}</p></div>
+        </div>
+        <div className="oc-v2-route-grid">
+          {editorialRoutes.map((route, index) => (
+            <a href={route.href} className={`oc-v2-route-card is-${index + 1}`} key={route.id}>
+              <img src={asset(route.imageUrl)} alt={oc(route.title, language)} />
+              <div><span>{String(index + 1).padStart(2, '0')} · {oc(route.nights, language)}</span><h3>{oc(route.title, language)}</h3><p>{oc(route.copy, language)}</p><b>{pickText('打开路线', 'Open journey', language)} <ArrowRight size={15} aria-hidden="true" /></b></div>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <section className="oc-v2-field" aria-labelledby="v2-field-title">
+        <div className="oc-v2-field-heading"><span>04 / {pickText('来自现场', 'From the field', language)}</span><h2 id="v2-field-title">{pickText('真实旅行，没有摆拍的模板。', 'Real journeys. No staged template.', language)}</h2></div>
+        <div className="oc-v2-field-collage">
+          {fieldImages.map((image, index) => <figure className={`is-${index + 1}`} key={image}><img src={image} alt={pickText(`贵州旅行现场 ${index + 1}`, `Guizhou journey moment ${index + 1}`, language)} />{index === 0 ? <figcaption>{pickText('万趣本地团队，在贵州。', 'The WanderQ team, here in Guizhou.', language)}</figcaption> : null}</figure>)}
+          <div className="oc-v2-field-note"><PlayCircle size={52} weight="thin" aria-hidden="true" /><p>{pickText('一顿饭、一条山路、一场手作，也可能是旅程里最久被记住的部分。', 'A meal, a mountain road or time at the craft table can become the longest-held memory.', language)}</p></div>
+        </div>
+      </section>
+
+      <section className="oc-v2-local" aria-labelledby="v2-local-title">
+        <div className="oc-v2-local-media"><img src="/client-assets/team-wanderq-group.webp" alt={pickText('万趣贵州本地团队', 'The Guizhou-based WanderQ team', language)} /><img src="/client-assets/team-field-day.webp" alt={pickText('万趣团队旅行现场', 'WanderQ team in the field', language)} /></div>
+        <div className="oc-v2-local-copy"><span>05 / {pickText('为什么是万趣', 'Why WanderQ', language)}</span><h2 id="v2-local-title">{pickText('离现场近一点，旅程就从容一点。', 'Closer to the field. Calmer on the road.', language)}</h2><p>{pickText('我们在贵州本地规划与执行。熟悉山路、天气、水位与村寨节奏，也理解境外客人需要怎样清楚、可靠的英文旅行支持。', 'We plan and operate from Guizhou—close to the roads, weather, water and village rhythms, with clear English-language support for international guests.', language)}</p><ul><li>{pickText('一组客人，一套私家方案', 'One private plan for one party', language)}</li><li>{pickText('合规入境接待与透明报价', 'Compliant inbound reception and clear pricing', language)}</li><li>{pickText('行程期间 24 小时在地协调', '24-hour local coordination while travelling', language)}</li></ul><a href="/our-story/">{pickText('认识本地团队', 'Meet the local team', language)} <ArrowRight size={16} aria-hidden="true" /></a></div>
+      </section>
+
+      <section className="oc-v2-final" aria-labelledby="v2-final-title">
+        <img src="/client-assets/ancient-towns-zhenyuan-night.jpg" alt={pickText('贵州镇远古城夜景', 'Zhenyuan ancient town at night', language)} />
+        <div><span>{pickText('下一段旅程，从一场对话开始。', 'Your next journey starts with a conversation.', language)}</span><h2 id="v2-final-title">{pickText('贵州，等你走进。', 'Guizhou is waiting.', language)}</h2><a href="/contact/">{pickText('开始规划', 'Start planning', language)} <ArrowRight size={18} aria-hidden="true" /></a></div>
+      </section>
+    </main>
+  );
+}
+
 function Header({
   language,
   onLanguageToggle,
@@ -2836,7 +2950,7 @@ function HomePage({ variant = 'v1' }: { variant?: 'classic' | 'v1' }) {
   ];
 
   return (
-    <main ref={prototypeRef} data-no-translate>
+    <main ref={prototypeRef} className={variant === 'v1' ? 'oc-home-v1' : 'oc-home-classic'} data-no-translate>
       {variant === 'classic' ? (
         <>
           <section className="oc-home-hero">