<!--
@type: Feature
@industry: Product
@style: Light
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.feature-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) 0;
}
.feature-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-16);
}
.section-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
margin-bottom: var(--spacing-4);
}
.section-description {
font-size: 1.125rem;
color: var(--color-gray-600);
max-width: 48rem;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.feature-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.feature-card:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.icon-wrapper {
width: 3rem;
height: 3rem;
background-color: var(--color-blue-100);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-6);
}
.icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-blue-600);
}
.feature-title {
font-size: 1.25rem;
font-weight: 400;
color: var(--color-gray-800);
margin-bottom: var(--spacing-3);
}
.feature-description {
font-size: 1rem;
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
}
.learn-more-link {
display: inline-flex;
align-items: center;
color: var(--color-blue-600);
text-decoration: none;
transition: color 0.2s ease;
}
.learn-more-link:hover {
color: var(--color-blue-700);
}
.learn-more-icon {
width: 1rem;
height: 1rem;
margin-left: var(--spacing-1);
}
.featured-section {
margin-top: var(--spacing-16);
}
.featured-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.featured-grid {
display: grid;
grid-template-columns: 1fr;
}
.featured-content {
padding: var(--spacing-8);
}
.featured-badge {
display: inline-block;
padding: var(--spacing-2) var(--spacing-4);
background-color: var(--color-blue-50);
color: var(--color-blue-600);
font-size: 0.875rem;
font-weight: 500;
border-radius: 9999px;
margin-bottom: var(--spacing-6);
}
.featured-title {
font-size: 1.5rem;
font-weight: 400;
color: var(--color-gray-800);
margin-bottom: var(--spacing-4);
}
.featured-description {
color: var(--color-gray-600);
margin-bottom: var(--spacing-8);
}
.feature-list {
list-style: none;
margin-bottom: var(--spacing-8);
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-4);
}
.feature-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-blue-600);
margin: var(--spacing-1) var(--spacing-2) 0 0;
}
.feature-text {
color: var(--color-gray-600);
}
.feature-button-group {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
}
.feature-primary-button {
display: inline-flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-6);
background-color: var(--color-blue-600);
color: var(--color-white);
text-decoration: none;
border-radius: 0.5rem;
transition: background-color 0.2s ease;
}
.feature-primary-button:hover {
background-color: var(--color-blue-700);
}
.feature-secondary-button {
display: inline-flex;
align-items: center;
padding: var(--spacing-3) var(--spacing-6);
background-color: var(--color-white);
color: var(--color-gray-800);
text-decoration: none;
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
transition: background-color 0.2s ease;
}
.feature-secondary-button:hover {
background-color: var(--color-gray-50);
}
.image-container {
order: -1;
}
.image-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gray-100);
padding: var(--spacing-8);
}
.placeholder-image {
background-color: var(--color-gray-200);
aspect-ratio: 16/9;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
}
.placeholder-icon {
width: 4rem;
height: 4rem;
color: var(--color-gray-500);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.feature-container {
padding: 0 var(--spacing-6);
}
}
@media (min-width: 768px) {
.feature-section {
padding: var(--spacing-24) 0;
}
.section-title {
font-size: 2.25rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.featured-content {
padding: var(--spacing-12);
}
.featured-title {
font-size: 1.875rem;
}
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
.featured-section {
margin-top: var(--spacing-24);
}
.featured-grid {
grid-template-columns: repeat(2, 1fr);
}
.image-container {
order: 1;
}
}
</style>
<section class="feature-section">
<div class="feature-container">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">Product Features That Make a Difference</h2>
<p class="section-description">Our carefully designed features help you streamline workflows, improve productivity, and achieve better results with minimal effort.</p>
</div>
<!-- Features Grid -->
<div class="features-grid">
<!-- Feature Card 1 -->
<div class="feature-card">
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 class="feature-title">Intuitive Dashboard</h3>
<p class="feature-description">Get a comprehensive overview of your product performance with our intuitive and customizable dashboard interface.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 2 -->
<div class="feature-card">
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<h3 class="feature-title">Advanced Security</h3>
<p class="feature-description">Keep your data safe with enterprise-grade security features including encryption, access controls, and compliance tools.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 3 -->
<div class="feature-card">
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="feature-title">Performance Optimization</h3>
<p class="feature-description">Boost your product's speed and efficiency with our advanced optimization tools and real-time performance monitoring.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 4 -->
<div class="feature-card">
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
<h3 class="feature-title">Data Analytics</h3>
<p class="feature-description">Make data-driven decisions with comprehensive analytics tools that provide actionable insights and visualizations.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 5 -->
<div class="feature-card">
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
</svg>
</div>
<h3 class="feature-title">Seamless Integration</h3>
<p class="feature-description">Connect with your favorite tools and platforms through our extensive API and pre-built integrations ecosystem.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 6 -->
<div class="feature-card">
<div class="icon-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<h3 class="feature-title">Collaboration Tools</h3>
<p class="feature-description">Work together efficiently with team members through real-time collaboration features, comments, and shared workspaces.</p>
<a href="#" class="learn-more-link">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="learn-more-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<!-- Featured Highlight -->
<div class="featured-section">
<div class="featured-card">
<div class="featured-grid">
<!-- Content Side -->
<div class="featured-content">
<div class="featured-badge">Featured Capability</div>
<h3 class="featured-title">Advanced Analytics Dashboard</h3>
<p class="featured-description">Our most powerful feature gives you complete visibility into your product performance. Track key metrics, identify trends, and make data-driven decisions with our intuitive analytics dashboard.</p>
<ul class="feature-list">
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" 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>
<span class="feature-text">Real-time data visualization and reporting</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" 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>
<span class="feature-text">Customizable widgets and dashboard layouts</span>
</li>
<li class="feature-item">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" 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>
<span class="feature-text">Export capabilities for presentations and reports</span>
</li>
</ul>
<div class="feature-button-group">
<a href="#" class="feature-primary-button" aria-label="Try the dashboard demo">Try Demo</a>
<a href="#" class="feature-secondary-button" aria-label="Learn more about the analytics dashboard">Learn More</a>
</div>
</div>
<!-- Image Side -->
<div class="image-container">
<div class="image-wrapper">
<div class="placeholder-image">
<svg xmlns="http://www.w3.org/2000/svg" class="placeholder-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Feature
@industry: Product
@style: Light
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 md:py-24">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<!-- Section Header -->
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-medium text-gray-800 mb-4">Product Features That Make a Difference</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Our carefully designed features help you streamline workflows, improve productivity, and achieve better results with minimal effort.</p>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature Card 1 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 class="text-xl font-normal text-gray-800 mb-3">Intuitive Dashboard</h3>
<p class="text-base text-gray-600 mb-6">Get a comprehensive overview of your product performance with our intuitive and customizable dashboard interface.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 2 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<h3 class="text-xl font-normal text-gray-800 mb-3">Advanced Security</h3>
<p class="text-base text-gray-600 mb-6">Keep your data safe with enterprise-grade security features including encryption, access controls, and compliance tools.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 3 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-xl font-normal text-gray-800 mb-3">Performance Optimization</h3>
<p class="text-base text-gray-600 mb-6">Boost your product's speed and efficiency with our advanced optimization tools and real-time performance monitoring.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 4 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
<h3 class="text-xl font-normal text-gray-800 mb-3">Data Analytics</h3>
<p class="text-base text-gray-600 mb-6">Make data-driven decisions with comprehensive analytics tools that provide actionable insights and visualizations.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 5 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
</svg>
</div>
<h3 class="text-xl font-normal text-gray-800 mb-3">Seamless Integration</h3>
<p class="text-base text-gray-600 mb-6">Connect with your favorite tools and platforms through our extensive API and pre-built integrations ecosystem.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- Feature Card 6 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm transition-all duration-200 hover:shadow-md">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<h3 class="text-xl font-normal text-gray-800 mb-3">Collaboration Tools</h3>
<p class="text-base text-gray-600 mb-6">Work together efficiently with team members through real-time collaboration features, comments, and shared workspaces.</p>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-700">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<!-- Featured Highlight -->
<div class="mt-16 lg:mt-24">
<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
<div class="grid grid-cols-1 lg:grid-cols-2">
<!-- Content Side -->
<div class="p-8 md:p-12">
<div class="inline-block px-4 py-2 bg-blue-50 rounded-full text-blue-600 text-sm font-medium mb-6">
Featured Capability
</div>
<h3 class="text-2xl md:text-3xl font-normal text-gray-800 mb-4">Advanced Analytics Dashboard</h3>
<p class="text-gray-600 mb-8">Our most powerful feature gives you complete visibility into your product performance. Track key metrics, identify trends, and make data-driven decisions with our intuitive analytics dashboard.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<svg class="h-5 w-5 text-blue-600 mt-1 mr-2" xmlns="http://www.w3.org/2000/svg" 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>
<span class="text-gray-600">Real-time data visualization and reporting</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-blue-600 mt-1 mr-2" xmlns="http://www.w3.org/2000/svg" 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>
<span class="text-gray-600">Customizable widgets and dashboard layouts</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-blue-600 mt-1 mr-2" xmlns="http://www.w3.org/2000/svg" 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>
<span class="text-gray-600">Export capabilities for presentations and reports</span>
</li>
</ul>
<div class="flex flex-wrap gap-4">
<a href="#" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" aria-label="Try the dashboard demo">
Try Demo
</a>
<a href="#" class="inline-flex items-center px-6 py-3 bg-white border border-gray-200 text-gray-800 rounded-lg hover:bg-gray-50 transition-colors" aria-label="Learn more about the analytics dashboard">
Learn More
</a>
</div>
</div>
<!-- Image Side -->
<div class="order-first lg:order-last">
<div class="h-full flex items-center justify-center bg-gray-100 p-8">
<div class="bg-gray-200 aspect-video w-full flex items-center justify-center text-gray-500 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
