Landing Page Social Proof Band Component
- Updated on
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.
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
With customized icons
With Primary Image CTA
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.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.ReactNode ǀ string | Yes | - |
| invert | boolean | No | - |
| variant | 'default' ǀ 'primary' ǀ 'secondary' | No | 'default' |
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.