awwwards-sections

Awwwards 级落地页区块

此技能涵盖首屏之后的所有内容。它不负责首屏（请使用 awwwards-hero），也不负责动画／微交互（请使用 awwwards-motion）。当用户要求制作完整落地页、添加更多区块、功能模块、定价、客户评价、页脚或任何首屏以下的内容时，便会触发此技能。

配对规则： 制作完整落地页时，先运行 awwwards-hero 来处理首屏，然后使用此技能处理其下的每个区块。如果用户要求添加动效，则在两者之上叠加 awwwards-motion。

---

流程

┌──────────────────────────────────────────────────────────────────────────┐
│                                                                          │
│   BRIEF IN ──→ Phase 1: Page Read ──→ Phase 2: Section Sequence         │
│                  (extract page goals,    (pick sections, order them,     │
│                   audience, conversion    assign architectures)          │
│                   intent)                                                │
│                                                                          │
│                              ──→ Phase 3: Build Section by Section       │
│                                   (typography, layout, content,          │
│                                    transitions between sections)         │
│                                                                          │
│                              ──→ Phase 4: Page Composition Diff          │
│                                   (rhythm, variety, conversion flow,     │
│                                    anti-slop audit)                      │
│                                                                          │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.       │
│                                                                          │
└──────────────────────────────────────────────────────────────────────────┘

---

阶段 1：页面解读

在选择区块之前，先从整体上理解页面。落地页是一系列循序渐进的说服内容，而不是一堆互不相关的区块。

→ 提取以下页面信号

信号	需要确定的内容
转化目标	此页面希望访客做什么？（注册、预约通话、购买、下载、浏览作品集）
访客的专业程度	需要规格参数的技术买家？需要情感共鸣的消费者？需要业绩表现的投资者？
异议顺序	什么因素会阻止访客转化？（信任、价格、复杂性、“这靠谱吗？”、“这适合我吗？”）
内容密度	产品／服务有 3 项功能还是 30 项？价值主张简单，还是平台复杂？
可用的视觉素材	产品截图、案例研究图片、团队照片、客户徽标、视频？还是只有文字？
首屏承接	首屏营造了什么？（氛围、配色、字体、焦点元素）——后续区块必须延续这些风格，而不是重新开始

→ 选择区块前，先输出页面解读

“页面解读：面向技术产品经理的 SaaS 落地页。转化目标：开始免费试用。异议顺序：(1) ‘它到底能做什么？’ → 需要展示功能；(2) ‘还有谁在用？’ → 需要社会认同；(3) ‘价格是多少？’ → 需要定价信息；(4) ‘这个团队靠谱吗？’ → 需要简短的关于我们版块。首屏已确立：深色模式、Geist 字体、低饱和靛蓝色点缀、电影感居中架构。后续区块必须延续这套配色与字体系统。”

✓ 质量关卡：页面解读

进入阶段 2 前，请确认：

• 你已了解转化目标
• 你已按顺序找出访客最主要的 3 个异议
• 你已理解首屏确立的风格（配色、字体、氛围）
• 你不会在首屏以下的内容中重置设计语言

---

阶段 2：区块顺序

选择区块并确定顺序。顺序比单个区块的质量更重要——页面是一段叙事，而不是零件箱。

→ 说服顺序框架

落地页遵循转化心理学顺序。不是每个页面都需要所有区块，但顺序不可更改：

HERO (handled by awwwards-hero)
  ↓
1. WHAT - Feature/Value showcase (answer "what does this do?")
  ↓
2. PROOF - Social proof, logos, testimonials (answer "who else trusts this?")
  ↓
3. HOW - Process/How-it-works (answer "how does it actually work?")
  ↓
4. RESULTS - Case studies, stats, metrics (answer "what results does it get?")
  ↓
5. PRICING - Tiers, plans, comparison (answer "what does it cost?")
  ↓
6. OBJECTION KILLER - FAQ, comparison vs alternatives (answer remaining doubts)
  ↓
7. FINAL CTA - Conversion banner (last push before they leave)
  ↓
8. FOOTER - Navigation, legal, social links

→ 区块选择规则

页面类型	最少区块	推荐区块
SaaS 落地页	功能 + 背书 + 定价 + CTA + 页脚	+ 工作原理 + 统计数据
代理公司／工作室	功能（作品集）+ 背书 + 流程 + CTA + 页脚	+ 案例研究 + 定价
个人作品集	作品展示 + 关于 + CTA + 页脚	+ 客户评价 + 流程
产品发布	功能 + 背书 + CTA + 页脚	+ 统计数据 + 定价
活动／会议	演讲嘉宾 + 日程 + CTA + 页脚	+ 背书 + 常见问题

→ 视觉节奏规则

这些规则可以避免“千篇一律”的问题，也就是每个版块看起来都一样：

规则	原因
交替改变布局方向	如果版块 A 是左侧内容、右侧视觉元素，版块 B 就不能重复这种布局。应交替布局、居中布局或使用全宽布局
每 2-3 个版块交替背景色调	深色 → 稍浅的深色 → 深色，或浅色 → 非常微妙的色调 → 浅色。切勿连续 5 个以上版块使用相同背景
每个页面设置一个“视觉间隔”版块	使用满版图片、单个醒目的大型数据，或横向滚动条。打破网格模式
改变字体排印的字号层级	功能标题可以用 text-4xl。下一个版块的标题则改用 text-2xl，并采用不同的字重。然后 CTA 横幅再回到 text-5xl。字号层级单调 = 页面单调
连续使用的网格版块最多为 2 个	如果功能版块用了三列网格，下一个版块就不能再用三列网格。应使用不对称分栏、全宽布局或居中的单列布局

✓ 质量门槛：顺序

进入阶段 3 前，请确认：

• 版块遵循说服顺序
• 相邻版块没有使用相同的布局模式
• 背景色调交替得当
• 页面中至少有一个视觉间隔
• 版块数量符合内容密度（不要为了简单的产品硬凑 12 个版块）

---

阶段 3：构建——版块架构

以下每种版块类型都提供了命名架构。每个版块选择一种架构，不要混搭。

---

版块类型：功能 / 价值展示

展示产品 / 服务的功能。这是主视觉区块下方的第一个版块——必须立即回答访客最关心的问题。

---

功能架构 A：Bento 网格

适用于：有 4-6 项重要程度各不相同的独特功能的产品

不对称网格，为主要功能分配 2 倍空间。这不是均匀网格——一个单元格占据主导地位，其余单元格作为补充。

[section container: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [section eyebrow: small mono label, muted]
  [section heading: text-4xl lg:text-5xl, max-w-3xl, mb-16]
  [bento grid: grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6]
    [primary cell: col-span-2, row-span-2, rounded-2xl, p-8-12, bg-subtle]
      [feature visual: product screenshot or illustration, 60% of cell]
      [feature text: heading + 1-2 line description below]
    [secondary cell: rounded-2xl, p-6-8, bg-subtle]
      [icon or small visual]
      [heading + description]
    [secondary cell: ...]
    [accent cell: different bg tone or bordered, same structure]

/* BLUEPRINT: Bento grid
   WHY: auto-rows with minmax prevents cells from collapsing.
   The primary cell uses col-span-2 to dominate without explicit px widths.
   gap-4 is tight enough to feel connected, loose enough to breathe. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1rem;
}
.bento-primary {
  grid-column: span 2;
  grid-row: span 2;
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-primary {
    grid-column: span 1;
    grid-row: span 1;
  }
}

⚠ 布局偏移警告： 如果所有单元格大小相同、内边距相同，并且都采用相同的图标-标题-文本模式，Bento 网格就会失效。必须有一个单元格占据主导地位。调整单元格高度。使用不同类型的内容（一个放视觉元素，另一个放数据，第三个放用户评价）。

---

功能架构 B：堆叠式展示

适用于：有 2-3 项主要功能，且每项功能都值得专门展示空间的产品

每项功能各占一个全宽行，并交替改变布局方向。左-右、右-左、左-右。每行都是一个迷你分栏布局，一侧放大型视觉元素，另一侧放文本。

[section container: py-24 lg:py-32, space-y-24 lg:space-y-32]
  [feature row 1: grid grid-cols-1 lg:grid-cols-2 gap-12 items-center]
    [text side: heading + description + optional bullet points]
    [visual side: product screenshot, rounded-2xl, shadow-xl]
  [feature row 2: grid grid-cols-1 lg:grid-cols-2 gap-12 items-center]
    [visual side: product screenshot] ← ORDER REVERSED
    [text side: heading + description]
  [feature row 3: repeat pattern]

⚠ 布局偏移警告： 交替布局必须体现在视觉上，而不只是 CSS 顺序上。在桌面端，图片应实际放在相反的一侧。使用 lg:order-1 / lg:order-2 控制视觉位置，使其独立于 DOM 顺序（为保证无障碍访问，DOM 顺序应先放文本）。

---

功能架构 C：单一焦点展示

适用于：定义产品的一项核心功能，或产品演示 / 视频版块

中央展示一个大型视觉元素（产品截图、视频嵌入、交互式演示），上方仅放少量文本。视觉元素就是整个版块。

[section container: py-24 lg:py-32, max-w-6xl mx-auto px-6, text-center]
  [eyebrow: mono label]
  [heading: text-3xl lg:text-4xl, max-w-2xl mx-auto, mb-4]
  [subtext: text-lg, muted, max-w-xl mx-auto, mb-12]
  [visual: rounded-2xl overflow-hidden, shadow-2xl, border border-white/10]
    [product screenshot or video, full-width within container]
  [optional floating detail cards: absolute positioned, showing UI details]

---

版块类型：社会认同

回答“还有谁信任它？”——这是主视觉区块之后最有力的转化要素。

---

认同架构 A：品牌标志栏

适用于：客户品牌标志具有较高辨识度的 B2B SaaS

在略有不同的背景色调上，以灰度显示客户品牌标志，横向排列成单行。不要用大号文字写“深受……信赖”——品牌标志本身就能说明一切。

[section: py-12 lg:py-16, border-y border-white/5 (dark) or border-black/5 (light)]
  [optional small label: "Trusted by teams at" - text-xs, muted, uppercase, tracking-wide, mb-6, text-center]
  [logo row: flex items-center justify-center gap-12 lg:gap-16, flex-wrap]
    [each logo: h-6 lg:h-8, opacity-40 hover:opacity-80, transition, grayscale]

/* BLUEPRINT: Logo strip
   WHY: Grayscale + low opacity prevents logos from competing with 
   the page's own brand colors. Hover reveals the real logo color, 
   adding a subtle interactive layer. The strip sits in a band 
   (border-y) to visually separate it without heavy background changes. */
.logo-strip img {
  height: 2rem;
  filter: grayscale(100%);
  opacity: 0.4;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo-strip img:hover {
  filter: grayscale(0%);
  opacity: 0.8;
}

---

证明架构 B：见证者级联

适合：服务型企业、代理机构、消费品——以人的声音打动客户的场景

采用非对称布局放置 2-3 张大型客户评价卡片。不要使用规整的网格。其中一条评价应更大、更突出。加入真实姓名、真实职位和真实照片（或高质量头像）。

[section container: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [section heading: left-aligned or centered, mb-16]
  [testimonial grid: grid grid-cols-1 lg:grid-cols-3 gap-6]
    [featured card: lg:col-span-2, bg-subtle, rounded-2xl, p-8-10]
      [large quote: text-xl lg:text-2xl, font-medium, leading-relaxed, mb-6]
      [author row: flex items-center gap-4]
        [avatar: w-12 h-12 rounded-full]
        [name + title: text-sm]
    [secondary card: bg-subtle, rounded-2xl, p-8]
      [quote: text-base, mb-6]
      [author row]
    [secondary card: bg-subtle, rounded-2xl, p-8]
      [quote: text-base, mb-6]
      [author row]

⚠ 偏差警告： 所有客户评价卡片都使用相同内边距、相同字号和居中对齐，是证明类版块中最常见的 AI 垃圾模式。必须让其中一张卡片在视觉上占据主导。改变卡片尺寸。可以考虑将一句有力的评价作为大型展示引言，置于网格上方。

---

证明架构 C：指标栏

适合：拥有亮眼数据的产品——用户数、处理收入、正常运行时间、速度

在水平条带中展示 3-4 个大数字，每个数字下方配一行小标签。数字应是页面上除主视觉标题外最大的文字。为数字留出充足空间。

[section: py-16 lg:py-24, border-y border-white/5]
  [metrics row: grid grid-cols-2 lg:grid-cols-4 gap-8, max-w-5xl mx-auto, text-center]
    [metric]
      [number: text-4xl lg:text-5xl, font-semibold, tracking-tight]
      [label: text-sm, muted, mt-2]
    [metric]
      [number] [label]
    ...

/* BLUEPRINT: Metric counter
   WHY: Tabular figures prevent layout shift during count-up animations.
   The numbers should feel monumental - they are social proof encoded 
   as typography. */
.metric-number {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

---

版块类型：流程／工作原理

回答“这实际是如何运作的？”，降低用户感知到的复杂度。

---

流程架构 A：编号步骤

适合：包含 3-5 个步骤的流程、引导流程、服务交付时间线

纵向排列步骤，使用较大的步骤编号，并用一条低调的竖线连接。每个步骤包含一个标题和 1-2 行说明。也可以在侧边配图，并随步骤变化。

[section container: py-24 lg:py-32, max-w-5xl mx-auto px-6]
  [section heading + subtext, centered, mb-16]
  [steps: relative, space-y-16]
    [vertical line: absolute left-6 top-0 bottom-0 w-px bg-white/10 (dark)]
    [step: flex gap-8 items-start]
      [number circle: w-12 h-12 rounded-full border-2, flex items-center justify-center, relative z-10, bg-background]
        [number: text-lg font-semibold]
      [content]
        [heading: text-xl font-medium, mb-2]
        [description: text-base muted, max-w-lg]

---

流程架构 B：水平流程

适合：简单的 3 步流程、偏好视觉学习的用户、SaaS 引导流程

将 3 个步骤水平排列，并用箭头或线条连接。每个步骤包含一个图标或小型视觉元素、一个标题和一段简短说明。

[section: py-24 lg:py-32]
  [heading, centered, mb-16]
  [flow: grid grid-cols-1 md:grid-cols-3 gap-0, max-w-5xl mx-auto]
    [step: px-8, relative]
      [icon or visual: w-12 h-12, mb-4]
      [heading: text-lg font-medium, mb-2]
      [description: text-sm muted]
      [connector arrow: hidden on mobile, absolute right-0 top-1/4] ← between steps only

⚠ 偏差警告： 这是最容易生成 AI 垃圾内容的架构——三个带图标的相同方框是默认的糟糕输出。只有流程确实简单且仅有 3 步时才使用。如果步骤超过 3 个或步骤较复杂，请改用架构 A。

---

版块类型：案例研究／成果

回答“这实际能取得什么成果？”，以深入内容提供证明。

---

案例研究架构 A：卡片画廊

适合：代理机构、工作室、拥有视觉作品集的团队

在 2 列非对称网格中使用大型图片卡片。其中一张卡片更高，以营造视觉张力。每张卡片展示项目图片，并在图片上叠加或下方标注客户名称和一行成果说明。

[section: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [heading + subtext, mb-16]
  [gallery: grid grid-cols-1 lg:grid-cols-2 gap-6]
    [card: group, rounded-2xl, overflow-hidden, aspect-[4/3] or aspect-[3/4] - VARY]
      [image: w-full h-full object-cover, transition group-hover:scale-105]
      [overlay: absolute bottom-0 inset-x-0, p-6, bg-gradient-to-t from-black/60 to-transparent]
        [client name: text-lg font-semibold, text-white]
        [result line: text-sm text-white/70]

---

案例研究架构 B：单个深度案例

适合：用一个标杆案例讲述完整故事

设置一个全宽版块，专门讲述单个客户故事。先展示案例研究的大幅主视觉图片，再采用 2 列布局，一侧呈现挑战，另一侧呈现成果（附带指标）。

[section: py-24 lg:py-32]
  [case study image: full-width, max-h-[60vh], object-cover, rounded-2xl mx-6]
  [content: grid grid-cols-1 lg:grid-cols-2 gap-12, max-w-6xl mx-auto, px-6, mt-12]
    [left: challenge]
      [label: "THE CHALLENGE", mono, muted, mb-4]
      [text: leading-relaxed]
    [right: results]
      [label: "THE RESULTS", mono, muted, mb-4]
      [metrics: 2-3 large numbers with labels]
      [text: brief summary]

---

版块类型：定价

回答“费用是多少？”，必须让人觉得透明，而不是令人不知所措。

---

定价架构 A：简洁套餐

适合：提供 2-3 个套餐的 SaaS

并排展示 2-3 张定价卡片。推荐套餐在视觉上应更突出（使用不同背景、微妙的边框光晕或“热门”徽章）。卡片高度不要完全相同——热门套餐可以略高一些。

[section: py-24 lg:py-32, max-w-5xl mx-auto px-6]
  [heading + subtext, centered, mb-4]
  [optional billing toggle: monthly/annual, centered, mb-12]
  [pricing grid: grid grid-cols-1 md:grid-cols-3 gap-6 items-start]
    [plan card: rounded-2xl, border, p-8]
      [plan name: text-lg font-medium, mb-2]
      [plan description: text-sm muted, mb-6]
      [price: text-4xl font-semibold + period label, mb-8]
      [feature list: space-y-3, text-sm]
        [feature: flex items-center gap-3, check icon + text]
      [CTA button: w-full, mt-8]
    [popular plan: same structure but - bg-accent/5, border-accent/20, ring-1 ring-accent/10]
      [badge: "Most popular" - absolute or inline, small pill]

⚠ 偏差警告： 定价卡片中列出 15 项以上且字号极小的功能，会让内容难以阅读。每张卡片最多列出 6-8 项功能。优先突出各套餐的差异化功能，而不是所有套餐都共有的功能。

---

定价架构 B：对比表

适合：拥有许多差异化功能的复杂产品

在简化版套餐卡片下方放置完整的对比矩阵。卡片仅展示价格和行动号召（CTA）。下方的表格则用勾选标记详细比较各项功能。

[plan summary: grid grid-cols-3, each card minimal - name + price + CTA]
[comparison table: mt-12, w-full]
  [table head: plan names as columns]
  [table body: feature categories as groups]
    [category heading: font-semibold, bg-subtle, full-width]
    [feature rows: text-sm, check/x/dash per plan]

---

版块类型：常见问题

消除剩余疑虑。这是最终行动号召前的最后一道防线。

---

常见问题架构 A：折叠面板

适合：5-8 个常见问题

使用单列折叠面板，展开和收起时过渡平滑。问题左对齐；答案展开后显示在下方，并带有柔和的高度动画。箭头或加号图标可轻微旋转。

[section: py-24 lg:py-32, max-w-3xl mx-auto px-6]
  [heading, centered or left, mb-12]
  [accordion: divide-y divide-white/10]
    [item: py-5]
      [trigger: flex justify-between items-center, cursor-pointer, w-full]
        [question: text-base font-medium, text-left]
        [icon: w-5 h-5, transition rotate, text-muted]
      [answer panel: overflow-hidden, transition max-height]
        [answer text: text-sm muted, pt-4, leading-relaxed, max-w-2xl]

/* BLUEPRINT: Accordion animation
   WHY: max-height transition is the simplest pure-CSS accordion.
   grid-template-rows: 0fr → 1fr is smoother but requires 
   wrapping content in an inner div with overflow:hidden.
   The cubic-bezier gives a snappy open, gentle close. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-answer[data-open="true"] {
  grid-template-rows: 1fr;
}
.faq-answer > div {
  overflow: hidden;
}

---

区块类型：最终行动号召横幅

最后一次推动转化。本区块的唯一目的就是让访客点击。

---

行动号召架构 A：全宽横幅

适用场景：任何页面——这是通用的收尾方式

全宽色带，搭配对比鲜明的背景（如果页面采用深色主题，可考虑略浅的深色或柔和渐变）。大标题、简短副文案和一个醒目的行动号召按钮。

[section: py-20 lg:py-28, text-center]
  [optional subtle background: bg-gradient or slightly shifted tone]
  [heading: text-3xl lg:text-5xl, font-semibold, tracking-tight, mb-4]
  [subtext: text-lg muted, max-w-xl mx-auto, mb-8]
  [CTA button: large pill, px-10 py-4, font-medium]

⚠ 偏离警告： 带有 3 个按钮、一个表单、社交链接和一段文字的行动号召横幅属于反模式。一个标题。一个按钮。仅此而已。简洁就是劝服力。

---

行动号召架构 B：分栏式行动号召

适用场景：希望在最后一次推动转化时展示视觉内容的页面

分为两栏：一侧放置引人注目的视觉内容（产品图、插画或抽象图形），另一侧放置标题和行动号召。视觉内容再次强化价值主张。

[section: py-24 lg:py-32, grid grid-cols-1 lg:grid-cols-2 gap-12 items-center, max-w-6xl mx-auto px-6]
  [visual side: rounded-2xl, overflow-hidden]
  [text side]
    [heading: text-3xl lg:text-4xl, font-semibold, mb-4]
    [subtext: muted, mb-8]
    [CTA button]

---

区块类型：页脚

不是可有可无的补充。如果访客滚动到页面底部却没有转化，页脚就是他们最后看到的内容。

---

页脚架构 A：极简条栏

适用场景：落地页、产品发布页——只有一个转化目标的页面

单行布局：左侧放置 Logo，中间放置必要链接，右侧放置社交图标。不要使用多栏巨型页脚。

[footer: border-t border-white/10, py-8 lg:py-12, px-6]
  [inner: max-w-7xl mx-auto, flex flex-col lg:flex-row items-center justify-between gap-6]
    [logo: h-6 or text-lg font-semibold]
    [links: flex gap-6, text-sm, muted, hover:text-white transition]
    [right: flex items-center gap-4]
      [social icons: w-5 h-5 each, muted, hover:text-white]
  [copyright: text-center lg:text-left, text-xs, muted, mt-8 lg:mt-0]

---

页脚架构 B：结构化页脚

适用场景：多页网站、SaaS 产品、代理机构——需要重视导航的场景

采用多栏网格，按类别组织链接。最左侧放置 Logo 和标语，中间设置 3-4 栏链接，最右侧放置新闻简报订阅入口。

[footer: border-t border-white/10, py-16 lg:py-20, px-6]
  [inner: max-w-7xl mx-auto, grid grid-cols-2 lg:grid-cols-5 gap-8]
    [brand col: lg:col-span-1]
      [logo]
      [tagline: text-sm muted, mt-3, max-w-xs]
    [link col: space-y-3]
      [column heading: text-sm font-semibold, mb-4]
      [link: text-sm muted hover:text-white]
      ...
    [link col] [link col]
    [newsletter col: lg:col-span-1]
      [heading: text-sm font-semibold, mb-4]
      [email input + submit button: flex]
  [bottom bar: mt-12 pt-8 border-t border-white/5, flex justify-between, text-xs muted]
    [copyright]
    [legal links: privacy, terms]

---

区块类型：视觉停顿

避免页面变成“千篇一律的墙”，为页面增添片刻喘息空间。

---

停顿架构 A：满幅图片

单张全宽氛围图片，不叠加文字。用于内容密集区块之间的视觉调剂。

[section: py-0, -mx-6 or full-bleed via 100vw trick]
  [image: w-full, h-[40vh] lg:h-[60vh], object-cover]

---

停顿架构 B：巨型数据

在充裕的垂直空间中居中展示一个醒目的数字或陈述。不放置其他内容。

[section: py-24 lg:py-40, text-center]
  [stat: text-6xl lg:text-8xl, font-semibold, tracking-tight]
  [label: text-sm muted, mt-4]

---

停顿架构 C：水平跑马灯

由文字、Logo 或标签组成的连续滚动条。仅使用 CSS，无需 JS。

[section: py-6, overflow-hidden, border-y border-white/5]
  [marquee track: flex gap-8, animate-scroll]
    [items repeated 2x for seamless loop]

/* BLUEPRINT: CSS marquee
   WHY: Translating the full width then resetting creates a seamless loop.
   Duplicating the content ensures no gaps during the loop.
   30s is slow enough to be ambient. */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}

---

✓ 质量关卡：构建

进入第 4 阶段前，请确认每个区块均满足以下条件：

• 遵循了架构，没有混搭
• 内容切合实际（没有“Lorem ipsum”，没有“[Feature Name]”占位符）
• 区块标题使用的字号与前一区块的标题不同
• 背景色调与相邻区块不完全相同
• 该区块单独呈现时，也能入选 Awwwards SOTD

---

第 4 阶段：页面组合差异检查

构建完所有区块后，将完整页面作为一个整体进行审核。这样可以发现区块堆叠后才会出现的问题。

视觉节奏差异检查

检查项	通过/失败
没有两个相邻区块采用相同的布局方向（例如都左对齐或都居中等）
没有两个相邻区块使用完全相同的背景色
页面中至少有一个视觉停顿区块
各区块标题的字号有所变化（不能全都是 text-4xl）
网格区块之间由非网格区块隔开

内容质量差异检查

检查项	通过/失败
没有占位文本（“Lorem ipsum”、“[Feature Name]”、“Description goes here”）
没有 AI 套话（“Elevate”、“Seamless”、“Unleash”、“Next-Gen”、“Revolutionize”）
功能描述具体，而非泛泛而谈（例如“每秒处理 10k 次 API 调用”，而不是“性能飞快”）
用户评价听起来真实自然，而非企业宣传口吻
统计数据使用具体数字，而非取整数字（例如“12,847 个团队”，而不是“10,000+ 个团队”）

转化流程差异检查

检查项	通过/失败
说服顺序是否保持不变（是什么 → 证据 → 如何实现 → 结果 → 价格 → 异议 → 行动号召）
全页行动号召是否最多重复 2-3 次（主视觉行动号召 + 最终行动号召 + 可选的一个页面中段行动号召）
是否存在最终行动号召区域，且该区域不是页脚
主视觉行动号召与下一个行动号召机会之间是否不超过 3 个区域

反臃肿差异检查

检查项	通过/失败
是否没有区域采用「图标 + 标题 + 段落 × 3 等宽列」模式（AI 最常见的默认设计）
是否没有使用通用图库照片（请使用产品截图、插图或 picsum.photos/seed/{keyword}/{w}/{h}）
是否没有使用 AI 紫色/蓝色渐变背景
是否没有使用「渐变网格团块」背景
是否没有卡片中嵌套卡片、卡片中再嵌套卡片
是否没有任何区域包含超过 3 个相互争夺注意力的行动号召
功能卡片的高度、内边距和结构是否并非全部相同

移动端布局差异检查

检查项	通过/失败
低于 768px 时，所有多列布局是否都折叠为单列
移动端的区域间距是否按比例缩小（py-24 → py-16）
是否没有任何区域出现水平溢出
图片是否适当缩放或隐藏
触控目标是否至少为 44px

---

区域过渡模式

区域之间如何衔接，与区域本身同样重要。不要只是将采用相同内边距的区域堆叠起来。

→ 背景过渡

模式	适用场景
细微的色调变化	bg-[#0a0a0a] → bg-[#111111] → bg-[#0a0a0a]。适用于 90% 的过渡。几乎难以察觉，但能避免页面显得单调
边框分隔线	在区域之间使用 border-t border-white/5。简洁、富有编辑感
渐变延展	区域 A 的背景渐变延展至区域 B 的顶部边缘，营造流动感
强烈对比	深色区域 → 浅色区域，或反之。谨慎使用（每页最多一次），以营造戏剧效果

→ 间距节奏

区域类型	垂直内边距
内容密集型（功能、定价、常见问题）	py-24 lg:py-32
视觉停顿（图片、数据、滚动展示）	py-8 lg:py-16 或 py-0
佐证栏（徽标）	py-12 lg:py-16
行动号召横幅	py-20 lg:py-28
页脚	py-12 lg:py-20

---

核心原则（区域）

无论采用何种架构，这些原则都适用于每个区域：

区域不是孤岛。 每个区域都必须与主视觉同属一个页面，风格协调一致：相同的配色、字体系统和视觉语言。可以随意插入任意落地页的区域，就是通用区域。

展示，而不是空谈。 产品截图胜过功能列表。真实数据胜过形容词。客户徽标胜过「深受数千人信赖」。视觉证据比书面宣称更能促成转化。

变化节奏。 如果每个区域都是 py-32, 居中标题, 3 列网格, 重复，整页就会显得千篇一律。交替使用不同的内容密度、布局方向、背景色调和内容类型。

砍掉第三张卡片。 如果你发现自己在同一页面第三次采用 3 张等宽卡片网格，就停下来，换一种架构。3 张卡片网格是网页设计中最过度使用的模式。

每个区域只做一件事。 每个区域只回答访客的一个问题。如果某个区域既要展示功能，又要展示用户评价，还要展示价格，就拆分成多个独立区域。