<!--
@type: Problem/Solution
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-red-500: #ef4444;
--color-green-400: #34d399;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-800: #1e40af;
/* Spacing */
--spacing-1: 0.25rem;
--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-20: 5rem;
/* Font Sizes */
--text-base: 1rem;
--text-lg: 1.125rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* Max Widths */
--max-w-lg: 32rem;
--max-w-3xl: 48rem;
--max-w-7xl: 80rem;
}
/* Base Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.problem-solution-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
}
.container {
max-width: var(--max-w-7xl);
margin: 0 auto;
}
.section-header {
text-align: center;
max-width: var(--max-w-3xl);
margin: 0 auto var(--spacing-16);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: var(--text-lg);
color: var(--color-gray-600);
}
.problem-solution-grid {
display: grid;
gap: var(--spacing-12);
align-items: center;
}
.problem-column {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.column-title {
font-size: var(--text-2xl);
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: var(--spacing-6);
}
.problem-cards {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
.problem-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
padding: var(--spacing-6);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s ease;
}
.problem-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-content {
display: flex;
align-items: flex-start;
}
.icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
}
.icon-red {
color: var(--color-red-500);
}
.icon-green {
color: var(--color-green-400);
}
.card-text {
margin-left: var(--spacing-4);
}
.card-title {
font-size: var(--text-lg);
font-weight: 500;
color: var(--color-gray-900);
}
.card-description {
margin-top: var(--spacing-2);
color: var(--color-gray-600);
}
.solution-overlay {
background: linear-gradient(to right, rgba(37, 99, 235, 0.9), rgba(30, 64, 175, 0.9));
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.solution-content {
padding: var(--spacing-8);
color: var(--color-white);
max-width: var(--max-w-lg);
}
.solution-content .column-title {
color: var(--color-white);
}
.solution-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.solution-item {
display: flex;
align-items: flex-start;
}
.solution-text {
margin-left: var(--spacing-3);
}
.cta-button {
display: inline-flex;
align-items: center;
margin-top: var(--spacing-8);
padding: var(--spacing-3) var(--spacing-6);
border: none;
border-radius: 0.375rem;
font-size: var(--text-base);
font-weight: 500;
color: var(--color-blue-700);
background-color: var(--color-white);
text-decoration: none;
transition: background-color 0.2s ease;
}
.cta-button:hover {
background-color: #f9fafb;
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
.cta-icon {
margin-left: var(--spacing-2);
margin-right: calc(var(--spacing-1) * -1);
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.problem-solution-section {
padding: var(--spacing-20) var(--spacing-6);
}
.section-title {
font-size: var(--text-4xl);
}
}
@media (min-width: 768px) {
.problem-solution-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
}
</style>
<!-- Problem/Solution Section -->
<section class="problem-solution-section" aria-labelledby="problem-solution-title">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 id="problem-solution-title" class="section-title">
Transform Your Business Operations
</h2>
<p class="section-description">
Discover how our SaaS platform addresses common business challenges and delivers measurable results.
</p>
</div>
<!-- Problem/Solution Grid -->
<div class="problem-solution-grid">
<!-- Problem Column -->
<div class="problem-column">
<h3 class="column-title">Common Challenges</h3>
<!-- Problem Cards -->
<div class="problem-cards">
<div class="problem-card">
<div class="card-content">
<div class="icon">
<svg class="icon-red" 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-text">
<h4 class="card-title">Manual Data Processing</h4>
<p class="card-description">Teams waste 60% of their time on repetitive data entry and manual reporting tasks.</p>
</div>
</div>
</div>
<div class="problem-card">
<div class="card-content">
<div class="icon">
<svg class="icon-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="card-text">
<h4 class="card-title">Scattered Information</h4>
<p class="card-description">Critical business data spread across multiple systems leads to inefficient decision-making.</p>
</div>
</div>
</div>
<div class="problem-card">
<div class="card-content">
<div class="icon">
<svg class="icon-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.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-text">
<h4 class="card-title">Security Concerns</h4>
<p class="card-description">Lack of standardized security protocols puts sensitive business data at risk.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Solution Overlay -->
<div class="solution-overlay">
<div class="solution-content">
<h3 class="column-title">Our Solution</h3>
<ul class="solution-list">
<li class="solution-item">
<svg class="icon icon-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="solution-text">Automated data processing reduces manual work by 85%</span>
</li>
<li class="solution-item">
<svg class="icon icon-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="solution-text">Centralized dashboard for all business metrics</span>
</li>
<li class="solution-item">
<svg class="icon icon-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="solution-text">Enterprise-grade security with SOC 2 compliance</span>
</li>
</ul>
<!-- CTA Button -->
<a
href="#"
class="cta-button"
aria-label="Schedule a demo of our solution"
>
Schedule Demo
<svg class="cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<!-- Problem/Solution Section -->
<section class="bg-white py-12 sm:py-20" 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 max-w-3xl mx-auto mb-16">
<h2 id="problem-solution-title" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
Transform Your Business Operations
</h2>
<p class="text-lg text-gray-600">
Discover how our SaaS platform addresses common business challenges and delivers measurable results.
</p>
</div>
<!-- Problem/Solution Grid -->
<div class="grid md:grid-cols-2 gap-12 items-center">
<!-- Problem Column -->
<div class="space-y-8">
<h3 class="text-2xl font-semibold text-gray-900 mb-6">Common Challenges</h3>
<!-- Problem Cards -->
<div class="space-y-6">
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-start">
<div class="flex-shrink-0">
<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">
<h4 class="text-lg font-medium text-gray-900">Manual Data Processing</h4>
<p class="mt-2 text-gray-600">Teams waste 60% of their time on repetitive data entry and manual reporting tasks.</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-start">
<div class="flex-shrink-0">
<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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Scattered Information</h4>
<p class="mt-2 text-gray-600">Critical business data spread across multiple systems leads to inefficient decision-making.</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-start">
<div class="flex-shrink-0">
<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="M20.618 5.984A11.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">
<h4 class="text-lg font-medium text-gray-900">Security Concerns</h4>
<p class="mt-2 text-gray-600">Lack of standardized security protocols puts sensitive business data at risk.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Solution Overlay -->
<div class="inset-0 bg-gradient-to-r from-blue-600/90 to-blue-800/90 rounded-lg flex items-center justify-center">
<div class="p-8 text-white max-w-lg">
<h3 class="text-2xl font-semibold mb-6">Our Solution</h3>
<ul class="space-y-4">
<li class="flex items-start">
<svg class="w-6 h-6 text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="ml-3">Automated data processing reduces manual work by 85%</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="ml-3">Centralized dashboard for all business metrics</span>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-green-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="ml-3">Enterprise-grade security with SOC 2 compliance</span>
</li>
</ul>
<!-- CTA Button -->
<a
href="#"
class="mt-8 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
aria-label="Schedule a demo of our solution"
>
Schedule Demo
<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="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
