Primary Video CTA
- Updated on
A high-impact component designed for landing pages that combines a compelling video with a call-to-action. This section helps draw attention to key messages while using video content to enhance engagement and demonstrate features or products.
Generate Content With AI
Create marketing copy, product descriptions, and more with our advanced AI content generation tools.
Usage
import { Button } from '@/components/shared/ui/button';
import { LandingPrimaryVideoCtaSection } from '@/components/landing/cta/LandingPrimaryCta';
<LandingPrimaryVideoCtaSection
title="Your Headline Here"
description="Your description text goes here."
videoSrc="path/to/your/video.mp4"
videoPoster="path/to/your/poster-image.jpg"
>
<Button size="xl" asChild>
<a href="#">Get Started</a>
</Button>
</LandingPrimaryVideoCtaSection>
Examples
Centered Text Layout
When you need to emphasize both text and video equally, use the centered text layout with the video positioned below.
Streamline Your Workflow
Our intuitive tools help teams work more efficiently with less effort.
With Video Controls
Display video controls to give users more control over the playback experience.
With Background Glow
Add a subtle background glow to enhance the visual appeal and draw attention to your content.
Powerful Visual Storytelling
Engage your audience with stunning visuals and compelling narratives.
With Social Proof
Add social proof to increase credibility and show popularity of your product.
Trusted by Thousands
Join the community of professionals leveraging our platform for increased productivity.
from 99+ happy users
With Discount/Offer
Highlight special offers or discounts to encourage conversion.
Limited Time Offer
Get exclusive access to premium features and save with our special pricing.
$350 off for the first 10 customers (2 left)
With Discount and Left Alignment
Early Bird Pricing
Sign up now and save with our early adopter discount program.
$350 off for the first 10 customers (2 left)
With Bullet Points
Use bullet points to highlight key features or benefits of your product.
Why Choose Our Platform
- 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.
With Product Hunt Award
Showcase awards and recognition to build credibility.
Award-Winning Platform
Join thousands of satisfied users who rely on our platform daily.
With Social Proof Band
Add a social proof band to showcase key benefits or testimonials.
Enterprise-Grade Solution
Powerful tools designed for businesses of all sizes, with the security and reliability you need.
Full Example with Combined Elements
Transform Your Business
Get everything you need to grow your business with our comprehensive platform.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| title | string | React.ReactNode | No | - |
| titleComponent | React.ReactNode | No | - |
| description | string | React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| videoSrc | string | No | - |
| videoPoster | string | No | - |
| videoPosition | 'left' | 'right' | 'center' | No | 'right' |
| videoMaxWidth | string | No | 'none' |
| videoShadow | 'none' | 'soft' | 'hard' | No | 'hard' |
| textPosition | 'center' | 'left' | No | 'left' |
| muted | boolean | No | true |
| autoPlay | boolean | No | false |
| controls | boolean | No | false |
| loop | boolean | No | false |
| minHeight | number | No | 350 |
| withBackground | boolean | No | false |
| withBackgroundGlow | boolean | No | false |
| variant | 'primary' | 'secondary' | No | 'primary' |
| backgroundGlowVariant | 'primary' | 'secondary' | No | 'primary' |
| className | string | No | - |
| innerClassName | string | No | - |
| leadingComponent | React.ReactNode | No | - |
| footerComponent | React.ReactNode | No | - |
| children | React.ReactNode | No | - |
More Examples
For more even more examples, see Primary Text CTA or Primary Image CTA.
Also see:
- Product Feature component for highlighting solutions to these problems
- Primary Text Call to Action component for directing users to solutions
- Primary Image Call to Action component for directing users to solutions