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

The wait is over

Give your project the home it deserves.

Sample image

Branding

No configuration needed. We take care of it.

Sample image

39+ themes

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

Sample image

API Reference

Prop NameProp TypeRequiredDefault
children React.ReactNode ǀ stringNo-
className stringNo-
innerClassName stringNo-
title string ǀ React.ReactNodeNo-
titleComponent React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
textPosition 'center' ǀ 'left'No'left'
imageSrc stringNo-
imageAlt stringNo''
imagePosition 'left' ǀ 'right' ǀ 'center'No'right'
imagePerspective 'none' ǀ 'left' ǀ 'right' ǀ 'bottom' ǀ 'bottom-lg' ǀ 'paper'No'paper'
imageShadow 'none' ǀ 'soft' ǀ 'hard'No'hard'
zoomOnHover booleanNotrue
minHeight numberNo350
withBackground booleanNofalse
withBackgroundGlow booleanNofalse
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.