Landing Page Footer Section
- Updated on
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 Name | Prop Type | Required | Default |
|---|---|---|---|
| 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.