Product Steps
The LandingProductSteps component displays a title, description, and a list of steps with alternating media positions. It's designed for showcasing product features, workflows, or processes on landing pages. This component is ideal when you need to present more than three features in a visually engaging format.
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.
Usage
import { LandingProductSteps } from '@/components/landing/LandingProductSteps';
import { LandingProductFeature } from '@/components/landing/LandingProductFeature';
import { LandingProductVideoFeature } from '@/components/landing/LandingProductVideoFeature';
<LandingProductSteps
title="Product Features"
description="Discover what makes our product stand out."
>
<LandingProductFeature
title="Feature One"
description="Description of feature one"
imageSrc="/path/to/image.webp"
/>
<LandingProductFeature
title="Feature Two"
description="Description of feature two"
imageSrc="/path/to/image.webp"
/>
</LandingProductSteps>
Examples
Grid Display
Our Process
How we deliver quality results every time.
Research
We start by understanding your needs and goals.
Design
Our team creates tailored solutions for your business.
Code
We build your project to perfection.
Secondary Variant
Our Process
How we deliver quality results every time.
Research
We start by understanding your needs and goals.
Design
Our team creates tailored solutions for your business.
With Background Glow
Platform Features
Discover the powerful capabilities of our platform.
Analytics Dashboard
Track key metrics and performance indicators in real-time.
Team Collaboration
Work together efficiently with integrated tools.
With Video Features
See it in action
Watch how our product solves real-world problems.
Easy Setup
Get started in minutes with our guided setup process.
Intuitive Interface
Navigate with ease through our user-friendly platform.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| className | string | No | undefined |
| children | React.ReactNode | No | undefined |
| title | string | React.ReactNode | No | undefined |
| titleComponent | React.ReactNode | No | undefined |
| description | string | React.ReactNode | No | undefined |
| descriptionComponent | React.ReactNode | No | undefined |
| withBackground | boolean | No | true |
| withBackgroundGlow | boolean | No | false |
| variant | 'primary' | 'secondary' | No | 'primary' |
| backgroundGlowVariant | 'primary' | 'secondary' | No | 'primary' |
| containerType | 'narrow' | 'wide' | 'ultrawide' | No | 'ultrawide' |
| display | 'list' | 'grid' | No | 'list' |
More Examples
For more examples, see Landing Page Components or explore the Product Feature and Product Video Feature components.