Component:

About-us Marketing Dark

Name: About-us Marketing Dark
Availability: InStock

Free

Tags: About us Page Section Content Marketing Dark

Colors:

Description:

This carefully crafted About us 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: About Us
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  --color-white: #ffffff;
  --color-gray-300: #d1d5db;
  --color-gray-900: #111827;
  --color-blue-400: #60a5fa;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Component Styles */
.dark-marketing-about {
  background-color: var(--color-gray-900);
  padding: 4rem 1rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.section-description {
  color: var(--color-gray-300);
  font-size: 1.125rem;
  max-width: 48rem;
  margin: 0 auto;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.image-container {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.team-image {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 24, 39, 0.5), transparent);
}

.content-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mission-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mission-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white);
}

.mission-text {
  color: var(--color-gray-300);
  line-height: 1.5;
}

.key-points {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.key-point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.check-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-blue-400);
}

.key-point-text {
  color: var(--color-gray-300);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-blue-600);
  color: var(--color-white);
  font-weight: 500;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.cta-button:hover {
  background-color: var(--color-blue-700);
}

.arrow-icon {
  margin-left: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .dark-marketing-about {
    padding: 6rem 1.5rem;
  }

  .section-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}
</style>

<section class="dark-marketing-about">
    <!-- Section Header -->
    <div class="section-header">
      <h2 class="section-title">Transforming Digital Marketing Excellence</h2>
      <p class="section-description">We're not just another marketing agency. We're your strategic partner in navigating the ever-evolving digital landscape with data-driven insights and creative excellence.</p>
    </div>

    <!-- Main Content Grid -->
    <div class="content-grid">
      <!-- Left Column - Image -->
      <div class="image-container">
        <img 
          src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
          alt="Our marketing team collaborating"
          class="team-image"
          width="1620"
          height="1080"
          loading="lazy"
        />
        <div class="image-overlay"></div>
      </div>

      <!-- Right Column - Content -->
      <div class="content-column">
        <div class="mission-section">
          <h3 class="mission-title">Our Mission</h3>
          <p class="mission-text">At DigitalForge Marketing, we believe in the power of strategic digital marketing to transform businesses. With over a decade of experience, we've helped hundreds of companies achieve their marketing goals through innovative solutions and measurable results.</p>
        </div>

        <!-- Key Points -->
        <div class="key-points">
          <div class="key-point">
            <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <p class="key-point-text">Data-driven strategies that deliver measurable ROI</p>
          </div>
          <div class="key-point">
            <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <p class="key-point-text">Customized solutions tailored to your industry</p>
          </div>
          <div class="key-point">
            <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <p class="key-point-text">Expert team with diverse industry experience</p>
          </div>
        </div>

        <!-- CTA Button -->
        <div>
          <a href="#contact" class="cta-button" role="button">
            Schedule a Consultation
            <svg class="arrow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
</section>


                <!--
@type: About Us
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-900 py-16 sm:py-24">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Transforming Digital Marketing Excellence</h2>
      <p class="text-gray-300 text-lg max-w-3xl mx-auto">We're not just another marketing agency. We're your strategic partner in navigating the ever-evolving digital landscape with data-driven insights and creative excellence.</p>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <!-- Left Column - Image -->
      <div class="relative rounded-2xl overflow-hidden">
        <!-- Team image by Pexels (Free License) -->
        <img 
          src="https://landinggo.com/assets/img/stock/team/team-pexels-1620x1080-1.webp"
          alt="Our marketing team collaborating"
          class="w-full h-auto rounded-2xl"
          width="1620"
          height="1080"
          loading="lazy"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
      </div>

      <!-- Right Column - Content -->
      <div class="space-y-8">
        <div class="space-y-6">
          <h3 class="text-2xl font-bold text-white">Our Mission</h3>
          <p class="text-gray-300">At DigitalForge Marketing, we believe in the power of strategic digital marketing to transform businesses. With over a decade of experience, we've helped hundreds of companies achieve their marketing goals through innovative solutions and measurable results.</p>
        </div>

        <!-- Key Points -->
        <div class="space-y-4">
          <div class="flex items-start space-x-4">
            <div class="flex-shrink-0 w-6 h-6 text-blue-400">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </div>
            <p class="text-gray-300">Data-driven strategies that deliver measurable ROI</p>
          </div>
          <div class="flex items-start space-x-4">
            <div class="flex-shrink-0 w-6 h-6 text-blue-400">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </div>
            <p class="text-gray-300">Customized solutions tailored to your industry</p>
          </div>
          <div class="flex items-start space-x-4">
            <div class="flex-shrink-0 w-6 h-6 text-blue-400">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
            </div>
            <p class="text-gray-300">Expert team with diverse industry experience</p>
          </div>
        </div>

        <!-- CTA Button -->
        <div class="mt-8">
          <a href="#contact" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200" role="button">
            Schedule a Consultation
            <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>

  </div>
</section>

About-us Marketing Dark

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions