69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import { Reveal } from '../components/Reveal'
|
|
import { brand, images } from '../content/site'
|
|
import './Brand.css'
|
|
|
|
export function BrandPage() {
|
|
return (
|
|
<section className="brand-page page-section">
|
|
<div className="container">
|
|
<Reveal variant="anim-slide-left">
|
|
<p className="eyebrow">{brand.eyebrow}</p>
|
|
<h1 className="page-title">{brand.title}</h1>
|
|
<p className="lead">{brand.lead}</p>
|
|
</Reveal>
|
|
|
|
<div className="brand-layout">
|
|
<div className="brand-timeline">
|
|
<div className="brand-line" aria-hidden />
|
|
{brand.cards.map((card, i) => (
|
|
<Reveal key={card.title} variant="anim-slide-left" delayMs={i * 120} className="brand-item">
|
|
<span className="brand-num serif">{String(i + 1).padStart(2, '0')}</span>
|
|
<h2 className="brand-vtitle serif">{card.title}</h2>
|
|
<p>{card.text}</p>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
|
|
<Reveal variant="anim-zoom" className="brand-aside">
|
|
<div className="media-frame brand-photo">
|
|
<img src={images.brand.landscape} alt="酒祖故里景致" loading="lazy" />
|
|
</div>
|
|
<div className="media-frame brand-photo secondary">
|
|
<img src={images.brand.relic} alt="酒祖相关文物保护单位" loading="lazy" />
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
|
|
<Reveal variant="anim-slide-right">
|
|
<ol className="brand-era">
|
|
{brand.timeline.map((item) => (
|
|
<li key={item} className="serif">
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
<p className="closing">{brand.closing}</p>
|
|
</Reveal>
|
|
|
|
<div className="deep-read-rail">
|
|
<Reveal variant="anim-rise">
|
|
<h2 className="serif deep-read-title">深度阅读</h2>
|
|
<p className="deep-read-lead">从典籍、故里、祠祀到酒厂，按篇章走进品牌传承全文脉络。</p>
|
|
</Reveal>
|
|
<div className="deep-read-grid">
|
|
{brand.deepReads.map((item, i) => (
|
|
<Reveal key={item.path} variant="anim-rise" delayMs={i * 50}>
|
|
<Link to={item.path} className="deep-read-card">
|
|
<strong className="serif">{item.label}</strong>
|
|
<span>{item.blurb}</span>
|
|
</Link>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|