Page UI logo

Landing Page Social Proof Band Component

Use this to highlight key features or social proof. This is usually placed at the top of the page, but you can also use it in between sections or below your primary CTA.

100% encrypted and secure
24/7 customer support
99% customer satisfaction

Usage

import { LandingSocialProofBand } from '@/components/landing/social-proof/LandingSocialProofBand';
import { LandingSocialProofBandItem } from '@/components/landing/social-proof/LandingSocialProofBandItem';
<LandingSocialProofBand>
  <LandingSocialProofBandItem>
    100% encrypted and secure
  </LandingSocialProofBandItem>

  <LandingSocialProofBandItem>24/7 customer support</LandingSocialProofBandItem>

  <LandingSocialProofBandItem>
    99% customer satisfaction
  </LandingSocialProofBandItem>
</LandingSocialProofBand>

Examples

Inverted

100% encrypted and secure
24/7 customer support
99% customer satisfaction

With customized icons

AI powered
30% off this week
Trusted by 1000+ customers
Most popular app in US

With Primary Image CTA

100% encrypted and secure
24/7 customer support
99% customer satisfaction
Product of the Day1st

Landing page in minutes

Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.

Sample image

API Reference

Prop NameProp TypeRequiredDefault
children React.ReactNode ǀ stringYes-
invert booleanNo-

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.