<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="NovaPOS modern point-of-sale and retail analytics platform">
<title>NovaPOS - Smarter Point of Sale</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top pos-navbar">
<div class="container">
<a class="navbar-brand d-flex align-items-center gap-2 fw-bold" href="#home">
<span class="brand-mark"><i class="fa-solid fa-cash-register" aria-hidden="true"></i></span>
NovaPOS
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#analytics">Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li class="nav-item"><a class="nav-link" href="#product-tour">Product Tour</a></li>
<li class="nav-item ms-lg-2"><a class="btn btn-outline-dark" href="#analytics">View Dashboard</a></li>
<li class="nav-item"><a class="btn btn-primary pos-primary-btn" href="#get-started">Start Free Trial</a></li>
</ul>
</div>
</div>
</nav>
<main>
<section id="home" class="pos-hero">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<div class="hero-copy">
<span class="section-eyebrow"><i class="fa-solid fa-bolt me-2" aria-hidden="true"></i>Built for modern commerce</span>
<h1>Run your business with a smarter point of sale.</h1>
<p class="hero-lead">Manage checkout, inventory, staff, customers, and real-time sales analytics from one simple workspace.</p>
<div class="d-flex flex-column flex-sm-row gap-3 hero-actions">
<a class="btn btn-primary btn-lg pos-primary-btn" href="#get-started">Start Free Trial <i class="fa-solid fa-arrow-right ms-2" aria-hidden="true"></i></a>
<a class="btn btn-light btn-lg hero-secondary-btn" href="#product-tour"><i class="fa-solid fa-circle-play me-2" aria-hidden="true"></i>See Product Tour</a>
</div>
<div class="hero-benefits">
<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>Fast setup</span>
<span><i class="fa-solid fa-circle-check" aria-hidden="true"></i>Cancel anytime</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="hero-media">
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1200&q=85" alt="Customer completing a modern point-of-sale transaction" class="hero-image">
<div class="floating-stat floating-stat-top">
<span class="floating-icon"><i class="fa-solid fa-arrow-trend-up" aria-hidden="true"></i></span>
<div>
<small>Today's revenue</small>
<strong>$8,420</strong>
<span class="positive-value">+12.8%</span>
</div>
</div>
<div class="floating-stat floating-stat-bottom">
<span class="floating-icon warning"><i class="fa-solid fa-box" aria-hidden="true"></i></span>
<div>
<small>Inventory</small>
<strong>1,284 items</strong>
<span>8 low-stock alerts</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="trust-strip" aria-label="Business benefits">
<div class="container">
<div class="row g-4 text-center">
<div class="col-6 col-lg-3">
<strong>99.9%</strong>
<span>Platform uptime</span>
</div>
<div class="col-6 col-lg-3">
<strong>24/7</strong>
<span>Business visibility</span>
</div>
<div class="col-6 col-lg-3">
<strong>Real-time</strong>
<span>Inventory tracking</span>
</div>
<div class="col-6 col-lg-3">
<strong>Multi-device</strong>
<span>Responsive workspace</span>
</div>
</div>
</div>
</section>
<section id="features" class="section-space">
<div class="container">
<div class="section-heading text-center mx-auto">
<span class="section-eyebrow">Everything in one place</span>
<h2>Tools that keep your business moving</h2>
<p>From checkout to reporting, NovaPOS gives your team practical tools without unnecessary complexity.</p>
</div>
<div class="row g-4 mt-2">
<div class="col-md-6 col-xl-3">
<article class="feature-card h-100">
<div class="feature-icon"><i class="fa-solid fa-credit-card" aria-hidden="true"></i></div>
<h3>Fast Checkout</h3>
<p>Process transactions quickly with a clean workflow designed for busy counters.</p>
<span class="feature-link">Payments & receipts <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
</div>
<div class="col-md-6 col-xl-3">
<article class="feature-card h-100">
<div class="feature-icon"><i class="fa-solid fa-boxes-stacked" aria-hidden="true"></i></div>
<h3>Smart Inventory</h3>
<p>Track quantities, identify low stock, and keep important products available.</p>
<span class="feature-link">Stock monitoring <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
</div>
<div class="col-md-6 col-xl-3">
<article class="feature-card h-100">
<div class="feature-icon"><i class="fa-solid fa-chart-line" aria-hidden="true"></i></div>
<h3>Sales Analytics</h3>
<p>Understand revenue, order volume, trends, and performance from a clear dashboard.</p>
<span class="feature-link">Real-time insights <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
</div>
<div class="col-md-6 col-xl-3">
<article class="feature-card h-100">
<div class="feature-icon"><i class="fa-solid fa-user-group" aria-hidden="true"></i></div>
<h3>Team Management</h3>
<p>Track staff activity and keep permissions organized across your operation.</p>
<span class="feature-link">Roles & performance <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
</article>
</div>
</div>
</div>
</section>
<section id="analytics" class="section-space analytics-section">
<div class="container">
<div class="row align-items-end g-4 mb-4">
<div class="col-lg-7">
<span class="section-eyebrow">Live business intelligence</span>
<h2 class="mb-2">See what is happening at a glance</h2>
<p class="section-copy mb-0">Monitor the numbers that matter without digging through complicated reports.</p>
</div>
<div class="col-lg-5 text-lg-end">
<div class="btn-group chart-range" role="group" aria-label="Chart date range">
<button class="btn range-btn active" type="button" data-range="7">7D</button>
<button class="btn range-btn" type="button" data-range="30">30D</button>
<button class="btn range-btn" type="button" data-range="90">90D</button>
</div>
</div>
</div>
<div class="dashboard-shell">
<div class="dashboard-topbar">
<div>
<strong>Sales Overview</strong>
<span id="rangeLabel">Last 7 days</span>
</div>
<span class="live-badge"><span class="live-dot"></span>Live</span>
</div>
<div class="row g-3 metric-grid">
<div class="col-sm-6 col-xl-3">
<article class="metric-card">
<div class="metric-heading"><span>Revenue</span><i class="fa-solid fa-dollar-sign" aria-hidden="true"></i></div>
<strong id="revenueMetric">$12,840</strong>
<small class="positive-value"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 12.4% vs previous period</small>
</article>
</div>
<div class="col-sm-6 col-xl-3">
<article class="metric-card">
<div class="metric-heading"><span>Orders</span><i class="fa-solid fa-receipt" aria-hidden="true"></i></div>
<strong id="ordersMetric">486</strong>
<small class="positive-value"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 8.1% vs previous period</small>
</article>
</div>
<div class="col-sm-6 col-xl-3">
<article class="metric-card">
<div class="metric-heading"><span>Average order</span><i class="fa-solid fa-basket-shopping" aria-hidden="true"></i></div>
<strong id="averageMetric">$26.42</strong>
<small>Across completed sales</small>
</article>
</div>
<div class="col-sm-6 col-xl-3">
<article class="metric-card">
<div class="metric-heading"><span>Low stock</span><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i></div>
<strong>8</strong>
<small>Products need attention</small>
</article>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<div>
<strong>Net sales</strong>
<small>Revenue performance over time</small>
</div>
<div class="chart-total">
<span>Total</span>
<strong id="chartTotal">$12,840</strong>
</div>
</div>
<div class="chart-wrapper">
<canvas id="salesChart" role="img" aria-label="Line chart showing sample sales revenue over the selected period"></canvas>
</div>
</div>
</div>
</div>
</section>
<section id="how-it-works" class="section-space">
<div class="container">
<div class="section-heading text-center mx-auto">
<span class="section-eyebrow">Simple workflow</span>
<h2>Start selling in three steps</h2>
<p>Keep setup straightforward so your team can focus on customers instead of software configuration.</p>
</div>
<div class="row g-4 mt-3">
<div class="col-md-4">
<article class="step-card">
<span class="step-number">01</span>
<div class="step-icon"><i class="fa-solid fa-store" aria-hidden="true"></i></div>
<h3>Set up your store</h3>
<p>Add your business details, products, categories, pricing, and team members.</p>
</article>
</div>
<div class="col-md-4">
<article class="step-card">
<span class="step-number">02</span>
<div class="step-icon"><i class="fa-solid fa-cash-register" aria-hidden="true"></i></div>
<h3>Start taking orders</h3>
<p>Use the checkout workspace to manage orders and keep transactions organized.</p>
</article>
</div>
<div class="col-md-4">
<article class="step-card">
<span class="step-number">03</span>
<div class="step-icon"><i class="fa-solid fa-chart-pie" aria-hidden="true"></i></div>
<h3>Track performance</h3>
<p>Review sales, inventory, and operational insights from your dashboard.</p>
</article>
</div>
</div>
</div>
</section>
<section id="product-tour" class="section-space product-tour-section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-5">
<span class="section-eyebrow">Product tour</span>
<h2>See a better checkout experience in action</h2>
<p class="section-copy">Explore a visual walkthrough of how a modern POS can simplify everyday operations. The media panel uses an animated Unsplash photograph to create a lightweight video-style presentation without loading a large video file.</p>
<ul class="tour-list">
<li><i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>Fast order entry and checkout</span></li>
<li><i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>Automatic inventory updates</span></li>
<li><i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>Clear daily sales reporting</span></li>
</ul>
<button id="tourButton" class="btn btn-dark btn-lg" type="button"><i class="fa-solid fa-play me-2" aria-hidden="true"></i>Play Visual Tour</button>
</div>
<div class="col-lg-7">
<div id="tourMedia" class="tour-media">
<img src="https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=1400&q=85" alt="Modern payment and retail transaction environment" class="tour-image">
<div class="tour-overlay"></div>
<button id="mediaPlayButton" class="media-play" type="button" aria-label="Play product tour">
<i class="fa-solid fa-play" aria-hidden="true"></i>
</button>
<div id="tourCaption" class="tour-caption">
<span>01 / Checkout</span>
<strong>Turn purchases into completed orders quickly.</strong>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="get-started" class="section-space cta-section">
<div class="container">
<div class="cta-panel">
<div class="row align-items-center g-4">
<div class="col-lg-8">
<span class="cta-label">Ready when you are</span>
<h2>Give your business a clearer view of every sale.</h2>
<p>Start with a streamlined POS workspace built around everyday retail operations.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="#home" class="btn btn-light btn-lg">Start Free Trial <i class="fa-solid fa-arrow-right ms-2" aria-hidden="true"></i></a>
<small class="d-block mt-2">No credit card required</small>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="pos-footer">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-md-6">
<a class="footer-brand" href="#home"><span class="brand-mark"><i class="fa-solid fa-cash-register" aria-hidden="true"></i></span>NovaPOS</a>
<p class="mb-0 mt-2">Smarter tools for everyday commerce.</p>
</div>
<div class="col-md-6 text-md-end">
<div class="footer-links">
<a href="#features">Features</a>
<a href="#analytics">Analytics</a>
<a href="#product-tour">Product Tour</a>
</div>
<p class="mb-0 mt-2">© 2026 NovaPOS. All rights reserved.</p>
</div>
</div>
</div>
</footer>
</body>
</html>:root {
--pos-primary: #2563eb;
--pos-primary-dark: #1d4ed8;
--pos-ink: #0f172a;
--pos-muted: #64748b;
--pos-border: #e2e8f0;
--pos-surface: #ffffff;
--pos-soft: #f8fafc;
--pos-success: #059669;
--pos-warning: #d97706;
--pos-radius: 1.25rem;
--pos-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--pos-surface);
color: var(--pos-ink);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
.pos-navbar {
border-bottom: 1px solid rgba(226, 232, 240, 0.85);
box-shadow: 0 5px 25px rgba(15, 23, 42, 0.04);
}
.navbar-brand,
.footer-brand {
color: var(--pos-ink);
font-size: 1.2rem;
}
.brand-mark {
display: inline-grid;
place-items: center;
width: 2.35rem;
height: 2.35rem;
border-radius: 0.75rem;
background: var(--pos-primary);
color: #fff;
}
.nav-link {
color: #475569;
font-weight: 600;
}
.nav-link:hover,
.nav-link:focus {
color: var(--pos-primary);
}
.btn {
border-radius: 0.75rem;
font-weight: 700;
}
.pos-primary-btn {
border-color: var(--pos-primary);
background: var(--pos-primary);
}
.pos-primary-btn:hover,
.pos-primary-btn:focus {
border-color: var(--pos-primary-dark);
background: var(--pos-primary-dark);
}
.pos-hero {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 9vw, 7.5rem) 0;
background: radial-gradient(circle at 10% 10%, #dbeafe 0, transparent 35%), linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.pos-hero::after {
content: "";
position: absolute;
top: 3rem;
right: -10rem;
width: 28rem;
height: 28rem;
border-radius: 50%;
background: rgba(37, 99, 235, 0.06);
filter: blur(10px);
pointer-events: none;
}
.hero-copy {
position: relative;
z-index: 2;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: 1rem;
padding: 0.45rem 0.75rem;
border: 1px solid #bfdbfe;
border-radius: 999px;
background: #eff6ff;
color: #1d4ed8;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.pos-hero h1 {
max-width: 720px;
margin: 0;
font-size: clamp(2.6rem, 6vw, 4.8rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1.03;
}
.hero-lead {
max-width: 640px;
margin: 1.5rem 0 0;
color: #475569;
font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.hero-actions {
margin-top: 2rem;
}
.hero-secondary-btn {
border: 1px solid var(--pos-border);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.hero-benefits {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
margin-top: 1.5rem;
color: #475569;
font-size: 0.9rem;
font-weight: 600;
}
.hero-benefits i {
margin-right: 0.35rem;
color: var(--pos-success);
}
.hero-media {
position: relative;
z-index: 2;
min-height: 510px;
}
.hero-image {
width: 100%;
height: 510px;
object-fit: cover;
border-radius: 1.75rem;
box-shadow: var(--pos-shadow);
}
.floating-stat {
position: absolute;
display: flex;
align-items: center;
gap: 0.8rem;
min-width: 190px;
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 35px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(12px);
}
.floating-stat-top {
top: 2rem;
left: -2.5rem;
}
.floating-stat-bottom {
right: -1.5rem;
bottom: 2rem;
}
.floating-stat small,
.floating-stat span {
display: block;
color: var(--pos-muted);
font-size: 0.75rem;
}
.floating-stat strong {
display: block;
font-size: 1rem;
}
.floating-icon {
display: grid;
place-items: center;
flex: 0 0 2.75rem;
height: 2.75rem;
border-radius: 0.8rem;
background: #dcfce7;
color: var(--pos-success);
}
.floating-icon.warning {
background: #fff7ed;
color: var(--pos-warning);
}
.positive-value {
color: var(--pos-success) !important;
}
.trust-strip {
padding: 1.6rem 0;
border-top: 1px solid var(--pos-border);
border-bottom: 1px solid var(--pos-border);
background: #fff;
}
.trust-strip strong,
.trust-strip span {
display: block;
}
.trust-strip strong {
color: var(--pos-ink);
font-size: 1.05rem;
}
.trust-strip span {
margin-top: 0.15rem;
color: var(--pos-muted);
font-size: 0.85rem;
}
.section-space {
padding: clamp(4.5rem, 8vw, 7rem) 0;
}
.section-heading {
max-width: 720px;
}
.section-heading h2,
.analytics-section h2,
.product-tour-section h2,
.cta-panel h2 {
font-size: clamp(2rem, 4vw, 3.1rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.1;
}
.section-heading p,
.section-copy {
color: var(--pos-muted);
font-size: 1.05rem;
}
.feature-card {
padding: 1.5rem;
border: 1px solid var(--pos-border);
border-radius: var(--pos-radius);
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: #bfdbfe;
box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}
.feature-icon,
.step-icon {
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
margin-bottom: 1.25rem;
border-radius: 1rem;
background: #eff6ff;
color: var(--pos-primary);
font-size: 1.2rem;
}
.feature-card h3,
.step-card h3 {
font-size: 1.1rem;
font-weight: 800;
}
.feature-card p,
.step-card p {
color: var(--pos-muted);
}
.feature-link {
display: inline-flex;
gap: 0.4rem;
align-items: center;
color: var(--pos-primary);
font-size: 0.85rem;
font-weight: 700;
}
.analytics-section {
background: var(--pos-soft);
}
.chart-range {
padding: 0.25rem;
border: 1px solid var(--pos-border);
border-radius: 0.8rem;
background: #fff;
}
.range-btn {
border: 0;
color: var(--pos-muted);
}
.range-btn.active {
background: var(--pos-ink);
color: #fff;
}
.dashboard-shell {
overflow: hidden;
padding: 1.25rem;
border: 1px solid var(--pos-border);
border-radius: 1.5rem;
background: #fff;
box-shadow: var(--pos-shadow);
}
.dashboard-topbar,
.chart-header,
.metric-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.dashboard-topbar {
padding: 0.25rem 0.25rem 1.25rem;
}
.dashboard-topbar strong,
.dashboard-topbar span {
display: block;
}
.dashboard-topbar span {
color: var(--pos-muted);
font-size: 0.8rem;
}
.live-badge {
display: inline-flex !important;
align-items: center;
gap: 0.45rem;
padding: 0.4rem 0.7rem;
border-radius: 999px;
background: #ecfdf5;
color: #047857 !important;
font-weight: 700;
}
.live-dot {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: #10b981;
}
.metric-grid {
margin-bottom: 1rem;
}
.metric-card {
height: 100%;
padding: 1.1rem;
border: 1px solid var(--pos-border);
border-radius: 1rem;
background: #fff;
}
.metric-heading {
color: var(--pos-muted);
font-size: 0.8rem;
font-weight: 600;
}
.metric-card > strong {
display: block;
margin: 0.65rem 0 0.2rem;
font-size: 1.45rem;
}
.metric-card small {
color: var(--pos-muted);
font-size: 0.75rem;
}
.chart-card {
padding: 1.25rem;
border: 1px solid var(--pos-border);
border-radius: 1rem;
background: #fff;
}
.chart-header {
margin-bottom: 1rem;
}
.chart-header strong,
.chart-header small,
.chart-total span,
.chart-total strong {
display: block;
}
.chart-header small,
.chart-total span {
color: var(--pos-muted);
font-size: 0.78rem;
}
.chart-total {
text-align: right;
}
.chart-wrapper {
position: relative;
height: 330px;
}
.step-card {
position: relative;
height: 100%;
padding: 1.5rem;
border: 1px solid var(--pos-border);
border-radius: var(--pos-radius);
background: #fff;
}
.step-number {
position: absolute;
top: 1.25rem;
right: 1.25rem;
color: #cbd5e1;
font-size: 1.6rem;
font-weight: 800;
}
.product-tour-section {
overflow: hidden;
background: #0f172a;
color: #fff;
}
.product-tour-section .section-copy {
color: #cbd5e1;
}
.tour-list {
display: grid;
gap: 0.75rem;
margin: 1.5rem 0 2rem;
padding: 0;
list-style: none;
}
.tour-list li {
display: flex;
gap: 0.7rem;
align-items: center;
color: #e2e8f0;
}
.tour-list i {
color: #34d399;
}
.tour-media {
position: relative;
overflow: hidden;
min-height: 470px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.5rem;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}
.tour-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.01);
}
.tour-media.is-playing .tour-image {
animation: posKenBurns 8s ease-in-out infinite alternate;
}
.tour-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.85));
}
.media-play {
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--pos-primary);
font-size: 1.25rem;
transform: translate(-50%, -50%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.tour-media.is-playing .media-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.16);
border-radius: 1rem;
background: rgba(15, 23, 42, 0.66);
backdrop-filter: blur(10px);
}
.tour-caption span,
.tour-caption strong {
display: block;
}
.tour-caption span {
margin-bottom: 0.3rem;
color: #93c5fd;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@keyframes posKenBurns {
from {
transform: scale(1.02) translate3d(0, 0, 0);
}
to {
transform: scale(1.12) translate3d(-1%, -1%, 0);
}
}
.cta-section {
background: #fff;
}
.cta-panel {
padding: clamp(2rem, 5vw, 3.5rem);
border-radius: 1.75rem;
background: linear-gradient(135deg, #1d4ed8, #2563eb 60%, #3b82f6);
color: #fff;
box-shadow: 0 25px 55px rgba(37, 99, 235, 0.25);
}
.cta-panel h2 {
max-width: 800px;
margin: 0.6rem 0;
}
.cta-panel p,
.cta-panel small {
color: #dbeafe;
}
.cta-label {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pos-footer {
padding: 3rem 0;
border-top: 1px solid var(--pos-border);
background: var(--pos-soft);
color: var(--pos-muted);
font-size: 0.9rem;
}
.footer-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-weight: 800;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 1.25rem;
}
.footer-links a {
color: #475569;
font-weight: 600;
}
.footer-links a:hover {
color: var(--pos-primary);
}
@media (max-width: 991.98px) {
.navbar-collapse {
padding: 1rem 0;
}
.navbar-nav .btn {
width: 100%;
margin-top: 0.4rem;
}
.hero-media {
min-height: 430px;
}
.hero-image {
height: 430px;
}
.floating-stat-top {
left: 1rem;
}
.floating-stat-bottom {
right: 1rem;
}
.tour-media {
min-height: 400px;
}
}
@media (max-width: 767.98px) {
.pos-hero {
padding-top: 4rem;
}
.hero-media {
min-height: 390px;
}
.hero-image {
height: 390px;
}
.floating-stat {
min-width: 165px;
padding: 0.8rem;
}
.floating-stat-top {
top: 1rem;
}
.floating-stat-bottom {
bottom: 1rem;
}
.chart-header {
align-items: flex-start;
}
.chart-wrapper {
height: 270px;
}
.footer-links {
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.floating-stat {
min-width: auto;
max-width: calc(100% - 2rem);
}
.floating-stat-bottom {
left: 1rem;
right: auto;
}
.tour-media {
min-height: 340px;
}
}
@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 chartInstance = null;
var chartCanvas = document.getElementById('salesChart');
var chartData = {
7: {
label: 'Last 7 days',
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
values: [1420, 1680, 1540, 1910, 1760, 2130, 2400],
revenue: '$12,840',
orders: '486',
average: '$26.42'
},
30: {
label: 'Last 30 days',
labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
values: [12400, 13950, 15120, 16680],
revenue: '$58,150',
orders: '2,184',
average: '$26.63'
},
90: {
label: 'Last 90 days',
labels: ['Month 1', 'Month 2', 'Month 3'],
values: [48350, 52780, 58150],
revenue: '$159,280',
orders: '5,924',
average: '$26.89'
}
};
function formatCurrency(value) {
return '$' + Number(value).toLocaleString('en-US');
}
function createChart(range) {
if (!window.Chart || !chartCanvas) {
return;
}
var data = chartData[range];
var context = chartCanvas.getContext('2d');
if (chartInstance) {
chartInstance.destroy();
}
chartInstance = new Chart(context, {
type: 'line',
data: {
labels: data.labels,
datasets: [{
label: 'Net Sales',
data: data.values,
borderColor: '#2563eb',
backgroundColor: 'rgba(37, 99, 235, 0.10)',
borderWidth: 3,
pointRadius: 4,
pointHoverRadius: 6,
pointBackgroundColor: '#ffffff',
pointBorderColor: '#2563eb',
pointBorderWidth: 2,
fill: true,
tension: 0.35
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function (context) {
return ' Sales: ' + 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 updateDashboard(range) {
var data = chartData[range];
var rangeLabel = document.getElementById('rangeLabel');
var revenueMetric = document.getElementById('revenueMetric');
var ordersMetric = document.getElementById('ordersMetric');
var averageMetric = document.getElementById('averageMetric');
var chartTotal = document.getElementById('chartTotal');
if (rangeLabel) rangeLabel.textContent = data.label;
if (revenueMetric) revenueMetric.textContent = data.revenue;
if (ordersMetric) ordersMetric.textContent = data.orders;
if (averageMetric) averageMetric.textContent = data.average;
if (chartTotal) chartTotal.textContent = data.revenue;
createChart(range);
}
document.querySelectorAll('.range-btn').forEach(function (button) {
button.addEventListener('click', function () {
document.querySelectorAll('.range-btn').forEach(function (item) {
item.classList.remove('active');
});
button.classList.add('active');
updateDashboard(button.getAttribute('data-range'));
});
});
updateDashboard('7');
var tourMedia = document.getElementById('tourMedia');
var tourButton = document.getElementById('tourButton');
var mediaPlayButton = document.getElementById('mediaPlayButton');
var tourCaption = document.getElementById('tourCaption');
var tourTimer = null;
var tourSteps = [
{
label: '01 / Checkout',
text: 'Turn purchases into completed orders quickly.'
},
{
label: '02 / Inventory',
text: 'Keep stock levels synchronized as products are sold.'
},
{
label: '03 / Analytics',
text: 'Review revenue and performance from one dashboard.'
}
];
function setTourCaption(index) {
if (!tourCaption) return;
tourCaption.innerHTML = '<span>' + tourSteps[index].label + '</span><strong>' + tourSteps[index].text + '</strong>';
}
function playTour() {
if (!tourMedia) return;
if (tourTimer) {
window.clearInterval(tourTimer);
tourTimer = null;
}
tourMedia.classList.add('is-playing');
var currentStep = 0;
setTourCaption(currentStep);
tourTimer = window.setInterval(function () {
currentStep = (currentStep + 1) % tourSteps.length;
setTourCaption(currentStep);
}, 2600);
}
if (tourButton) {
tourButton.addEventListener('click', playTour);
}
if (mediaPlayButton) {
mediaPlayButton.addEventListener('click', playTour);
}
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
link.addEventListener('click', function () {
var navbarCollapse = document.getElementById('mainNav');
if (
navbarCollapse &&
navbarCollapse.classList.contains('show') &&
window.bootstrap &&
window.bootstrap.Collapse
) {
window.bootstrap.Collapse.getOrCreateInstance(navbarCollapse).hide();
}
});
});
});