<!--
@type: Problem/Solution
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-red-50: #fef2f2;
--color-red-100: #fee2e2;
--color-red-600: #dc2626;
--color-green-100: #dcfce7;
--color-green-600: #16a34a;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
* {
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";
}
.problem-solution {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.problem-solution {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.problem-solution-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 4rem;
}
@media (min-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all 0.3s;
}
.card:hover {
box-shadow: var(--shadow-md);
}
.problem {
background-color: var(--color-red-50);
padding: 1.5rem;
}
.problem-header {
display: flex;
align-items: center;
}
.problem-icon-wrapper {
flex-shrink: 0;
background-color: var(--color-red-100);
border-radius: 9999px;
padding: 0.75rem;
line-height: 1;
}
.problem-icon-wrapper.success {
background-color: var(--color-green-100);
}
.problem-icon {
width: 1.5rem;
height: 1.5rem;
}
.problem-icon.red {
color: var(--color-red-600);
}
.problem-icon.success {
color: var(--color-green-600);
}
.card-title {
margin-left: 1rem;
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.card-description {
margin-top: 1rem;
color: var(--color-gray-600);
}
.solution {
border-top: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: 1.5rem;
}
.cta {
margin-top: 4rem;
text-align: center;
}
.cta-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.cta-description {
font-size: 1.125rem;
color: var(--color-gray-600);
margin-bottom: 2rem;
max-width: 42rem;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
}
}
.button-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-indigo-600);
box-shadow: var(--shadow-sm);
transition: background-color 0.2s;
text-decoration: none;
}
.button-primary:hover {
background-color: var(--color-indigo-700);
}
.button-primary:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.button-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
background-color: var(--color-white);
box-shadow: var(--shadow-sm);
transition: background-color 0.2s;
text-decoration: none;
}
.button-secondary:hover {
background-color: var(--color-gray-50);
}
.button-secondary:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-indigo-500);
}
.trial-note {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--color-gray-500);
}
</style>
<section class="problem-solution" aria-labelledby="problem-solution-title">
<div class="container">
<!-- Section Header -->
<div class="problem-solution-header">
<span class="header-badge">Small Business Solutions</span>
<h2 id="problem-solution-title" class="header-title">
Streamline Your Business Operations
</h2>
<p class="header-description">
See how our software solves the most common challenges small business owners face today.
</p>
</div>
<!-- Problem/Solution Cards -->
<div class="cards-grid">
<!-- Card 1 -->
<div class="card">
<div class="problem">
<div class="problem-header">
<div class="problem-icon-wrapper">
<svg class="problem-icon red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<h3 class="card-title">Time-Consuming Administration</h3>
</div>
<p class="card-description">
Small business owners spend up to 20 hours per week on administrative tasks instead of focusing on growth.
</p>
</div>
<div class="solution">
<div class="problem-header">
<div class="problem-icon-wrapper success">
<svg class="problem-icon success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="card-title">Automated Workflows</h3>
</div>
<p class="card-description">
Our automation tools reduce administrative work by 75%, giving you back 15+ hours every week.
</p>
</div>
</div>
<!-- Card 2 -->
<div class="card">
<div class="problem">
<div class="problem-header">
<div class="problem-icon-wrapper">
<svg class="problem-icon red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="card-title">Disconnected Systems</h3>
</div>
<p class="card-description">
Using multiple tools for different business functions creates data silos and increases errors.
</p>
</div>
<div class="solution">
<div class="problem-header">
<div class="problem-icon-wrapper success">
<svg class="problem-icon success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="card-title">Unified Platform</h3>
</div>
<p class="card-description">
One integrated system for all your business needs, reducing errors by 90% and improving data accuracy.
</p>
</div>
</div>
<!-- Card 3 -->
<div class="card">
<div class="problem">
<div class="problem-header">
<div class="problem-icon-wrapper">
<svg class="problem-icon red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="card-title">Unpredictable Costs</h3>
</div>
<p class="card-description">
Enterprise software is often too expensive and complex for small businesses to implement effectively.
</p>
</div>
<div class="solution">
<div class="problem-header">
<div class="problem-icon-wrapper success">
<svg class="problem-icon success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="card-title">Affordable Pricing</h3>
</div>
<p class="card-description">
Transparent, scalable pricing designed specifically for small businesses with no hidden fees.
</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta">
<h3 class="cta-title">Ready to transform your business?</h3>
<p class="cta-description">
Join thousands of small businesses that have streamlined their operations with our software.
</p>
<div class="cta-buttons">
<a href="#demo" class="button-primary" role="button" aria-label="Schedule a demo">
Schedule a demo
</a>
<a href="#trial" class="button-secondary" role="button" aria-label="Start free trial">
Start free trial
</a>
</div>
<p class="trial-note">No credit card required. 14-day free trial.</p>
</div>
</div>
</section>
<!--
@type: Problem/Solution
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white 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 max-w-3xl mx-auto mb-16">
<span class="text-lg font-semibold text-indigo-600">Small Business Solutions</span>
<h2 id="problem-solution-title" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Streamline Your Business Operations
</h2>
<p class="mt-4 text-lg text-gray-600">
See how our software solves the most common challenges small business owners face today.
</p>
</div>
<!-- Problem/Solution Cards -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-16">
<!-- Problem/Solution Card 1 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<div class="bg-red-50 p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-red-100 rounded-full p-3">
<svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<h3 class="ml-4 text-lg font-medium text-gray-900">Time-Consuming Administration</h3>
</div>
<p class="mt-4 text-gray-600">
Small business owners spend up to 20 hours per week on administrative tasks instead of focusing on growth.
</p>
</div>
<div class="border-t border-gray-200 bg-white p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-full p-3">
<svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Automated Workflows</h3>
</div>
<p class="mt-4 text-gray-600">
Our automation tools reduce administrative work by 75%, giving you back 15+ hours every week.
</p>
</div>
</div>
<!-- Problem/Solution Card 2 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<div class="bg-red-50 p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-red-100 rounded-full p-3">
<svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Disconnected Systems</h3>
</div>
<p class="mt-4 text-gray-600">
Using multiple tools for different business functions creates data silos and increases errors.
</p>
</div>
<div class="border-t border-gray-200 bg-white p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-full p-3">
<svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Unified Platform</h3>
</div>
<p class="mt-4 text-gray-600">
One integrated system for all your business needs, reducing errors by 90% and improving data accuracy.
</p>
</div>
</div>
<!-- Problem/Solution Card 3 -->
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
<div class="bg-red-50 p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-red-100 rounded-full p-3">
<svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Unpredictable Costs</h3>
</div>
<p class="mt-4 text-gray-600">
Enterprise software is often too expensive and complex for small businesses to implement effectively.
</p>
</div>
<div class="border-t border-gray-200 bg-white p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-100 rounded-full p-3">
<svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="ml-4 text-lg font-medium text-gray-900">Affordable Pricing</h3>
</div>
<p class="mt-4 text-gray-600">
Transparent, scalable pricing designed specifically for small businesses with no hidden fees.
</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<h3 class="text-2xl font-bold text-gray-900 mb-4">Ready to transform your business?</h3>
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
Join thousands of small businesses that have streamlined their operations with our software.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#demo" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Schedule a demo">
Schedule a demo
</a>
<a href="#trial" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-md shadow-sm text-base font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Start free trial">
Start free trial
</a>
</div>
<p class="mt-4 text-sm text-gray-500">No credit card required. 14-day free trial.</p>
</div>
</div>
</section>
