Landing Page

Learn how to build beautiful, responsive landing pages using built-in block components

ShipSaaS comes with pre-built block components, allowing you to quickly create beautiful, fully responsive landing pages.

Available Block Components

The ShipSaaS template contains the following block components under src/components/blocks/:

Component	File	Description
Hero	`hero.tsx`	High-impact page header and hero area
Logo Cloud	`logo-cloud.tsx`	Displays partner or customer logos
Stats	`stats.tsx`	Displays important metrics and statistics
Features	`features.tsx`	Highlights key features of your product
Features 2	`features2.tsx`	Alternative feature presentation layout
Features 3	`features3.tsx`	Alternative feature presentation layout
CTA	`calltoaction.tsx`	Encourages user actions (Call to Action)
Integration	`integration.tsx`	Showcases third-party integrations
Integration 2	`integration2.tsx`	Alternative integration showcase
Pricing	`pricing.tsx`	Displays your pricing plans
FAQ	`faqs.tsx`	Answers frequently asked questions
Testimonials	`testimonials.tsx`	Displays customer testimonials and quotes
Newsletter	`newsletter-card.tsx`	Email subscription and newsletter card

Landing Page Structure

The landing page is assembled in src/components/blocks/homepage.tsx, importing and combining all the block components:

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>
  );
}

Customizing the Landing Page

Reordering Sections

To change the sequence of sections or add/remove blocks, directly edit homepage.tsx:

src/components/blocks/homepage.tsx

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <FeaturesSection />
      <PricingSection />
      <TestimonialsSection />
      {/* Add or remove sections as required */}
    </div>
  );
}

Customizing Individual Components

Each block component is a self-contained file in src/components/blocks/. To customize a specific block:

Open the corresponding file (e.g., hero.tsx).
Directly modify the content, Tailwind styles, or layout.
Text contents are loaded dynamically from the messages localization files.

Creating a New Block Component

To create a new custom block component:

Create a new file in src/components/blocks/ (e.g., my-section.tsx).
Implement your component:

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>
  );
}

Import and include this component in homepage.tsx:

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

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <MySection />
      {/* ... Other sections */}
    </div>
  );
}

Best Practices

When building your landing page, consider these best practices:

Focus on User Flow: Sequence components logically to guide users smoothly toward conversion.
Ensure Consistency: Maintain uniform colors, typography, and spacing throughout the page.
Optimize Performance: Compress images and limit heavy or unnecessary animations.
Mobile First: Ensure that your layouts look exceptional on all mobile screen widths.
Monitor Load Times: Verify that your page loads quickly, especially the above-the-fold content.
Clear CTA: Keep your primary Call-to-Action buttons prominent and compelling.

Next Steps

Now that you know how to build and customize landing pages in ShipSaaS, explore these related topics:

Components - Customize UI components
Custom Pages
Blog - Configure the blog system
Website Configuration - Configure core website settings
Pages
Blog

Landing Page

On this page