<!--
@type: Problem/Solution
@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-400: #60a5fa;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-red-500: #ef4444;
/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Border Radius */
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
/* Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Component Styles */
.problem-solution {
background-color: var(--color-gray-900);
padding: var(--spacing-16) var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.section-title {
color: var(--color-white);
font-size: 1.875rem;
font-weight: 700;
margin-bottom: var(--spacing-4);
}
.section-description {
color: var(--color-gray-300);
font-size: 1.125rem;
max-width: 48rem;
margin: 0 auto;
}
.problems-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.problem-card {
background-color: var(--color-gray-800);
border: 1px solid var(--color-gray-700);
border-radius: var(--radius-xl);
padding: var(--spacing-6);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-6);
}
.icon-wrapper {
flex-shrink: 0;
width: 3rem;
height: 3rem;
background-color: rgba(239, 68, 68, 0.1);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
}
.icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-red-500);
}
.card-content {
margin-left: var(--spacing-4);
}
.card-title {
color: var(--color-white);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.card-description {
color: var(--color-gray-300);
line-height: 1.5;
}
.solution-box {
background-color: rgba(17, 24, 39, 0.5);
border-radius: var(--radius-lg);
padding: var(--spacing-4);
border: 1px solid var(--color-gray-700);
}
.solution-title {
color: var(--color-blue-400);
font-weight: 500;
margin-bottom: 0.5rem;
}
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-title {
color: var(--color-white);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-6);
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem var(--spacing-6);
border-radius: var(--radius-lg);
font-weight: 500;
transition: background-color 0.2s;
text-decoration: none;
}
.btn-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-blue-700);
}
.btn-secondary {
background-color: var(--color-gray-800);
color: var(--color-white);
border: 1px solid var(--color-gray-700);
}
.btn-secondary:hover {
background-color: var(--color-gray-700);
}
.btn svg {
margin-left: 0.5rem;
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Styles */
@media (min-width: 640px) {
.problem-solution {
padding: 6rem var(--spacing-6);
}
.section-title {
font-size: 2.25rem;
}
.problem-card {
padding: var(--spacing-8);
}
.cta-buttons {
flex-direction: row;
}
}
@media (min-width: 768px) {
.problems-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.problems-grid {
gap: var(--spacing-12);
}
}
</style>
<section class="problem-solution" aria-labelledby="problem-solution-title">
<!-- Section Header -->
<div class="section-header">
<h2 id="problem-solution-title" class="section-title">
Transform Your Marketing Challenges into Opportunities
</h2>
<p class="section-description">
Discover how our data-driven solutions address common marketing pain points and help businesses achieve remarkable growth.
</p>
</div>
<!-- Problems & Solutions Grid -->
<div class="problems-grid">
<!-- Problem Card 1 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Inconsistent Lead Generation</h3>
<p class="card-description">Marketing teams struggle with unpredictable lead flow and poor quality leads, resulting in wasted resources and missed opportunities.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">AI-powered lead scoring and qualification system that ensures consistent, high-quality lead generation through multi-channel optimization.</p>
</div>
</div>
<!-- Problem Card 2 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Poor ROI Tracking</h3>
<p class="card-description">Businesses struggle to accurately measure and attribute marketing ROI across multiple campaigns and channels.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">Advanced analytics dashboard with multi-touch attribution modeling and real-time ROI tracking across all marketing channels.</p>
</div>
</div>
<!-- Problem Card 3 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Content Engagement</h3>
<p class="card-description">Marketing teams struggle to create engaging content that resonates with their target audience and drives conversions.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">AI-driven content optimization platform that analyzes audience behavior and provides actionable insights for content creation.</p>
</div>
</div>
<!-- Problem Card 4 -->
<div class="problem-card">
<div class="card-header">
<div class="icon-wrapper">
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="card-content">
<h3 class="card-title">Market Competition</h3>
<p class="card-description">Companies find it difficult to stand out in crowded markets and effectively differentiate their offerings.</p>
</div>
</div>
<div class="solution-box">
<h4 class="solution-title">Our Solution:</h4>
<p class="card-description">Competitive intelligence platform that monitors market trends and provides strategic recommendations for differentiation.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<h3 class="cta-title">Ready to Transform Your Marketing Strategy?</h3>
<div class="cta-buttons">
<a href="#" class="btn btn-primary" aria-label="Schedule a demo">
Schedule a Demo
<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"/>
</svg>
</a>
<a href="#" class="btn btn-secondary" aria-label="Learn more about our solutions">
Learn More
</a>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: Marketing
@style: Dark
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-900 py-16 sm:py-24" aria-labelledby="problem-solution-title">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16">
<h2 id="problem-solution-title" class="text-3xl sm:text-4xl font-bold text-white mb-4">
Transform Your Marketing Challenges into Opportunities
</h2>
<p class="text-gray-300 text-lg max-w-3xl mx-auto">
Discover how our data-driven solutions address common marketing pain points and help businesses achieve remarkable growth.
</p>
</div>
<!-- Problems & Solutions Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
<!-- Problem Card 1 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Inconsistent Lead Generation</h3>
<p class="text-gray-300">Marketing teams struggle with unpredictable lead flow and poor quality leads, resulting in wasted resources and missed opportunities.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">AI-powered lead scoring and qualification system that ensures consistent, high-quality lead generation through multi-channel optimization.</p>
</div>
</div>
<!-- Problem Card 2 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Poor ROI Tracking</h3>
<p class="text-gray-300">Businesses struggle to accurately measure and attribute marketing ROI across multiple campaigns and channels.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">Advanced analytics dashboard with multi-touch attribution modeling and real-time ROI tracking across all marketing channels.</p>
</div>
</div>
<!-- Problem Card 3 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Content Engagement</h3>
<p class="text-gray-300">Marketing teams struggle to create engaging content that resonates with their target audience and drives conversions.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">AI-driven content optimization platform that analyzes audience behavior and provides actionable insights for content creation.</p>
</div>
</div>
<!-- Problem Card 4 -->
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 sm:p-8 shadow-lg">
<div class="flex items-start mb-6">
<div class="flex-shrink-0 w-12 h-12 bg-red-500/10 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/>
</svg>
</div>
<div class="ml-4">
<h3 class="text-xl font-semibold text-white mb-2">Market Competition</h3>
<p class="text-gray-300">Companies find it difficult to stand out in crowded markets and effectively differentiate their offerings.</p>
</div>
</div>
<div class="bg-gray-900/50 rounded-lg p-4 border border-gray-700">
<h4 class="text-blue-400 font-medium mb-2">Our Solution:</h4>
<p class="text-gray-300">Competitive intelligence platform that monitors market trends and provides strategic recommendations for differentiation.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold text-white mb-6">Ready to Transform Your Marketing Strategy?</h3>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors duration-200" aria-label="Schedule a demo">
Schedule a Demo
<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"/>
</svg>
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-gray-800 text-white font-medium hover:bg-gray-700 transition-colors duration-200 border border-gray-700" aria-label="Learn more about our solutions">
Learn More
</a>
</div>
</div>
</div>
</section>
