72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
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 (
|
|
<>
|
|
<section className="hero">
|
|
<div className="hero-bg" style={{ backgroundImage: `url(${images.qingxiang.interior})` }} />
|
|
<div className="hero-mask" />
|
|
<div className="container hero-grid">
|
|
<div className="hero-copy">
|
|
<p className="hero-brand serif reveal-base anim-rise is-in">{hero.brand}</p>
|
|
<p className="hero-subbrand reveal-base anim-rise is-in" style={{ transitionDelay: '120ms' }}>
|
|
{hero.subBrand}
|
|
</p>
|
|
<h1 className="hero-title serif reveal-base anim-rise is-in" style={{ transitionDelay: '220ms' }}>
|
|
{hero.title}
|
|
</h1>
|
|
<p className="hero-subtitle reveal-base anim-rise is-in" style={{ transitionDelay: '320ms' }}>
|
|
{hero.subtitle}
|
|
</p>
|
|
<div className="cta-row reveal-base anim-rise is-in" style={{ transitionDelay: '420ms' }}>
|
|
<Link className="btn btn-primary" to={hero.primaryCta.to}>
|
|
{hero.primaryCta.label}
|
|
</Link>
|
|
<Link className="btn btn-ghost" to={hero.secondaryCta.to}>
|
|
{hero.secondaryCta.label}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="hero-visual hero-float reveal-base anim-zoom is-in">
|
|
<img src={images.t30} alt="酒祖杜康清香系列 T30" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="page-section modules">
|
|
<div className="container">
|
|
<Reveal variant="anim-slide-left">
|
|
<p className="eyebrow">探索杜康好客</p>
|
|
<h2 className="page-title">十大篇章</h2>
|
|
<p className="lead">从酒祖文脉到好客闭环，循定稿结构逐章走进。</p>
|
|
</Reveal>
|
|
<div className="module-rail">
|
|
<div className="module-rail-track">
|
|
{[0, 1].map((copy) => (
|
|
<div key={copy} className="module-rail-copy" aria-hidden={copy === 1}>
|
|
{moduleEntries.map((item, index) => (
|
|
<Link
|
|
key={`${copy}-${item.to}`}
|
|
to={item.to}
|
|
className="module-rail-item"
|
|
tabIndex={copy === 1 ? -1 : undefined}
|
|
style={{ fontSize: `${1.05 + (index % 3) * 0.12}rem` }}
|
|
>
|
|
<span className="module-index">{String(index + 1).padStart(2, '0')}</span>
|
|
<strong className="serif">{item.label}</strong>
|
|
<span className="module-desc">{item.desc}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|