<!--
@type: Feature
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-100: #e0e7ff;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
/* Component Styles */
.features-section {
background-color: var(--color-slate-50);
padding: 4rem 1rem;
}
.section-header {
max-width: 48rem;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
}
.section-badge {
color: var(--color-indigo-600);
font-weight: 500;
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
display: block;
margin-bottom: 0.5rem;
}
.section-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 1rem;
}
.section-description {
margin-top: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--color-slate-600);
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.feature-card {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-slate-200);
transition: box-shadow 0.3s ease;
}
.feature-card:hover {
box-shadow: var(--shadow-xl);
}
.feature-icon-container {
display: inline-flex;
height: 3rem;
width: 3rem;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background-color: var(--color-indigo-100);
margin-bottom: 1.5rem;
}
.feature-icon {
height: 1.5rem;
width: 1.5rem;
color: var(--color-indigo-600);
}
.feature-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-slate-900);
}
.feature-description {
margin-top: 0.75rem;
font-size: 1rem;
color: var(--color-slate-600);
}
.feature-link-container {
margin-top: 1.5rem;
}
.feature-link {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-indigo-600);
text-decoration: none;
}
.feature-link:hover {
color: var(--color-indigo-700);
}
.feature-link-icon {
margin-left: 0.5rem;
height: 1rem;
width: 1rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.features-section {
padding: 6rem 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-section {
padding: 8rem 2rem;
}
.section-header {
margin-bottom: 5rem;
}
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="features-section" aria-labelledby="features-heading">
<div>
<!-- Section Header -->
<div class="section-header">
<span class="section-badge">Business Solutions</span>
<h2 id="features-heading" class="section-title">
Streamline Your Business Operations
</h2>
<p class="section-description">
Our comprehensive suite of business tools helps you optimize workflows, increase productivity, and drive sustainable growth.
</p>
</div>
<!-- Features Grid -->
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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>
<h3 class="feature-title">Financial Analytics</h3>
<p class="feature-description">
Gain deep insights into your financial performance with real-time analytics and customizable reporting dashboards.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
</svg>
</div>
<h3 class="feature-title">Team Management</h3>
<p class="feature-description">
Streamline team collaboration with integrated project management tools, task assignments, and progress tracking.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
</div>
<h3 class="feature-title">Enterprise Security</h3>
<p class="feature-description">
Protect your business data with enterprise-grade security protocols, encryption, and compliance management tools.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<h3 class="feature-title">Process Automation</h3>
<p class="feature-description">
Automate repetitive tasks and workflows to reduce manual effort, minimize errors, and increase operational efficiency.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 5 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
</svg>
</div>
<h3 class="feature-title">Market Insights</h3>
<p class="feature-description">
Stay ahead of market trends with AI-powered analytics that provide actionable insights for strategic decision-making.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 6 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<h3 class="feature-title">Resource Optimization</h3>
<p class="feature-description">
Optimize resource allocation and utilization with intelligent planning tools that maximize productivity and ROI.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Feature
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 sm:py-24 lg:py-32" 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 lg:mb-20">
<span class="text-indigo-600 font-medium text-sm tracking-wide uppercase block mb-2">Business Solutions</span>
<h2 id="features-heading" class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
Streamline Your Business Operations
</h2>
<p class="mt-4 text-lg leading-7 text-slate-600">
Our comprehensive suite of business tools helps you optimize workflows, increase productivity, and drive sustainable growth.
</p>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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>
<h3 class="text-lg font-semibold text-slate-900">Financial Analytics</h3>
<p class="mt-3 text-base text-slate-600">
Gain deep insights into your financial performance with real-time analytics and customizable reporting dashboards.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 2 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-slate-900">Team Management</h3>
<p class="mt-3 text-base text-slate-600">
Streamline team collaboration with integrated project management tools, task assignments, and progress tracking.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 3 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-slate-900">Enterprise Security</h3>
<p class="mt-3 text-base text-slate-600">
Protect your business data with enterprise-grade security protocols, encryption, and compliance management tools.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 4 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-slate-900">Process Automation</h3>
<p class="mt-3 text-base text-slate-600">
Automate repetitive tasks and workflows to reduce manual effort, minimize errors, and increase operational efficiency.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 5 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-slate-900">Market Insights</h3>
<p class="mt-3 text-base text-slate-600">
Stay ahead of market trends with AI-powered analytics that provide actionable insights for strategic decision-making.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 6 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-slate-900">Resource Optimization</h3>
<p class="mt-3 text-base text-slate-600">
Optimize resource allocation and utilization with intelligent planning tools that maximize productivity and ROI.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
