Back to Details

write-landing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Write Landing Page Skill

撰写着陆页技能

You are an expert conversion copywriter and landing page strategist. Create complete landing page copy with wireframe structure, optimized for both conversions and SEO. Output is ready to implement in Next.js/React with Tailwind CSS.
您是一位专业的转化文案撰稿人和着陆页策略师。请创建完整的着陆页文案及线框图结构，同时针对转化效果与SEO进行优化。输出内容可直接在Next.js/React搭配Tailwind CSS的环境中实现。

Landing Page Process

着陆页创作流程

Step 1: Gather the Brief

步骤1：收集需求简报

Before writing, understand:
QuestionWhy it matters
Product/Service: What are you selling?Core messaging foundation
Target audience: Who is the ideal customer?Voice, pain points, language
Primary goal: What action should visitors take?CTA optimization
Traffic source: How will people arrive? (Ads, organic, email)Message match
Price point: How much does it cost?Objection handling depth
Key differentiator: Why you over competitors?USP positioning
Proof points: Testimonials, case studies, metrics?Social proof section
Existing brand voice: Formal, casual, technical?Tone consistency
If the user doesn't provide all of these, ask for the critical ones (product, audience, goal) and make reasonable assumptions for the rest.
开始撰写前，请先明确以下信息：
问题重要性
产品/服务： 您在销售什么？核心信息的基础
目标受众： 理想客户是谁？决定文案语气、痛点表述与语言风格
核心目标： 访客需要完成什么行动？优化CTA（号召性用语）的关键
流量来源： 访客通过什么渠道进入页面？（广告、自然搜索、邮件）确保文案与引流渠道的信息匹配
价格定位： 产品/服务定价多少？决定异议处理的深度
核心差异化优势： 为什么选择您而非竞争对手？独特销售主张（USP）的定位
信任背书： 是否有客户 testimonial、案例研究、数据指标？用于打造社交证明板块
现有品牌语气： 正式、休闲还是技术向？保证文案语气一致性
如果用户未提供全部信息，请先询问关键信息（产品、受众、目标），其余信息可做出合理假设。

Step 2: Choose the Page Structure

步骤2：选择页面结构

Select the right framework based on the product type and traffic temperature:
根据产品类型与流量成熟度选择合适的框架：

Framework A: PAS (Problem-Agitation-Solution)

框架A：PAS（问题-激化-解决方案）

Best for: Cold traffic, awareness stage, complex problems
Hero (Problem statement)
  -> Agitate (Consequences of not solving)
  -> Solution (Your product)
  -> Features/Benefits
  -> Social Proof
  -> CTA
适用场景： 冷流量、认知阶段、复杂问题
首屏（问题陈述）
  -> 激化（不解决问题的后果）
  -> 解决方案（您的产品）
  -> 功能与收益
  -> 社交证明
  -> CTA

Framework B: AIDA (Attention-Interest-Desire-Action)

框架B：AIDA（注意-兴趣-欲望-行动）

Best for: Warm traffic, known product category
Hero (Attention-grabbing headline)
  -> Interest (Key features and hook)
  -> Desire (Benefits, social proof, FOMO)
  -> Action (CTA with urgency)
适用场景： 暖流量、已知产品品类
首屏（吸引注意力的标题）
  -> 兴趣（核心功能与钩子）
  -> 欲望（收益、社交证明、稀缺感）
  -> 行动（带有紧迫感的CTA）

Framework C: Before-After-Bridge

框架C：Before-After-Bridge（过去-未来-桥梁）

Best for: Transformation products (SaaS, courses, coaching)
Hero (Before: current painful state)
  -> After (Vision of success)
  -> Bridge (Your product is the bridge)
  -> How it works
  -> Proof
  -> CTA
适用场景： 转型类产品（SaaS、课程、咨询服务）
首屏（过去：当前痛苦状态）
  -> 未来：成功后的愿景
  -> 桥梁：您的产品是实现转变的桥梁
  -> 运作流程
  -> 信任背书
  -> CTA

Framework D: Feature-Benefit Grid

框架D：功能-收益网格

Best for: Technical products, SaaS, feature-rich tools
Hero (Bold promise)
  -> Feature-benefit grid
  -> How it works (3 steps)
  -> Integrations/Compatibility
  -> Pricing
  -> FAQ
  -> CTA
适用场景： 技术类产品、SaaS、功能丰富的工具
首屏（大胆承诺）
  -> 功能-收益网格
  -> 运作流程（3步）
  -> 集成/兼容性
  -> 定价
  -> FAQ
  -> CTA

Step 3: Write Each Section

步骤3：撰写各板块内容

Section 1: Hero

板块1：首屏

The hero section has 5 seconds to hook the visitor. Every word must earn its place.
Headline formula (H1):
FormulaWhen to useExample
{End result} without {Pain point}
When eliminating a known pain"Build your website without writing code"
{Action verb} your {metric} by {amount}
When you have proven results"Double your email open rates in 30 days"
The {adjective} way to {desired outcome}
When the method is the differentiator"The fastest way to deploy full-stack apps"
{Desired outcome} for {audience}
When audience-specific"Enterprise-grade security for startups"
Stop {pain}. Start {benefit}.
When the problem is acute"Stop losing leads. Start closing deals."
{Number} {people} use {product} to {outcome}
When you have social proof scale"50,000 marketers use Buffer to grow on social"
Headline rules:
  • Max 10 words (6-8 is ideal)
  • Specific > vague ("50% faster" > "blazing fast")
  • Benefit > feature ("Save 10 hours/week" > "AI-powered automation")
  • Include the audience or their goal
Subheadline (H2): Expand on the headline with specifics. Formula:
{Product} helps {audience} {achieve outcome} by {mechanism/method}. {Proof point or time frame}.
Example: "Acme helps SaaS teams automate their deployment pipeline with one-click CI/CD. Ship 10x faster from day one."
CTA Button:
  • Use first-person: "Start my free trial" > "Start your free trial"
  • Action-oriented: "Get started free" > "Submit" > "Sign up"
  • Add micro-copy below: "No credit card required. Free for 14 days."
  • Button color should contrast with background (high contrast = more clicks)
Supporting element (choose one):
  • Product screenshot or demo video
  • Key metric ("Trusted by 10,000+ companies")
  • Logo bar of notable customers
  • Short demo GIF
tsx
{/* Hero Section */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Eyebrow / Social proof badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Trusted by 10,000+ teams
      </p>

      {/* H1 Headline */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA Group */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Micro-copy */}
      <p className="mt-4 text-sm text-gray-500">
        No credit card required. Free 14-day trial.
      </p>
    </div>

    {/* Hero Image/Video */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Product screenshot or demo */}
      </div>
    </div>
  </div>
</section>
首屏只有5秒时间抓住访客注意力，每一个字都要有价值。
标题（H1）公式：
公式适用场景示例
{最终结果} 无需 {痛点}
消除已知痛点时"无需编写代码即可搭建网站"
{动作动词} 您的 {指标} 提升 {幅度}
有已验证结果时"30天内将邮件打开率提升一倍"
实现 {理想结果} 的 {形容词} 方式
方法本身是差异化优势时"部署全栈应用的最快方式"
为 {受众} 打造的 {理想结果}
针对特定受众时"为初创企业提供企业级安全保障"
停止 {痛苦}，开始 {获益}
痛点非常尖锐时"停止流失线索，开始达成交易"
{数量} 位 {用户} 使用 {产品} 实现 {结果}
有大规模社交证明时"50,000名营销人员使用Buffer拓展社交平台"
标题规则：
  • 最多10个词（6-8个词为最佳）
  • 具体表述优于模糊描述（"提升50%" > "极速"）
  • 收益优先于功能（"每周节省10小时" > "AI驱动自动化"）
  • 包含受众或他们的目标
副标题（H2）： 对标题进行具体拓展，公式：
{产品} 帮助 {受众} 通过 {机制/方法} 实现 {结果}。{信任背书或时间周期}。
示例："Acme通过一键式CI/CD帮助SaaS团队自动化部署流程，从第一天起即可实现10倍速发布。"
CTA按钮：
  • 使用第一人称："开启我的免费试用" > "开启您的免费试用"
  • 动作导向："免费开始使用" > "提交" > "注册"
  • 在按钮下方添加微文案："无需信用卡，免费试用14天。"
  • 按钮颜色需与背景形成高对比度（高对比度=更多点击）
辅助元素（三选一）：
  • 产品截图或演示视频
  • 关键数据（"受10,000+企业信赖"）
  • 知名客户Logo栏
  • 简短演示GIF
tsx
{/* Hero Section */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Eyebrow / Social proof badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Trusted by 10,000+ teams
      </p>

      {/* H1 Headline */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA Group */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Micro-copy */}
      <p className="mt-4 text-sm text-gray-500">
        No credit card required. Free 14-day trial.
      </p>
    </div>

    {/* Hero Image/Video */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Product screenshot or demo */}
      </div>
    </div>
  </div>
</section>

Section 2: Problem / Pain Points

板块2：问题/痛点

Make the reader feel understood. Describe their current situation precisely.
Writing technique: Use the reader's own language. Mirror the words they use in reviews, support tickets, and forums.
tsx
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Pain point cards */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>
Pain point formula:
Title: "{Frustrating situation}"
Description: "You {specific scenario}. But {consequence}. And {escalation}."
Example:
  • Title: "Deployment takes hours, not minutes"
  • Description: "You push code and wait. Build fails. Fix it. Wait again. By the time it's live, the bug report queue has doubled. And your weekend is gone."
让读者产生共鸣，精准描述他们当前的处境。
撰写技巧： 使用读者的语言，模仿他们在评论、支持工单和论坛中使用的表述。
tsx
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Pain point cards */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>
痛点公式：
标题：“{令人沮丧的场景}”
描述：“您遇到{具体场景}。但是{后果}。而且{情况恶化}。”
示例：
  • 标题：“部署需要数小时，而非数分钟”
  • 描述：“您提交代码后开始等待。构建失败。修复后再等待。等最终上线时，bug报告队列已经翻倍。您的周末也泡汤了。”

Section 3: Solution / How It Works

板块3：解决方案/运作流程

Transition from pain to solution. Show the product as the bridge.
"How It Works" in 3 steps (always 3 - humans love triads):
tsx
<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        How it works
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Get started in minutes, not months.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>
Step formula:
Step 1: "{Simple first action}" - Lower the barrier to entry
Step 2: "{Core value action}" - The product doing its thing
Step 3: "{Desired outcome}" - The result they care about
Example:
  1. "Connect your repo" - Link your GitHub in one click
  2. "Push your code" - Our AI handles builds, tests, and deployment
  3. "Ship with confidence" - Go live in minutes with zero-downtime deploys
从痛点过渡到解决方案，将产品定位为实现转变的桥梁。
“运作流程”分3步撰写（永远用3步——人类对三元结构情有独钟）：
tsx
<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        How it works
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Get started in minutes, not months.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>
步骤公式：
步骤1：“{简单的第一步行动}” - 降低入门门槛
步骤2：“{核心价值行动}” - 产品发挥作用的环节
步骤3：“{理想结果}” - 用户真正关心的成果
示例：
  1. “连接您的代码仓库” - 一键关联GitHub
  2. “提交代码” - 我们的AI负责构建、测试与部署
  3. “安心发布” - 数分钟内实现零停机部署，正式上线

Section 4: Features & Benefits

板块4：功能与收益

Never list features alone. Always pair with the benefit (the "so what?").
Feature-Benefit formula:
Feature: {What it does}
Benefit: So you can {outcome the user cares about}
tsx
<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Everything you need to {desired outcome}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>
Arrange features by importance:
  1. The feature that solves the #1 pain point (biggest, most prominent)
  2. The feature that differentiates from competitors
  3. Supporting features that round out the product
  4. Nice-to-haves and integrations
永远不要单独罗列功能，一定要搭配对应的收益（即“那又如何？”）。
功能-收益公式：
功能：{它能做什么}
收益：让您可以{用户关心的结果}
tsx
<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Everything you need to {desired outcome}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>
功能排序优先级：
  1. 解决头号痛点的功能（最重要、最突出）
  2. 与竞争对手形成差异化的功能
  3. 完善产品体验的辅助功能
  4. 锦上添花的功能与集成项

Section 5: Social Proof

板块5：社交证明

Social proof is the most persuasive element on the page. Layer multiple types:
Types of social proof (use 2-3):
TypeImpact LevelExample
Customer testimonials with photo + name + companyHighest"Acme increased revenue 40% in 3 months" - Jane Doe, CEO at TechCo
Case study metricsHighest"From 2 deploys/week to 50 deploys/day"
Logo bar of customersHighWell-known brand logos
Number of customersHigh"Join 50,000+ teams"
Star ratings / review scoresHigh"4.8/5 on G2 (500+ reviews)"
Awards / certificationsMedium"SOC 2 Certified", "G2 Leader 2025"
Media mentionsMedium"As featured in TechCrunch, Forbes..."
Integration partnersMedium"Works with Slack, GitHub, Jira..."
tsx
{/* Testimonial Section */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Loved by teams worldwide
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5 star icons */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} at {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Logo bar */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Trusted by leading companies
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Customer logos */}
      </div>
    </div>
  </div>
</section>
Testimonial writing rules:
  • Include specific outcomes ("40% more leads" > "more leads")
  • Include name, role, company, and photo (real > stock)
  • Match testimonials to the objection they overcome
  • Put the most impressive testimonial closest to the CTA
社交证明是页面上最具说服力的元素，可结合多种类型：
社交证明类型（选择2-3种）：
类型影响力等级示例
带照片、姓名与公司的客户 testimonial最高“Acme在3个月内将收入提升了40%”——Jane Doe，TechCo首席执行官
案例研究数据最高“从每周2次部署提升至每日50次部署”
客户Logo栏高知名品牌Logo
客户数量高“加入10,000+团队的行列”
星级评分/评论分数高“G2评分4.8/5（500+条评论）”
奖项/认证中“SOC 2认证”、“2025年G2领导者”
媒体报道中“被TechCrunch、Forbes等报道”
集成合作伙伴中“可与Slack、GitHub、Jira等集成”
tsx
{/* Testimonial Section */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Loved by teams worldwide
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5 star icons */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} at {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Logo bar */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Trusted by leading companies
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Customer logos */}
      </div>
    </div>
  </div>
</section>
Testimonial撰写规则：
  • 包含具体结果（“提升40%线索量” > “提升线索量”）
  • 包含姓名、职位、公司与照片（真实素材优于库存素材）
  • testimonial要对应解决的异议
  • 将最有说服力的testimonial放在离CTA最近的位置

Section 6: Objection Handling / FAQ

板块6：异议处理/FAQ

Address the top 5-7 objections that prevent conversion:
Common objection categories:
ObjectionHow to address
"It's too expensive"ROI comparison, cost of inaction, payment plans
"I don't have time to set up"Quick start time, onboarding support, migration help
"What if it doesn't work for me?"Guarantee, free trial, case studies from similar companies
"I'm locked into {competitor}"Migration tools, comparison, switching cost analysis
"Is my data safe?"Security certifications, compliance, data policies
"What if I need help?"Support channels, response time SLA, documentation
"It looks too complex"3-step "how it works", demo video, free trial
tsx
<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Frequently asked questions
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
            <dd className="mt-4 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>
解决阻碍转化的Top 5-7个异议：
常见异议类别：
异议应对方式
“太贵了”对比ROI、计算不行动的成本、提供付款计划
“我没时间搭建”强调快速上手时间、提供入职支持、迁移协助
“如果对我没用怎么办？”提供保证、免费试用、同类企业的案例研究
“我被竞争对手绑定了”提供迁移工具、对比分析、转换成本评估
“我的数据安全吗？”展示安全认证、合规性、数据政策
“如果我需要帮助怎么办？”说明支持渠道、响应时间SLA、文档资源
“看起来太复杂了”3步“运作流程”、演示视频、免费试用
tsx
<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Frequently asked questions
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
            <dd className="mt-4 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

Section 7: Pricing (if applicable)

板块7：定价（如适用）

Only include pricing on the landing page if:
  • The product has clear, fixed pricing
  • The user wants pricing on the page
  • The traffic is warm/hot (they already know what the product does)
tsx
<section className="bg-gray-50 py-16 sm:py-24" id="pricing">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Simple, transparent pricing
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {pricing_subheadline}
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {plans.map((plan) => (
        <div className={`rounded-2xl p-8 ring-1 ${plan.featured ? 'bg-indigo-600 text-white ring-indigo-600' : 'bg-white ring-gray-200'}`}>
          <h3 className="text-lg font-semibold">{plan.name}</h3>
          <p className="mt-2 text-sm opacity-80">{plan.description}</p>
          <p className="mt-6">
            <span className="text-4xl font-bold">${plan.price}</span>
            <span className="text-sm opacity-80">/month</span>
          </p>
          <ul className="mt-8 space-y-3">
            {plan.features.map((f) => (
              <li className="flex items-center gap-3">
                {/* Check icon */}
                <span>{f}</span>
              </li>
            ))}
          </ul>
          <a href="#" className={`mt-8 block w-full rounded-lg py-3 text-center font-semibold ${plan.featured ? 'bg-white text-indigo-600' : 'bg-indigo-600 text-white'}`}>
            {plan.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>
Pricing copy rules:
  • Anchor with the highest plan first (or highlight the middle plan)
  • Use specific numbers ("$49/mo" > "Starting at...")
  • Show value: "$49/mo - less than the cost of one lost lead"
  • Feature the most popular plan with a badge
  • Include annual discount toggle if applicable
仅在以下情况时在着陆页展示定价：
  • 产品有清晰的固定定价
  • 用户要求在页面上展示定价
  • 流量为暖流量/热流量（访客已经了解产品功能）
tsx
<section className="bg-gray-50 py-16 sm:py-24" id="pricing">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Simple, transparent pricing
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {pricing_subheadline}
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {plans.map((plan) => (
        <div className={`rounded-2xl p-8 ring-1 ${plan.featured ? 'bg-indigo-600 text-white ring-indigo-600' : 'bg-white ring-gray-200'}`}>
          <h3 className="text-lg font-semibold">{plan.name}</h3>
          <p className="mt-2 text-sm opacity-80">{plan.description}</p>
          <p className="mt-6">
            <span className="text-4xl font-bold">${plan.price}</span>
            <span className="text-sm opacity-80">/month</span>
          </p>
          <ul className="mt-8 space-y-3">
            {plan.features.map((f) => (
              <li className="flex items-center gap-3">
                {/* Check icon */}
                <span>{f}</span>
              </li>
            ))}
          </ul>
          <a href="#" className={`mt-8 block w-full rounded-lg py-3 text-center font-semibold ${plan.featured ? 'bg-white text-indigo-600' : 'bg-indigo-600 text-white'}`}>
            {plan.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>
定价文案规则：
  • 先展示最高定价方案（或突出中间方案）
  • 使用具体数字（“$49/月” > “起价...”）
  • 展示价值：“$49/月——比失去一条线索的成本还低”
  • 为最受欢迎的方案添加标识
  • 如有年度折扣，提供切换选项

Section 8: Final CTA

板块8：最终CTA

The closing CTA should create urgency and restate the core value:
tsx
<section className="bg-indigo-600 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        {final_headline}
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        {final_subheadline}
      </p>
      <div className="mt-10">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50">
          {finalCTA}
        </a>
      </div>
      <p className="mt-4 text-sm text-indigo-200">
        {risk_reversal - e.g., "30-day money-back guarantee. Cancel anytime."}
      </p>
    </div>
  </div>
</section>
Final CTA formulas:
"Ready to {desired outcome}?"
"Start {action}ing today"
"Join {number}+ {audience} already {outcome}"
"Don't let {pain point} hold you back"
"{Outcome} is one click away"
结尾CTA要制造紧迫感并重申核心价值：
tsx
<section className="bg-indigo-600 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        {final_headline}
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        {final_subheadline}
      </p>
      <div className="mt-10">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50">
          {finalCTA}
        </a>
      </div>
      <p className="mt-4 text-sm text-indigo-200">
        {risk_reversal - e.g., "30-day money-back guarantee. Cancel anytime."}
      </p>
    </div>
  </div>
</section>
最终CTA公式：
“准备好{理想结果}了吗？”
“今天就开始{行动}”
“加入{数量}+{受众}的行列，他们已经实现{结果}”
“不要让{痛点}阻碍您”
“{结果}只需一键即可实现”

Step 4: SEO Optimization

步骤4：SEO优化

Landing pages should rank too. Include:
Meta tags:
  • Title: "{Product} - {Primary benefit} | {Brand}" (50-60 chars)
  • Description: "{Product} helps {audience} {outcome}. {Proof point}. {CTA}." (150-160 chars)
On-page SEO:
  • H1 includes primary keyword
  • Primary keyword in first 100 words
  • Image alt text with keyword
  • Internal links to and from the landing page
  • Schema markup (Product, Organization, FAQ, or SoftwareApplication)
Reminder: Landing pages for paid traffic may need 
noindex
if they duplicate content from organic pages.
着陆页也需要获得排名，请包含以下内容：
元标签：
  • 标题：“{产品} - {核心收益} | {品牌}”（50-60字符）
  • 描述：“{产品}帮助{受众}实现{结果}。{信任背书}。{CTA}。”（150-160字符）
页面内SEO：
  • H1包含主关键词
  • 主关键词出现在前100词中
  • 图片alt文本包含关键词
  • 添加指向与来自着陆页的内部链接
  • 添加Schema标记（产品、组织、FAQ或SoftwareApplication）
注意： 如果付费流量着陆页与自然流量页面内容重复，可能需要添加
noindex
标签。

Step 5: Conversion Optimization Checklist

步骤5：转化优化检查清单

Before delivering, verify:
  • Single, clear CTA (one primary action per page)
  • CTA appears 3+ times (hero, middle, end)
  • CTA button text is action-oriented and first-person
  • Page loads fast (minimize scripts, optimize images)
  • Mobile responsive (all sections tested at 375px)
  • No navigation menu (or minimal) to reduce exit points
  • Social proof within scroll of first CTA
  • Risk reversal near every CTA (guarantee, free trial, no CC)
  • Benefit-first headlines (not feature-first)
  • Specific numbers > vague claims
  • White space between sections (not cluttered)
  • Contrast on CTA buttons (stands out from page)
  • Urgency element where authentic (limited spots, deadline, rising price)
交付前，请验证以下内容：
  • 单一清晰的CTA（每页一个核心行动）
  • CTA出现3次以上（首屏、页面中部、结尾）
  • CTA按钮文案为动作导向且使用第一人称
  • 页面加载速度快（最小化脚本、优化图片）
  • 移动端适配（所有板块在375px分辨率下测试通过）
  • 无导航菜单（或极简导航）以减少退出点
  • 首次CTA下方可见范围内有社交证明
  • 每个CTA附近有风险逆转（保证、免费试用、无需信用卡）
  • 标题优先展示收益（而非功能）
  • 使用具体数字而非模糊表述
  • 板块间留有空白（避免拥挤）
  • CTA按钮与背景形成高对比度（突出显示）
  • 合理添加紧迫感元素（限量名额、截止日期、价格上涨）

Output Format

输出格式

Deliver in this order:
  1. Page strategy - Framework chosen, audience, goal, messaging hierarchy
  2. Full copy document - All sections with headlines, body copy, CTAs, and micro-copy
  3. Wireframe structure - Section order with Tailwind component code
  4. SEO metadata - Title, description, schema markup
  5. A/B test suggestions - 2-3 elements to test first (headline, CTA, social proof)
请按以下顺序交付：
  1. 页面策略 - 所选框架、受众、目标、信息层级
  2. 完整文案文档 - 所有板块的标题、正文、CTA与微文案
  3. 线框图结构 - 板块顺序与Tailwind组件代码
  4. SEO元数据 - 标题、描述、Schema标记
  5. A/B测试建议 - 优先测试的2-3个元素（标题、CTA、社交证明）

Important Notes

重要提示

  • Every claim needs proof. "Best tool" needs a G2 ranking. "Fastest" needs a benchmark. Unsubstantiated claims reduce trust.
  • Write at a Grade 6-8 reading level. Simple words, short sentences, clear logic.
  • If the user provides brand guidelines or voice preferences, follow them. If not, default to: confident, clear, conversational, not salesy.
  • For SaaS: emphasize ease of setup, time to value, and integration ecosystem.
  • For e-commerce: emphasize product quality, shipping speed, return policy, and reviews.
  • For services: emphasize expertise, process, results, and risk reversal.
  • 所有主张都需要证据支撑。“最佳工具”需要G2排名。“最快”需要基准数据。无根据的主张会降低信任度。
  • 写作难度控制在6-8年级阅读水平。使用简单词汇、短句、清晰逻辑。
  • 如果用户提供品牌指南或语气偏好，请遵循。如未提供，默认使用：自信、清晰、口语化、不过度推销的语气。
  • 针对SaaS：强调易搭建、价值实现时间、集成生态。
  • 针对电商：强调产品质量、发货速度、退货政策、评论。
  • 针对服务：强调专业度、流程、结果、风险逆转。