TIJIAO

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 (
+    <>
+      <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">
+            {moduleEntries.map((item, index) => (
+              <Reveal key={item.to} variant="anim-slide-right" delayMs={index * 70}>
+                <Link to={item.to} className="module-rail-item" 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>
+              </Reveal>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}