Landing 布局使用说明

Landing 布局配置说明

Landing 布局是一个专门为着陆页设计的布局，提供了多个可配置的内容区块。

布局结构

1. Hero 区块

   • 支持游戏展示或背景图片
   • 大标题和描述文本
   • 主要和次要 CTA 按钮

2. Features 区块

   • 网格布局展示特性
   • 支持图标和描述
   • 自动响应式布局

3. FAQ 区块

   • 常见问题列表
   • 支持问答格式
   • 简洁的展示方式

4. Bottom CTA 区块

   • 底部行动号召
   • 引导用户操作
   • 醒目的按钮设计

Frontmatter 配置

每个区块都通过 frontmatter 进行配置：

hero:
  game: URL          # 游戏链接
  background: URL    # 背景图片
 
features:
  title: 标题
  description: 描述
  items:
    - title: 特性标题
      description: 特性描述
      icon: emoji/URL
 
faq:
  title: FAQ 标题
  description: FAQ 描述
  items:
    - question: 问题
      answer: 答案
 
bottomCta:
  title: 标题
  description: 描述
  text: 按钮文本
  link: 链接地址

使用建议

1. 内容组织

   • 合理安排各区块顺序
   • 保持视觉层次清晰
   • 突出重要信息

2. 视觉效果

   • 选择合适的图片和图标
   • 注意颜色搭配
   • 保持风格统一

3. 响应式考虑

   • 测试不同屏幕尺寸
   • 确保内容可读性
   • 优化移动端体验