<!--
@type: Hero
@industry: Software
@style: Minimal
@category: Page Section, Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-indigo-50: #eef2ff;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--color-green-500: #22c55e;
--color-green-600: #16a34a;
--color-blue-500: #3b82f6;
--color-red-600: #dc2626;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--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";
}
.hero {
position: relative;
background-color: var(--color-white);
overflow: hidden;
}
.hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, var(--color-gray-50), var(--color-white));
}
.hero-container {
position: relative;
max-width: 80rem;
margin: 0 auto;
padding: 3rem 1rem;
}
@media (min-width: 640px) {
.hero-container {
padding: 3rem 1.5rem;
}
}
@media (min-width: 1024px) {
.hero-container {
padding: 3rem 2rem;
}
}
@media (min-width: 768px) {
.hero-container {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
}
.hero-content {
text-align: left;
}
.hero-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
background-color: var(--color-indigo-50);
color: var(--color-indigo-600);
margin-bottom: 1.5rem;
}
.hero-badge svg {
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
}
.hero-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-gray-900);
line-height: 1;
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.hero-title {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.hero-title {
font-size: 3rem;
}
}
.hero-description {
font-size: 1.125rem;
color: var(--color-gray-600);
margin-bottom: 2rem;
max-width: 32rem;
line-height: 1.5;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
.hero-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);
transition: background-color 0.2s;
text-decoration: none;
box-shadow: var(--shadow-sm);
}
.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-200);
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
background-color: var(--color-white);
transition: background-color 0.2s;
text-decoration: none;
}
.button-secondary:hover {
background-color: var(--color-gray-50);
}
.hero-social-proof {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
@media (min-width: 640px) {
.hero-social-proof {
flex-direction: row;
align-items: center;
}
}
.avatar-stack {
display: flex;
margin-right: -0.5rem;
}
.avatar-stack img {
width: 2rem;
height: 2rem;
border-radius: 9999px;
border: 2px solid var(--color-white);
object-fit: cover;
margin-right: -0.5rem;
}
.social-proof-text {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.social-proof-text strong {
font-weight: 500;
}
/* Demo Section Styles */
.demo-container {
position: relative;
}
.demo-window {
background-color: var(--color-white);
border: 3px solid var(--color-indigo-600);
border-radius: 0.75rem;
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.demo-tabs {
display: flex;
border-bottom: 1px solid var(--color-gray-100);
}
.demo-tab {
flex: 1;
padding: 1rem;
font-size: 0.875rem;
font-weight: 500;
text-align: center;
color: var(--color-gray-500);
background: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.demo-tab:hover {
color: var(--color-gray-700);
}
.demo-tab.active {
background-color: var(--color-indigo-50);
color: var(--color-indigo-700);
border-bottom: 2px solid var(--color-indigo-500);
}
.demo-content {
padding: 1.5rem;
}
.demo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.demo-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.demo-period {
background-color: var(--color-gray-100);
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.hero-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.hero-stat-card {
background-color: var(--color-gray-50);
padding: 1rem;
border-radius: 0.5rem;
}
.hero-stat-label {
font-size: 0.875rem;
color: var(--color-gray-500);
margin-bottom: 0.25rem;
}
.hero-stat-value {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-gray-900);
}
.hero-stat-change {
display: flex;
align-items: center;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--color-green-600);
}
.hero-stat-change svg {
width: 0.75rem;
height: 0.75rem;
margin-right: 0.25rem;
}
.chart-placeholder {
background-color: var(--color-gray-50);
height: 8rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.chart-icon {
color: var(--color-gray-400);
text-align: center;
}
.chart-icon svg {
width: 2rem;
height: 2rem;
margin: 0 auto 0.25rem;
}
.chart-icon span {
font-size: 0.875rem;
}
.tasks-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.tasks-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-gray-700);
}
.tasks-view-all {
font-size: 0.75rem;
color: var(--color-indigo-600);
text-decoration: none;
border: none;
background: none;
cursor: pointer;
}
.tasks-view-all:hover {
color: var(--color-indigo-700);
}
.tasks-list {
margin-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.task-item {
display: flex;
align-items: center;
}
.task-checkbox {
width: 1rem;
height: 1rem;
color: var(--color-indigo-600);
border: 1px solid var(--color-gray-300);
border-radius: 0.25rem;
margin-right: 0.5rem;
}
.task-checkbox:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-indigo-500);
}
.task-label {
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Clients Tab Content */
.client-card {
background-color: var(--color-gray-50);
padding: 0.75rem;
border-radius: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.client-info {
display: flex;
flex-direction: column;
}
.client-name {
font-weight: 500;
color: var(--color-gray-900);
}
.client-contact {
font-size: 0.75rem;
color: var(--color-gray-500);
}
.client-value {
font-size: 0.875rem;
color: var(--color-gray-700);
}
.activity-list {
margin-top: 1rem;
}
.activity-item {
display: flex;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.activity-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
margin: 0.375rem 0.5rem 0 0;
}
.activity-dot.green {
background-color: var(--color-green-500);
}
.activity-dot.blue {
background-color: var(--color-blue-500);
}
.activity-content {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.activity-time {
font-size: 0.75rem;
color: var(--color-gray-500);
}
/* Analytics Tab Content */
.analytics-select {
font-size: 0.875rem;
border: 1px solid var(--color-gray-200);
border-radius: 0.375rem;
padding: 0.25rem 0.5rem;
}
.analytics-select:focus {
outline: none;
border-color: var(--color-indigo-500);
box-shadow: 0 0 0 1px var(--color-indigo-500);
}
.metrics-chart {
height: 10rem;
margin-bottom: 1.5rem;
}
.metric-down {
color: var(--color-red-600);
}
[x-cloak] {
display: none !important;
}
</style>
<section class="hero">
<div class="hero-gradient"></div>
<div class="hero-container">
<div class="hero-grid">
<!-- Left column - Content -->
<div class="hero-content">
<div class="hero-badge">
<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 1L7.545 4.13L11 4.635L8.5 7.07L9.09 10.51L6 8.885L2.91 10.51L3.5 7.07L1 4.635L4.455 4.13L6 1Z" fill="currentColor"/>
</svg>
<span>New for 2025</span>
</div>
<h1 class="hero-title">
Simplify business operations for your growing company
</h1>
<p class="hero-description">
Our all-in-one platform helps small businesses streamline workflows, manage clients, and boost revenue without the enterprise-level complexity.
</p>
<div class="hero-buttons">
<a href="#demo" class="button-primary" role="button" aria-label="Start your free trial">
Start free trial
</a>
<a href="#schedule-demo" class="button-secondary" role="button" aria-label="Schedule a demo">
Schedule a demo
</a>
</div>
<div class="hero-social-proof">
<div class="avatar-stack">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="John Doe">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Kate Lee">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Mike North">
</div>
<div class="social-proof-text">
<strong>300+</strong> small businesses rely on our platform
</div>
</div>
</div>
<!-- Right column - Interactive Demo -->
<div class="demo-container">
<div class="demo-window">
<!-- Demo navigation tabs -->
<div class="demo-tabs">
<button class="demo-tab active" data-tab="dashboard">Dashboard</button>
<button class="demo-tab" data-tab="clients">Clients</button>
<button class="demo-tab" data-tab="analytics">Analytics</button>
</div>
<!-- Dashboard tab content -->
<div class="demo-content" id="dashboard-tab">
<div class="demo-header">
<h3 class="demo-title">Business Overview</h3>
<div class="demo-period">Last 30 days</div>
</div>
<div class="hero-stats-grid">
<div class="hero-stat-card">
<div class="hero-stat-label">Revenue</div>
<div class="hero-stat-value">$24,500</div>
<div class="hero-stat-change">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>12% from last month</span>
</div>
</div>
<div class="hero-stat-card">
<div class="hero-stat-label">New Clients</div>
<div class="hero-stat-value">18</div>
<div class="hero-stat-change">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>8% from last month</span>
</div>
</div>
</div>
<div class="chart-placeholder">
<div class="chart-icon">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
<span>Revenue Chart</span>
</div>
</div>
<div class="tasks-header">
<h4 class="tasks-title">Recent Tasks</h4>
<button class="tasks-view-all">View all</button>
</div>
<div class="tasks-list">
<div class="task-item">
<input type="checkbox" class="task-checkbox">
<span class="task-label">Follow up with Johnson Inc.</span>
</div>
<div class="task-item">
<input type="checkbox" class="task-checkbox">
<span class="task-label">Prepare quarterly report</span>
</div>
<div class="task-item">
<input type="checkbox" class="task-checkbox">
<span class="task-label">Review new client proposals</span>
</div>
</div>
</div>
<!-- Clients tab content -->
<div class="demo-content" id="clients-tab" style="display: none;">
<div class="demo-header">
<h3 class="demo-title">Client Management</h3>
<button class="button-primary">Add Client</button>
</div>
<div class="client-list">
<div class="client-card">
<div class="client-info">
<div class="client-name">Acme Corporation</div>
<div class="client-contact">Last contact: 2 days ago</div>
</div>
<div class="client-value">$12,400</div>
</div>
<div class="client-card">
<div class="client-info">
<div class="client-name">Globex Industries</div>
<div class="client-contact">Last contact: 5 days ago</div>
</div>
<div class="client-value">$8,750</div>
</div>
<div class="client-card">
<div class="client-info">
<div class="client-name">Smith & Co</div>
<div class="client-contact">Last contact: Today</div>
</div>
<div class="client-value">$3,350</div>
</div>
</div>
<div class="activity-list">
<div class="activity-item">
<div class="activity-dot green"></div>
<div>
<div class="activity-content">New proposal sent to <strong>Acme Corp</strong></div>
<div class="activity-time">Today, 10:30 AM</div>
</div>
</div>
<div class="activity-item">
<div class="activity-dot blue"></div>
<div>
<div class="activity-content">Meeting scheduled with <strong>Globex Industries</strong></div>
<div class="activity-time">Tomorrow, 2:00 PM</div>
</div>
</div>
</div>
</div>
<!-- Analytics tab content -->
<div class="demo-content" id="analytics-tab" style="display: none;">
<div class="demo-header">
<h3 class="demo-title">Performance Analytics</h3>
<select class="analytics-select">
<option>This Month</option>
<option>Last Month</option>
<option>Last Quarter</option>
</select>
</div>
<div class="metrics-chart chart-placeholder">
<div class="chart-icon">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
<span>Performance Metrics Chart</span>
</div>
</div>
<div class="hero-stats-grid">
<div class="hero-stat-card">
<div class="hero-stat-label">Conversion Rate</div>
<div class="hero-stat-value">24.8%</div>
<div class="hero-stat-change">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>3.2% from last month</span>
</div>
</div>
<div class="hero-stat-card">
<div class="hero-stat-label">Avg. Deal Size</div>
<div class="hero-stat-value">$1,250</div>
<div class="hero-stat-change metric-down">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
<span>1.5% from last month</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Tab switching functionality
const tabs = document.querySelectorAll('.demo-tab');
const contents = document.querySelectorAll('.demo-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs
tabs.forEach(t => t.classList.remove('active'));
// Add active class to clicked tab
tab.classList.add('active');
// Hide all content sections
contents.forEach(content => content.style.display = 'none');
// Show selected content
const targetId = `${tab.dataset.tab}-tab`;
document.getElementById(targetId).style.display = 'block';
});
});
});
</script>
<!--
@type: Hero
@industry: Software
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="relative bg-white overflow-hidden" x-data="{ activeTab: 'dashboard' }">
<div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<!-- Left column - Content -->
<div class="text-left">
<div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-indigo-50 text-indigo-600 mb-6">
<svg class="w-3 h-3 mr-1" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 1L7.545 4.13L11 4.635L8.5 7.07L9.09 10.51L6 8.885L2.91 10.51L3.5 7.07L1 4.635L4.455 4.13L6 1Z" fill="currentColor"/>
</svg>
<span>New for 2025</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-4">
Simplify business operations for your growing company
</h1>
<p class="text-lg text-gray-600 mb-8 max-w-lg">
Our all-in-one platform helps small businesses streamline workflows, manage clients, and boost revenue without the enterprise-level complexity.
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-10">
<a href="#demo" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" role="button" aria-label="Start your free trial">
Start free trial
</a>
<a href="#schedule-demo" class="inline-flex items-center justify-center px-6 py-3 border border-gray-200 rounded-md text-base font-medium text-gray-700 bg-white hover:bg-gray-50 transition duration-200" role="button" aria-label="Schedule a demo">
Schedule a demo
</a>
</div>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<div class="flex -space-x-2">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="John Doe" class="w-8 h-8 rounded-full border-2 border-white object-cover">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Kate Lee" class="w-8 h-8 rounded-full border-2 border-white object-cover">
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Mike North" class="w-8 h-8 rounded-full border-2 border-white object-cover">
</div>
<div class="text-sm text-gray-600">
<span class="font-medium">300+</span> small businesses rely on our platform
</div>
</div>
</div>
<!-- Right column - Interactive Demo -->
<div class="relative">
<div class="bg-white border-[3px] border-indigo-600 rounded-xl shadow-xl overflow-hidden">
<!-- Demo navigation tabs -->
<div class="flex border-b border-gray-100">
<button
@click="activeTab = 'dashboard'"
:class="{'bg-indigo-50 text-indigo-700 border-b-2 border-indigo-500': activeTab === 'dashboard', 'text-gray-500 hover:text-gray-700': activeTab !== 'dashboard'}"
class="flex-1 py-4 px-4 text-sm font-medium text-center focus:outline-none transition-colors duration-200"
>
Dashboard
</button>
<button
@click="activeTab = 'clients'"
:class="{'bg-indigo-50 text-indigo-700 border-b-2 border-indigo-500': activeTab === 'clients', 'text-gray-500 hover:text-gray-700': activeTab !== 'clients'}"
class="flex-1 py-4 px-4 text-sm font-medium text-center focus:outline-none transition-colors duration-200"
>
Clients
</button>
<button
@click="activeTab = 'analytics'"
:class="{'bg-indigo-50 text-indigo-700 border-b-2 border-indigo-500': activeTab === 'analytics', 'text-gray-500 hover:text-gray-700': activeTab !== 'analytics'}"
class="flex-1 py-4 px-4 text-sm font-medium text-center focus:outline-none transition-colors duration-200"
>
Analytics
</button>
</div>
<!-- Dashboard tab content -->
<div x-show="activeTab === 'dashboard'" class="p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-medium text-gray-900">Business Overview</h3>
<div class="bg-gray-100 rounded-md px-3 py-1 text-sm text-gray-600">Last 30 days</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1">Revenue</div>
<div class="text-xl font-semibold text-gray-900">$24,500</div>
<div class="flex items-center mt-1 text-xs text-green-600">
<svg class="w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>12% from last month</span>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1">New Clients</div>
<div class="text-xl font-semibold text-gray-900">18</div>
<div class="flex items-center mt-1 text-xs text-green-600">
<svg class="w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>8% from last month</span>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg h-32 mb-6 flex items-center justify-center">
<div class="text-center text-gray-400">
<svg class="w-8 h-8 mx-auto mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
<span class="text-sm">Revenue Chart</span>
</div>
</div>
<div class="flex justify-between items-center">
<h4 class="text-sm font-medium text-gray-700">Recent Tasks</h4>
<button class="text-xs text-indigo-600 hover:text-indigo-800">View all</button>
</div>
<div class="mt-3 space-y-2">
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
<span class="ml-2 text-sm text-gray-600">Follow up with Johnson Inc.</span>
</div>
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
<span class="ml-2 text-sm text-gray-600">Prepare quarterly report</span>
</div>
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500">
<span class="ml-2 text-sm text-gray-600">Review new client proposals</span>
</div>
</div>
</div>
<!-- Clients tab content -->
<div x-show="activeTab === 'clients'" class="p-6" style="display: none;">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-medium text-gray-900">Client Management</h3>
<button class="bg-indigo-50 text-indigo-600 rounded-md px-3 py-1 text-sm font-medium hover:bg-indigo-100 transition-colors">
Add Client
</button>
</div>
<div class="space-y-3">
<div class="bg-gray-50 rounded-lg p-3 flex justify-between items-center">
<div>
<div class="font-medium text-gray-900">Acme Corporation</div>
<div class="text-xs text-gray-500">Last contact: 2 days ago</div>
</div>
<div class="text-sm text-gray-700">$12,400</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 flex justify-between items-center">
<div>
<div class="font-medium text-gray-900">Globex Industries</div>
<div class="text-xs text-gray-500">Last contact: 5 days ago</div>
</div>
<div class="text-sm text-gray-700">$8,750</div>
</div>
<div class="bg-gray-50 rounded-lg p-3 flex justify-between items-center">
<div>
<div class="font-medium text-gray-900">Smith & Co</div>
<div class="text-xs text-gray-500">Last contact: Today</div>
</div>
<div class="text-sm text-gray-700">$3,350</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-gray-100">
<div class="flex justify-between items-center mb-3">
<h4 class="text-sm font-medium text-gray-700">Client Activity</h4>
<div class="text-xs text-gray-500">Last 7 days</div>
</div>
<div class="space-y-2">
<div class="flex items-start">
<div class="h-2 w-2 mt-1.5 rounded-full bg-green-500 mr-2"></div>
<div>
<div class="text-sm text-gray-600">New proposal sent to <span class="font-medium">Acme Corp</span></div>
<div class="text-xs text-gray-500">Today, 10:30 AM</div>
</div>
</div>
<div class="flex items-start">
<div class="h-2 w-2 mt-1.5 rounded-full bg-blue-500 mr-2"></div>
<div>
<div class="text-sm text-gray-600">Meeting scheduled with <span class="font-medium">Globex Industries</span></div>
<div class="text-xs text-gray-500">Tomorrow, 2:00 PM</div>
</div>
</div>
</div>
</div>
</div>
<!-- Analytics tab content -->
<div x-show="activeTab === 'analytics'" class="p-6" style="display: none;">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-medium text-gray-900">Performance Analytics</h3>
<select class="text-sm border-gray-200 rounded-md focus:border-indigo-500 focus:ring-indigo-500">
<option>This Month</option>
<option>Last Month</option>
<option>Last Quarter</option>
</select>
</div>
<div class="bg-gray-50 rounded-lg h-40 mb-6 flex items-center justify-center">
<div class="text-center text-gray-400">
<svg class="w-10 h-10 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
<span class="text-sm">Performance Metrics Chart</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1">Conversion Rate</div>
<div class="text-xl font-semibold text-gray-900">24.8%</div>
<div class="flex items-center mt-1 text-xs text-green-600">
<svg class="w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>3.2% from last month</span>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-sm text-gray-500 mb-1">Avg. Deal Size</div>
<div class="text-xl font-semibold text-gray-900">$1,250</div>
<div class="flex items-center mt-1 text-xs text-red-600">
<svg class="w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
<span>1.5% from last month</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Alpine.js for interactive demo functionality -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
