Hero Marketing Dark

This carefully crafted Hero component is perfect for Marketing landing pages, featuring a Dark design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Hero
@industry: Marketing
@style: Dark
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.hero-section {
position: relative;
background-color: var(--color-gray-900);
overflow: hidden;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.hero-background {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-background img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
}
.hero-background::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--color-gray-900);
opacity: 0.8;
}
.hero-content {
position: relative;
z-index: 10;
padding: 3rem 1rem;
margin: 0 auto;
max-width: 80rem;
}
@media (min-width: 640px) {
.hero-content {
padding: 4rem 1.5rem;
}
}
@media (min-width: 1024px) {
.hero-content {
padding: 5rem 2rem;
}
}
.hero-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
background-color: rgba(96, 165, 250, 0.1);
color: var(--color-blue-400);
border: 1px solid rgba(96, 165, 250, 0.2);
margin-bottom: 1.5rem;
}
.badge svg {
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
}
.hero-title {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-white);
letter-spacing: -0.025em;
margin-bottom: 1.5rem;
max-width: 56rem;
margin-left: auto;
margin-right: auto;
line-height: 1;
}
@media (min-width: 640px) {
.hero-title {
font-size: 3rem;
}
}
@media (min-width: 1024px) {
.hero-title {
font-size: 3.75rem;
margin-bottom: 2rem;
}
}
.hero-description {
font-size: 1.125rem;
color: var(--color-gray-300);
max-width: 42rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
}
@media (min-width: 640px) {
.hero-description {
font-size: 1.25rem;
}
}
@media (min-width: 1024px) {
.hero-description {
margin-bottom: 3rem;
}
}
.button-group {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
}
@media (min-width: 640px) {
.button-group {
flex-direction: row;
}
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 500;
color: var(--color-white);
transition: background-color 0.2s;
width: 100%;
text-decoration: none;
}
@media (min-width: 640px) {
.button {
width: auto;
}
}
.button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-gray-900), 0 0 0 4px var(--color-blue-500);
}
.button-primary {
background-color: var(--color-blue-600);
}
.button-primary:hover {
background-color: var(--color-blue-700);
}
.button-secondary {
background-color: var(--color-gray-800);
}
.button-secondary:hover {
background-color: var(--color-gray-700);
}
.button svg {
width: 1.25rem;
height: 1.25rem;
}
.button-primary svg {
margin-left: 0.5rem;
}
.button-secondary svg {
margin-right: 0.5rem;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in 0.6s ease-out forwards;
}
</style>
<section class="hero-section">
<div class="hero-background">
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-unsplash-1920x1080.webp"
alt="Marketing team collaborating on digital strategy"
width="1920"
height="1080"
loading="eager"
/>
</div>
<div class="hero-content">
<div class="hero-wrapper">
<div class="animate-fade-in">
<span class="badge" role="badge">
<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 1L7.545 4.13L11 4.635L8.5 7.07L9.09 10.51L6 8.885L2.91 10.51L3.5 7.07L1 4.635L4.455 4.13L6 1Z" fill="currentColor"/>
</svg>
New Marketing Platform
</span>
<h1 class="hero-title">
Transform Your Digital Marketing Strategy with AI-Powered Insights
</h1>
<p class="hero-description">
Leverage advanced analytics and artificial intelligence to optimize your campaigns, understand your audience better, and drive measurable results across all channels.
</p>
<div class="button-group">
<a
href="#get-started"
class="button button-primary"
aria-label="Get started with our platform"
>
Get Started Free
<svg viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
<a
href="#watch-demo"
class="button button-secondary"
aria-label="Watch platform demo video"
>
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
</svg>
Watch Demo
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Hero
@industry: Marketing
@style: Dark
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="relative bg-gray-900 overflow-hidden">
<!-- Marketing hero image by Unsplash -->
<div class="absolute inset-0 z-0">
<img
src="https://landinggo.com/assets/img/stock/hero/marketing-unsplash-1920x1080.webp"
alt="Marketing team collaborating on digital strategy"
class="w-full h-full object-cover opacity-20"
width="1920"
height="1080"
loading="eager"
/>
<div class="absolute inset-0 bg-gray-900/80"></div>
</div>
<div class="relative z-10 px-4 sm:px-6 lg:px-8 mx-auto max-w-7xl">
<div class="py-12 sm:py-16 lg:py-20 flex flex-col items-center text-center">
<div class="animate-fade-in">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-400/10 text-blue-400 ring-1 ring-blue-400/20 mb-6" role="badge">
<svg class="w-3 h-3 mr-1" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 1L7.545 4.13L11 4.635L8.5 7.07L9.09 10.51L6 8.885L2.91 10.51L3.5 7.07L1 4.635L4.455 4.13L6 1Z" fill="currentColor"/>
</svg>
New Marketing Platform
</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white tracking-tight mb-6 lg:mb-8 max-w-4xl mx-auto">
Transform Your Digital Marketing Strategy with AI-Powered Insights
</h1>
<p class="text-lg sm:text-xl text-gray-300 max-w-2xl mx-auto mb-8 lg:mb-12">
Leverage advanced analytics and artificial intelligence to optimize your campaigns, understand your audience better, and drive measurable results across all channels.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a
href="#get-started"
class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-colors"
aria-label="Get started with our platform"
>
Get Started Free
<svg class="w-5 h-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
</svg>
</a>
<a
href="#watch-demo"
class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 rounded-lg bg-gray-800 text-white font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-colors"
aria-label="Watch platform demo video"
>
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/>
</svg>
Watch Demo
</a>
</div>
</div>
</div>
</div>
</section>
<style>
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fade-in 0.6s ease-out forwards;
}
</style>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page