<!--
@type: Feature
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px 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";
}
.feature {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.feature {
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;
}
}
.feature-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);
}
.feature-section {
position: relative;
margin-top: 5rem;
}
.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 1024px) {
.feature-grid {
grid-template-columns: repeat(12, 1fr);
}
}
.feature-content {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.feature-content.left {
grid-column: span 5;
}
.feature-content.right {
grid-column: 8 / span 5;
}
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.feature-description {
margin-top: 0.75rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.feature-list {
margin-top: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.feature-item {
display: flex;
}
.feature-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.375rem;
background-color: var(--color-indigo-500);
color: var(--color-white);
}
.feature-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.feature-text {
margin-left: 1rem;
}
.feature-item-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-900);
}
.feature-item-description {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
@media (min-width: 1024px) {
.feature-image.right {
grid-column: 6 / span 7;
}
.feature-image.left {
grid-column: span 6;
}
}
.image-container {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.image-placeholder {
background-color: var(--color-gray-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-500);
}
.image-placeholder.wide {
aspect-ratio: 16 / 9;
}
.image-placeholder.square {
aspect-ratio: 4 / 3;
}
</style>
<section class="feature" aria-labelledby="features-heading">
<div class="container">
<!-- Section Header -->
<div class="feature-header">
<span class="header-badge">Powerful Features</span>
<h2 id="features-heading" class="header-title">
Built specifically for small businesses
</h2>
<p class="header-description">
Our software simplifies complex business processes with intuitive tools designed for companies without dedicated IT departments.
</p>
</div>
<!-- Feature 1: Asymmetric layout with image on right -->
<div class="feature-section">
<div class="feature-grid">
<!-- Content on left -->
<div class="feature-content left">
<h3 class="feature-title">
Streamlined customer management
</h3>
<p class="feature-description">
Manage your entire customer lifecycle in one place, from lead capture to ongoing support.
</p>
<div class="feature-list">
<div class="feature-item">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">360° customer profiles</h4>
<p class="feature-item-description">
Get complete visibility into customer interactions, history, and preferences in a single view.
</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Smart communication tools</h4>
<p class="feature-item-description">
Send personalized emails, schedule follow-ups, and track all customer communications.
</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Sales pipeline management</h4>
<p class="feature-item-description">
Visualize your sales process and track deals from lead to close with customizable pipelines.
</p>
</div>
</div>
</div>
</div>
<!-- Image on right -->
<div class="feature-image right">
<div class="image-container">
<div class="image-placeholder wide">
<span>CRM dashboard image placeholder</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature 2: Asymmetric layout with image on left -->
<div class="feature-section">
<div class="feature-grid">
<!-- Image on left -->
<div class="feature-image left">
<div class="image-container">
<div class="image-placeholder square">
<span>Financial dashboard image placeholder</span>
</div>
</div>
</div>
<!-- Content on right -->
<div class="feature-content right">
<h3 class="feature-title">
Simplified financial management
</h3>
<p class="feature-description">
Take control of your business finances without the complexity of enterprise accounting software.
</p>
<div class="feature-list">
<div class="feature-item">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Intuitive invoicing</h4>
<p class="feature-item-description">
Create professional invoices in seconds and get paid faster with automated payment reminders.
</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Expense tracking</h4>
<p class="feature-item-description">
Capture receipts, categorize expenses, and generate reports for tax time with minimal effort.
</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Financial reporting</h4>
<p class="feature-item-description">
Access clear financial reports that help you understand your business performance at a glance.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Feature
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="features-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Powerful Features</span>
<h2 id="features-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Built specifically for small businesses
</h2>
<p class="mt-4 text-lg text-gray-600">
Our software simplifies complex business processes with intuitive tools designed for companies without dedicated IT departments.
</p>
</div>
<!-- Feature 1: Asymmetric layout with image on right -->
<div class="relative mt-20">
<div class="lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
<!-- Content on left -->
<div class="lg:col-span-5">
<h3 class="text-2xl font-bold tracking-tight text-gray-900">
Streamlined customer management
</h3>
<p class="mt-3 text-lg text-gray-600">
Manage your entire customer lifecycle in one place, from lead capture to ongoing support.
</p>
<div class="mt-10 space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">360° customer profiles</h4>
<p class="mt-2 text-sm text-gray-600">
Get complete visibility into customer interactions, history, and preferences in a single view.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Smart communication tools</h4>
<p class="mt-2 text-sm text-gray-600">
Send personalized emails, schedule follow-ups, and track all customer communications.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Sales pipeline management</h4>
<p class="mt-2 text-sm text-gray-600">
Visualize your sales process and track deals from lead to close with customizable pipelines.
</p>
</div>
</div>
</div>
</div>
<!-- Image on right -->
<div class="mt-10 lg:mt-0 lg:col-span-7 lg:col-start-6">
<div class="relative rounded-2xl overflow-hidden shadow-xl">
<div class="bg-gray-200 aspect-[16/9] flex items-center justify-center">
<span class="text-gray-500">CRM dashboard image placeholder</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature 2: Asymmetric layout with image on left -->
<div class="relative mt-24">
<div class="lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
<!-- Image on left -->
<div class="lg:col-span-6">
<div class="relative rounded-2xl overflow-hidden shadow-xl">
<div class="bg-gray-200 aspect-[4/3] flex items-center justify-center">
<span class="text-gray-500">Financial dashboard image placeholder</span>
</div>
</div>
</div>
<!-- Content on right -->
<div class="mt-10 lg:mt-0 lg:col-span-5 lg:col-start-8">
<h3 class="text-2xl font-bold tracking-tight text-gray-900">
Simplified financial management
</h3>
<p class="mt-3 text-lg text-gray-600">
Take control of your business finances without the complexity of enterprise accounting software.
</p>
<div class="mt-10 space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Intuitive invoicing</h4>
<p class="mt-2 text-sm text-gray-600">
Create professional invoices in seconds and get paid faster with automated payment reminders.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Expense tracking</h4>
<p class="mt-2 text-sm text-gray-600">
Capture receipts, categorize expenses, and generate reports for tax time with minimal effort.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Financial reporting</h4>
<p class="mt-2 text-sm text-gray-600">
Access clear financial reports that help you understand your business performance at a glance.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
