Component:

Hero Marketing Dark

Name: Hero Marketing Dark
Availability: InStock

Free

Tags: Hero Page Section Content Sale Marketing Dark

Colors:

Description:

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>

Hero Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions