Component:

Hero Software Minimal

Name: Hero Software Minimal
Availability: InStock

Free

Tags: Hero Page Section Content Sale Software Minimal

Colors:

Description:

This carefully crafted Hero component is perfect for Software landing pages, featuring a Minimal design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Hero Software Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions