Landing Page Features Grid Component
This component displays a title, description and a grid of Product Feature and/or Product Video Feature (in any combination, passed as children).
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.
Usage
import { LandingProductFeaturesGrid } from '@/components/landing/LandingProductFeaturesGrid';
import { LandingProductFeature } from '@/components/landing/LandingProductFeature';
<LandingProductFeaturesGrid
title="Get the job done in no time"
description="You'll save days of work and the only question you'll have is 'What do I do with all this free time?'"
>
<LandingProductFeature
title="The wait is over"
description="Give your project the home it deserves. Your users will love you for it."
imageSrc="/static/images/shipixen/product/14.webp"
imageAlt="Sample image"
/>
<LandingProductFeature
title="Branding"
description="No configuration needed. We take care of everything for you, just press a button."
imageSrc="/static/images/shipixen/product/4.webp"
imageAlt="Sample image"
/>
<LandingProductFeature
title="39+ themes"
description="Choose from more than 30+ themes or create your own. Upload your logo, set the size and we take care of the rest."
imageSrc="/static/images/shipixen/product/2.webp"
imageAlt="Sample image"
/>
</LandingProductFeaturesGrid>
Examples
Usage with video features
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?'
Generate
Save time by generating features, sales copy, FAQs and even example testimonials with AI. All beautifully designed.
Design
Choose from more than 30+ themes or create your own. Upload your logo, set the size and we take care of the rest.
Build
Use our pricing page builder to create a beautiful pricing page. Choose from different layouts and monthly/yearly pricing options. It's as easy as it looks.
Mixing features
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?'
Design
No configuration needed. We take care of everything for you, just press a button.
Build
Use our pricing page builder to create a beautiful pricing page.
Customization
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?'
Design
No configuration needed. We take care of everything for you, just press a button.
Build
Use our pricing page builder to create a beautiful pricing page. Choose from different layouts and monthly/yearly pricing options. It's as easy as it looks.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.ReactNode | No | - |
| title | string ǀ React.ReactNode | No | - |
| titleComponent | React.ReactNode | No | - |
| description | string ǀ React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| withBackground | boolean | No | true |
| variant | 'primary' ǀ 'secondary' | No | 'primary' |
| containerType | 'narrow' ǀ 'wide' ǀ 'ultrawide' | No | 'ultrawide' |
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.