Skip to content
ShipSaaSShipSaaS Docs

Landing Page

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

Available Block Components

Section titled “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

Section titled “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

Section titled “Customizing the Landing Page”

Reordering Sections

Section titled “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

Section titled “Customizing Individual Components”

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

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

Creating a New Block Component

Section titled “Creating a New Block Component”

To create a new custom block component:

  1. Create a new file in src/components/blocks/ (e.g., my-section.tsx).
  2. 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>
  );
}
  1. 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

Section titled “Best Practices”

When building your landing page, consider these best practices:

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

Next Steps

Section titled “Next Steps”

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