<!--
@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>
