<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="MetricFlow SaaS analytics dashboard landing page">
<title>MetricFlow - SaaS Analytics Dashboard</title>
</head>
<body>
<header class="site-header">
<div class="container nav-shell">
<a class="brand" href="#home" aria-label="MetricFlow home">
<span class="brand-icon"><i class="fa-solid fa-chart-simple" aria-hidden="true"></i></span>
<span>MetricFlow</span>
</a>
<button id="menuToggle" class="menu-toggle" type="button" aria-label="Open navigation" aria-expanded="false" aria-controls="mainNavigation">
<i class="fa-solid fa-bars" aria-hidden="true"></i>
</button>
<nav id="mainNavigation" class="main-navigation" aria-label="Primary navigation">
<a href="#analytics">Analytics</a>
<a href="#features">Features</a>
<a href="#workflow">How it Works</a>
<a href="#pricing">Pricing</a>
<a class="nav-login" href="#product-tour">Product Tour</a>
<a class="nav-cta" href="#get-started">Start Free</a>
</nav>
</div>
</header>
<main>
<section id="home" class="hero-section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<span class="eyebrow"><i class="fa-solid fa-sparkles me-2" aria-hidden="true"></i>Analytics without the complexity</span>
<h1>Turn business data into decisions your team can act on.</h1>
<p class="hero-copy">MetricFlow brings revenue, customers, product performance, and team activity into one clear analytics workspace.</p>
<div class="hero-actions">
<a class="primary-button" href="#get-started">Start Free Trial <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
<a class="secondary-button" href="#analytics"><i class="fa-solid fa-chart-line" aria-hidden="true"></i> Explore Dashboard</a>
</div>
<div class="hero-benefits">
<span><i class="fa-solid fa-circle-check" aria-hidden="true"></i>14-day free trial</span>
<span><i class="fa-solid fa-circle-check" aria-hidden="true"></i>No credit card</span>
<span><i class="fa-solid fa-circle-check" aria-hidden="true"></i>Setup in minutes</span>
</div>
</div>
<div class="col-lg-6">
<div class="hero-visual">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1200&q=85" alt="Analytics dashboard displayed on a computer screen" class="hero-image">
<div class="floating-card floating-revenue">
<span class="floating-icon success"><i class="fa-solid fa-arrow-trend-up" aria-hidden="true"></i></span>
<div>
<small>Monthly revenue</small>
<strong>$84,240</strong>
<span class="positive">+18.6%</span>
</div>
</div>
<div class="floating-card floating-users">
<span class="floating-icon"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
<div>
<small>Active customers</small>
<strong>4,892</strong>
<span>+312 this month</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="trust-section" aria-label="Platform statistics">
<div class="container">
<div class="trust-grid">
<div><strong>99.9%</strong><span>Platform uptime</span></div>
<div><strong>12M+</strong><span>Events processed</span></div>
<div><strong>50+</strong><span>Metric types</span></div>
<div><strong>24/7</strong><span>Data visibility</span></div>
</div>
</div>
</section>
<section id="analytics" class="section-space analytics-section">
<div class="container">
<div class="section-intro split-heading">
<div>
<span class="eyebrow">Live analytics preview</span>
<h2>Understand performance at a glance.</h2>
<p>Use a focused dashboard to monitor revenue, customers, conversions, and growth trends.</p>
</div>
<div class="range-control" role="group" aria-label="Analytics date range">
<button class="range-button active" type="button" data-range="7">7D</button>
<button class="range-button" type="button" data-range="30">30D</button>
<button class="range-button" type="button" data-range="90">90D</button>
</div>
</div>
<div class="dashboard-window">
<div class="dashboard-toolbar">
<div>
<span class="dashboard-title">Business Overview</span>
<small id="rangeLabel">Last 7 days</small>
</div>
<span class="live-indicator"><span></span>Live data</span>
</div>
<div class="metric-grid">
<article class="metric-card">
<div class="metric-label"><span>Revenue</span><i class="fa-solid fa-dollar-sign" aria-hidden="true"></i></div>
<strong id="revenueValue">$24,680</strong>
<small class="positive"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 14.2% growth</small>
</article>
<article class="metric-card">
<div class="metric-label"><span>Customers</span><i class="fa-solid fa-users" aria-hidden="true"></i></div>
<strong id="customerValue">1,842</strong>
<small class="positive"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 8.4% growth</small>
</article>
<article class="metric-card">
<div class="metric-label"><span>Conversion</span><i class="fa-solid fa-bullseye" aria-hidden="true"></i></div>
<strong id="conversionValue">6.8%</strong>
<small>From qualified visitors</small>
</article>
<article class="metric-card">
<div class="metric-label"><span>Avg. order</span><i class="fa-solid fa-cart-shopping" aria-hidden="true"></i></div>
<strong id="orderValue">$72.40</strong>
<small>Across completed orders</small>
</article>
</div>
<div class="dashboard-content-grid">
<div class="chart-panel">
<div class="panel-heading">
<div>
<strong>Revenue trend</strong>
<small>Performance over selected period</small>
</div>
<div class="panel-total">
<span>Total</span>
<strong id="chartTotal">$24,680</strong>
</div>
</div>
<div class="chart-container">
<canvas id="analyticsChart" role="img" aria-label="Line chart showing sample SaaS revenue performance"></canvas>
</div>
</div>
<aside class="activity-panel">
<div class="panel-heading">
<div>
<strong>Recent activity</strong>
<small>Latest business events</small>
</div>
</div>
<div class="activity-list">
<div class="activity-item">
<span class="activity-icon"><i class="fa-solid fa-user-plus" aria-hidden="true"></i></span>
<div><strong>New customer</strong><small>Enterprise account created</small></div>
<span>2m</span>
</div>
<div class="activity-item">
<span class="activity-icon green"><i class="fa-solid fa-credit-card" aria-hidden="true"></i></span>
<div><strong>Payment received</strong><small>Professional plan renewal</small></div>
<span>8m</span>
</div>
<div class="activity-item">
<span class="activity-icon purple"><i class="fa-solid fa-chart-column" aria-hidden="true"></i></span>
<div><strong>Report generated</strong><small>Monthly performance report</small></div>
<span>16m</span>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
<section id="features" class="section-space">
<div class="container">
<div class="section-intro centered">
<span class="eyebrow">Built for growing teams</span>
<h2>Everything you need to understand your business.</h2>
<p>Bring important metrics together without turning your analytics workflow into another complicated project.</p>
</div>
<div class="feature-grid">
<article class="feature-card">
<span class="feature-icon"><i class="fa-solid fa-chart-line" aria-hidden="true"></i></span>
<h3>Real-time Analytics</h3>
<p>Track business performance with clear charts, KPIs, and trend indicators.</p>
<span class="feature-detail">Live reporting <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
<article class="feature-card">
<span class="feature-icon green"><i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i></span>
<h3>Automated Insights</h3>
<p>Surface important changes and patterns without manually reviewing every report.</p>
<span class="feature-detail">Smart monitoring <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
<article class="feature-card">
<span class="feature-icon purple"><i class="fa-solid fa-users-gear" aria-hidden="true"></i></span>
<h3>Team Collaboration</h3>
<p>Keep dashboards, reports, and business context available to the right people.</p>
<span class="feature-detail">Shared workspace <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
<article class="feature-card">
<span class="feature-icon orange"><i class="fa-solid fa-shield-halved" aria-hidden="true"></i></span>
<h3>Secure Access</h3>
<p>Organize dashboard visibility with role-aware access and structured permissions.</p>
<span class="feature-detail">Access controls <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
<article class="feature-card">
<span class="feature-icon pink"><i class="fa-solid fa-file-export" aria-hidden="true"></i></span>
<h3>Flexible Reporting</h3>
<p>Create focused reports for leadership, operations, sales, and product teams.</p>
<span class="feature-detail">Custom reports <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
<article class="feature-card">
<span class="feature-icon cyan"><i class="fa-solid fa-plug" aria-hidden="true"></i></span>
<h3>Connected Data</h3>
<p>Design the interface around multiple data sources and integration workflows.</p>
<span class="feature-detail">Integration ready <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
</div>
</div>
</section>
<section id="product-tour" class="section-space showcase-section">
<div class="container">
<div class="showcase-grid">
<div class="showcase-copy">
<span class="eyebrow dark-eyebrow">Product tour</span>
<h2>Give every team a clearer view of the numbers.</h2>
<p>Use dashboards to move from raw activity to useful business context. This lightweight product-tour presentation uses an animated Unsplash image instead of a large external video asset.</p>
<ul class="check-list">
<li><i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>Monitor KPIs from one workspace</span></li>
<li><i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>Compare trends across time periods</span></li>
<li><i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>Share useful context with your team</span></li>
</ul>
<button id="tourButton" class="light-button" type="button"><i class="fa-solid fa-play" aria-hidden="true"></i> Play Visual Tour</button>
</div>
<div id="tourMedia" class="tour-media">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1400&q=85" alt="Business analytics dashboard shown on a laptop" class="tour-image">
<div class="tour-gradient"></div>
<button id="tourPlay" class="tour-play" type="button" aria-label="Play visual product tour"><i class="fa-solid fa-play" aria-hidden="true"></i></button>
<div id="tourCaption" class="tour-caption">
<span>01 / Monitor</span>
<strong>See your most important metrics in one place.</strong>
</div>
</div>
</div>
</div>
</section>
<section id="workflow" class="section-space">
<div class="container">
<div class="section-intro centered">
<span class="eyebrow">Simple workflow</span>
<h2>From connected data to useful decisions.</h2>
</div>
<div class="workflow-grid">
<article class="workflow-card">
<span class="workflow-number">01</span>
<span class="workflow-icon"><i class="fa-solid fa-link" aria-hidden="true"></i></span>
<h3>Connect your data</h3>
<p>Bring business information into a consistent analytics workspace.</p>
</article>
<article class="workflow-card">
<span class="workflow-number">02</span>
<span class="workflow-icon"><i class="fa-solid fa-table-columns" aria-hidden="true"></i></span>
<h3>Build your view</h3>
<p>Organize the KPIs, charts, and reports that matter to your team.</p>
</article>
<article class="workflow-card">
<span class="workflow-number">03</span>
<span class="workflow-icon"><i class="fa-solid fa-arrow-trend-up" aria-hidden="true"></i></span>
<h3>Track and improve</h3>
<p>Review changes over time and use the data to guide the next decision.</p>
</article>
</div>
</div>
</section>
<section class="section-space testimonials-section">
<div class="container">
<div class="section-intro centered">
<span class="eyebrow">Customer stories</span>
<h2>Built to make reporting easier to understand.</h2>
</div>
<div class="testimonial-grid">
<article class="testimonial-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>“The dashboard gives our team one place to understand growth without opening five different reports.”</p>
<div class="testimonial-person">
<span class="avatar">AM</span>
<div><strong>Alex Morgan</strong><small>Operations Lead</small></div>
</div>
</article>
<article class="testimonial-card featured-testimonial">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>“We can move from a high-level KPI to the details behind it much faster. That makes weekly reviews more useful.”</p>
<div class="testimonial-person">
<span class="avatar">JS</span>
<div><strong>Jamie Santos</strong><small>Product Manager</small></div>
</div>
</article>
<article class="testimonial-card">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>“The interface keeps important metrics visible without overwhelming people who are not analytics specialists.”</p>
<div class="testimonial-person">
<span class="avatar">RK</span>
<div><strong>Riley Kim</strong><small>Growth Director</small></div>
</div>
</article>
</div>
</div>
</section>
<section id="pricing" class="section-space pricing-section">
<div class="container">
<div class="section-intro centered">
<span class="eyebrow">Simple pricing</span>
<h2>Choose a plan that can grow with your team.</h2>
<p>Sample pricing cards are included so the template can be adapted to a real SaaS offer.</p>
</div>
<div class="pricing-grid">
<article class="pricing-card">
<span class="plan-name">Starter</span>
<p>For individuals and small projects.</p>
<div class="price"><strong>$19</strong><span>/ month</span></div>
<ul>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>3 dashboards</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>5,000 monthly events</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Basic reporting</li>
</ul>
<a href="#get-started" class="pricing-button secondary-pricing-button">Start Free</a>
</article>
<article class="pricing-card popular-plan">
<span class="popular-badge">Most Popular</span>
<span class="plan-name">Growth</span>
<p>For growing teams that need more visibility.</p>
<div class="price"><strong>$49</strong><span>/ month</span></div>
<ul>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Unlimited dashboards</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>100,000 monthly events</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Advanced reporting</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Team collaboration</li>
</ul>
<a href="#get-started" class="pricing-button">Start Free</a>
</article>
<article class="pricing-card">
<span class="plan-name">Scale</span>
<p>For established teams with larger workloads.</p>
<div class="price"><strong>$99</strong><span>/ month</span></div>
<ul>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Everything in Growth</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Higher event limits</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Advanced permissions</li>
<li><i class="fa-solid fa-check" aria-hidden="true"></i>Priority support</li>
</ul>
<a href="#get-started" class="pricing-button secondary-pricing-button">Start Free</a>
</article>
</div>
</div>
</section>
<section id="get-started" class="section-space final-cta-section">
<div class="container">
<div class="final-cta">
<div>
<span class="cta-eyebrow">Start exploring your data</span>
<h2>Make your next dashboard more useful.</h2>
<p>Start with a clean analytics workspace and adapt the template to your real SaaS product.</p>
</div>
<div class="final-cta-actions">
<a href="#home" class="cta-light-button">Start Free Trial <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
<small>No credit card required</small>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-grid">
<div>
<a class="brand footer-brand" href="#home">
<span class="brand-icon"><i class="fa-solid fa-chart-simple" aria-hidden="true"></i></span>
<span>MetricFlow</span>
</a>
<p>Clear analytics for growing teams.</p>
</div>
<div class="footer-links">
<a href="#analytics">Analytics</a>
<a href="#features">Features</a>
<a href="#workflow">How It Works</a>
<a href="#pricing">Pricing</a>
</div>
<p class="copyright">© 2026 MetricFlow. All rights reserved.</p>
</div>
</footer>
</body>
</html>:root {
--primary: #4f46e5;
--primary-dark: #4338ca;
--primary-soft: #eef2ff;
--ink: #0f172a;
--muted: #64748b;
--border: #e2e8f0;
--surface: #ffffff;
--surface-soft: #f8fafc;
--success: #059669;
--purple: #7c3aed;
--orange: #ea580c;
--pink: #db2777;
--cyan: #0891b2;
--radius: 1.25rem;
--shadow: 0 25px 65px rgba(15, 23, 42, 0.10);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--surface);
color: var(--ink);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible {
outline: 3px solid #a5b4fc;
outline-offset: 3px;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid rgba(226, 232, 240, 0.85);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px);
}
.nav-shell {
display: flex;
min-height: 74px;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--ink);
font-size: 1.2rem;
font-weight: 800;
}
.brand-icon {
display: grid;
width: 2.4rem;
height: 2.4rem;
place-items: center;
border-radius: 0.8rem;
background: var(--primary);
color: #fff;
}
.main-navigation {
display: flex;
align-items: center;
gap: 1.35rem;
}
.main-navigation > a:not(.nav-cta) {
color: #475569;
font-size: 0.9rem;
font-weight: 650;
}
.main-navigation > a:hover {
color: var(--primary);
}
.nav-cta,
.primary-button,
.pricing-button {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0 1.15rem;
border-radius: 0.8rem;
background: var(--primary);
color: #fff !important;
font-weight: 750;
transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.nav-cta:hover,
.primary-button:hover,
.pricing-button:hover {
background: var(--primary-dark);
transform: translateY(-1px);
box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);
}
.menu-toggle {
display: none;
width: 44px;
height: 44px;
border: 1px solid var(--border);
border-radius: 0.75rem;
background: #fff;
color: var(--ink);
}
.hero-section {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 9vw, 8rem) 0;
background: radial-gradient(circle at 12% 15%, #e0e7ff 0, transparent 34%), linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.hero-section::after {
content: "";
position: absolute;
top: -8rem;
right: -8rem;
width: 34rem;
height: 34rem;
border-radius: 50%;
background: rgba(79, 70, 229, 0.055);
}
.eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
padding: 0.45rem 0.75rem;
border: 1px solid #c7d2fe;
border-radius: 999px;
background: var(--primary-soft);
color: #4338ca;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.065em;
text-transform: uppercase;
}
.hero-section h1 {
position: relative;
z-index: 1;
margin: 0;
max-width: 760px;
font-size: clamp(2.65rem, 6vw, 5rem);
font-weight: 850;
letter-spacing: -0.055em;
line-height: 1.02;
}
.hero-copy {
max-width: 670px;
margin: 1.5rem 0 0;
color: #475569;
font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 2rem;
}
.primary-button,
.secondary-button {
min-height: 52px;
padding: 0 1.35rem;
}
.secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
border: 1px solid var(--border);
border-radius: 0.8rem;
background: #fff;
color: var(--ink);
font-weight: 750;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.hero-benefits {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.4rem;
margin-top: 1.5rem;
color: var(--muted);
font-size: 0.88rem;
font-weight: 600;
}
.hero-benefits i {
margin-right: 0.35rem;
color: var(--success);
}
.hero-visual {
position: relative;
z-index: 2;
min-height: 520px;
}
.hero-image {
width: 100%;
height: 520px;
object-fit: cover;
border: 8px solid rgba(255, 255, 255, 0.85);
border-radius: 1.8rem;
box-shadow: var(--shadow);
}
.floating-card {
position: absolute;
display: flex;
min-width: 205px;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border: 1px solid rgba(226, 232, 240, 0.9);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.14);
backdrop-filter: blur(14px);
}
.floating-revenue {
top: 2rem;
left: -2.5rem;
}
.floating-users {
right: -1.5rem;
bottom: 2rem;
}
.floating-card small,
.floating-card strong,
.floating-card span {
display: block;
}
.floating-card small,
.floating-card span {
color: var(--muted);
font-size: 0.75rem;
}
.floating-card strong {
font-size: 1.05rem;
}
.floating-icon,
.activity-icon {
display: grid;
flex: 0 0 auto;
width: 2.8rem;
height: 2.8rem;
place-items: center;
border-radius: 0.85rem;
background: #e0e7ff;
color: var(--primary);
}
.floating-icon.success,
.activity-icon.green {
background: #dcfce7;
color: var(--success);
}
.positive {
color: var(--success) !important;
}
.trust-section {
padding: 1.8rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
text-align: center;
}
.trust-grid strong,
.trust-grid span {
display: block;
}
.trust-grid strong {
font-size: 1.1rem;
}
.trust-grid span {
color: var(--muted);
font-size: 0.83rem;
}
.section-space {
padding: clamp(4.5rem, 8vw, 7rem) 0;
}
.analytics-section,
.pricing-section {
background: var(--surface-soft);
}
.section-intro {
max-width: 760px;
margin-bottom: 2.5rem;
}
.section-intro.centered {
margin-right: auto;
margin-left: auto;
text-align: center;
}
.section-intro h2,
.showcase-copy h2,
.final-cta h2 {
margin: 0;
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 850;
letter-spacing: -0.04em;
line-height: 1.08;
}
.section-intro p,
.showcase-copy > p {
margin: 1rem 0 0;
color: var(--muted);
font-size: 1.05rem;
}
.split-heading {
display: flex;
max-width: none;
align-items: end;
justify-content: space-between;
gap: 2rem;
}
.split-heading > div:first-child {
max-width: 700px;
}
.range-control {
display: inline-flex;
padding: 0.25rem;
border: 1px solid var(--border);
border-radius: 0.8rem;
background: #fff;
}
.range-button {
min-width: 52px;
border: 0;
border-radius: 0.6rem;
padding: 0.55rem 0.75rem;
background: transparent;
color: var(--muted);
font-weight: 700;
}
.range-button.active {
background: var(--ink);
color: #fff;
}
.dashboard-window {
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: 1.6rem;
background: #fff;
box-shadow: var(--shadow);
}
.dashboard-toolbar,
.panel-heading,
.metric-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.dashboard-toolbar {
padding: 0.25rem 0.25rem 1.25rem;
}
.dashboard-title,
.dashboard-toolbar small {
display: block;
}
.dashboard-title {
font-weight: 800;
}
.dashboard-toolbar small {
color: var(--muted);
}
.live-indicator {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.7rem;
border-radius: 999px;
background: #ecfdf5;
color: #047857;
font-size: 0.78rem;
font-weight: 750;
}
.live-indicator span {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: #10b981;
}
.metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.8rem;
}
.metric-card,
.chart-panel,
.activity-panel {
border: 1px solid var(--border);
border-radius: 1rem;
background: #fff;
}
.metric-card {
padding: 1.1rem;
}
.metric-label {
color: var(--muted);
font-size: 0.8rem;
font-weight: 650;
}
.metric-card > strong {
display: block;
margin: 0.65rem 0 0.2rem;
font-size: 1.45rem;
}
.metric-card small {
color: var(--muted);
font-size: 0.74rem;
}
.dashboard-content-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(250px, 0.8fr);
gap: 0.8rem;
margin-top: 0.8rem;
}
.chart-panel,
.activity-panel {
padding: 1.2rem;
}
.panel-heading strong,
.panel-heading small,
.panel-total span,
.panel-total strong {
display: block;
}
.panel-heading small,
.panel-total span {
color: var(--muted);
font-size: 0.76rem;
}
.panel-total {
text-align: right;
}
.chart-container {
position: relative;
height: 320px;
margin-top: 1rem;
}
.activity-list {
display: grid;
gap: 0.8rem;
margin-top: 1rem;
}
.activity-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.7rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
}
.activity-item:last-child {
border-bottom: 0;
}
.activity-item strong,
.activity-item small {
display: block;
}
.activity-item small,
.activity-item > span:last-child {
color: var(--muted);
font-size: 0.72rem;
}
.activity-icon {
width: 2.45rem;
height: 2.45rem;
font-size: 0.8rem;
}
.activity-icon.purple {
background: #f3e8ff;
color: var(--purple);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.feature-card,
.workflow-card,
.testimonial-card,
.pricing-card {
border: 1px solid var(--border);
border-radius: var(--radius);
background: #fff;
}
.feature-card {
padding: 1.5rem;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: #c7d2fe;
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}
.feature-icon,
.workflow-icon {
display: grid;
width: 3.2rem;
height: 3.2rem;
place-items: center;
margin-bottom: 1.2rem;
border-radius: 1rem;
background: #e0e7ff;
color: var(--primary);
}
.feature-icon.green {
background: #dcfce7;
color: var(--success);
}
.feature-icon.purple {
background: #f3e8ff;
color: var(--purple);
}
.feature-icon.orange {
background: #ffedd5;
color: var(--orange);
}
.feature-icon.pink {
background: #fce7f3;
color: var(--pink);
}
.feature-icon.cyan {
background: #cffafe;
color: var(--cyan);
}
.feature-card h3,
.workflow-card h3 {
font-size: 1.08rem;
font-weight: 800;
}
.feature-card p,
.workflow-card p {
color: var(--muted);
}
.feature-detail {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--primary);
font-size: 0.84rem;
font-weight: 750;
}
.showcase-section {
overflow: hidden;
background: #0f172a;
color: #fff;
}
.showcase-grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
align-items: center;
gap: 4rem;
}
.dark-eyebrow {
border-color: rgba(165, 180, 252, 0.25);
background: rgba(79, 70, 229, 0.15);
color: #c7d2fe;
}
.showcase-copy > p {
color: #cbd5e1;
}
.check-list {
display: grid;
gap: 0.8rem;
margin: 1.5rem 0 2rem;
padding: 0;
list-style: none;
}
.check-list li {
display: flex;
align-items: center;
gap: 0.65rem;
color: #e2e8f0;
}
.check-list i {
color: #34d399;
}
.light-button {
min-height: 50px;
padding: 0 1.2rem;
border: 0;
border-radius: 0.8rem;
background: #fff;
color: var(--ink);
font-weight: 750;
}
.light-button i {
margin-right: 0.45rem;
}
.tour-media {
position: relative;
overflow: hidden;
min-height: 500px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.5rem;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.tour-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.01);
}
.tour-media.is-playing .tour-image {
animation: dashboardTour 8s ease-in-out infinite alternate;
}
.tour-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.9));
}
.tour-play {
position: absolute;
top: 50%;
left: 50%;
display: grid;
width: 4.5rem;
height: 4.5rem;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--primary);
font-size: 1.2rem;
transform: translate(-50%, -50%);
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}
.tour-media.is-playing .tour-play {
opacity: 0;
pointer-events: none;
}
.tour-caption {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 1rem;
background: rgba(15, 23, 42, 0.72);
backdrop-filter: blur(12px);
}
.tour-caption span,
.tour-caption strong {
display: block;
}
.tour-caption span {
margin-bottom: 0.3rem;
color: #a5b4fc;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
@keyframes dashboardTour {
from {
transform: scale(1.02) translate3d(0, 0, 0);
}
to {
transform: scale(1.12) translate3d(-1.5%, -1%, 0);
}
}
.workflow-grid,
.testimonial-grid,
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.workflow-card {
position: relative;
padding: 1.5rem;
}
.workflow-number {
position: absolute;
top: 1.2rem;
right: 1.2rem;
color: #cbd5e1;
font-size: 1.5rem;
font-weight: 850;
}
.testimonials-section {
background: #fff;
}
.testimonial-card {
padding: 1.5rem;
}
.featured-testimonial {
border-color: #c7d2fe;
box-shadow: 0 18px 42px rgba(79, 70, 229, 0.10);
}
.stars {
margin-bottom: 1rem;
color: #f59e0b;
letter-spacing: 0.1em;
}
.testimonial-card > p {
color: #334155;
font-size: 1rem;
}
.testimonial-person {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.3rem;
}
.avatar {
display: grid;
width: 2.8rem;
height: 2.8rem;
place-items: center;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary);
font-size: 0.75rem;
font-weight: 800;
}
.testimonial-person strong,
.testimonial-person small {
display: block;
}
.testimonial-person small {
color: var(--muted);
}
.pricing-card {
position: relative;
padding: 1.7rem;
}
.popular-plan {
border: 2px solid var(--primary);
box-shadow: 0 20px 50px rgba(79, 70, 229, 0.13);
}
.popular-badge {
position: absolute;
top: -0.8rem;
left: 50%;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: var(--primary);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
transform: translateX(-50%);
}
.plan-name {
font-size: 1rem;
font-weight: 800;
}
.pricing-card > p {
color: var(--muted);
}
.price {
display: flex;
align-items: end;
gap: 0.35rem;
margin: 1.3rem 0;
}
.price strong {
font-size: 2.5rem;
line-height: 1;
}
.price span {
color: var(--muted);
}
.pricing-card ul {
display: grid;
gap: 0.7rem;
min-height: 150px;
margin: 0 0 1.5rem;
padding: 0;
list-style: none;
color: #475569;
}
.pricing-card li {
display: flex;
align-items: center;
gap: 0.6rem;
}
.pricing-card li i {
color: var(--success);
}
.pricing-button {
width: 100%;
}
.secondary-pricing-button {
border: 1px solid var(--border);
background: #fff;
color: var(--ink) !important;
}
.secondary-pricing-button:hover {
background: var(--surface-soft);
color: var(--ink) !important;
box-shadow: none;
}
.final-cta-section {
background: #fff;
}
.final-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: clamp(2rem, 5vw, 3.5rem);
border-radius: 1.75rem;
background: linear-gradient(135deg, #4338ca, #4f46e5 55%, #6366f1);
color: #fff;
box-shadow: 0 28px 60px rgba(79, 70, 229, 0.25);
}
.final-cta > div:first-child {
max-width: 760px;
}
.final-cta p {
margin-bottom: 0;
color: #e0e7ff;
}
.cta-eyebrow {
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.final-cta-actions {
flex: 0 0 auto;
text-align: center;
}
.cta-light-button {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0 1.3rem;
border-radius: 0.8rem;
background: #fff;
color: var(--ink);
font-weight: 800;
}
.final-cta-actions small {
display: block;
margin-top: 0.55rem;
color: #c7d2fe;
}
.site-footer {
padding: 3rem 0;
border-top: 1px solid var(--border);
background: var(--surface-soft);
color: var(--muted);
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr auto auto;
align-items: center;
gap: 2rem;
}
.footer-brand {
margin-bottom: 0.7rem;
}
.footer-grid p {
margin: 0;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.footer-links a {
color: #475569;
font-weight: 650;
}
.copyright {
text-align: right;
}
@media (max-width: 991.98px) {
.menu-toggle {
display: inline-grid;
place-items: center;
}
.main-navigation {
position: absolute;
top: calc(100% + 1px);
right: 0;
left: 0;
display: none;
align-items: stretch;
flex-direction: column;
gap: 0;
padding: 1rem max(1rem, calc((100vw - 960px) / 2));
border-bottom: 1px solid var(--border);
background: #fff;
box-shadow: 0 20px 30px rgba(15, 23, 42, 0.08);
}
.main-navigation.is-open {
display: flex;
}
.main-navigation a {
padding: 0.8rem;
}
.nav-cta {
margin-top: 0.5rem;
}
.hero-visual {
min-height: 430px;
}
.hero-image {
height: 430px;
}
.floating-revenue {
left: 1rem;
}
.floating-users {
right: 1rem;
}
.metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-content-grid,
.showcase-grid {
grid-template-columns: 1fr;
}
.feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tour-media {
min-height: 420px;
}
.footer-grid {
grid-template-columns: 1fr;
}
.copyright {
text-align: left;
}
}
@media (max-width: 767.98px) {
.trust-grid,
.workflow-grid,
.testimonial-grid,
.pricing-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-heading {
align-items: flex-start;
flex-direction: column;
}
.dashboard-content-grid {
grid-template-columns: 1fr;
}
.chart-container {
height: 270px;
}
.workflow-grid,
.testimonial-grid,
.pricing-grid {
grid-template-columns: 1fr;
}
.final-cta {
align-items: flex-start;
flex-direction: column;
}
.final-cta-actions {
width: 100%;
text-align: left;
}
}
@media (max-width: 575.98px) {
.hero-section {
padding-top: 3.8rem;
}
.hero-actions {
flex-direction: column;
}
.primary-button,
.secondary-button {
width: 100%;
}
.hero-visual {
min-height: 390px;
}
.hero-image {
height: 390px;
}
.floating-card {
min-width: 0;
max-width: calc(100% - 2rem);
padding: 0.8rem;
}
.floating-users {
right: auto;
left: 1rem;
}
.trust-grid,
.metric-grid,
.feature-grid {
grid-template-columns: 1fr;
}
.tour-media {
min-height: 350px;
}
.footer-links {
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}document.addEventListener('DOMContentLoaded', function () {
var menuToggle = document.getElementById('menuToggle');
var navigation = document.getElementById('mainNavigation');
if (menuToggle && navigation) {
menuToggle.addEventListener('click', function () {
var isOpen = navigation.classList.toggle('is-open');
menuToggle.setAttribute('aria-expanded', String(isOpen));
menuToggle.innerHTML = isOpen
? '<i class="fa-solid fa-xmark" aria-hidden="true"></i>'
: '<i class="fa-solid fa-bars" aria-hidden="true"></i>';
});
navigation.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function () {
navigation.classList.remove('is-open');
menuToggle.setAttribute('aria-expanded', 'false');
menuToggle.innerHTML = '<i class="fa-solid fa-bars" aria-hidden="true"></i>';
});
});
}
var analyticsData = {
7: {
label: 'Last 7 days',
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
values: [2850, 3180, 3020, 3560, 3390, 4020, 4660],
revenue: '$24,680',
customers: '1,842',
conversion: '6.8%',
average: '$72.40'
},
30: {
label: 'Last 30 days',
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
values: [21400, 23950, 26680, 29120],
revenue: '$101,150',
customers: '6,934',
conversion: '7.2%',
average: '$74.10'
},
90: {
label: 'Last 90 days',
labels: ['Month 1', 'Month 2', 'Month 3'],
values: [86400, 94150, 107800],
revenue: '$288,350',
customers: '18,620',
conversion: '7.5%',
average: '$76.80'
}
};
var chartInstance = null;
var chartCanvas = document.getElementById('analyticsChart');
function formatCurrency(value) {
return '$' + Number(value).toLocaleString('en-US');
}
function renderChart(range) {
if (!window.Chart || !chartCanvas) {
return;
}
var data = analyticsData[range];
var context = chartCanvas.getContext('2d');
if (chartInstance) {
chartInstance.destroy();
}
chartInstance = new Chart(context, {
type: 'line',
data: {
labels: data.labels,
datasets: [{
label: 'Revenue',
data: data.values,
borderColor: '#4f46e5',
backgroundColor: 'rgba(79, 70, 229, 0.10)',
borderWidth: 3,
pointRadius: 4,
pointHoverRadius: 6,
pointBackgroundColor: '#ffffff',
pointBorderColor: '#4f46e5',
pointBorderWidth: 2,
fill: true,
tension: 0.38
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function (context) {
return ' Revenue: ' + formatCurrency(context.parsed.y);
}
}
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: '#64748b'
}
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(148, 163, 184, 0.16)'
},
ticks: {
color: '#64748b',
callback: function (value) {
return '$' + Number(value).toLocaleString('en-US');
}
}
}
}
}
});
}
function updateAnalytics(range) {
var data = analyticsData[range];
var rangeLabel = document.getElementById('rangeLabel');
var revenueValue = document.getElementById('revenueValue');
var customerValue = document.getElementById('customerValue');
var conversionValue = document.getElementById('conversionValue');
var orderValue = document.getElementById('orderValue');
var chartTotal = document.getElementById('chartTotal');
if (rangeLabel) rangeLabel.textContent = data.label;
if (revenueValue) revenueValue.textContent = data.revenue;
if (customerValue) customerValue.textContent = data.customers;
if (conversionValue) conversionValue.textContent = data.conversion;
if (orderValue) orderValue.textContent = data.average;
if (chartTotal) chartTotal.textContent = data.revenue;
renderChart(range);
}
document.querySelectorAll('.range-button').forEach(function (button) {
button.addEventListener('click', function () {
document.querySelectorAll('.range-button').forEach(function (item) {
item.classList.remove('active');
});
button.classList.add('active');
updateAnalytics(button.getAttribute('data-range'));
});
});
updateAnalytics('7');
var tourMedia = document.getElementById('tourMedia');
var tourButton = document.getElementById('tourButton');
var tourPlay = document.getElementById('tourPlay');
var tourCaption = document.getElementById('tourCaption');
var tourInterval = null;
var tourSteps = [
{
label: '01 / Monitor',
text: 'See your most important metrics in one place.'
},
{
label: '02 / Compare',
text: 'Compare performance across useful time periods.'
},
{
label: '03 / Improve',
text: 'Use trends and context to guide the next decision.'
}
];
function updateTourCaption(index) {
if (!tourCaption) {
return;
}
tourCaption.innerHTML = '<span>' + tourSteps[index].label + '</span><strong>' + tourSteps[index].text + '</strong>';
}
function playTour() {
if (!tourMedia) {
return;
}
if (tourInterval) {
window.clearInterval(tourInterval);
}
tourMedia.classList.add('is-playing');
var currentStep = 0;
updateTourCaption(currentStep);
tourInterval = window.setInterval(function () {
currentStep = (currentStep + 1) % tourSteps.length;
updateTourCaption(currentStep);
}, 2600);
}
if (tourButton) {
tourButton.addEventListener('click', playTour);
}
if (tourPlay) {
tourPlay.addEventListener('click', playTour);
}
});