Learn how to create a high-converting landing page using our pre-built components and best practices.
The hero section is the first thing visitors see. Make it count with a compelling headline, clear value proposition, and strong call-to-action.
1export default function Hero() {2 return (3 <div className="relative overflow-hidden">4 <div className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">5 <div className="text-center">6 <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">7 Your Compelling Headline8 </h1>9 <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600">10 Your value proposition goes here. Make it clear and convincing.11 </p>12 <div className="mt-10">13 <Button size="lg">Get Started</Button>14 </div>15 </div>16 </div>17 </div>18 )19}
Highlight your product's key features with compelling icons, headlines, and descriptions. Choose from a variety of layouts to suit your needs.
A simple features section with icons and descriptions.
Everything you need to succeed
Our platform provides all the tools and features you need to build, deploy, and scale your applications with confidence.
Deploy instantly with our optimized infrastructure and see immediate results.
Bank-grade security with end-to-end encryption and advanced threat protection.
Get deep insights into your performance with real-time analytics and reports.
Connect with your favorite tools seamlessly through our extensive API.
Work together efficiently with built-in collaboration tools and real-time updates.
Scale globally with our distributed infrastructure and CDN support.
Get help whenever you need it with our round-the-clock expert support.
Your data is yours. We ensure compliance with global privacy standards.
Copy the code below and paste it into your component.
1<Features />2// or3// <FeaturesGrid />4// <FeaturesWithCards />5// <FeaturesWithScreenshot />6// <FeaturesWithSteps />7// You should edit the features array in the component file.
Create compelling call-to-action sections to convert visitors into customers.
1export function CTA() {2 return (3 <div className="bg-gray-50 dark:bg-gray-900">4 <div className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">5 <div className="text-center">6 <h2 className="text-3xl font-bold">7 Ready to get started?8 </h2>9 <p className="mx-auto mt-4 max-w-2xl text-gray-600">10 Join thousands of satisfied customers using our platform.11 </p>12 <div className="mt-8">13 <Button size="lg">Start Free Trial</Button>14 </div>15 </div>16 </div>17 </div>18 )19}
Create compelling call-to-action sections to convert visitors into customers. Choose from a variety of layouts to suit your needs.
A clean and simple testimonial section with a dark background.
"A game-changing platform that has revolutionized our workflow."
"The best solution we've found for our team's needs."
"Exceptional quality and outstanding support."
Copy the code below and paste it into your component.
1<TestimonialCarousel />;2// or3<TestimonialGrid />;4// or5<TestimonialMinimal />;6// You should edit the testimonials array in the component file.
Create compelling call-to-action sections to convert visitors into customers.
1export function CTA() {2 return (3 <div className="bg-gray-50 dark:bg-gray-900">4 <div className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">5 <div className="text-center">6 <h2 className="text-3xl font-bold">7 Ready to get started?8 </h2>9 <p className="mx-auto mt-4 max-w-2xl text-gray-600">10 Join thousands of satisfied customers using our platform.11 </p>12 <div className="mt-8">13 <Button size="lg">Start Free Trial</Button>14 </div>15 </div>16 </div>17 </div>18 )19}
Create compelling call-to-action sections to convert visitors into customers.
1export function CTA() {2 return (3 <div className="bg-gray-50 dark:bg-gray-900">4 <div className="mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">5 <div className="text-center">6 <h2 className="text-3xl font-bold">7 Ready to get started?8 </h2>9 <p className="mx-auto mt-4 max-w-2xl text-gray-600">10 Join thousands of satisfied customers using our platform.11 </p>12 <div className="mt-8">13 <Button size="lg">Start Free Trial</Button>14 </div>15 </div>16 </div>17 </div>18 )19}