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