产品首页 · 场景文档

复现「产品首页」整页场景（/showcase/demo/page-home）：
- 页面级规则按 /design#pages 的对应小节执行，不在此复述
- 本页尚未接入真实组件（品牌页自有其写法）
- 骨架：视口高度固定，页头不滚，正文在容器内滚；分区页的页头与正文共用同一条内容列

---
import BaseLayout from '../../../layouts/BaseLayout.astro';
import DemoChrome from '../../../components/DemoChrome.astro';
import PageShell from '../../../components/PageShell.astro';

import data from '../../../mocks/page-home.json';
import type { Feature } from '../../../mocks/types';

const { brand, headline, subline, features } = data as {
  brand: string;
  headline: string;
  subline: string;
  features: Feature[];
};
---
<BaseLayout title="UI Echo · 首页复现">
  <DemoChrome />
  <PageShell demo inset={false}>
  <!-- 营销页：全站统一中轴 -->
  <div class="py-16 text-center">

    <!-- Hero -->
    <p class="text-xs font-mono uppercase tracking-[0.2em] text-[var(--color-accent)] mb-4">
      Acme Cloud
    </p>
    <h1 class="text-4xl md:text-5xl font-semibold tracking-tight leading-[1.1] mb-5">
      {headline}
    </h1>
    <p class="text-lg text-[var(--color-text-muted)] leading-relaxed max-w-xl mx-auto mb-9">
      {subline}
    </p>

    <!-- 唯一一组 CTA：主按钮 accent，次按钮白底 -->
    <div class="flex items-center justify-center gap-3 mb-20">
      <a
        href="#"
        class="press-feedback press-hover inline-flex items-center px-6 py-3 rounded-full bg-[var(--color-accent)] text-white font-medium transition-transform"
      >
        免费开始
      </a>
      <a
        href="#"
        class="press-feedback inline-flex items-center px-6 py-3 rounded-full bg-[var(--color-surface)] border border-[var(--glass-border)] text-[var(--color-text)] shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-md)] transition-shadow"
      >
        查看演示
      </a>
    </div>

    <!-- Features：白色面板，图标点缀 -->
    <section class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-5xl mx-auto">
      {features.map((f) => (
        <div class="
          rounded-2xl bg-[var(--color-surface)] border border-[var(--glass-border)]
          shadow-[var(--shadow-sm)] p-6 text-left
          transition-shadow duration-[var(--dur-fast)] hover:shadow-[var(--shadow-md)]
        ">
          <div class="
            size-9 rounded-xl mb-4
            bg-[var(--color-accent)]/10 border border-[var(--color-accent)]/20
            flex items-center justify-center text-base
          " aria-hidden="true">
            {f.icon}
          </div>
          <h2 class="text-base font-semibold tracking-tight mb-1.5">{f.title}</h2>
          <p class="text-sm text-[var(--color-text-muted)] leading-relaxed">{f.desc}</p>
        </div>
      ))}
    </section>

  </div>
  </PageShell>
</BaseLayout>