<!--
@type: Feature
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.marketing-features {
background-color: var(--color-gray-900);
padding: var(--spacing-16) var(--spacing-4);
}
.section-header {
max-width: 48rem;
margin: 0 auto var(--spacing-16);
text-align: center;
}
.section-label {
color: var(--color-blue-400);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.section-title {
margin-top: var(--spacing-3);
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-white);
}
.section-description {
margin-top: var(--spacing-4);
font-size: 1.125rem;
color: var(--color-gray-300);
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.feature-card {
position: relative;
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
border-radius: 0.75rem;
padding: var(--spacing-8);
transition: border-color 0.2s ease;
}
.feature-card:hover {
border-color: var(--color-blue-500);
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background-color: rgba(37, 99, 235, 0.1);
border-radius: 0.5rem;
margin-bottom: var(--spacing-6);
}
.feature-icon svg {
width: 1.5rem;
height: 1.5rem;
color: var(--color-blue-400);
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: var(--spacing-3);
}
.feature-description {
color: var(--color-gray-300);
}
.feature-link {
display: inline-flex;
align-items: center;
margin-top: var(--spacing-6);
font-size: 0.875rem;
font-weight: 500;
color: var(--color-blue-400);
text-decoration: none;
transition: color 0.2s ease;
}
.feature-link:hover {
color: var(--color-blue-300);
}
.feature-link svg {
margin-left: var(--spacing-2);
width: 1rem;
height: 1rem;
}
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-8);
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
border: 1px solid transparent;
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-gray-900), 0 0 0 4px var(--color-blue-500);
}
.cta-button svg {
margin-left: var(--spacing-2);
margin-right: -0.25rem;
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.marketing-features {
padding: var(--spacing-24) var(--spacing-6);
}
.section-title {
font-size: 2.25rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="marketing-features">
<!-- Section Header -->
<div class="section-header">
<span class="section-label">Marketing Features</span>
<h2 class="section-title">Transform Your Marketing Strategy</h2>
<p class="section-description">Leverage our advanced marketing tools to drive growth, engage customers, and maximize ROI with data-driven insights.</p>
</div>
<!-- Features Grid -->
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="feature-title">Analytics Dashboard</h3>
<p class="feature-description">Real-time analytics and insights to track campaign performance, audience engagement, and conversion metrics.</p>
<a href="#" class="feature-link">
Learn more
<svg 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>
<!-- Feature 2 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="feature-title">Audience Segmentation</h3>
<p class="feature-description">Advanced targeting capabilities to segment your audience based on behavior, demographics, and engagement patterns.</p>
<a href="#" class="feature-link">
Learn more
<svg 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>
<!-- Feature 3 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
</svg>
</div>
<h3 class="feature-title">Campaign Automation</h3>
<p class="feature-description">Streamline your marketing workflows with intelligent automation tools for email, social media, and content distribution.</p>
<a href="#" class="feature-link">
Learn more
<svg 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>
<!-- Feature 4 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</div>
<h3 class="feature-title">A/B Testing</h3>
<p class="feature-description">Test and optimize your marketing campaigns with our advanced A/B testing tools for maximum impact and ROI.</p>
<a href="#" class="feature-link">
Learn more
<svg 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>
<!-- Feature 5 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="feature-title">Brand Protection</h3>
<p class="feature-description">Safeguard your brand reputation with advanced monitoring tools and real-time alerts for brand mentions.</p>
<a href="#" class="feature-link">
Learn more
<svg 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>
<!-- Feature 6 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
</svg>
</div>
<h3 class="feature-title">ROI Tracking</h3>
<p class="feature-description">Monitor and analyze your marketing spend with comprehensive ROI tracking and budget optimization tools.</p>
<a href="#" class="feature-link">
Learn more
<svg 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>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" role="button" aria-label="Get started with our marketing tools">
Get Started
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</a>
</div>
</section>
<!--
@type: Feature
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-blue-400 text-sm font-semibold tracking-wide uppercase">Marketing Features</span>
<h2 class="mt-3 text-3xl font-bold tracking-tight text-white sm:text-4xl">Transform Your Marketing Strategy</h2>
<p class="mt-4 text-lg text-gray-300">Leverage our advanced marketing tools to drive growth, engage customers, and maximize ROI with data-driven insights.</p>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Analytics Dashboard</h3>
<p class="text-gray-300">Real-time analytics and insights to track campaign performance, audience engagement, and conversion metrics.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" 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>
<!-- Feature 2 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Audience Segmentation</h3>
<p class="text-gray-300">Advanced targeting capabilities to segment your audience based on behavior, demographics, and engagement patterns.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" 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>
<!-- Feature 3 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Campaign Automation</h3>
<p class="text-gray-300">Streamline your marketing workflows with intelligent automation tools for email, social media, and content distribution.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" 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>
<!-- Feature 4 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">A/B Testing</h3>
<p class="text-gray-300">Test and optimize your marketing campaigns with our advanced A/B testing tools for maximum impact and ROI.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" 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>
<!-- Feature 5 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Brand Protection</h3>
<p class="text-gray-300">Safeguard your brand reputation with advanced monitoring tools and real-time alerts for brand mentions.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" 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>
<!-- Feature 6 -->
<div class="relative bg-gray-800 border border-gray-700 rounded-xl p-8 hover:border-blue-500 transition-colors">
<div class="flex items-center justify-center w-12 h-12 bg-blue-600/10 rounded-lg mb-6">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-white mb-3">ROI Tracking</h3>
<p class="text-gray-300">Monitor and analyze your marketing spend with comprehensive ROI tracking and budget optimization tools.</p>
<a href="#" class="mt-6 inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300">
Learn more
<svg class="ml-2 w-4 h-4" 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>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-8 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-gray-900 transition-colors" role="button" aria-label="Get started with our marketing tools">
Get Started
<svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</a>
</div>
</div>
</section>
