647 lines
31 KiB
TypeScript
647 lines
31 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState, type CSSProperties } from 'react'
|
||
import './App.css'
|
||
|
||
const sections = [
|
||
{ id: 'hero', label: 'LP-H 首屏', title: '你请客，我买单', summary: '杜康好客：你请客，我买单。买酒送等价好客权益，到合作门店抵餐。' },
|
||
{ id: 'brand', label: 'LP-01 品牌传承', title: '品牌传承', summary: '杜康被尊为秫酒酒宗、酒祖与酒神，是华夏酿造文明的精神图腾。' },
|
||
{ id: 'poetry', label: 'LP-02 诗酒文化', title: '诗酒文化', summary: '何以解忧，唯有杜康。曹操《短歌行》主诗签，苏轼、白居易、辛弃疾辅诗签。' },
|
||
{ id: 'qingxiang', label: 'LP-03 清香宝典', title: '清香', summary: '千年杜康，醉美清香。绵·净·雅，杏花村同源同脉，一清到底。' },
|
||
{ id: 'haoke', label: 'LP-04 好客模式', title: '好客模式', summary: '买酒送等价好客权益；到合作门店按面额抵餐。酒餐同赴，线上线下一体。' },
|
||
{ id: 'system', label: 'LP-05 三端协同', title: '三端协同', summary: '城市合伙人拓店 → 用户购酒得权益 → 门店核销结算 → 再反哺城市运营。' },
|
||
{ id: 'tech', label: 'LP-06 科技驱动', title: '科技驱动', summary: '四端一体、全链路闭环、宴请场景数字化、城市运营中台。' },
|
||
{ id: 'subsidy', label: 'LP-07 酒厂实力', title: '酒厂实力', summary: '十亿级支持，与餐饮共度寒冬。支持细则以合作政策为准。' },
|
||
{ id: 'partner', label: 'LP-08 城市合伙人', title: '城市合伙人', summary: '携酒祖入城，共建一座城的好客。了解合作方式，不承诺收益。' },
|
||
{ id: 'tech-detail', label: 'LP-09 科技板块', title: '科技板块', summary: '可运营、可结算、可规模化的好客系统：用户端、门店核销端、合伙人端、总部管控。' },
|
||
{ id: 'contact', label: 'LP-10 联系我们', title: '联系我们', summary: '扫码咨询项目负责人吕丹，电话 13073729990。无留资表单。' },
|
||
]
|
||
|
||
const navItems = [
|
||
{ href: '#brand', label: '品牌传承' },
|
||
{ href: '#poetry', label: '诗酒文化' },
|
||
{ href: '#qingxiang', label: '清香' },
|
||
{ href: '#haoke', label: '好客模式' },
|
||
{ href: '#system', label: '三端协同' },
|
||
{ href: '#tech', label: '科技驱动' },
|
||
{ href: '#subsidy', label: '酒厂实力' },
|
||
{ href: '#partner', label: '城市合伙人' },
|
||
{ href: '#tech-detail', label: '科技板块' },
|
||
{ href: '#contact', label: '联系我们' },
|
||
]
|
||
|
||
const heritageCards = [
|
||
{
|
||
title: '导语',
|
||
text: '杜康，被尊为秫酒「酒宗」「酒祖」，更被世人敬奉为「酒神」。从典籍到诗篇，从故里到祠祀，杜康不只是一杯酒的名字——它是华夏酿造文明的精神图腾。',
|
||
},
|
||
{
|
||
title: '典籍立祖',
|
||
text: '《世本》载「杜康作秫酒」；《说文解字》谓「少康，杜康也」。酒之所兴，肇自上皇——杜康造酒，写入中华文明的源头叙事。',
|
||
},
|
||
{
|
||
title: '故里承源',
|
||
text: '杜康村、杜康泉、空桑涧……酒祖故里的山水与作坊，延续着「以秫为骨、以曲为魂」的古老智慧，让技进乎道，香传千年。',
|
||
},
|
||
{
|
||
title: '酒以成礼',
|
||
text: '从封坛祭祖到「饮惟祀」的酒德观念，杜康文化把粮食之精，升华为礼乐之器——国之大事，在祀在戎，酒以成礼。',
|
||
},
|
||
]
|
||
|
||
const timeline = [
|
||
'先秦典籍立名',
|
||
'魏晋诗性转化',
|
||
'杜康祠祀千年',
|
||
'当代酒祖品牌复兴',
|
||
]
|
||
|
||
const qingxiangPositions = [
|
||
{ title: '企业定位', text: '承千年清韵，铸清香白酒标杆企业。' },
|
||
{ title: '品质定位', text: '守古法清酿，酿纯粹绵柔清雅好酒。' },
|
||
{ title: '品牌定位', text: '传酒祖清魂，塑高端清香文化名酒。' },
|
||
{ title: '营销定位', text: '拓清香赛道，引全民清雅饮酒新风尚。' },
|
||
]
|
||
|
||
const tastingSteps = [
|
||
{ title: '抿', text: '微启触香，品粮香本味' },
|
||
{ title: '咂', text: '舌卷含香，品绵柔入喉' },
|
||
{ title: '呵', text: '缓缓呵气，品回甘生津' },
|
||
]
|
||
|
||
const systemEnds = [
|
||
{
|
||
title: '城市合伙人',
|
||
role: '开城运营者：拓店、组仓配、带团队，让品牌在一座城真正落地。',
|
||
caps: '门店拓展与入驻协同 · 推广与代下单 · 佣金与经营数据可见',
|
||
},
|
||
{
|
||
title: '合作门店',
|
||
role: '好客权益核销端：把用户带回餐桌，用核销结算反哺门店经营。',
|
||
caps: '手机号/核销码核销 · 核销记录可查 · 结算路径清晰',
|
||
},
|
||
{
|
||
title: '用户',
|
||
role: '购酒与权益的享受者：小程序下单，酒到席、权益到店。',
|
||
caps: '清香选购 · 1:1 好客权益 · 同城配送/现场提货',
|
||
},
|
||
]
|
||
|
||
const techPoints = [
|
||
{
|
||
title: '四端一体',
|
||
text: '用户小程序、门店核销、城市合伙人、总部管控——权限分离、数据同源，开城可复制。',
|
||
},
|
||
{
|
||
title: '全链路闭环',
|
||
text: '下单履约、好客权益发放、门店核销、结算回款可视可追，减少「口头承诺、纸面对账」。',
|
||
},
|
||
{
|
||
title: '宴请场景数字化',
|
||
text: '面向商务宴请高频人群：酒到席、权益到店，把一次消费同时服务「喝」与「吃」。',
|
||
},
|
||
{
|
||
title: '城市运营中台',
|
||
text: '拓店、推广归因、经营数据与热力洞察，服务合伙人把一座城「盘清楚、推得动」。',
|
||
},
|
||
]
|
||
|
||
const techPorts = [
|
||
{
|
||
title: '用户端',
|
||
text: '清香选购与展示 · 下单履约（同城配送/现场提货） · 好客权益领取与使用 · 售后工单与发票入口',
|
||
},
|
||
{
|
||
title: '门店核销端',
|
||
text: '手机号/核销码核销 · 核销记录可查 · 结算与提现协同（细则以政策为准）',
|
||
},
|
||
{
|
||
title: '城市合伙人端',
|
||
text: '门店资料与入驻协同 · 推广/代下单 · 佣金与经营数据可见 · 子账号与权限管理',
|
||
},
|
||
{
|
||
title: '总部管控与数据',
|
||
text: '城市开通与审核 · 全链路订单/核销洞察 · 热力与经营分析 · 结算打款协同',
|
||
},
|
||
]
|
||
|
||
function App() {
|
||
const isStageMode = useMemo(() => new URLSearchParams(window.location.search).get('mode') === 'stage', [])
|
||
const [activeIndex, setActiveIndex] = useState(0)
|
||
const [autoPlay, setAutoPlay] = useState(false)
|
||
const [panelOpen, setPanelOpen] = useState(true)
|
||
const activeSection = sections[activeIndex] ?? sections[0]
|
||
|
||
useEffect(() => {
|
||
document.body.classList.toggle('stage-mode', isStageMode)
|
||
return () => document.body.classList.remove('stage-mode')
|
||
}, [isStageMode])
|
||
|
||
useEffect(() => {
|
||
if (!isStageMode) return
|
||
const hashIndex = sections.findIndex((section) => `#${section.id}` === window.location.hash)
|
||
if (hashIndex >= 0) setActiveIndex(hashIndex)
|
||
}, [isStageMode])
|
||
|
||
useEffect(() => {
|
||
if (isStageMode) return
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
const visible = entries
|
||
.filter((entry) => entry.isIntersecting)
|
||
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
|
||
if (visible?.target.id) {
|
||
const nextIndex = sections.findIndex((section) => section.id === visible.target.id)
|
||
if (nextIndex >= 0) setActiveIndex(nextIndex)
|
||
}
|
||
},
|
||
{ threshold: [0.35, 0.6, 0.8] },
|
||
)
|
||
sections.forEach((section) => {
|
||
const node = document.getElementById(section.id)
|
||
if (node) observer.observe(node)
|
||
})
|
||
return () => observer.disconnect()
|
||
}, [isStageMode])
|
||
|
||
const goToSection = useCallback((index: number) => {
|
||
const safeIndex = Math.max(0, Math.min(index, sections.length - 1))
|
||
setActiveIndex(safeIndex)
|
||
if (isStageMode) {
|
||
window.history.replaceState(null, '', `?mode=stage#${sections[safeIndex].id}`)
|
||
return
|
||
}
|
||
document.getElementById(sections[safeIndex].id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||
}, [isStageMode])
|
||
|
||
useEffect(() => {
|
||
if (!isStageMode) return
|
||
|
||
const root = document.getElementById('root')
|
||
root?.setAttribute('tabindex', '-1')
|
||
root?.focus({ preventScroll: true })
|
||
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
const key = event.key
|
||
const code = event.code
|
||
const isNext = key === 'ArrowRight' || code === 'ArrowRight' || key === 'ArrowDown' || code === 'ArrowDown' || key === 'PageDown' || code === 'PageDown' || key === ' '
|
||
const isPrev = key === 'ArrowLeft' || code === 'ArrowLeft' || key === 'ArrowUp' || code === 'ArrowUp' || key === 'PageUp' || code === 'PageUp'
|
||
const isHome = key === 'Home' || code === 'Home'
|
||
const isEnd = key === 'End' || code === 'End'
|
||
|
||
if (!isNext && !isPrev && !isHome && !isEnd) return
|
||
|
||
event.preventDefault()
|
||
event.stopPropagation()
|
||
|
||
setActiveIndex((current) => {
|
||
let next = current
|
||
if (isNext) next = Math.min(current + 1, sections.length - 1)
|
||
if (isPrev) next = Math.max(current - 1, 0)
|
||
if (isHome) next = 0
|
||
if (isEnd) next = sections.length - 1
|
||
window.history.replaceState(null, '', `?mode=stage#${sections[next].id}`)
|
||
return next
|
||
})
|
||
}
|
||
|
||
window.addEventListener('keydown', handleKeyDown, true)
|
||
return () => {
|
||
window.removeEventListener('keydown', handleKeyDown, true)
|
||
root?.removeAttribute('tabindex')
|
||
}
|
||
}, [isStageMode])
|
||
|
||
useEffect(() => {
|
||
if (!isStageMode || !autoPlay) return
|
||
const timer = window.setInterval(() => {
|
||
setActiveIndex((current) => {
|
||
const next = current >= sections.length - 1 ? 0 : current + 1
|
||
window.history.replaceState(null, '', `?mode=stage#${sections[next].id}`)
|
||
return next
|
||
})
|
||
}, 8000)
|
||
return () => window.clearInterval(timer)
|
||
}, [autoPlay, isStageMode])
|
||
|
||
const progress = ((activeIndex + 1) / sections.length) * 100
|
||
|
||
return (
|
||
<div className={isStageMode ? 'site is-stage' : 'site'}>
|
||
<header className="topbar">
|
||
<a className="brand-lockup" href="#hero" onClick={() => goToSection(0)}>
|
||
<img className="haoke-logo-img" src="/assets/haoke-logo.png" alt="杜康好客" />
|
||
<span>
|
||
<strong>杜康好客</strong>
|
||
<small>酒祖清香</small>
|
||
</span>
|
||
</a>
|
||
<nav className="nav-links" aria-label="主导航">
|
||
{navItems.map((item) => (
|
||
<a href={item.href} key={item.href}>{item.label}</a>
|
||
))}
|
||
</nav>
|
||
<a className="nav-cta" href="#contact">扫码咨询</a>
|
||
</header>
|
||
|
||
<main
|
||
className={isStageMode ? 'stage-track' : undefined}
|
||
style={isStageMode ? { transform: `translate3d(-${activeIndex * 100}vw, 0, 0)` } : undefined}
|
||
>
|
||
<section className="page-section hero-section poetic-section reveal-section" id="hero">
|
||
<div className="ink-cloud ink-cloud-one" />
|
||
<div className="hero-copy">
|
||
<p className="brand-main">杜康好客</p>
|
||
<p className="brand-sub">酒祖清香 · 清香系列</p>
|
||
<h1>你请客，我买单</h1>
|
||
<p className="hero-text">买酒送等价好客权益，到合作门店抵餐——让酒与席，同赴一场清雅之约。</p>
|
||
<div className="hero-actions">
|
||
<a className="primary-button" href="#haoke">了解好客模式</a>
|
||
<a className="secondary-button" href="#partner">了解城市合伙人</a>
|
||
</div>
|
||
</div>
|
||
<div className="hero-visual" aria-label="杜康好客清香系列 T30 产品视觉">
|
||
<img className="hero-bottle" src="/assets/t30-hero-bottle.png" alt="杜康好客清香系列 T30" />
|
||
</div>
|
||
</section>
|
||
|
||
<section className={`page-section poetic-section brand-section${activeIndex === 1 ? ' is-entered' : ''}`} id="brand">
|
||
<div className="section-heading">
|
||
<img className="ornament haoke-mark" src="/assets/haoke-logo.png" alt="杜康好客" />
|
||
<span className="eyebrow">品牌传承</span>
|
||
<h2>酒祖杜康：中国酒文化的精神原点</h2>
|
||
</div>
|
||
<div className="brand-layout">
|
||
<div className="heritage-grid">
|
||
{heritageCards.map((card, index) => (
|
||
<article className="paper-card" key={card.title} style={{ '--slide-i': index } as CSSProperties}>
|
||
<span>{card.title}</span>
|
||
<p>{card.text}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<figure className="heritage-figure">
|
||
<img src="/assets/heritage-scene.png" alt="酒祖杜康祠堂造像" />
|
||
<figcaption>酒祖承源 · 杜康留香</figcaption>
|
||
</figure>
|
||
</div>
|
||
<div className="timeline" aria-label="品牌传承时间线">
|
||
{timeline.map((item, index) => (
|
||
<div className="timeline-item" key={item} style={{ '--slide-i': index } as CSSProperties}>{item}</div>
|
||
))}
|
||
</div>
|
||
<p className="closing-line">站在今日回望，杜康如一坛陈年佳酿——愈久愈醇，愈传愈清。</p>
|
||
</section>
|
||
|
||
<section className={`page-section poetic-section poetry-section${activeIndex === 2 ? ' is-entered' : ''}`} id="poetry">
|
||
<div className="poetry-main-card reveal-card">
|
||
<img className="ornament haoke-mark" src="/assets/haoke-logo.png" alt="杜康好客" />
|
||
<span className="eyebrow">诗酒文化</span>
|
||
<h2>何以解忧，唯有杜康</h2>
|
||
<p className="lead">「诗酒」二字，是中国人心里最动人的共鸣。千载光阴里，曹操、杜甫、白居易、苏轼、辛弃疾……无数名家以杜康为意象，把一抹醇香写进东方美学。</p>
|
||
<blockquote>
|
||
<span>对酒当歌，人生几何？</span>
|
||
<strong>何以解忧，唯有杜康。</strong>
|
||
<cite>——东汉 · 曹操《短歌行》</cite>
|
||
</blockquote>
|
||
<p>从魏武的感喟，到唐人的开眉，再到宋人的神思——杜康完成了从「酒祖」到「诗心密码」的转化，成为文人精神世界的通行意象。</p>
|
||
<p className="closing-inline">斟半盏清醑，展卷轻吟：让酒香携着古人的魂魄，穿越千年与我们共醉。</p>
|
||
</div>
|
||
<div className="poetry-tags">
|
||
<article style={{ '--slide-i': 0 } as CSSProperties}>
|
||
<b>苏轼</b>
|
||
<span>「他年血食汝，当配杜康神。」</span>
|
||
<small>——宋 · 苏轼</small>
|
||
</article>
|
||
<article style={{ '--slide-i': 1 } as CSSProperties}>
|
||
<b>白居易</b>
|
||
<span>「不似杜康神用速，十分一盏便开眉。」</span>
|
||
<small>——唐 · 白居易</small>
|
||
</article>
|
||
<article style={{ '--slide-i': 2 } as CSSProperties}>
|
||
<b>辛弃疾</b>
|
||
<span>「杜康初筮，正得云雷。」</span>
|
||
<small>——宋 · 辛弃疾</small>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="page-section poetic-section qingxiang-section" id="qingxiang">
|
||
<div className="section-heading">
|
||
<img className="ornament haoke-mark" src="/assets/haoke-logo.png" alt="杜康好客" />
|
||
<span className="eyebrow">清香宝典</span>
|
||
<h2>千年杜康，醉美清香</h2>
|
||
<p>浓香内卷、酱香回落的时代，清香正成为确定性更强的黄金赛道。酒祖杜康扎根山西杏花村——千年酒都，与清香名酒同源同脉，一清到底。</p>
|
||
</div>
|
||
<div className="data-band">
|
||
<div>
|
||
<strong>约1000亿元</strong>
|
||
<span>2024年中国清香白酒销售收入，同比增长约13%；利润约350亿元</span>
|
||
<small>来源：黑格咨询《2025中国清香白酒产业发展报告》</small>
|
||
</div>
|
||
<div>
|
||
<strong>45.6%</strong>
|
||
<span>2025年消费者白酒香型偏好中清香型约45.6%（酱香约43.04%，浓香约41.76%）</span>
|
||
<small>来源：艾媒咨询</small>
|
||
</div>
|
||
</div>
|
||
<div className="feature-layout">
|
||
<div className="position-grid">
|
||
{qingxiangPositions.map((item) => (
|
||
<article key={item.title}>
|
||
<h3>{item.title}</h3>
|
||
<p>{item.text}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<div className="craft-card">
|
||
<h3>绵 · 净 · 雅</h3>
|
||
<p>粮香纯正无杂味，清香干净通透；入口绵柔顺滑，落口爽利干脆；杂醇含量低，不口干、不上头，醒酒快——适配小酌与宴席多场景。</p>
|
||
<p className="craft-extra">大麦、豌豆、高粱三种原料；清香「7321」工艺，讲究「清蒸二次清」「一清到底」，味道更醇厚。产地：扎根杏花村千年酿酒圣地，同源同脉，品质有据。</p>
|
||
<div className="tasting-detail">
|
||
{tastingSteps.map((step) => (
|
||
<div key={step.title}>
|
||
<strong>{step.title}</strong>
|
||
<p>{step.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="mission-line">坚守纯粹品质，悦享清逸人生。</p>
|
||
<p className="product-tag">产品露出：杜康好客 · 清香系列 T30</p>
|
||
</div>
|
||
</div>
|
||
<figure className="store-figure">
|
||
<img src="/assets/store-preview.png" alt="杜康清香酒文馆效果示意" />
|
||
<figcaption>杜康清香 · 沉浸式酒文馆示意</figcaption>
|
||
</figure>
|
||
<p className="footnote">行业数据引自公开研究报告，仅供参考；具体以权威发布为准。</p>
|
||
</section>
|
||
|
||
<section className="page-section poetic-section haoke-section" id="haoke">
|
||
<div className="section-heading centered">
|
||
<span className="eyebrow">杜康好客</span>
|
||
<h2>你请客，我买单</h2>
|
||
<p>杜康好客，是酒祖杜康面向宴请场景的供应链与权益平台：总部供酒，城市合伙人推广，门店核销好客权益，用户一次购买，同时覆盖「酒 + 餐」。</p>
|
||
<p className="mode-line">买酒，送等价好客权益；到合作门店，按面额抵餐。</p>
|
||
</div>
|
||
<div className="three-columns">
|
||
<article>
|
||
<span>01</span>
|
||
<h3>酒餐同赴</h3>
|
||
<p>商务宴请不必再「酒一套、餐一套」分开算。买多少酒，送多少面额的好客权益，让席间更从容。</p>
|
||
</article>
|
||
<article>
|
||
<span>02</span>
|
||
<h3>线上线下一体</h3>
|
||
<p>小程序购酒、同城送达或现场提货；好客权益到合作门店核销——品牌、履约与核销，同一条链路。</p>
|
||
</article>
|
||
<article>
|
||
<span>03</span>
|
||
<h3>与餐饮共度时艰</h3>
|
||
<p>把酒厂资源与门店客流重新连上：用户得实惠，门店得核销结算，合伙人得城市运营空间——让清香美酒，成为餐桌上的暖流。</p>
|
||
</article>
|
||
</div>
|
||
<p className="closing-line">千年酒祖的清香，遇见一套可落地的好客机制。</p>
|
||
<div className="section-cta">
|
||
<a className="primary-button" href="#system">了解三端协同</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="page-section poetic-section system-section" id="system">
|
||
<div className="section-heading">
|
||
<span className="eyebrow">三端协同</span>
|
||
<h2>城市合伙人 · 门店 · 用户，一城一盘棋</h2>
|
||
<p>杜康好客用一套系统，把「推得动、核得清、买得爽」连成闭环——每一端各司其职，全城一起把清香与好客做起来。</p>
|
||
</div>
|
||
<div className="system-grid">
|
||
{systemEnds.map((item) => (
|
||
<article key={item.title}>
|
||
<h3>{item.title}</h3>
|
||
<p>{item.role}</p>
|
||
<small>{item.caps}</small>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<p className="loop-line">闭环示意：合伙人拓店 → 用户购酒得权益 → 门店核销结算 → 再反哺城市运营</p>
|
||
<p className="closing-line">三端同屏，好客才成立；系统在线，信任才可复制。</p>
|
||
<div className="section-cta">
|
||
<a className="primary-button" href="#tech">进入科技驱动</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="page-section tech-section tech-drive-section" id="tech">
|
||
<div className="tech-orbit" />
|
||
<div className="section-heading dark-heading">
|
||
<span className="eyebrow">科技驱动</span>
|
||
<h2>让白酒行业，跑在可运营的数字轨道上</h2>
|
||
<p>传统白酒拼品牌、拼渠道；杜康好客把「购酒—权益—核销—结算」做成在线闭环，让酒厂资源、城市运营与餐饮门店，第一次用同一套系统对话。</p>
|
||
</div>
|
||
<div className="tech-grid">
|
||
{techPoints.map((item) => (
|
||
<article key={item.title}>
|
||
<span>{item.title}</span>
|
||
<p>{item.text}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<p className="industry-claim">科技不是白酒的装饰，而是穿越周期的基础设施——帮酒厂更精准触达，帮餐饮更快回血，帮合伙人更可控地开城。</p>
|
||
<div className="section-cta">
|
||
<a className="primary-button tech-button" href="#tech-detail">查看科技板块详情</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="page-section tech-section subsidy-section" id="subsidy">
|
||
<div className="section-heading dark-heading centered">
|
||
<span className="eyebrow">酒厂实力</span>
|
||
<h2>十亿级支持，与餐饮共度寒冬</h2>
|
||
<p className="sub-title">酒祖杜康清香 · 真资源入场，真补贴到位</p>
|
||
<p>当餐饮遭遇客流与成本的双重压力，杜康好客选择站到餐桌这一边：以酒厂之力，把补贴与流量送进合作门店，把清香美酒变成可核销、可回血的经营助力。</p>
|
||
</div>
|
||
<div className="subsidy-number reveal-number">十亿</div>
|
||
<p className="number-desc">酒厂专项支持规模：十亿级资源投入，用于权益让利、门店激励与城市拓展——不是口号，是可落地的好客供给。</p>
|
||
<div className="subsidy-points">
|
||
<article>
|
||
<h3>品牌硬实力</h3>
|
||
<p>酒祖杜康清香背书，杏花村产区同源同脉；宴请场景有故事、有品质、有辨识度。</p>
|
||
</article>
|
||
<article>
|
||
<h3>补贴真机制</h3>
|
||
<p>用户购酒即获等价好客权益，到店抵餐；门店核销有结算路径，让「请吃饭」变成双方都愿意持续的生意。</p>
|
||
</article>
|
||
<article>
|
||
<h3>共度周期</h3>
|
||
<p>寒冬里最缺的不是又一张海报，而是把客流、酒水与结算打通的系统——杜康好客，为此而来。</p>
|
||
</article>
|
||
</div>
|
||
<p className="closing-line dark-closing">酒厂出资源，科技出闭环，门店与用户同受益。</p>
|
||
<p className="footnote dark-footnote">支持细则以合作政策为准。</p>
|
||
</section>
|
||
|
||
<section className="page-section tech-section partner-section" id="partner">
|
||
<div className="section-heading dark-heading">
|
||
<span className="eyebrow">城市合伙人</span>
|
||
<h2>携酒祖入城，共建一座城的好客</h2>
|
||
<p>若你认同酒祖杜康的清香价值，也看好「酒 + 餐」的数字化机会——欢迎了解城市合伙人：用系统化能力，把品牌、门店与用户在一座城运营起来。</p>
|
||
</div>
|
||
<div className="partner-detail-grid">
|
||
<article><h3>杜康实力</h3><p>酒祖品牌 + 清香产品矩阵 + 十亿级支持背书</p></article>
|
||
<article><h3>科技底座</h3><p>三端协同、全链路可追踪，开城不靠口头账</p></article>
|
||
<article><h3>定制风格</h3><p>城市策略、拓店节奏与运营支持，按城匹配</p></article>
|
||
<article><h3>适合谁</h3><p>有本地餐饮/渠道资源 · 认同长期运营 · 愿意用系统做管理的城市操盘手</p></article>
|
||
<article className="span-2"><h3>我们提供</h3><p>品牌与货盘支持 · 四端系统权限 · 拓店与培训协同 · 结算与数据可见</p></article>
|
||
</div>
|
||
<div className="hero-actions">
|
||
<a className="primary-button tech-button" href="#contact">了解合作方式</a>
|
||
<a className="secondary-button tech-secondary" href="#tech-detail">查看科技板块</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="page-section tech-section tech-detail-section" id="tech-detail">
|
||
<div className="section-heading dark-heading centered">
|
||
<span className="eyebrow">科技板块</span>
|
||
<h2>可运营、可结算、可规模化的好客系统</h2>
|
||
<p>杜康好客科技板块，围绕「开城—履约—核销—结算—洞察」构建四端能力，让白酒宴请场景从经验驱动，升级为数据与流程驱动。</p>
|
||
</div>
|
||
<div className="ports-grid">
|
||
{techPorts.map((port) => (
|
||
<article key={port.title}>
|
||
<h3>{port.title}</h3>
|
||
<p>{port.text}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<div className="tech-highlights">
|
||
<span>一套账本贯穿购酒到核销</span>
|
||
<span>权限分离保障多方协作</span>
|
||
<span>开城可复制降低口头协同成本</span>
|
||
</div>
|
||
<p className="closing-line dark-closing">科技板块的目标很明确：让每一瓶清香、每一笔好客权益、每一次门店核销，都跑在可信的轨道上。</p>
|
||
<p className="contact-hint">了解更多请联系杜康好客 · 项目负责人</p>
|
||
</section>
|
||
|
||
<section className="page-section tech-section contact-section" id="contact">
|
||
<div className="section-heading dark-heading">
|
||
<span className="eyebrow">联系我们</span>
|
||
<h2>扫码咨询 · 对接项目负责人</h2>
|
||
<p>现场如需进一步了解酒祖杜康清香、好客模式或城市合作，请扫码添加对接人，或致电联系。</p>
|
||
<p className="contact-role">杜康好客 · 项目负责人</p>
|
||
<div className="contact-person">
|
||
<strong>吕丹</strong>
|
||
<a href="tel:13073729990">13073729990</a>
|
||
</div>
|
||
</div>
|
||
<div className="qr-card">
|
||
<img src="/assets/qr-contact.svg" alt="微信二维码占位图" />
|
||
<span>扫一扫上方二维码，添加项目负责人微信</span>
|
||
</div>
|
||
<footer className="footer in-section">
|
||
<strong>杜康好客 · 酒祖清香</strong>
|
||
<span>你请客，我买单</span>
|
||
<span>© 杜康好客 2026</span>
|
||
<span>晋ICP备2026004970号</span>
|
||
<p>理性饮酒，未成年人禁止饮酒。本展示内容仅供品牌与合作了解，不构成任何收益承诺。行业数据引自公开研究报告，仅供参考。支持细则以合作政策为准。</p>
|
||
</footer>
|
||
</section>
|
||
</main>
|
||
|
||
{isStageMode && (
|
||
<>
|
||
<button
|
||
aria-label="上一节"
|
||
className="stage-click-zone stage-click-prev"
|
||
disabled={activeIndex <= 0}
|
||
onClick={() => goToSection(activeIndex - 1)}
|
||
type="button"
|
||
>
|
||
<span>‹</span>
|
||
</button>
|
||
<button
|
||
aria-label="下一节"
|
||
className="stage-click-zone stage-click-next"
|
||
disabled={activeIndex >= sections.length - 1}
|
||
onClick={() => goToSection(activeIndex + 1)}
|
||
type="button"
|
||
>
|
||
<span>›</span>
|
||
</button>
|
||
{panelOpen ? (
|
||
<aside className="stage-panel is-open" aria-label="展控模式控制面板">
|
||
<div className="stage-status">
|
||
<span>好客发布会 · 展控模式</span>
|
||
<div className="stage-status-right">
|
||
<b>{String(activeIndex + 1).padStart(2, '0')} / {String(sections.length).padStart(2, '0')}</b>
|
||
<button
|
||
type="button"
|
||
className="stage-collapse-btn"
|
||
onClick={() => setPanelOpen(false)}
|
||
aria-label="收起展控面板"
|
||
>
|
||
收起
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<p>{activeSection.summary}</p>
|
||
<div className="autoplay-row">
|
||
<button
|
||
type="button"
|
||
className={autoPlay ? 'is-on' : ''}
|
||
onClick={() => setAutoPlay((value) => !value)}
|
||
>
|
||
{autoPlay ? '自动播：开' : '自动播：关'}
|
||
</button>
|
||
<button type="button" onClick={() => goToSection(0)}>回首屏</button>
|
||
</div>
|
||
<div className="highlight-jumps">
|
||
<button type="button" onClick={() => goToSection(2)}>诗酒</button>
|
||
<button type="button" onClick={() => goToSection(7)}>十亿</button>
|
||
<button type="button" onClick={() => goToSection(6)}>科技四端</button>
|
||
</div>
|
||
<div className="stage-qr-grid">
|
||
<div>
|
||
<img src="/assets/qr-host.svg" alt="主持人控场二维码占位" />
|
||
<span>控场码 · 需配对</span>
|
||
</div>
|
||
<div>
|
||
<img src="/assets/qr-audience.svg" alt="观众伴读二维码占位" />
|
||
<span>观展码 · 同步摘要</span>
|
||
</div>
|
||
</div>
|
||
<div className="stage-keys">键盘 ← 上一节 · → 下一节 · 空格下一节 · Home / End</div>
|
||
</aside>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
className="stage-panel-toggle"
|
||
onClick={() => setPanelOpen(true)}
|
||
aria-label="展开展控面板"
|
||
>
|
||
展控
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
<div className={`progress-bar ${isStageMode ? 'with-label' : ''}`} aria-hidden={!isStageMode}>
|
||
<div style={{ width: `${progress}%` }} />
|
||
{isStageMode && (
|
||
<span className="progress-label">{activeSection.label}</span>
|
||
)}
|
||
</div>
|
||
|
||
{isStageMode && (
|
||
<div className="stage-dots" aria-label="展控章节导航">
|
||
{sections.map((section, index) => (
|
||
<button
|
||
aria-label={`跳转到${section.title}`}
|
||
className={index === activeIndex ? 'active' : ''}
|
||
key={section.id}
|
||
onClick={() => goToSection(index)}
|
||
type="button"
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default App
|