落地页

TanStarter 内置了预构建组件模块，让您可以快速创建响应式的落地页。

可用组件模块

TanStarter 模板在 src/components/blocks/ 中包含以下组件模块：

组件	文件	描述
Hero	`hero.tsx`	引人注目的页面标题区域
Logo 云	`logo-cloud.tsx`	显示合作伙伴或客户 Logo
统计	`stats.tsx`	显示重要指标和统计数据
功能	`features.tsx`	突出您产品的关键功能
功能 2	`features2.tsx`	备选的功能展示布局
功能 3	`features3.tsx`	备选的功能展示布局
CTA	`calltoaction.tsx`	鼓励用户行动
集成	`integration.tsx`	展示第三方集成
集成 2	`integration2.tsx`	备选集成展示
价格	`pricing.tsx`	展示您的价格计划
FAQ	`faqs.tsx`	回答常见问题
推荐	`testimonials.tsx`	显示客户评价
订阅	`newsletter-card.tsx`	邮件订阅表单

落地页结构

落地页在 src/components/blocks/homepage.tsx 中组装，导入并组合所有组件模块：

src/components/blocks/homepage.tsx

import HeroSection from '@/components/blocks/hero';
import LogoCloudSection from '@/components/blocks/logo-cloud';
import StatsSection from '@/components/blocks/stats';
import Features3Section from '@/components/blocks/features3';
import FeaturesSection from '@/components/blocks/features';
import CallToActionSection from '@/components/blocks/calltoaction';
import Features2Section from '@/components/blocks/features2';
import IntegrationSection from '@/components/blocks/integration';
import Integration2Section from '@/components/blocks/integration2';
import PricingSection from '@/components/blocks/pricing';
import FaqSection from '@/components/blocks/faqs';
import TestimonialsSection from '@/components/blocks/testimonials';
import NewsletterCard from '@/components/blocks/newsletter-card';

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <LogoCloudSection />
      <StatsSection />
      <Features3Section />
      <FeaturesSection />
      <CallToActionSection />
      <Features2Section />
      <IntegrationSection />
      <Integration2Section />
      <PricingSection />
      <FaqSection />
      <TestimonialsSection />
      <NewsletterCard />
    </div>
  );
}

自定义落地页

调整区域顺序

要更改区域顺序或增删区域，直接编辑 homepage.tsx：

src/components/blocks/homepage.tsx

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <FeaturesSection />
      <PricingSection />
      <TestimonialsSection />
      {/* 根据需要添加或删除区域 */}
    </div>
  );
}

自定义单个组件

每个组件模块是 src/components/blocks/ 中的独立文件。要自定义某个组件：

打开对应文件（例如 hero.tsx）
直接修改内容、样式或布局
文本内容来自 messages 文件

创建新组件模块

要创建新的组件模块：

在 src/components/blocks/ 中创建新文件（例如 my-section.tsx）
实现您的组件：

src/components/blocks/my-section.tsx

import { messages } from '@/messages';

export default function MySection() {
  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center">
          {messages.home.mySection.title}
        </h2>
        <p className="mt-4 text-center text-muted-foreground">
          {messages.home.mySection.description}
        </p>
      </div>
    </section>
  );
}

在 homepage.tsx 中添加该组件：

import MySection from '@/components/blocks/my-section';

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <MySection />
      {/* ... 其他区域 */}
    </div>
  );
}

最佳实践

创建落地页时，考虑这些最佳实践：

专注于用户流程：安排组件顺序以引导用户完成购买流程
保持一致性：在整个过程中使用一致的颜色、字体和样式
优化性能：压缩图像大小并减少不必要的动画
移动优先：确保您的落地页在所有设备上都看起来很棒
测试加载时间：验证您的页面加载快速，特别是首屏内容
清晰的 CTA：使您的主要 CTA 突出且引人注目

下一步

现在您了解了如何在 TanStarter 中创建和自定义落地页，探索这些相关主题：

组件

自定义 UI 组件

自定义页面

博客

配置博客系统

网站配置

配置网站核心设置

TanStarter 内置了预构建组件模块，让您可以快速创建响应式的落地页。

可用组件模块

TanStarter 模板在 src/components/blocks/ 中包含以下组件模块：

组件	文件	描述
Hero	`hero.tsx`	引人注目的页面标题区域
Logo 云	`logo-cloud.tsx`	显示合作伙伴或客户 Logo
统计	`stats.tsx`	显示重要指标和统计数据
功能	`features.tsx`	突出您产品的关键功能
功能 2	`features2.tsx`	备选的功能展示布局
功能 3	`features3.tsx`	备选的功能展示布局
CTA	`calltoaction.tsx`	鼓励用户行动
集成	`integration.tsx`	展示第三方集成
集成 2	`integration2.tsx`	备选集成展示
价格	`pricing.tsx`	展示您的价格计划
FAQ	`faqs.tsx`	回答常见问题
推荐	`testimonials.tsx`	显示客户评价
订阅	`newsletter-card.tsx`	邮件订阅表单

落地页结构

落地页在 src/components/blocks/homepage.tsx 中组装，导入并组合所有组件模块：

src/components/blocks/homepage.tsx

import HeroSection from '@/components/blocks/hero';
import LogoCloudSection from '@/components/blocks/logo-cloud';
import StatsSection from '@/components/blocks/stats';
import Features3Section from '@/components/blocks/features3';
import FeaturesSection from '@/components/blocks/features';
import CallToActionSection from '@/components/blocks/calltoaction';
import Features2Section from '@/components/blocks/features2';
import IntegrationSection from '@/components/blocks/integration';
import Integration2Section from '@/components/blocks/integration2';
import PricingSection from '@/components/blocks/pricing';
import FaqSection from '@/components/blocks/faqs';
import TestimonialsSection from '@/components/blocks/testimonials';
import NewsletterCard from '@/components/blocks/newsletter-card';

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <LogoCloudSection />
      <StatsSection />
      <Features3Section />
      <FeaturesSection />
      <CallToActionSection />
      <Features2Section />
      <IntegrationSection />
      <Integration2Section />
      <PricingSection />
      <FaqSection />
      <TestimonialsSection />
      <NewsletterCard />
    </div>
  );
}

自定义落地页

调整区域顺序

要更改区域顺序或增删区域，直接编辑 homepage.tsx：

src/components/blocks/homepage.tsx

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <FeaturesSection />
      <PricingSection />
      <TestimonialsSection />
      {/* 根据需要添加或删除区域 */}
    </div>
  );
}

自定义单个组件

每个组件模块是 src/components/blocks/ 中的独立文件。要自定义某个组件：

打开对应文件（例如 hero.tsx）
直接修改内容、样式或布局
文本内容来自 messages 文件

创建新组件模块

要创建新的组件模块：

在 src/components/blocks/ 中创建新文件（例如 my-section.tsx）
实现您的组件：

src/components/blocks/my-section.tsx

import { messages } from '@/messages';

export default function MySection() {
  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center">
          {messages.home.mySection.title}
        </h2>
        <p className="mt-4 text-center text-muted-foreground">
          {messages.home.mySection.description}
        </p>
      </div>
    </section>
  );
}

在 homepage.tsx 中添加该组件：

import MySection from '@/components/blocks/my-section';

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <MySection />
      {/* ... 其他区域 */}
    </div>
  );
}