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.