Landing Page Video Feature Component

This component is used to display a product video feature in the landing page. The video could either be left, right or center (larger). The section can have a background or not.

It displays a title, description and video of a product's feature.

Use this to highlight a feature or key aspect of your product with a video.

Can be used with multiple features in a Product Features Grid.

Sites in minutes

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

Usage

import { LandingProductVideoFeature } from '@/components/landing/LandingProductVideoFeature';

<LandingProductVideoFeature
  title="Sites in minutes"
  description="Choose from more than 30+ themes or create your own."
  videoSrc="https://cache.shipixen.com/features/3-theme-and-logo.mp4"
/>

Examples

Video Position

Sites in minutes

Choose from more than 30+ themes or create your own. Upload your logo, set the size and we take care of the rest.

Customization

To better separate sections, you can alternate between primary, secondary and no background.
Here we set variant to secondary and the videoPosition to right.

Sites in minutes

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

With Background Glow

Easy Branding

Choose from more than 30+ themes or create your own. Upload your logo and we take care of the rest.

With Bullet Points

Easy Branding

Intelligent Assistance.: Receive personalized recommendations.
Seamless Collaboration.: Easily collaborate with team members.
Advanced Customization.: Tailor your app to fit your style.

With Call to Action (CTA)

Easy Branding

Receive personalized recommendations and insights tailored to your workflow and easily collaborate with team members.

Try now for free

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

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.

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'`
videoSrc	`string`	No	-
videoPoster	`string`	No	-
videoPosition	`'left'` ǀ `'right'` ǀ `'center'`	No	`'right'`
videoMaxWidth	`string`	No	`'none'`
autoPlay	`boolean`	No	-
controls	`boolean`	No	`false`
zoomOnHover	`boolean`	No	`false`
minHeight	`number`	No	`350`
withBackground	`boolean`	No	`false`
withBackgroundGlow	`boolean`	No	`false`
variant	`'primary'` ǀ `'secondary'`	No	`'primary'`
backgroundGlowVariant	`'primary'` ǀ `'secondary'`	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.