+ {/* Mobile Top Header */}
+
+
+ {/* Drawer Mask & Navigation Panel */}
+
setDrawerOpen(false)}
+ />
+
+
+ 全站导航目录
+
+
+
+ setDrawerOpen(false)}
+ >
+ 首页
+ ›
+
+
+
+ {navGroups.map((group) => (
+
+
{group.label}
+
+ {group.children.map((child) => (
+ `m-drawer-subitem ${isActive ? 'is-active' : ''}`}
+ onClick={() => setDrawerOpen(false)}
+ >
+ {child.label}
+
+ ))}
+
+
+ ))}
+
+
+ {/* Main Content Area */}
+
+ {children || }
+
+
+
+
+ )
+}
diff --git a/src/mobile/MobileViews.css b/src/mobile/MobileViews.css
new file mode 100644
index 0000000..b402d15
--- /dev/null
+++ b/src/mobile/MobileViews.css
@@ -0,0 +1,292 @@
+/* ===== Mobile Views Dedicated CSS ===== */
+
+.m-view-container {
+ width: 100%;
+ padding: 1.25rem 1rem 2.5rem;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+}
+
+/* Header & Typography */
+.m-eyebrow {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ font-size: 0.8rem;
+ color: var(--brand, #a61c20);
+ letter-spacing: 0.15em;
+}
+
+.m-eyebrow::before {
+ content: '';
+ width: 1rem;
+ height: 1px;
+ background: currentColor;
+}
+
+.theme-tech .m-eyebrow {
+ color: var(--gold, #c4a35a);
+}
+
+.m-page-title {
+ font-family: 'Noto Serif SC', serif;
+ font-size: clamp(1.4rem, 5.5vw, 1.85rem);
+ font-weight: 600;
+ margin: 0.2rem 0 0.6rem;
+ color: var(--ink, #1a1512);
+ line-height: 1.35;
+}
+
+.theme-tech .m-page-title {
+ color: #ffffff;
+}
+
+.m-lead {
+ font-size: 0.95rem;
+ line-height: 1.65;
+ color: var(--ink-soft, #5c534c);
+ margin: 0 0 1rem;
+}
+
+.theme-tech .m-lead {
+ color: rgba(243, 236, 228, 0.78);
+}
+
+.m-closing {
+ margin-top: 1rem;
+ padding-top: 0.85rem;
+ border-top: 1px solid rgba(196, 163, 90, 0.3);
+ font-family: 'Noto Serif SC', serif;
+ font-size: 0.95rem;
+ color: var(--gold, #c4a35a);
+ text-align: center;
+}
+
+/* Card Component */
+.m-card {
+ background: rgba(255, 255, 255, 0.85);
+ border: 1px solid rgba(166, 28, 32, 0.12);
+ border-radius: 0.5rem;
+ padding: 1.15rem 1.1rem;
+ box-shadow: 0 4px 15px rgba(26, 21, 18, 0.05);
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.theme-tech .m-card {
+ background: rgba(28, 25, 31, 0.85);
+ border-color: rgba(196, 163, 90, 0.22);
+ color: #f3ece4;
+}
+
+.m-card h3 {
+ font-family: 'Noto Serif SC', serif;
+ font-size: 1.1rem;
+ margin: 0;
+ color: var(--brand, #a61c20);
+}
+
+.theme-tech .m-card h3 {
+ color: var(--gold, #c4a35a);
+}
+
+.m-card p {
+ font-size: 0.9rem;
+ line-height: 1.6;
+ color: var(--ink-soft, #5c534c);
+ margin: 0;
+}
+
+.theme-tech .m-card p {
+ color: rgba(243, 236, 228, 0.75);
+}
+
+/* Button & CTAs */
+.m-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ padding: 0.6rem 1.25rem;
+ border-radius: 0.3rem;
+ font-size: 0.92rem;
+ font-weight: 500;
+ text-decoration: none;
+ transition: all 0.25s ease;
+}
+
+.m-btn-primary {
+ background: var(--brand, #a61c20);
+ color: #ffffff;
+ box-shadow: 0 4px 12px rgba(166, 28, 32, 0.3);
+}
+
+.m-btn-outline {
+ border: 1px solid var(--brand, #a61c20);
+ color: var(--brand, #a61c20);
+ background: transparent;
+}
+
+.theme-tech .m-btn-outline {
+ border-color: var(--gold, #c4a35a);
+ color: var(--gold, #c4a35a);
+}
+
+/* Mobile Hero Component */
+.m-hero {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ padding: 1.5rem 0 1rem;
+}
+
+.m-hero-sub {
+ font-size: 0.88rem;
+ color: var(--gold, #c4a35a);
+ letter-spacing: 0.15em;
+ font-weight: 600;
+}
+
+.m-hero-title {
+ font-family: 'Noto Serif SC', serif;
+ font-size: clamp(1.8rem, 7vw, 2.5rem);
+ color: var(--brand, #a61c20);
+ margin: 0;
+ line-height: 1.25;
+}
+
+.m-hero-img {
+ width: min(12rem, 50vw);
+ height: auto;
+ margin: 0.5rem auto;
+ filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
+}
+
+/* Specific Cards & Rings */
+.m-rings-row {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin: 0.85rem 0;
+}
+
+.m-ring-item {
+ width: 3.2rem;
+ height: 3.2rem;
+ border-radius: 50%;
+ border: 1px solid var(--gold, #c4a35a);
+ background: rgba(166, 28, 32, 0.08);
+ display: grid;
+ place-items: center;
+ font-family: 'Noto Serif SC', serif;
+ font-size: 1.15rem;
+ font-weight: 600;
+ color: var(--brand, #a61c20);
+}
+
+.theme-tech .m-ring-item {
+ background: rgba(196, 163, 90, 0.12);
+ color: var(--gold, #c4a35a);
+}
+
+.m-poem-box {
+ background: linear-gradient(135deg, rgba(166, 28, 32, 0.06), rgba(196, 163, 90, 0.08));
+ border: 1px solid rgba(196, 163, 90, 0.3);
+ padding: 1.25rem 1rem;
+ border-radius: 0.4rem;
+ text-align: center;
+}
+
+.m-poem-quote {
+ font-family: 'Noto Serif SC', serif;
+ font-size: 1.15rem;
+ line-height: 1.7;
+ color: var(--brand, #a61c20);
+ margin: 0 0 0.5rem;
+}
+
+.theme-tech .m-poem-quote {
+ color: var(--gold, #c4a35a);
+}
+
+.m-poem-source {
+ font-size: 0.82rem;
+ color: var(--ink-soft, #5c534c);
+}
+
+.theme-tech .m-poem-source {
+ color: rgba(243, 236, 228, 0.65);
+}
+
+.m-big-num {
+ font-family: 'Noto Serif SC', serif;
+ font-size: 3.8rem;
+ font-weight: 700;
+ color: var(--brand, #a61c20);
+ line-height: 1;
+ text-shadow: 0 2px 10px rgba(166, 28, 32, 0.2);
+ text-align: center;
+ margin: 0.3rem 0;
+}
+
+.theme-tech .m-big-num {
+ color: var(--gold, #c4a35a);
+}
+
+.m-qr-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 1.5rem 1rem;
+ gap: 1rem;
+}
+
+.m-qr-img {
+ width: 10rem;
+ height: 10rem;
+ padding: 0.5rem;
+ background: #ffffff;
+ border-radius: 0.4rem;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.m-qr-img img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.m-deep-links {
+ margin-top: 1.25rem;
+ padding-top: 1rem;
+ border-top: 1px solid rgba(166, 28, 32, 0.12);
+ display: grid;
+ gap: 0.65rem;
+}
+
+.m-deep-card {
+ padding: 0.85rem 0.95rem;
+ background: rgba(255, 255, 255, 0.6);
+ border-left: 3px solid var(--gold, #c4a35a);
+ border-radius: 0.2rem;
+ text-decoration: none;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.m-deep-card strong {
+ font-size: 0.95rem;
+ color: var(--brand, #a61c20);
+}
+
+.m-deep-card span {
+ font-size: 0.82rem;
+ color: var(--ink-soft, #5c534c);
+}
diff --git a/src/mobile/MobileViews.tsx b/src/mobile/MobileViews.tsx
new file mode 100644
index 0000000..5ea4c72
--- /dev/null
+++ b/src/mobile/MobileViews.tsx
@@ -0,0 +1,468 @@
+import { Link, Outlet, useLocation } from 'react-router-dom'
+import {
+ brand,
+ contact,
+ haoke,
+ hero,
+ images,
+ partner,
+ poetry,
+ qingxiang,
+ subsidy,
+ system,
+ tech,
+ techDetail,
+} from '../content/site'
+import './MobileViews.css'
+
+export function MobileViews() {
+ const location = useLocation()
+ const path = location.pathname
+
+ switch (path) {
+ case '/':
+ return
+ case '/brand':
+ return
+ case '/poetry':
+ return
+ case '/qingxiang':
+ return
+ case '/haoke':
+ return
+ case '/system':
+ return
+ case '/tech':
+ return
+ case '/subsidy':
+ return
+ case '/partner':
+ return
+ case '/tech-detail':
+ return
+ case '/contact':
+ return
+ default:
+ return
+ }
+}
+
+/* 1. Mobile Home View */
+function MobileHomeView() {
+ return (
+
+
+
{hero.subBrand} · 移动全景
+
{hero.brand}
+
+ {hero.title}
+
+
+
+ {hero.subtitle}
+
+
+
+ {hero.primaryCta.label}
+
+
+ {hero.secondaryCta.label}
+
+
+
+
+ )
+}
+
+/* 2. Mobile Brand View */
+function MobileBrandView() {
+ return (
+
+
+
{brand.eyebrow}
+
{brand.title}
+
{brand.lead}
+
+
+
+ {brand.cards.map((card, idx) => (
+
+
0{idx + 1}
+
{card.title}
+
{card.text}
+
+ ))}
+
+
+
+
故里文明印记
+
+
+ {brand.timeline.map((item) => (
+
+
+ {item}
+
+ ))}
+
+
+
+
{brand.closing}
+
+
+
深度阅读
+ {brand.deepReads.map((dp) => (
+
+
{dp.label} ›
+
{dp.blurb}
+
+ ))}
+
+
+ )
+}
+
+/* 3. Mobile Poetry View */
+function MobilePoetryView() {
+ return (
+
+
+
{poetry.eyebrow}
+
{poetry.title}
+
{poetry.lead}
+
+
+
+
“{poetry.mainPoem.quote}”
+
—— {poetry.mainPoem.source}
+
+
+
+ {poetry.poems.map((p) => (
+
+
“{p.quote}”
+
—— {p.source}
+
+ ))}
+
+
+
{poetry.closing}
+
+
+
诗酒专题
+ {poetry.deepReads.map((dp) => (
+
+
{dp.label} ›
+
{dp.blurb}
+
+ ))}
+
+
+ )
+}
+
+/* 4. Mobile Qingxiang View */
+function MobileQingxiangView() {
+ return (
+
+
+
{qingxiang.eyebrow}
+
{qingxiang.title}
+
{qingxiang.lead}
+
+
+
+
+
+ {qingxiang.styleWords.map((word) => (
+
+ {word}
+
+ ))}
+
+
+
+
+ {qingxiang.positions.map((pos) => (
+
+
{pos.title}
+
{pos.text}
+
+ ))}
+
+
+
+
品鉴仪式 · 抿咂呵
+
+ {qingxiang.tasting.map((t) => (
+
+ {t.title}：
+ {t.text}
+
+ ))}
+
+
+
+
{qingxiang.mission}
+
+
+
清香宝典专题
+ {qingxiang.deepReads.map((dp) => (
+
+
{dp.label} ›
+
{dp.blurb}
+
+ ))}
+
+
+ )
+}
+
+/* 5. Mobile Haoke View */
+function MobileHaokeView() {
+ return (
+
+
+
{haoke.eyebrow}
+
{haoke.title}
+
{haoke.lead}
+
+
+
+
核心商业机制
+
+ {haoke.oneLiner}
+
+
+
+
+ {haoke.points.map((pt) => (
+
+
{pt.title}
+
{pt.text}
+
+ ))}
+
+
+
{haoke.closing}
+
+ )
+}
+
+/* 6. Mobile System View */
+function MobileSystemView() {
+ return (
+
+
+
{system.eyebrow}
+
{system.title}
+
{system.lead}
+
+
+
+ {system.ends.map((end) => (
+
+
{end.title}
+
{end.role}
+
+ 核心能力：{end.caps}
+
+
+ ))}
+
+
+
+
+
{system.closing}
+
+ )
+}
+
+/* 7. Mobile Tech View */
+function MobileTechView() {
+ return (
+
+
+
{tech.eyebrow}
+
{tech.title}
+
{tech.lead}
+
+
+
+ {tech.points.map((pt) => (
+
+
{pt.title}
+
{pt.text}
+
+ ))}
+
+
+
{tech.claim}
+
+
+
+ {tech.cta.label}
+
+
+
+ )
+}
+
+/* 8. Mobile Subsidy View */
+function MobileSubsidyView() {
+ return (
+
+
+
{subsidy.eyebrow}
+
{subsidy.title}
+
+ {subsidy.subtitle}
+
+
{subsidy.lead}
+
+
+
+
专项补贴规模
+
{subsidy.number}
+
{subsidy.numberNote}
+
+
+
+ {subsidy.points.map((pt) => (
+
+
{pt.title}
+
{pt.text}
+
+ ))}
+
+
+
{subsidy.closing}
+
+ )
+}
+
+/* 9. Mobile Partner View */
+function MobilePartnerView() {
+ return (
+
+
+
{partner.eyebrow}
+
{partner.title}
+
{partner.lead}
+
+
+
+ {partner.points.map((pt) => (
+
+
{pt.title}
+
{pt.text}
+
+ ))}
+
+
+
+
+ {partner.primaryCta.label}
+
+
+ {partner.secondaryCta.label}
+
+
+
+ )
+}
+
+/* 10. Mobile Tech Detail View */
+function MobileTechDetailView() {
+ return (
+
+
+
{techDetail.eyebrow}
+
{techDetail.title}
+
{techDetail.lead}
+
+
+
+ {techDetail.ports.map((port) => (
+
+
{port.title}
+
{port.text}
+
+ ))}
+
+
+
{techDetail.closing}
+
+ )
+}
+
+/* 11. Mobile Contact View */
+function MobileContactView() {
+ return (
+
+
+
{contact.eyebrow}
+
{contact.title}
+
{contact.lead}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/Brand.css b/src/pages/Brand.css
new file mode 100644
index 0000000..0a225f3
--- /dev/null
+++ b/src/pages/Brand.css
@@ -0,0 +1,102 @@
+.brand-layout {
+ display: grid;
+ grid-template-columns: 1.2fr 0.8fr;
+ gap: 2.5rem;
+ margin-top: 1rem;
+}
+
+.brand-timeline {
+ position: relative;
+ display: grid;
+ gap: 1.75rem;
+ padding-left: 1.5rem;
+}
+
+.brand-line {
+ position: absolute;
+ left: 0.35rem;
+ top: 0.4rem;
+ bottom: 0.4rem;
+ width: 1px;
+ background: var(--brand);
+ transform-origin: top;
+ animation: drawLineY 1.2s var(--ease) both;
+}
+
+.brand-item {
+ position: relative;
+}
+
+.brand-item::before {
+ content: '';
+ position: absolute;
+ left: -1.32rem;
+ top: 0.45rem;
+ width: 0.55rem;
+ height: 0.55rem;
+ border-radius: 50%;
+ background: var(--brand);
+}
+
+.brand-num {
+ display: block;
+ color: var(--gold);
+ letter-spacing: 0.14em;
+ font-size: 0.85rem;
+ margin-bottom: 0.35rem;
+}
+
+.brand-vtitle {
+ writing-mode: vertical-rl;
+ float: left;
+ margin: 0 0.85rem 0 0;
+ color: var(--brand);
+ font-size: 1.35rem;
+ letter-spacing: 0.2em;
+ height: 7rem;
+}
+
+.brand-aside {
+ display: grid;
+ gap: 1rem;
+ align-content: start;
+}
+
+.brand-photo img {
+ aspect-ratio: 4 / 3;
+ object-fit: cover;
+ width: 100%;
+}
+
+.brand-photo.secondary img {
+ aspect-ratio: 16 / 10;
+}
+
+.brand-era {
+ list-style: none;
+ margin: 2.5rem 0 0;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem 1.5rem;
+ border-top: 1px solid var(--gold-soft);
+ padding-top: 1.5rem;
+}
+
+.brand-era li {
+ color: var(--brand);
+ font-size: 1.05rem;
+}
+
+@media (max-width: 48rem) {
+ .brand-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .brand-vtitle {
+ writing-mode: horizontal-tb;
+ float: none;
+ height: auto;
+ margin: 0 0 0.5rem;
+ }
+}
diff --git a/src/pages/Brand.tsx b/src/pages/Brand.tsx
new file mode 100644
index 0000000..4612ed4
--- /dev/null
+++ b/src/pages/Brand.tsx
@@ -0,0 +1,68 @@
+import { Link } from 'react-router-dom'
+import { Reveal } from '../components/Reveal'
+import { brand, images } from '../content/site'
+import './Brand.css'
+
+export function BrandPage() {
+ return (
+
+
+
+ {brand.eyebrow}
+ {brand.title}
+ {brand.lead}
+
+
+
+
+
+ {brand.cards.map((card, i) => (
+
+ {String(i + 1).padStart(2, '0')}
+ {card.title}
+ {card.text}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ {brand.timeline.map((item) => (
+ -
+ {item}
+
+ ))}
+
+ {brand.closing}
+
+
+
+
+ 深度阅读
+ 从典籍、故里、祠祀到酒厂，按篇章走进品牌传承全文脉络。
+
+
+ {brand.deepReads.map((item, i) => (
+
+
+ {item.label}
+ {item.blurb}
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/pages/Contact.css b/src/pages/Contact.css
new file mode 100644
index 0000000..5959595
--- /dev/null
+++ b/src/pages/Contact.css
@@ -0,0 +1,77 @@
+.contact-ceremony {
+ text-align: center;
+}
+
+.contact-lead {
+ margin-inline: auto;
+ text-align: center;
+}
+
+.contact-meet {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 3rem;
+ align-items: center;
+ justify-items: center;
+ margin-top: 2.5rem;
+ max-width: 42rem;
+ margin-inline: auto;
+}
+
+.contact-info {
+ text-align: center;
+ display: grid;
+ gap: 0.35rem;
+ justify-items: center;
+}
+
+.role {
+ margin: 0;
+ color: var(--gold);
+ letter-spacing: 0.14em;
+ font-size: 0.95rem;
+}
+
+.name {
+ margin: 0;
+ font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
+ letter-spacing: 0.12em;
+}
+
+.phone {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.75rem;
+ margin-top: 0.5rem;
+ font-size: 1.35rem;
+ color: var(--gold);
+ letter-spacing: 0.08em;
+ border-bottom: 1px solid rgba(196, 163, 90, 0.35);
+}
+
+.qr-block {
+ text-align: center;
+}
+
+.qr-image {
+ width: min(14rem, 70vw);
+ margin: 0 auto 0.85rem;
+ padding: 0.65rem;
+ background: #fff;
+ border-radius: 0.2rem;
+ box-shadow: var(--shadow-soft);
+}
+
+.qr-block p {
+ margin: 0;
+ color: var(--ink-soft);
+ font-size: 0.9rem;
+}
+
+@media (max-width: 48rem) {
+ .contact-meet {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+}
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
new file mode 100644
index 0000000..872161c
--- /dev/null
+++ b/src/pages/Contact.tsx
@@ -0,0 +1,32 @@
+import { Reveal } from '../components/Reveal'
+import { contact, images } from '../content/site'
+import './Contact.css'
+
+export function ContactPage() {
+ return (
+
+
+
+ {contact.eyebrow}
+ {contact.title}
+ {contact.lead}
+
+
+
+
+ )
+}
diff --git a/src/pages/DeepPage.tsx b/src/pages/DeepPage.tsx
new file mode 100644
index 0000000..67eab42
--- /dev/null
+++ b/src/pages/DeepPage.tsx
@@ -0,0 +1,22 @@
+import { useParams, Navigate, useLocation } from 'react-router-dom'
+import { DeepLayout } from '../components/DeepLayout'
+import { deepPageMap } from '../content/nav'
+import { useStageMode } from '../hooks/useStageMode'
+import { resolveStageRedirect } from '../content/deep/assets'
+
+export function DeepPage() {
+ const { slug } = useParams()
+ const location = useLocation()
+ const isStage = useStageMode()
+ const section = location.pathname.split('/').filter(Boolean)[0]
+ const path = `/${section}/${slug}`
+
+ if (isStage) {
+ const main = resolveStageRedirect(path) ?? '/'
+ return
+ }
+
+ const page = deepPageMap[path]
+ if (!page) return
+ return
+}
diff --git a/src/pages/Haoke.css b/src/pages/Haoke.css
new file mode 100644
index 0000000..08a74ec
--- /dev/null
+++ b/src/pages/Haoke.css
@@ -0,0 +1,58 @@
+.haoke-page {
+ position: relative;
+}
+
+.haoke-banner {
+ position: absolute;
+ inset: 0 0 auto 0;
+ height: 14rem;
+ background-size: cover;
+ background-position: center;
+ opacity: 0.18;
+ mask-image: linear-gradient(180deg, #000, transparent);
+}
+
+.haoke-slogan {
+ margin: 1.5rem 0 2.5rem;
+ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
+ color: var(--brand);
+ line-height: 1.45;
+ max-width: 40rem;
+}
+
+.haoke-steps {
+ display: grid;
+ gap: 0;
+ border-left: 1px solid rgba(166, 28, 32, 0.25);
+ margin-left: 0.55rem;
+ padding-left: 1.5rem;
+}
+
+.haoke-step {
+ position: relative;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0.85rem;
+ padding: 1.15rem 0 1.5rem;
+}
+
+.haoke-dot {
+ position: absolute;
+ left: -1.85rem;
+ top: 1.45rem;
+ width: 0.7rem;
+ height: 0.7rem;
+ border-radius: 50%;
+ background: var(--brand);
+ box-shadow: 0 0 0 0.35rem rgba(166, 28, 32, 0.12);
+}
+
+.haoke-step h3 {
+ margin: 0 0 0.4rem;
+ color: var(--brand);
+}
+
+.haoke-step p {
+ margin: 0;
+ color: var(--ink-soft);
+}
diff --git a/src/pages/Haoke.tsx b/src/pages/Haoke.tsx
new file mode 100644
index 0000000..4c62f15
--- /dev/null
+++ b/src/pages/Haoke.tsx
@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom'
+import { Reveal } from '../components/Reveal'
+import { haoke, images } from '../content/site'
+import './Haoke.css'
+
+export function HaokePage() {
+ return (
+
+
+
+
+ {haoke.eyebrow}
+ {haoke.title}
+ {haoke.lead}
+
+
+
+ {haoke.oneLiner}
+
+
+
+ {haoke.points.map((point, i) => (
+
+
+
+
{point.title}
+
{point.text}
+
+ ))}
+
+
+
+ {haoke.closing}
+
+
+ 了解三端协同
+
+
+
+
+ )
+}
diff --git a/src/pages/Home.css b/src/pages/Home.css
new file mode 100644
index 0000000..75cc63c
--- /dev/null
+++ b/src/pages/Home.css
@@ -0,0 +1,118 @@
+.hero {
+ position: relative;
+ min-height: calc(100vh - var(--nav-h));
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ padding: 3rem 0 4rem;
+}
+
+.hero-bg {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ background-position: center;
+ transform: scale(1.05);
+ animation: softZoom 1.4s var(--ease) both;
+}
+
+.hero-mask {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ 105deg,
+ rgba(247, 242, 234, 0.94) 0%,
+ rgba(247, 242, 234, 0.82) 42%,
+ rgba(247, 242, 234, 0.35) 70%,
+ rgba(18, 16, 20, 0.25) 100%
+ );
+}
+
+.hero-grid {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ grid-template-columns: 1.15fr 0.85fr;
+ gap: 2.5rem;
+ align-items: center;
+}
+
+.hero-brand {
+ margin: 0;
+ font-size: clamp(2.4rem, 2rem + 2vw, 4rem);
+ color: var(--brand);
+ letter-spacing: 0.12em;
+}
+
+.hero-subbrand {
+ margin: 0.35rem 0 1.25rem;
+ color: var(--ink-soft);
+ letter-spacing: 0.35em;
+ font-size: 0.95rem;
+}
+
+.hero-title {
+ margin: 0 0 1rem;
+ font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem);
+}
+
+.hero-subtitle {
+ margin: 0;
+ max-width: 34rem;
+ color: var(--ink-soft);
+ font-size: 1.05rem;
+}
+
+.hero-visual {
+ justify-self: center;
+ width: min(22rem, 100%);
+ filter: drop-shadow(0 1.5rem 2.5rem rgba(26, 21, 18, 0.25));
+}
+
+.hero-visual img {
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+}
+
+.modules {
+ background: linear-gradient(180deg, transparent, rgba(166, 28, 32, 0.04));
+}
+
+.module-rail {
+ display: flex;
+ gap: 1rem;
+ overflow-x: auto;
+ padding-bottom: 0.75rem;
+ scroll-snap-type: x mandatory;
+}
+
+.module-rail-item {
+ flex: 0 0 auto;
+ width: min(14rem, 72vw);
+ min-height: 9rem;
+ padding: 1.2rem 1.1rem;
+ border-left: 2px solid var(--brand);
+ background: rgba(255, 255, 255, 0.55);
+ scroll-snap-align: start;
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+ transition: transform 0.35s var(--ease), background 0.35s var(--ease);
+}
+
+.module-rail-item:hover {
+ transform: translateY(-0.25rem);
+ background: #fff;
+}
+
+.module-index {
+ font-size: 0.78rem;
+ letter-spacing: 0.14em;
+ color: var(--brand);
+}
+
+.module-desc {
+ color: var(--ink-soft);
+ font-size: 0.88rem;
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..cb5d86a
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom'
+import { Reveal } from '../components/Reveal'
+import { hero, images, moduleEntries } from '../content/site'
+import './Home.css'
+
+export function HomePage() {
+ return (
+ <>
+
+
+
+
+
+
{hero.brand}
+
+ {hero.subBrand}
+
+
+ {hero.title}
+
+
+ {hero.subtitle}
+
+
+
+ {hero.primaryCta.label}
+
+
+ {hero.secondaryCta.label}
+
+
+
+
+
+
+
+
+
+
+
+ 探索杜康好客
+ 十大篇章
+ 从酒祖文脉到好客闭环，循定稿结构逐章走进。
+
+
+ {moduleEntries.map((item, index) => (
+
+
+ {String(index + 1).padStart(2, '0')}
+ {item.label}
+ {item.desc}
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/pages/Partner.css b/src/pages/Partner.css
new file mode 100644
index 0000000..7869e29
--- /dev/null
+++ b/src/pages/Partner.css
@@ -0,0 +1,54 @@
+.partner-layout {
+ display: grid;
+ grid-template-columns: 1.2fr 0.8fr;
+ gap: 2.5rem;
+ align-items: start;
+}
+
+.partner-list {
+ list-style: none;
+ margin: 1.5rem 0 0;
+ padding: 0;
+ display: grid;
+ gap: 0;
+}
+
+.partner-row li {
+ display: grid;
+ grid-template-columns: 3rem 1fr;
+ gap: 0.85rem;
+ padding: 1.1rem 0;
+ border-bottom: 1px solid var(--tech-line);
+}
+
+.partner-idx {
+ color: var(--gold);
+ font-size: 1.15rem;
+}
+
+.partner-row h3 {
+ margin: 0 0 0.35rem;
+ color: var(--gold);
+ font-size: 1.1rem;
+}
+
+.partner-row p {
+ margin: 0;
+ color: var(--ink-soft);
+}
+
+.partner-aside .media-frame img {
+ width: 100%;
+ aspect-ratio: 4 / 5;
+ object-fit: cover;
+}
+
+.partner-cta {
+ margin-top: 1.25rem;
+}
+
+@media (max-width: 48rem) {
+ .partner-layout {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/pages/Partner.tsx b/src/pages/Partner.tsx
new file mode 100644
index 0000000..62de2ce
--- /dev/null
+++ b/src/pages/Partner.tsx
@@ -0,0 +1,48 @@
+import { Link } from 'react-router-dom'
+import { Reveal } from '../components/Reveal'
+import { images, partner } from '../content/site'
+import './Partner.css'
+
+export function PartnerPage() {
+ return (
+
+
+
+
+ {partner.eyebrow}
+ {partner.title}
+ {partner.lead}
+
+
+
+ {partner.points.map((point, i) => (
+
+ -
+ {String(i + 1).padStart(2, '0')}
+
+
{point.title}
+
{point.text}
+
+
+ ))}
+
+
+
+
+
+
+
+
+ {partner.primaryCta.label}
+
+
+ {partner.secondaryCta.label}
+
+
+
+
+ )
+}
diff --git a/src/pages/Poetry.css b/src/pages/Poetry.css
new file mode 100644
index 0000000..2e984a5
--- /dev/null
+++ b/src/pages/Poetry.css
@@ -0,0 +1,87 @@
+.poetry-page {
+ position: relative;
+ overflow: hidden;
+}
+
+.poetry-bg {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ background-position: center;
+ opacity: 0.12;
+ pointer-events: none;
+}
+
+.poetry-shell {
+ position: relative;
+ z-index: 1;
+}
+
+.poem-stage {
+ margin: 1.5rem 0 2rem;
+}
+
+.poem-main {
+ margin: 0 auto;
+ max-width: 36rem;
+ padding: 2rem 1.75rem;
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid rgba(166, 28, 32, 0.15);
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ min-height: 18rem;
+}
+
+.poem-main p {
+ margin: 0;
+ font-size: 1.35rem;
+ letter-spacing: 0.14em;
+ line-height: 2;
+}
+
+.poem-main cite,
+.poem-slip cite {
+ display: block;
+ margin-top: 1rem;
+ font-style: normal;
+ color: var(--ink-soft);
+ font-size: 0.9rem;
+ font-family: 'Noto Sans SC', sans-serif;
+}
+
+.poem-scatter {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.25rem;
+ align-items: stretch;
+ margin-bottom: 2rem;
+}
+
+.poem-slip {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+ padding: 1.25rem 1.1rem;
+ background: rgba(247, 242, 234, 0.95);
+ border-top: 2px solid var(--brand);
+ box-shadow: var(--shadow-soft);
+ box-sizing: border-box;
+}
+
+.poem-slip cite {
+ margin-top: auto;
+ padding-top: 0.85rem;
+}
+
+@media (max-width: 48rem) {
+ .poem-main {
+ writing-mode: horizontal-tb;
+ text-orientation: mixed;
+ min-height: auto;
+ }
+
+ .poem-scatter {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/pages/Poetry.tsx b/src/pages/Poetry.tsx
new file mode 100644
index 0000000..05a42c3
--- /dev/null
+++ b/src/pages/Poetry.tsx
@@ -0,0 +1,57 @@
+import { Link } from 'react-router-dom'
+import { Reveal } from '../components/Reveal'
+import { images, poetry } from '../content/site'
+import './Poetry.css'
+
+export function PoetryPage() {
+ return (
+
+
+
+
+ {poetry.eyebrow}
+ {poetry.title}
+ {poetry.lead}
+
+
+
+
+ {poetry.mainPoem.quote}
+ {poetry.mainPoem.source}
+
+
+
+
+ {poetry.poems.map((poem, i) => (
+
+ 「{poem.quote}」
+ {poem.source}
+
+ ))}
+
+
+
+ {poetry.reading}
+ {poetry.closing}
+
+
+
+
+ 深度阅读
+ 选萃与唐宋余韵，把诗酒长卷摊开细读。
+
+
+ {poetry.deepReads.map((item, i) => (
+
+
+ {item.label}
+ {item.blurb}
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/pages/Qingxiang.css b/src/pages/Qingxiang.css
new file mode 100644
index 0000000..cbc9df0
--- /dev/null
+++ b/src/pages/Qingxiang.css
@@ -0,0 +1,138 @@
+.qx-stage {
+ position: relative;
+ display: grid;
+ place-items: center;
+ min-height: 22rem;
+ margin: 1.5rem 0 2rem;
+}
+
+.qx-bottle {
+ width: min(14rem, 46vw);
+ z-index: 2;
+}
+
+.qx-bottle img {
+ width: 100%;
+ filter: drop-shadow(0 1rem 2rem rgba(26, 21, 18, 0.28));
+}
+
+.qx-rings {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+}
+
+.qx-ring {
+ position: absolute;
+ width: 4.2rem;
+ height: 4.2rem;
+ border: 1px solid var(--brand);
+ border-radius: 50%;
+ display: grid;
+ place-items: center;
+ background: rgba(255, 255, 255, 0.75);
+ color: var(--brand);
+ font-size: 1.5rem;
+}
+
+.ring-0 {
+ left: 8%;
+ top: 18%;
+}
+.ring-1 {
+ right: 10%;
+ top: 12%;
+}
+.ring-2 {
+ right: 18%;
+ bottom: 16%;
+}
+
+.qx-style-text {
+ text-align: center;
+ margin-inline: auto;
+}
+
+.qx-cross {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ max-width: 48rem;
+ margin: 0 auto 2.5rem;
+}
+
+.qx-arm {
+ padding: 1.2rem 1.1rem;
+ border: 1px solid rgba(166, 28, 32, 0.14);
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.qx-arm h3 {
+ margin: 0 0 0.5rem;
+ color: var(--brand);
+ font-size: 1.1rem;
+}
+
+.qx-arm p {
+ margin: 0;
+ color: var(--ink-soft);
+ font-size: 0.95rem;
+}
+
+.arm-0 {
+ border-right: none;
+ border-bottom: none;
+}
+.arm-1 {
+ border-bottom: none;
+}
+.arm-2 {
+ border-right: none;
+}
+
+.qx-split {
+ display: grid;
+ grid-template-columns: 1.05fr 0.95fr;
+ gap: 2rem;
+ align-items: center;
+}
+
+.qx-h {
+ color: var(--brand);
+ margin: 1.2rem 0 0.45rem;
+}
+
+.qx-taste {
+ display: grid;
+ gap: 0.65rem;
+ margin: 1.25rem 0;
+}
+
+.qx-taste strong {
+ color: var(--brand);
+ margin-right: 0.65rem;
+}
+
+.qx-split .media-frame img {
+ width: 100%;
+ aspect-ratio: 16 / 10;
+ object-fit: contain;
+ background: rgba(0, 0, 0, 0.03);
+}
+
+@media (max-width: 48rem) {
+ .qx-cross,
+ .qx-split {
+ grid-template-columns: 1fr;
+ }
+
+ .qx-arm {
+ border: 1px solid rgba(166, 28, 32, 0.14) !important;
+ }
+
+ .qx-ring {
+ width: 3.2rem;
+ height: 3.2rem;
+ font-size: 1.15rem;
+ }
+}
diff --git a/src/pages/Qingxiang.tsx b/src/pages/Qingxiang.tsx
new file mode 100644
index 0000000..bc63623
--- /dev/null
+++ b/src/pages/Qingxiang.tsx
@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom'
+import { Reveal } from '../components/Reveal'
+import { images, qingxiang } from '../content/site'
+import './Qingxiang.css'
+
+export function QingxiangPage() {
+ return (
+
+
+
+ {qingxiang.eyebrow}
+ {qingxiang.title}
+ {qingxiang.lead}
+
+
+
+
+
+
+
+ {qingxiang.styleWords.map((word, i) => (
+
+ {word}
+
+ ))}
+
+
+
+
+ {qingxiang.styleText}
+
+
+
+ {qingxiang.positions.map((item, i) => (
+
+ {item.title}
+ {item.text}
+
+ ))}
+
+
+
+
+ 工艺要点
+ {qingxiang.craft}
+ 产地
+ {qingxiang.origin}
+
+ {qingxiang.tasting.map((step) => (
+
+ {step.title}
+ {step.text}
+
+ ))}
+
{qingxiang.mission}
+ 产品露出：{qingxiang.product}
+
+
+
+
+
+
+
+
+
+ 清香宝典 · 深读
+ 赛道、定位、工艺、品鉴、体验与溯源，各篇独立展开。
+
+
+ {qingxiang.deepReads.map((item, i) => (
+
+
+ {item.label}
+ {item.blurb}
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/pages/Subsidy.css b/src/pages/Subsidy.css
new file mode 100644
index 0000000..0ee2f73
--- /dev/null
+++ b/src/pages/Subsidy.css
@@ -0,0 +1,59 @@
+.subsidy-center {
+ text-align: center;
+}
+
+.subsidy-sub {
+ color: var(--gold);
+ letter-spacing: 0.12em;
+ margin: 0 0 1rem;
+}
+
+.big-number {
+ font-size: clamp(4.5rem, 3rem + 6vw, 8rem);
+ color: var(--gold);
+ line-height: 1;
+ margin: 1rem 0 1rem;
+ opacity: 0;
+ transform: scale(0.8);
+ transition: opacity 0.9s var(--ease), transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+.big-number.is-in {
+ opacity: 1;
+ transform: scale(1);
+}
+
+.number-note {
+ max-width: 40rem;
+ margin-inline: auto;
+ text-align: center;
+}
+
+.subsidy-ring {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.25rem;
+ text-align: left;
+ margin: 2rem 0;
+}
+
+.subsidy-point {
+ padding: 0 0.25rem 0 1rem;
+ border-left: 2px solid var(--gold);
+}
+
+.subsidy-point h3 {
+ margin: 0 0 0.5rem;
+ color: var(--gold);
+}
+
+.subsidy-point p {
+ margin: 0;
+ color: var(--ink-soft);
+}
+
+@media (max-width: 48rem) {
+ .subsidy-ring {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/pages/Subsidy.tsx b/src/pages/Subsidy.tsx
new file mode 100644
index 0000000..d34452c
--- /dev/null
+++ b/src/pages/Subsidy.tsx
@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from 'react'
+import { Reveal } from '../components/Reveal'
+import { subsidy } from '../content/site'
+import './Subsidy.css'
+
+export function SubsidyPage() {
+ const [showNumber, setShowNumber] = useState(false)
+ const numberRef = useRef
(null)
+
+ useEffect(() => {
+ const node = numberRef.current
+ if (!node) return
+ const observer = new IntersectionObserver(
+ (entries) => {
+ if (entries.some((e) => e.isIntersecting)) {
+ setShowNumber(true)
+ observer.disconnect()
+ }
+ },
+ { threshold: 0.35 },
+ )
+ observer.observe(node)
+ return () => observer.disconnect()
+ }, [])
+
+ return (
+
+
+
+ {subsidy.eyebrow}
+ {subsidy.title}
+ {subsidy.subtitle}
+
+ {subsidy.lead}
+
+
+
+
+ {subsidy.number}
+
+
+ {subsidy.numberNote}
+
+
+
+ {subsidy.points.map((point, i) => (
+
+ {point.title}
+ {point.text}
+
+ ))}
+
+
+
+ {subsidy.closing}
+ {subsidy.footnote}
+
+
+
+ {system.eyebrow}
+ {system.title}
+ {system.lead}
+
+
+
+ {system.ends.map((item, i) => (
+
+ {item.title}
+ {item.role}
+ {item.caps}
+
+ ))}
+
+
+
+ {system.loop}
+ {system.closing}
+
+
+ 科技驱动
+
+
+
+
+
+ {tech.eyebrow}
+ {tech.title}
+ {tech.lead}
+
+
+
+
+ 数字轨道
+
+ {tech.points.map((point, i) => (
+
+ {point.title}
+ {point.text}
+
+ ))}
+
+
+
+ {tech.claim}
+
+
+ {tech.cta.label}
+
+
+
+
+
+ {techDetail.eyebrow}
+ {techDetail.title}
+ {techDetail.lead}
+
+
+
+ {techDetail.ports.map((port, i) => (
+
+ {String(i + 1).padStart(2, '0')}
+ {port.title}
+ {port.text}
+
+ ))}
+
+
+
+
+ {techDetail.highlights.map((item) => (
+ -
+ {item}
+
+ ))}
+
+ {techDetail.closing}
+ {techDetail.contactHint}
+
+
+ 联系我们
+
+
+
+
+ {/* Top HUD */}
+
+
+ 
+ 杜康好客
+ 全景展控
+
+
+ {/* Module Navigation Pills */}
+
+
+ {/* Index, AutoPlay Toggle & Exit */}
+
+
+
+
+ {String(activeIdx + 1).padStart(2, '0')} / {String(stageNavItems.length).padStart(2, '0')}
+
+
+
+ 退出展控
+ ✕
+
+
+
+
+ {/* Main Exhibition Viewport */}
+
+
+
+
+
+
+ {/* Bottom Progress, Dots & Hints */}
+
+
+
+
+
+ {hero.subBrand} · 全景展面
+
+
+ {hero.brand}
+
+
+ 杜康好客
+
+
+ {hero.title}
+
+
+ {hero.subtitle}
+
+
+
+ 进入品牌展厅 ›
+
+
+
+
+
+
+
+
+
+
+
+ {brand.eyebrow}
+
+
+ {brand.title}
+
+
+ {brand.lead}
+
+
+
+
+ {brand.cards.map((card, idx) => (
+
+
0{idx + 1}
+
+
{card.title}
+
{card.text}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {brand.timeline.map((item) => (
+
+
+ {item}
+
+ ))}
+
+
+
+ {poetry.eyebrow}
+
+
+ {poetry.title}
+
+
+ {poetry.lead}
+
+
+
+
+
“{poetry.mainPoem.quote}”
+
—— {poetry.mainPoem.source}
+
+
+
+ {poetry.poems.map((poem, idx) => (
+
+
“{poem.quote}”
+
—— {poem.source}
+
+ ))}
+
+
+
+
+ {poetry.closing}
+
+
+
+ {qingxiang.eyebrow}
+
+
+ {qingxiang.title}
+
+
+ {qingxiang.lead}
+
+
+
+
+ {qingxiang.positions.slice(0, 2).map((pos, idx) => (
+
+
{pos.title}
+
{pos.text}
+
+ ))}
+
+
+
+
+
+ {qingxiang.styleWords.map((word) => (
+
+ {word}
+
+ ))}
+
+
+
+
+ {qingxiang.positions.slice(2, 4).map((pos, idx) => (
+
+
{pos.title}
+
{pos.text}
+
+ ))}
+
+
+
+
+ {qingxiang.mission}
+
+
+
+ {haoke.eyebrow}
+
+
+ {haoke.title}
+
+
+ {haoke.lead}
+
+
+
+
+
+ 核心模式机制
+
+
+ {haoke.oneLiner}
+
+
{haoke.closing}
+
+
+
+ {haoke.points.map((pt, idx) => (
+
+
{pt.title}
+
{pt.text}
+
+ ))}
+
+
+
+
+ {system.eyebrow}
+
+
+ {system.title}
+
+
+ {system.lead}
+
+
+
+ {system.ends.map((end, idx) => (
+
+
{end.title}
+
{end.role}
+
核心能力：{end.caps}
+
+ ))}
+
+
+
+ 闭环链路：{system.loop}
+
+
+
+ {tech.eyebrow}
+
+
+ {tech.title}
+
+
+ {tech.lead}
+
+
+
+ {tech.points.map((pt, idx) => (
+
+
{pt.title}
+
{pt.text}
+
+ ))}
+
+
+
+ {tech.claim}
+
+
+
+ {subsidy.eyebrow}
+
+
+ {subsidy.title}
+
+
+ {subsidy.lead}
+
+
+
+
+
专项资源规模
+
{subsidy.number}
+
{subsidy.numberNote}
+
+
+
+ {subsidy.points.map((pt, idx) => (
+
+
{pt.title}
+
{pt.text}
+
+ ))}
+
+
+
+
+ {subsidy.closing}
+
+
+
+ {partner.eyebrow}
+
+
+ {partner.title}
+
+
+ {partner.lead}
+
+
+
+
+
核心竞争优势
+
+ {partner.points.slice(0, 3).map((pt) => (
+ -
+ {pt.title}： {pt.text}
+
+ ))}
+
+
+
+
+
合作要求与支持
+
+ {partner.points.slice(3, 5).map((pt) => (
+ -
+ {pt.title}： {pt.text}
+
+ ))}
+
+
+
+
+
+
+ 立即联系合作 ›
+
+
+
+
+ {techDetail.eyebrow}
+
+
+ {techDetail.title}
+
+
+ {techDetail.lead}
+
+
+
+ {techDetail.ports.map((port, idx) => (
+
+
{port.title}
+
{port.text}
+
+ ))}
+
+
+
+ {techDetail.closing}
+
+
+
+ {contact.eyebrow}
+
+
+ {contact.title}
+
+
+ {contact.lead}
+
+
+
+
+
+
+
+
+
{contact.name}
+
{contact.role}
+
{contact.phone}
+
{contact.wechatHint}
+
+
+
+