Shipixen Logo

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.

Sample image

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.

Sample image

Image perspective

The wait is over

Give your project the home it deserves. Your users will love you for it.

Sample image

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.

Sample image

With Background Glow

The wait is over

Give your project the home it deserves. Your users will love you for it.

Sample image

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.
Sample image

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 free

7 day free trial, no credit card required.

Sample image

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?'

Deploy

Give your project the home it deserves.

Sample image

No config

No configuration needed. We take care of it.

Sample image

Themes

Choose from more than 30+ themes or create your own.

Sample image

With Product Steps

How it works

Follow these simple steps to get started with our product.

Create your account

Sign up in seconds and get instant access to our platform.

Customize your workflow

Set up your preferences and configure your workspace.

Start collaborating

Invite your team and begin working together seamlessly.

With Background Effect

The wait is over

Give your project the home it deserves. Your users will love you for it.

Sample image

With Leading Pill

Join today

The wait is over

Give your project the home it deserves. Your users will love you for it.

Sample image

API Reference

Note: When used inside LandingProductFeaturesGrid, some props have context-aware defaults:

  • imagePosition defaults to 'center' when not specified
  • imageShadow defaults to 'none' when not specified
  • minHeight defaults to 0 when not specified
Prop NameProp TypeRequiredDefault 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- leadingComponent React.ReactNode No- textPosition 'center' ǀ 'left' No 'left' imageSrc string No- imageAlt string No'' imagePosition 'left' ǀ 'right' ǀ 'center' No-* imagePerspective 'none' ǀ 'left' ǀ 'right' ǀ 'bottom' ǀ 'bottom-lg' ǀ 'paper' No 'bottom' imageShadow 'none' ǀ 'soft' ǀ 'hard' No-* 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' effectComponent React.ReactNode No- effectClassName string No-

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: