LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironments
Configuration
Deployment

Integrations

CloudflareDatabaseAuthenticationEmailNewsletterStoragePaymentNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase
X (Twitter)

Landing Page

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

TanStarter includes pre-built block components that let you quickly create responsive landing pages.

Available Block Components

The TanStarter template includes the following block components in src/components/blocks/:

ComponentFileDescription
Herohero.tsxEngaging, attention-grabbing page header
Logo Cloudlogo-cloud.tsxDisplay partner or client logos
Statsstats.tsxDisplay important metrics and statistics
Featuresfeatures.tsxHighlight your product's key capabilities
Features 2features2.tsxAlternative feature display layout
Features 3features3.tsxAnother feature display variant
Call to Actioncalltoaction.tsxEncourage user actions
Integrationintegration.tsxShowcase third-party integrations
Integration 2integration2.tsxAlternative integration display
Pricingpricing.tsxShowcase your pricing plans
FAQfaqs.tsxAnswer common questions
Testimonialstestimonials.tsxDisplay customer reviews
Newsletternewsletter-card.tsxEmail subscription form

Landing Page Structure

The landing page is assembled in src/components/blocks/homepage.tsx, which imports and composes all 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

Rearranging Sections

To change the order of sections or remove/add sections, simply edit homepage.tsx:

src/components/blocks/homepage.tsx
export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <FeaturesSection />
      <PricingSection />
      <TestimonialsSection />
      {/* Remove or add sections as needed */}
    </div>
  );
}

Customizing Individual Blocks

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

  1. Open the corresponding file (e.g., hero.tsx)
  2. Modify the content, styling, or layout directly
  3. Text content is sourced from the messages module for easy localization

Creating New Block Components

To create a new 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. Add the component to 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 creating your landing page, consider these best practices:

  1. Focus on user flow: Arrange blocks to guide users through a logical journey
  2. Maintain consistency: Use consistent colors, fonts, and styling throughout
  3. Optimize for performance: Compress images and minimize unnecessary animations
  4. Mobile first: Ensure your landing page looks great on all devices
  5. Test loading times: Verify that your page loads quickly, especially the above-the-fold content
  6. Clear call-to-action: Make your primary CTA prominent and compelling

Next Steps

Now that you understand how to create and customize landing pages in TanStarter, explore these related topics:

Components

Customize UI components

Pages

Customize pages

Blog

Configure blog system

Website Configuration

Configure core website settings

Table of Contents

Available Block Components
Landing Page Structure
Customizing the Landing Page
Rearranging Sections
Customizing Individual Blocks
Creating New Block Components
Best Practices
Next Steps