Hero Sections
Attention-grabbing hero sections with compelling headlines, descriptions, and call-to-action buttons.
3 COMPONENT VARIATIONS
Gradient Feature Hero
A modern hero section with a gradient background, feature highlights, and a prominent call-to-action.
View
Modern Business Hero
A professional hero section with a clean layout, featuring a headline, description, and dual CTAs.
View
Split Content Hero
A versatile hero layout with split content sections and a prominent image.
View
Gradient Feature Hero
A modern hero section with a gradient background, feature highlights, and a prominent call-to-action.
Introducing Our Platform
Powerful solutions for modern businesses
Our comprehensive suite of tools helps you streamline operations, boost productivity, and drive growth.
Lightning Fast
Experience unparalleled speed with our optimized platform designed for performance.
Secure by Design
Your data is protected with enterprise-grade security and compliance measures.
Actionable Analytics
Gain valuable insights with comprehensive analytics and reporting tools.
Component Code
<section class="bg-gradient-to-br from-cyan-800 to-cyan-900 text-white overflow-hidden">
<div class="max-w-7xl mx-auto px-3 py-12">
<div class="text-center space-y-6 max-w-3xl mx-auto">
<span class="inline-block px-3 py-1 bg-white/10 rounded-full text-sm font-medium">Introducing Our Platform</span>
<h1 class="text-3xl md:text-5xl font-bold leading-tight">
Powerful solutions for modern businesses
</h1>
<p class="text-lg text-cyan-100">
Our comprehensive suite of tools helps you streamline operations, boost productivity, and drive growth.
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-3">
<a href="#" class="px-6 py-3 bg-white text-cyan-700 font-medium rounded-lg hover:bg-cyan-50 transition duration-300">
Start free trial
</a>
<a href="#" class="px-6 py-3 border border-white/30 text-white font-medium rounded-lg hover:bg-white/10 transition duration-300">
Learn more
</a>
</div>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white/10 rounded-xl p-6 backdrop-blur-sm space-y-3">
<div class="w-12 h-12 bg-cyan-600 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold">Lightning Fast</h3>
<p class="text-cyan-100">Experience unparalleled speed with our optimized platform designed for performance.</p>
</div>
<div class="bg-white/10 rounded-xl p-6 backdrop-blur-sm space-y-3">
<div class="w-12 h-12 bg-cyan-600 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold">Secure by Design</h3>
<p class="text-cyan-100">Your data is protected with enterprise-grade security and compliance measures.</p>
</div>
<div class="bg-white/10 rounded-xl p-6 backdrop-blur-sm space-y-3">
<div class="w-12 h-12 bg-cyan-600 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold">Actionable Analytics</h3>
<p class="text-cyan-100">Gain valuable insights with comprehensive analytics and reporting tools.</p>
</div>
</div>
</div>
</section>Modern Business Hero
A professional hero section with a clean layout, featuring a headline, description, and dual CTAs.
New Feature
Transform your workflow with intelligent automation
Streamline your processes, reduce manual tasks, and focus on what matters most to your business with our powerful platform.
Trusted by leading companies worldwide
Company A
Company B
Company C
Company D
Component Code
<section class="bg-white overflow-hidden">
<div class="max-w-7xl mx-auto px-3 py-6">
<div class="flex flex-col lg:flex-row items-center space-y-6 lg:space-y-0 lg:space-x-12">
<div class="w-full lg:w-1/2 space-y-6">
<div class="space-y-3">
<span class="inline-block px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm font-medium">New Feature</span>
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
Transform your workflow with intelligent automation
</h1>
<p class="text-lg text-gray-600">
Streamline your processes, reduce manual tasks, and focus on what matters most to your business with our
powerful platform.
</p>
</div>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<a href="#"
class="px-6 py-3 bg-cyan-700 text-white font-medium rounded-lg hover:bg-cyan-800 transition duration-300 text-center">
Get started
</a>
<a href="#"
class="px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition duration-300 flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z">
</path>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
Watch demo
</a>
</div>
<div class="space-y-3">
<p class="text-sm text-gray-500">Trusted by leading companies worldwide</p>
<div class="flex flex-wrap items-center space-x-6">
<div class="text-gray-400 font-medium">Company A</div>
<div class="text-gray-400 font-medium">Company B</div>
<div class="text-gray-400 font-medium">Company C</div>
<div class="text-gray-400 font-medium">Company D</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2">
<div class="relative rounded-xl overflow-hidden shadow-2xl">
<img
src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
alt="Team working on platform"
class="w-full h-auto"
/>
<div class="absolute inset-0 bg-gradient-to-tr from-cyan-700/20 to-transparent"></div>
</div>
</div>
</div>
</div>
</section>Split Content Hero
A versatile hero layout with split content sections and a prominent image.
Innovative Solution
Simplify complex workflows with our intuitive platform
Our platform helps teams collaborate more effectively, automate repetitive tasks, and achieve better results in less time.
Streamline your workflow with automation
Collaborate seamlessly with your team
Track progress with real-time analytics
Component Code
<section class="bg-white">
<div class="grid grid-cols-1 lg:grid-cols-2">
<div class="flex items-center justify-center px-3 py-12 lg:py-24 bg-cyan-50">
<div class="max-w-xl space-y-6">
<div class="space-y-3">
<span class="inline-block px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm font-medium">Innovative Solution</span>
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
Simplify complex workflows with our intuitive platform
</h1>
<p class="text-lg text-gray-600">
Our platform helps teams collaborate more effectively, automate repetitive tasks, and achieve better results in less time.
</p>
</div>
<div class="space-y-3">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0 w-6 h-6 bg-cyan-700 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-700">Streamline your workflow with automation</p>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0 w-6 h-6 bg-cyan-700 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-700">Collaborate seamlessly with your team</p>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0 w-6 h-6 bg-cyan-700 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-700">Track progress with real-time analytics</p>
</div>
</div>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<a href="#" class="px-6 py-3 bg-cyan-700 text-white font-medium rounded-lg hover:bg-cyan-800 transition duration-300 text-center">
Get started
</a>
<a href="#" class="px-6 py-3 border border-cyan-700 text-cyan-700 font-medium rounded-lg hover:bg-cyan-50 transition duration-300 text-center">
Learn more
</a>
</div>
</div>
</div>
<div class="relative h-64 lg:h-auto">
<img
src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80"
alt="Team collaboration"
class="absolute inset-0 w-full h-full object-cover"
/>
<div class="absolute inset-0 bg-gradient-to-r from-cyan-700/20 to-transparent"></div>
</div>
</div>
</section>Ready to Use These Components?
Copy the code and customize it to match your brand. These components are built with TailwindCSS and work seamlessly in any project.
Explore More Components