Landing Page Product Feature Component
- Updated on
This component can display a product feature e.g. on your landing page, features page or elsewhere. It can show an image on the left, right or center; either in perspective or flat and has many customization options.
Use this to highlight a feature or key aspect of your product with text and an optional image.
The wait is over
Give your project the home it deserves. Your users will love you for it.
Usage
import { LandingProductFeature } from '@/components/landing/LandingProductFeature';
<LandingProductFeature
title="The wait is over"
description="Give your project the home it deserves. Your users will love you for it."
imageSrc="/static/images/backdrop-5.webp"
imageAlt="Sample image"
/>
Examples
Image position
The wait is over
Give your project the home it deserves. Your users will love you for it.
Image perspective
The wait is over
Give your project the home it deserves. Your users will love you for it.
Customization
It is also possible to customize the background color, change text position or disable zooming on hover.
The wait is over
Give your project the home it deserves. Your users will love you for it.
With Background Glow
The wait is over
Give your project the home it deserves. Your users will love you for it.
With Bullet Points
The wait is over
- 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 options.
With Call to Action (CTA)
The wait is over
Receive personalized recommendations and insights tailored to your workflow and easily collaborate with team members and clients in real-time.
Try now for free7 day free trial, no credit card required.
With Features Grid
Get the job done in no time
You'll save days of work and the only question you'll have is 'What do I do with all this free time?'
The wait is over
Give your project the home it deserves.
Branding
No configuration needed. We take care of it.
39+ themes
Choose from more than 30+ themes or create your own.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.ReactNode ǀ string | No | - |
| className | string | No | - |
| innerClassName | string | No | - |
| title | string ǀ React.ReactNode | No | - |
| titleComponent | React.ReactNode | No | - |
| description | string ǀ React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| textPosition | 'center' ǀ 'left' | No | 'left' |
| imageSrc | string | No | - |
| imageAlt | string | No | '' |
| imagePosition | 'left' ǀ 'right' ǀ 'center' | No | 'right' |
| imagePerspective | 'none' ǀ 'left' ǀ 'right' ǀ 'bottom' ǀ 'bottom-lg' ǀ 'paper' | No | 'paper' |
| imageShadow | 'none' ǀ 'soft' ǀ 'hard' | No | 'hard' |
| zoomOnHover | boolean | No | true |
| minHeight | number | No | 350 |
| withBackground | boolean | No | false |
| withBackgroundGlow | boolean | No | false |
| variant | 'primary' ǀ 'secondary' | No | 'primary' |
| backgroundGlowVariant | 'primary' ǀ 'secondary' | No | 'primary' |
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.