<!--
@type: Problem/Solution
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--primary-color: #4f46e5; /* indigo-600 */
--primary-color-dark: #4338ca; /* indigo-700 */
--primary-color-light: #e0e7ff; /* indigo-100 */
--secondary-color: #ef4444; /* red-500 */
--secondary-color-bg: #fef2f2; /* red-50 */
--secondary-color-border: #fee2e2;/* red-100 */
--secondary-color-dark: #b91c1c; /* red-700 */
--text-main: #0f172a; /* slate-900 */
--text-secondary: #334155; /* slate-700 */
--text-muted: #64748b; /* slate-600 */
--bg-main: #f8fafc; /* slate-50 */
--border-radius-xl: 0.75rem;
--shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.08);
--shadow: 0 1px 2px 0 rgba(15,23,42,0.05);
--font-main: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--transition: 0.2s cubic-bezier(0.4,0,0.2,1);
--ring: 0 0 0 2px var(--primary-color-light);
--max-width-7xl: 80rem;
--max-width-5xl: 64rem;
--max-width-3xl: 48rem;
--gap-lg: 2.5rem;
--gap: 2.5rem;
--space-y-2: 0.5rem;
--p-8: 2rem;
--p-4: 1rem;
--px-4: 1rem;
--px-6: 1.5rem;
--px-8: 2rem;
--py-3: 0.75rem;
--py-12: 3rem;
--mb-4: 1rem;
--mb-6: 1.5rem;
--mb-12: 3rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-main);
}
.problem-solution-section {
background: var(--bg-main);
color: var(--text-main);
padding: var(--py-12) var(--px-4);
}
.problem-solution-container {
max-width: var(--max-width-7xl);
margin: 0 auto;
padding-left: var(--px-4);
padding-right: var(--px-4);
}
@media (min-width: 640px) {
.problem-solution-container {
padding-left: 1.5rem; /* sm:px-6 */
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.problem-solution-container {
padding-left: 2rem; /* lg:px-8 */
padding-right: 2rem;
}
}
.problem-solution-header {
text-align: center;
margin-bottom: var(--mb-12);
}
.problem-solution-title {
font-size: 1.875rem; /* text-3xl */
font-weight: 700;
color: var(--text-main);
margin-bottom: var(--mb-4);
line-height: 1.2;
}
@media (min-width: 640px) {
.problem-solution-title {
font-size: 2.25rem; /* sm:text-4xl */
}
}
.problem-solution-desc {
color: var(--text-muted);
font-size: 1.125rem; /* text-lg */
max-width: var(--max-width-3xl);
margin-left: auto;
margin-right: auto;
}
.problem-solution-cards {
max-width: var(--max-width-5xl);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--gap);
position: relative;
align-items: stretch;
}
@media (min-width: 1024px) {
.problem-solution-cards {
flex-direction: row;
gap: 0;
}
}
.problem-card,
.solution-card {
flex: 1 1 0%;
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
@media (min-width: 1024px) {
.problem-card {
padding-right: 2rem; /* lg:pr-8 */
}
.solution-card {
padding-left: 2rem; /* lg:pl-8 */
margin-top: 0;
}
}
.solution-card {
margin-top: 2.5rem; /* mt-10 */
}
@media (min-width: 1024px) {
.solution-card {
margin-top: 0;
}
}
/* Problem Card Styles */
.problem-card-inner {
background: var(--secondary-color-bg);
border-radius: var(--border-radius-xl);
padding: var(--p-8);
box-shadow: var(--shadow-lg);
border: 1px solid var(--secondary-color-border);
height: 100%;
display: flex;
flex-direction: column;
outline: none;
transition: box-shadow var(--transition), border-color var(--transition);
}
.problem-card-inner:focus {
box-shadow: 0 0 0 2px var(--secondary-color);
border-color: var(--secondary-color);
}
.problem-card-header {
display: flex;
align-items: center;
margin-bottom: var(--mb-4);
}
.problem-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.75rem;
}
.problem-card-title {
font-size: 1.5rem; /* text-2xl */
font-weight: 700;
color: var(--secondary-color-dark);
}
.problem-card-text {
color: var(--secondary-color-dark);
font-size: 1rem;
margin-bottom: var(--mb-6);
}
.problem-card-list {
list-style: disc;
padding-left: 1.5rem;
color: var(--secondary-color-dark);
font-size: 0.875rem;
display: flex;
flex-direction: column;
gap: var(--space-y-2);
}
/* Solution Card Styles */
.solution-card-inner {
background: #fff;
border-radius: var(--border-radius-xl);
padding: var(--p-8);
box-shadow: var(--shadow-lg);
border: 2px solid var(--primary-color-light);
display: flex;
flex-direction: column;
height: 100%;
outline: none;
transition: box-shadow var(--transition), border-color var(--transition);
}
.solution-card-header {
display: flex;
align-items: center;
margin-bottom: var(--mb-4);
}
.solution-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin-right: 0.75rem;
}
.solution-card-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color-dark);
}
.solution-card-text {
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: var(--mb-6);
}
.solution-card-list {
list-style: disc;
padding-left: 1.5rem;
color: var(--text-muted);
font-size: 0.875rem;
display: flex;
flex-direction: column;
gap: var(--space-y-2);
margin-bottom: var(--mb-6);
}
.solution-card-btn {
margin-top: auto;
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: var(--py-3) var(--px-6);
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
box-shadow: var(--shadow);
text-decoration: none;
transition: background var(--transition), box-shadow var(--transition);
outline: none;
border: none;
cursor: pointer;
position: relative;
}
.solution-card-btn:hover,
.solution-card-btn:focus {
background: var(--primary-color-dark);
}
.solution-card-btn:focus {
box-shadow: 0 0 0 2px var(--primary-color-light), 0 1px 2px 0 rgba(15,23,42,0.05);
}
/* Accessibility: focus ring for keyboard navigation */
.problem-card-inner:focus-visible,
.solution-card-inner:focus-visible,
.solution-card-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--primary-color-light), 0 1px 2px 0 rgba(15,23,42,0.05);
}
/* Responsive font scaling for button */
@media (min-width: 640px) {
.solution-card-btn {
font-size: 1.125rem;
}
}
</style>
<section class="problem-solution-section">
<div class="problem-solution-container">
<div class="problem-solution-header">
<h2 class="problem-solution-title">Transform Your Business Challenges into Opportunities</h2>
<p class="problem-solution-desc">Discover how our data-driven solutions address common business pain points and help businesses achieve remarkable growth.</p>
</div>
</div>
<div class="problem-solution-cards">
<!-- Problem Card -->
<div class="problem-card">
<div class="problem-card-inner" aria-label="Business Problem" tabindex="0">
<div class="problem-card-header">
<span class="problem-card-icon" aria-hidden="true">
<!-- Exclamation icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--secondary-color)" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="9" x2="12" y2="11" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="12" y1="15" x2="12.01" y2="15" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<h3 class="problem-card-title">The Challenge Modern Businesses Face</h3>
</div>
<p class="problem-card-text">In today’s fast-paced market, businesses struggle to keep up with digital transformation, customer expectations, and operational efficiency. Manual processes, fragmented tools, and lack of real-time insights often lead to missed opportunities and slow growth.</p>
<ul class="problem-card-list" aria-label="Key Problems">
<li>Disconnected workflows and siloed data</li>
<li>Time-consuming manual reporting</li>
<li>Difficulty scaling operations efficiently</li>
</ul>
</div>
</div>
<!-- Solution Card -->
<div class="solution-card">
<div class="solution-card-inner" aria-label="Business Solution" tabindex="0">
<div class="solution-card-header">
<span class="solution-card-icon" aria-hidden="true">
<!-- Lightbulb icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary-color)" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3a7 7 0 0 1 7 7c0 2.386-1.34 4.434-3.25 5.5A2.5 2.5 0 0 1 13 18.5V19a1 1 0 0 1-2 0v-.5a2.5 2.5 0 0 1-2.75-3.5C6.34 14.434 5 12.386 5 10a7 7 0 0 1 7-7Z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 21h6"/>
</svg>
</span>
<h3 class="solution-card-title">Our Solution: Streamlined Business Management</h3>
</div>
<p class="solution-card-text">Empower your team with an all-in-one platform designed for modern business needs. Automate workflows, centralize data, and gain actionable insights—so you can focus on growth, not admin.</p>
<ul class="solution-card-list" aria-label="Solution Benefits">
<li>Unified dashboard for all business operations</li>
<li>Automated analytics and reporting</li>
<li>Seamless integrations with your favorite tools</li>
</ul>
<a href="#get-started" class="solution-card-btn" role="button" aria-label="Get Started">Get Started</a>
</div>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 font-inter text-slate-900 py-12 px-4 sm:px-8 lg:px-0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">Transform Your Business Challenges into Opportunities</h2>
<p class="text-slate-600 text-lg max-w-3xl mx-auto">Discover how our data-driven solutions address common business pain points and help businesses achieve remarkable growth.</p>
</div>
</div>
<div class="max-w-5xl mx-auto flex flex-col lg:flex-row items-stretch gap-10 lg:gap-0 relative">
<!-- Problem Card -->
<div class="flex-1 w-full lg:pr-8">
<div class="bg-red-50 rounded-xl p-8 shadow-lg border border-red-100 h-full flex flex-col" aria-label="Business Problem" tabindex="0">
<div class="flex items-center mb-4">
<!-- Exclamation icon -->
<span class="inline-flex items-center justify-center w-10 h-10 mr-3" aria-hidden="true">
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M21 12A9 9 0 1 1 3 12a9 9 0 0 1 18 0Z"/></svg>
</span>
<h3 class="text-2xl font-bold text-red-700">The Challenge Modern Businesses Face</h3>
</div>
<p class="text-base mb-6 text-red-700">In today’s fast-paced market, businesses struggle to keep up with digital transformation, customer expectations, and operational efficiency. Manual processes, fragmented tools, and lack of real-time insights often lead to missed opportunities and slow growth.</p>
<ul class="list-disc pl-6 text-sm space-y-2 text-red-700" aria-label="Key Problems">
<li>Disconnected workflows and siloed data</li>
<li>Time-consuming manual reporting</li>
<li>Difficulty scaling operations efficiently</li>
</ul>
</div>
</div>
<!-- Solution Card -->
<div class="flex-1 w-full lg:pl-8 mt-10 lg:mt-0">
<div class="bg-white rounded-xl p-8 shadow-lg border-2 border-indigo-100 flex flex-col h-full" aria-label="Business Solution" tabindex="0">
<div class="flex items-center mb-4">
<!-- Lightbulb icon -->
<span class="inline-flex items-center justify-center w-10 h-10 mr-3" aria-hidden="true">
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3a7 7 0 0 1 7 7c0 2.386-1.34 4.434-3.25 5.5A2.5 2.5 0 0 1 13 18.5V19a1 1 0 0 1-2 0v-.5a2.5 2.5 0 0 1-2.75-3.5C6.34 14.434 5 12.386 5 10a7 7 0 0 1 7-7Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 21h6"/></svg>
</span>
<h3 class="text-2xl font-bold text-indigo-700">Our Solution: Streamlined Business Management</h3>
</div>
<p class="text-slate-700 text-base mb-6">Empower your team with an all-in-one platform designed for modern business needs. Automate workflows, centralize data, and gain actionable insights—so you can focus on growth, not admin.</p>
<ul class="list-disc pl-6 text-slate-600 text-sm space-y-2 mb-6" aria-label="Solution Benefits">
<li>Unified dashboard for all business operations</li>
<li>Automated analytics and reporting</li>
<li>Seamless integrations with your favorite tools</li>
</ul>
<a href="#get-started" class="mt-auto inline-block bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold text-base shadow hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="button" aria-label="Get Started">Get Started</a>
</div>
</div>
</div>
</section>
