Stackfront
Landing Page · html

Nimbus — SaaS Landing Page

A conversion-focused landing page for SaaS and startup products. Hero with an animated product mockup, feature grid, three-step explainer, pricing with a monthly/annual toggle, testimonial, and an accessible FAQ. Built to be edited, not fought with. Every colour comes from two CSS variables, so you can rebrand the entire page — dark mode included — in about thirty seconds. No build step, no dependencies, no CDN scripts: open index.html and it runs. Dark mode follows the visitor's system setting and remembers their choice. Fully responsive down to 320px, with a real mobile menu rather than a squashed navbar. Keyboard accessible throughout, with visible focus states and reduced-motion support. No image assets to license or replace — the hero visual, icons and chart are pure CSS and inline SVG, so nothing loads slowly and nothing goes missing. Includes a commented README covering setup, recolouring, and wiring the signup form to your own API.

$24.00

Live Preview

<!DOCTYPE html>
<html lang="en" data-theme="auto">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Nimbus — Analytics that answers the question you actually asked</title>
    <meta
      name="description"
      content="Nimbus turns product events into plain answers. No query language, no dashboards nobody opens."
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <a class="skip-link" href="#main">Skip to content</a>

    <header class="site-header" id="siteHeader">
      <div class="container header-inner">
        <a class="brand" href="#" aria-label="Nimbus home">
          <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
            <defs>
              <linearGradient id="brandGrad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="var(--accent)" />
                <stop offset="100%" stop-color="var(--accent-2)" />
              </linearGradient>
            </defs>
            <rect width="32" height="32" rx="9" fill="url(#brandGrad)" />
            <path
              d="M9 21V13.5l6.5 4.5V11l7 5"
              fill="none"
              stroke="#fff"
              stroke-width="2.2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <span>Nimbus</span>
        </a>

        <nav class="nav" id="primaryNav" aria-label="Primary">
          <a href="#features">Features</a>
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </nav>

        <div class="header-actions">
          <button
            class="icon-button"
            id="themeToggle"
            type="button"
            aria-label="Switch colour theme"
          >
            <svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="12" cy="12" r="4.2" />
              <path
                d="M12 2.5v2.2M12 19.3v2.2M4.2 12H2M22 12h-2.2M5.6 5.6 4 4M20 20l-1.6-1.6M18.4 5.6 20 4M4 20l1.6-1.6"
              />
            </svg>
            <svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M20 14.2A8.2 8.2 0 1 1 9.8 4a6.6 6.6 0 0 0 10.2 10.2Z" />
            </svg>
          </button>

          <a class="btn btn-ghost hide-sm" href="#">Sign in</a>
          <a class="btn btn-primary" href="#pricing">Start free</a>

          <button
            class="icon-button menu-toggle"
            id="menuToggle"
            type="button"
            aria-expanded="false"
            aria-controls="primaryNav"
            aria-label="Open menu"
          >
            <span class="menu-bar"></span>
            <span class="menu-bar"></span>
            <span class="menu-bar"></span>
          </button>
        </div>
      </div>
    </header>

    <main id="main">
      <!-- Hero ------------------------------------------------------------ -->
      <section class="hero">
        <div class="hero-glow" aria-hidden="true"></div>
        <div class="container hero-inner">
          <div class="hero-copy reveal">
            <p class="eyebrow">
              <span class="pip"></span> Now with natural-language queries
            </p>
            <h1>
              Analytics that answers the question
              <span class="grad-text">you actually asked</span>
            </h1>
            <p class="lede">
              Stop maintaining dashboards nobody opens. Ask Nimbus in plain
              English and get the number, the trend, and the reason behind it.
            </p>

            <form class="signup" id="signupForm" novalidate>
              <label class="sr-only" for="email">Work email</label>
              <input
                id="email"
                name="email"
                type="email"
                placeholder="you@company.com"
                autocomplete="email"
                required
              />
              <button class="btn btn-primary" type="submit">
                Start free trial
              </button>
              <p class="form-note" id="formNote" role="status"></p>
            </form>

            <ul class="hero-points">
              <li>14-day trial</li>
              <li>No card required</li>
              <li>SOC 2 Type II</li>
            </ul>
          </div>

          <!-- Product mockup: pure CSS/SVG, no image assets to license. -->
          <div class="hero-visual reveal" aria-hidden="true">
            <div class="panel">
              <div class="panel-bar">
                <span></span><span></span><span></span>
                <div class="panel-query">Why did signups drop last week?</div>
              </div>
              <div class="panel-body">
                <div class="answer-card">
                  <p class="answer-label">Answer</p>
                  <p class="answer-text">
                    Signups fell <strong>18%</strong> after the pricing page
                    change on Tuesday. Mobile conversion drove the drop.
                  </p>
                </div>
                <svg class="chart" viewBox="0 0 320 120" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.35" />
                      <stop offset="100%" stop-color="var(--accent)" stop-opacity="0" />
                    </linearGradient>
                  </defs>
                  <path
                    class="chart-fill"
                    d="M0 88 L40 74 L80 78 L120 56 L160 60 L200 40 L240 46 L280 82 L320 96 L320 120 L0 120 Z"
                    fill="url(#fillGrad)"
                  />
                  <path
                    class="chart-line"
                    d="M0 88 L40 74 L80 78 L120 56 L160 60 L200 40 L240 46 L280 82 L320 96"
                  />
                </svg>
                <div class="stat-row">
                  <div><span class="stat-k">Signups</span><span class="stat-v">1,284</span></div>
                  <div><span class="stat-k">Change</span><span class="stat-v down">−18%</span></div>
                  <div><span class="stat-k">Source</span><span class="stat-v">Mobile</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="container logos reveal">
          <p>Trusted by product teams at</p>
          <div class="logo-row">
            <span>Northwind</span><span>Lumen</span><span>Fieldpost</span>
            <span>Cobalt</span><span>Verano</span>
          </div>
        </div>
      </section>

      <!-- Features -------------------------------------------------------- -->
      <section class="section" id="features">
        <div class="container">
          <div class="section-head reveal">
            <h2>Built for the questions that come up in standup</h2>
            <p>
              Not another BI tool that needs a data team to operate. Nimbus is
              for the people who have to answer for the numbers.
            </p>
          </div>

          <div class="grid-3">
            <article class="card reveal">
              <div class="card-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <circle cx="11" cy="11" r="6.5" />
                  <path d="m20 20-4.2-4.2" />
                </svg>
              </div>
              <h3>Ask in plain English</h3>
              <p>
                “Which channel brought the users who stayed?” No SQL, no query
                builder, no waiting on an analyst.
              </p>
            </article>

            <article class="card reveal">
              <div class="card-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M3 17.5 9 11l4 3.5L21 6" />
                  <path d="M15 6h6v6" />
                </svg>
              </div>
              <h3>Explains the why</h3>
              <p>
                Every answer comes with the segment, the change point, and the
                contributing cause — not just a line going down.
              </p>
            </article>

            <article class="card reveal">
              <div class="card-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 3 4 6.5v5c0 4.6 3.3 8.4 8 9.5 4.7-1.1 8-4.9 8-9.5v-5Z" />
                  <path d="m9 12 2.2 2.2L15.5 10" />
                </svg>
              </div>
              <h3>Governed by default</h3>
              <p>
                Row-level permissions, audit trails, and SSO on every plan.
                Security review passes without a spreadsheet exchange.
              </p>
            </article>

            <article class="card reveal">
              <div class="card-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M13 2 4.5 13H11l-1 9 8.5-11H12l1-9Z" />
                </svg>
              </div>
              <h3>Answers in under a second</h3>
              <p>
                A columnar store tuned for event data. Ten billion rows still
                returns before you look away.
              </p>
            </article>

            <article class="card reveal">
              <div class="card-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <rect x="3" y="4" width="18" height="16" rx="3" />
                  <path d="M3 9h18M8 4v16" />
                </svg>
              </div>
              <h3>Connects to what you have</h3>
              <p>
                Postgres, BigQuery, Snowflake, Segment, or a plain webhook.
                First answer inside ten minutes.
              </p>
            </article>

            <article class="card reveal">
              <div class="card-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <circle cx="9" cy="8" r="3.2" />
                  <path d="M3.5 20a5.5 5.5 0 0 1 11 0M16 5.2a3.2 3.2 0 0 1 0 5.9M18.5 20a5.4 5.4 0 0 0-2.4-4.4" />
                </svg>
              </div>
              <h3>Shareable, not siloed</h3>
              <p>
                Send an answer as a link. It stays live, so nobody argues over a
                screenshot from three weeks ago.
              </p>
            </article>
          </div>
        </div>
      </section>

      <!-- How it works ---------------------------------------------------- -->
      <section class="section section-alt" id="how">
        <div class="container">
          <div class="section-head reveal">
            <h2>Three steps, one afternoon</h2>
            <p>No warehouse migration, no six-week onboarding.</p>
          </div>

          <ol class="steps">
            <li class="reveal">
              <span class="step-n">1</span>
              <h3>Connect a source</h3>
              <p>Point Nimbus at your database or stream events to our endpoint.</p>
            </li>
            <li class="reveal">
              <span class="step-n">2</span>
              <h3>Confirm the model</h3>
              <p>We infer entities and events. You correct anything we got wrong.</p>
            </li>
            <li class="reveal">
              <span class="step-n">3</span>
              <h3>Ask anything</h3>
              <p>Type a question. Share the answer. Set an alert if it moves.</p>
            </li>
          </ol>
        </div>
      </section>

      <!-- Pricing --------------------------------------------------------- -->
      <section class="section" id="pricing">
        <div class="container">
          <div class="section-head reveal">
            <h2>Pricing that stops surprising you</h2>
            <p>Priced per seat, not per event. Your bill does not spike because you launched.</p>
          </div>

          <div class="billing-toggle reveal">
            <span id="labelMonthly" class="is-active">Monthly</span>
            <button
              class="switch"
              id="billingSwitch"
              type="button"
              role="switch"
              aria-checked="false"
              aria-labelledby="labelMonthly labelAnnual"
            >
              <span class="switch-thumb"></span>
            </button>
            <span id="labelAnnual">Annual <em>save 20%</em></span>
          </div>

          <div class="grid-3 pricing-grid">
            <article class="card price-card reveal">
              <h3>Starter</h3>
              <p class="price">
                <span class="currency">$</span><span class="amount" data-monthly="19" data-annual="15">19</span>
                <span class="period">/ seat / mo</span>
              </p>
              <p class="price-note">For a small team getting the basics right.</p>
              <ul class="ticks">
                <li>Up to 5 seats</li>
                <li>2 data sources</li>
                <li>90-day history</li>
                <li>Email support</li>
              </ul>
              <a class="btn btn-outline btn-block" href="#">Start free</a>
            </article>

            <article class="card price-card featured reveal">
              <span class="badge">Most popular</span>
              <h3>Team</h3>
              <p class="price">
                <span class="currency">$</span><span class="amount" data-monthly="49" data-annual="39">49</span>
                <span class="period">/ seat / mo</span>
              </p>
              <p class="price-note">For teams who answer to numbers weekly.</p>
              <ul class="ticks">
                <li>Unlimited seats</li>
                <li>Unlimited sources</li>
                <li>2-year history</li>
                <li>SSO and audit log</li>
                <li>Shared alerting</li>
              </ul>
              <a class="btn btn-primary btn-block" href="#">Start free</a>
            </article>

            <article class="card price-card reveal">
              <h3>Scale</h3>
              <p class="price">
                <span class="currency">$</span><span class="amount" data-monthly="99" data-annual="79">99</span>
                <span class="period">/ seat / mo</span>
              </p>
              <p class="price-note">For regulated teams and bigger estates.</p>
              <ul class="ticks">
                <li>Everything in Team</li>
                <li>Row-level permissions</li>
                <li>Unlimited history</li>
                <li>Dedicated support</li>
                <li>99.9% uptime SLA</li>
              </ul>
              <a class="btn btn-outline btn-block" href="#">Talk to sales</a>
            </article>
          </div>
        </div>
      </section>

      <!-- Testimonial ----------------------------------------------------- -->
      <section class="section section-alt">
        <div class="container">
          <figure class="quote reveal">
            <blockquote>
              We cancelled two dashboards and a standing meeting. People just ask
              Nimbus now and paste the answer into the channel.
            </blockquote>
            <figcaption>
              <span class="avatar" aria-hidden="true">RA</span>
              <span>
                <strong>Rae Aldridge</strong>
                <em>Head of Product, Fieldpost</em>
              </span>
            </figcaption>
          </figure>
        </div>
      </section>

      <!-- FAQ ------------------------------------------------------------- -->
      <section class="section" id="faq">
        <div class="container narrow">
          <div class="section-head reveal">
            <h2>Questions we get asked</h2>
          </div>

          <!-- <details> is keyboard accessible and works without JavaScript. -->
          <div class="faq">
            <details class="reveal" open>
              <summary>Do I need a data warehouse?</summary>
              <p>
                No. Nimbus reads directly from Postgres or MySQL, and can ingest
                events over a webhook. If you already have a warehouse, connect
                that instead.
              </p>
            </details>
            <details class="reveal">
              <summary>How is this different from a dashboard tool?</summary>
              <p>
                Dashboards answer questions you thought of in advance. Nimbus
                answers the one you have now, and explains what moved.
              </p>
            </details>
            <details class="reveal">
              <summary>What happens when the trial ends?</summary>
              <p>
                Your data stays put and the workspace becomes read-only. Nothing
                is deleted for 30 days, and no card is charged automatically.
              </p>
            </details>
            <details class="reveal">
              <summary>Can we self-host?</summary>
              <p>
                Yes, on the Scale plan. We ship a Helm chart and a Docker Compose
                setup for single-node deployments.
              </p>
            </details>
          </div>
        </div>
      </section>

      <!-- CTA ------------------------------------------------------------- -->
      <section class="cta">
        <div class="container cta-inner reveal">
          <h2>Ask your first question in ten minutes</h2>
          <p>Free for 14 days. No card, no sales call, no implementation project.</p>
          <a class="btn btn-primary btn-lg" href="#">Start free trial</a>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container footer-inner">
        <div class="footer-brand">
          <a class="brand" href="#" aria-label="Nimbus home">
            <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
              <rect width="32" height="32" rx="9" fill="url(#brandGrad)" />
              <path
                d="M9 21V13.5l6.5 4.5V11l7 5"
                fill="none"
                stroke="#fff"
                stroke-width="2.2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <span>Nimbus</span>
          </a>
          <p>Analytics that answers the question you actually asked.</p>
        </div>

        <nav aria-label="Product">
          <h4>Product</h4>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#how">How it works</a>
        </nav>
        <nav aria-label="Company">
          <h4>Company</h4>
          <a href="#">About</a>
          <a href="#">Careers</a>
          <a href="#">Blog</a>
        </nav>
        <nav aria-label="Legal">
          <h4>Legal</h4>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Security</a>
        </nav>
      </div>
      <div class="container footer-base">
        <p>© <span id="year">2026</span> Nimbus Analytics. All rights reserved.</p>
        <p>Template by Stackfront.</p>
      </div>
    </footer>

    <script src="js/main.js"></script>
  </body>
</html>
Open on CodeSandboxOpen Sandbox