Landing Page Key Point
Use this to display a bullet point in the description of a Product Feature. This component can clarify the key features of the product or service, especially when the description is long and detailed.
Can also be used as a standalone component.
- Intelligent Assistance.
- Receive personalized recommendations and insights tailored to your workflow.
- Seamless Collaboration.
- Easily collaborate with team members and clients in real-time.
- Advanced Customization.
- Tailor your app to fit your unique requirements with extensive customization.
Usage
import { LandingProductFeatureKeyPoints } from '@/components/landing/LandingProductFeatureKeyPoints';
<LandingProductFeatureKeyPoints
keyPoints={[
{
title: 'Intelligent Assistance',
description:
'Receive personalized recommendations and insights tailored to your workflow.',
},
{
title: 'Seamless Collaboration',
description:
'Easily collaborate with team members and clients in real-time.',
},
{
title: 'Advanced Customization',
description:
'Tailor your app to fit your unique requirements with extensive customization.',
},
]}
/>
Examples
With inline description style
- Intelligent Assistance.
- Receive personalized recommendations and insights tailored to your workflow.
- Seamless Collaboration.
- Easily collaborate with team members and clients in real-time.
- Advanced Customization.
- Tailor your app to fit your unique requirements with extensive customization.
With Cta Section
Want more?
- Intelligent Assistance.
- Receive personalized recommendations and insights tailored to your workflow.
- Seamless Collaboration.
- Easily collaborate with team members and clients in real-time.
- Advanced Customization.
- Tailor your app to fit your unique requirements with extensive customization.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| keyPoints | KeyPoint[] | Yes | - |
| variant | 'primary' ǀ 'secondary' | No | 'primary' |
| icon | React.ReactNode ǀ LucideIcon | No | - |
| descriptionStyle | 'inline' ǀ 'block' | No | 'block' |
| iconClassName | string | No | - |
export interface KeyPoint {
title: string;
description: string;
}
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.
Also see: