Landing Page Footer Section

This component displays a footer on the landing page. It provides additional information and links related to the website. On smaller screens, it changes to a horizontal layout to ensure usability.

Usage

import { LandingFooter } from '@/components/landing/footer/LandingFooter';
import { LandingFooterColumn } from '@/components/landing/footer/LandingFooterColumn';
import { LandingFooterLink } from '@/components/landing/footer/LandingFooterLink';

<LandingFooter
  title="Beautiful landing pages in minutes"
  description="The easiest way to make a landing page for your startup: SaaS, iOS/Android app, directory, personal page and more."
  footnote="© 2025 Page AI. All rights reserved."
>
  <LandingFooterColumn title="Product">
    <LandingFooterLink href="#">Features</LandingFooterLink>
    <LandingFooterLink href="#">Pricing</LandingFooterLink>
    <LandingFooterLink href="#">Integrations</LandingFooterLink>
    <LandingFooterLink href="#">FAQ</LandingFooterLink>
  </LandingFooterColumn>

  <LandingFooterColumn title="Company">
    <LandingFooterLink href="#">About</LandingFooterLink>
    <LandingFooterLink href="#">Careers</LandingFooterLink>
    <LandingFooterLink href="#">Press</LandingFooterLink>
    <LandingFooterLink href="#">Blog</LandingFooterLink>
  </LandingFooterColumn>
</LandingFooter>

Examples

With custom logo

With more columns

With background

With background glow

With background gradient

API Reference

Prop NameProp TypeRequiredDefault children React.ReactNode No- title string No- description string No- footnote string ǀ React.ReactNode No- logoComponent React.ReactNode No- withBackground boolean No false withBackgroundGlow boolean No false variant 'primary' ǀ 'secondary' No 'primary' backgroundGlowVariant 'primary' ǀ 'secondary' No 'primary' withBackgroundGradient boolean No false

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.