<!--
@type: Feature
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-blue-50: #eff6ff;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Font Sizes */
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* Other */
--border-radius-lg: 0.5rem;
--border-radius-2xl: 1rem;
--transition-duration: 200ms;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
.features-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
}
/* Header Styles */
.section-header {
max-width: 48rem; /* max-w-3xl */
margin: 0 auto var(--spacing-16);
text-align: center;
}
.section-label {
color: var(--color-blue-600);
font-size: var(--text-sm);
font-weight: 500;
display: block;
margin-bottom: var(--spacing-2);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.section-description {
margin-top: var(--spacing-4);
font-size: var(--text-lg);
line-height: 2rem;
color: var(--color-gray-600);
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
/* Feature Card */
.feature-card {
position: relative;
border-radius: var(--border-radius-2xl);
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: var(--spacing-8);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: box-shadow var(--transition-duration);
}
.feature-card:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.feature-icon {
display: inline-flex;
height: 3rem;
width: 3rem;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-lg);
background-color: var(--color-blue-50);
margin-bottom: var(--spacing-6);
}
.feature-icon svg {
height: 1.5rem;
width: 1.5rem;
color: var(--color-blue-600);
}
.feature-title {
font-size: var(--text-lg);
font-weight: 600;
line-height: 2rem;
color: var(--color-gray-900);
}
.feature-description {
margin-top: var(--spacing-3);
font-size: var(--text-base);
line-height: 1.75rem;
color: var(--color-gray-600);
}
/* CTA Section */
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-lg);
background-color: var(--color-blue-600);
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--text-base);
font-weight: 500;
color: var(--color-white);
text-decoration: none;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: background-color var(--transition-duration);
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
.cta-button svg {
margin-left: var(--spacing-2);
height: 1rem;
width: 1rem;
}
.cta-note {
margin-top: var(--spacing-4);
font-size: var(--text-sm);
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.features-section {
padding: var(--spacing-16) var(--spacing-6);
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.section-title {
font-size: var(--text-4xl);
}
}
@media (min-width: 1024px) {
.features-section {
padding: var(--spacing-20) var(--spacing-8);
}
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="features-section" aria-labelledby="features-heading">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<span class="section-label">Features</span>
<h2 id="features-heading" class="section-title">
Everything you need to streamline your workflow
</h2>
<p class="section-description">
Powerful features to help you manage, automate, and scale your business operations with confidence.
</p>
</div>
<!-- Features Grid -->
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-card">
<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="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="feature-title">Enterprise Security</h3>
<p class="feature-description">
Bank-grade encryption and security measures to protect your sensitive data and ensure compliance.
</p>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<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 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<h3 class="feature-title">Real-time Analytics</h3>
<p class="feature-description">
Get instant insights with powerful analytics and customizable dashboards for data-driven decisions.
</p>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<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="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
</svg>
</div>
<h3 class="feature-title">Seamless Integration</h3>
<p class="feature-description">
Connect with your favorite tools through our extensive API and pre-built integrations.
</p>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<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="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
</svg>
</div>
<h3 class="feature-title">Automated Workflows</h3>
<p class="feature-description">
Build custom workflows and automate repetitive tasks to boost team productivity.
</p>
</div>
<!-- Feature 5 -->
<div class="feature-card">
<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="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 Collaboration</h3>
<p class="feature-description">
Work together seamlessly with real-time collaboration tools and team workspaces.
</p>
</div>
<!-- Feature 6 -->
<div class="feature-card">
<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="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">Advanced Permissions</h3>
<p class="feature-description">
Fine-grained access controls and role-based permissions to manage team access effectively.
</p>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" aria-label="Start free trial">
Start free trial
<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="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
<p class="cta-note">No credit card required. 14-day free trial.</p>
</div>
</div>
</section>
<!--
@type: Feature
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20" 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-blue-600 font-medium mb-2 block text-sm">Features</span>
<h2 id="features-heading" class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Everything you need to streamline your workflow
</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">
Powerful features to help you manage, automate, and scale your business operations with confidence.
</p>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Enterprise Security</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Bank-grade encryption and security measures to protect your sensitive data and ensure compliance.
</p>
</div>
<!-- Feature 2 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" 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 leading-8 text-gray-900">Real-time Analytics</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Get instant insights with powerful analytics and customizable dashboards for data-driven decisions.
</p>
</div>
<!-- Feature 3 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" 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 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Seamless Integration</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Connect with your favorite tools through our extensive API and pre-built integrations.
</p>
</div>
<!-- Feature 4 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Automated Workflows</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Build custom workflows and automate repetitive tasks to boost team productivity.
</p>
</div>
<!-- Feature 5 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" 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 leading-8 text-gray-900">Team Collaboration</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Work together seamlessly with real-time collaboration tools and team workspaces.
</p>
</div>
<!-- Feature 6 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" 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 leading-8 text-gray-900">Advanced Permissions</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Fine-grained access controls and role-based permissions to manage team access effectively.
</p>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors" aria-label="Start free trial">
Start free trial
<svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
<p class="mt-4 text-sm text-gray-600">No credit card required. 14-day free trial.</p>
</div>
</div>
</section>
