跳转到内容
ShipSaaSShipSaaS Docs

落地页

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

可用组件模块

Section titled “可用组件模块”

ShipSaaS 模板在 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 邮件订阅表单

落地页结构

Section titled “落地页结构”

落地页在 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>
  );
}

自定义落地页

Section titled “自定义落地页”

调整区域顺序

Section titled “调整区域顺序”

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

src/components/blocks/homepage.tsx

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

自定义单个组件

Section titled “自定义单个组件”

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

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

创建新组件模块

Section titled “创建新组件模块”

要创建新的组件模块：

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

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>
  );
}
  1. 在 homepage.tsx 中添加该组件：
import MySection from '@/components/blocks/my-section';


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

最佳实践

Section titled “最佳实践”

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

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

下一步

Section titled “下一步”

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