<!--
@type: Steps
@industry: Marketing
@style: Dark
@category: Page Section, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--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 */
.steps-section {
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;
letter-spacing: -0.025em;
color: var(--color-white);
}
.section-description {
margin-top: 1.5rem;
font-size: 1.125rem;
line-height: 2rem;
color: var(--color-gray-300);
}
.steps-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.step-card {
background-color: var(--color-gray-800);
border-radius: 0.75rem;
padding: 1.5rem;
border: 1px solid var(--color-gray-700);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
height: 100%;
}
.step-number {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.step-number span {
background-color: var(--color-blue-600);
color: var(--color-white);
font-size: 1.25rem;
font-weight: 700;
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
}
.step-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 0.75rem;
}
.step-description {
color: var(--color-gray-300);
line-height: 1.5;
}
.cta-section {
margin-top: 4rem;
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
border-radius: 0.5rem;
border: none;
text-decoration: none;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button svg {
margin-left: 0.5rem;
margin-right: -0.25rem;
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.steps-section {
padding: 4rem 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.steps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.steps-section {
padding: 4rem 2rem;
}
.steps-grid {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
<section class="steps-section" aria-labelledby="steps-heading">
<!-- Section Header -->
<div class="section-header">
<h2 id="steps-heading" class="section-title">
Transform Your Marketing Strategy
</h2>
<p class="section-description">
Follow our proven 4-step process to revolutionize your digital marketing approach and achieve measurable results.
</p>
</div>
<!-- Steps Grid -->
<div class="steps-grid">
<!-- Step 1 -->
<div class="step-card">
<div class="step-number">
<span aria-hidden="true">1</span>
</div>
<h3 class="step-title">Research & Analysis</h3>
<p class="step-description">Deep dive into your market, competitors, and target audience to develop data-driven insights.</p>
</div>
<!-- Step 2 -->
<div class="step-card">
<div class="step-number">
<span aria-hidden="true">2</span>
</div>
<h3 class="step-title">Strategy Development</h3>
<p class="step-description">Create a comprehensive marketing plan aligned with your business objectives and target metrics.</p>
</div>
<!-- Step 3 -->
<div class="step-card">
<div class="step-number">
<span aria-hidden="true">3</span>
</div>
<h3 class="step-title">Implementation</h3>
<p class="step-description">Execute campaigns across multiple channels with our expert team and advanced tools.</p>
</div>
<!-- Step 4 -->
<div class="step-card">
<div class="step-number">
<span aria-hidden="true">4</span>
</div>
<h3 class="step-title">Optimization</h3>
<p class="step-description">Continuously monitor performance and optimize strategies based on real-time analytics.</p>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" aria-label="Start your marketing transformation">
Start Your Journey
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</section>
<!--
@type: Steps
@industry: Marketing
@style: Dark
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 px-4 sm:px-6 lg:px-8" aria-labelledby="steps-heading">
<div class="max-w-7xl mx-auto">
<!-- Section Header -->
<div class="text-center mb-16">
<h2 id="steps-heading" class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Transform Your Marketing Strategy
</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">
Follow our proven 4-step process to revolutionize your digital marketing approach and achieve measurable results.
</p>
</div>
<!-- Steps Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="relative">
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
<div class="flex items-center mb-4">
<span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">1</span>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Research & Analysis</h3>
<p class="text-gray-300">Deep dive into your market, competitors, and target audience to develop data-driven insights.</p>
</div>
</div>
<!-- Step 2 -->
<div class="relative">
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
<div class="flex items-center mb-4">
<span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">2</span>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Strategy Development</h3>
<p class="text-gray-300">Create a comprehensive marketing plan aligned with your business objectives and target metrics.</p>
</div>
</div>
<!-- Step 3 -->
<div class="relative">
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
<div class="flex items-center mb-4">
<span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">3</span>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Implementation</h3>
<p class="text-gray-300">Execute campaigns across multiple channels with our expert team and advanced tools.</p>
</div>
</div>
<!-- Step 4 -->
<div class="relative">
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 shadow-lg h-full">
<div class="flex items-center mb-4">
<span class="bg-blue-600 text-white text-xl font-bold rounded-full w-10 h-10 flex items-center justify-center" aria-hidden="true">4</span>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Optimization</h3>
<p class="text-gray-300">Continuously monitor performance and optimize strategies based on real-time analytics.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-300" aria-label="Start your marketing transformation">
Start Your Journey
<svg class="ml-2 -mr-1 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
