Section

SaaS Hero

SaaS hero with a floating metric mock and reassurance line.

Section
Vanilla
HTML
MIT

Preview

Live section

Preview not available

No interactive preview for this section.

Install it with the CLI below, or read the implementation on this page.

No dependencies Responsive · Light/dark · Focus-visible

Install

Add to your project

terminal

npx devsnips add Vanilla/Sections/Hero/hero-saas

registry path: Vanilla/Sections/Hero/hero-saas

Source

Implementation

code.html

<!-- Snippet Name: SaaS Hero | Family: Hero | Description: SaaS hero with a floating metric mock and reassurance line. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SaaS Hero | DevSnips</title>
  <meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: hero-saas. Copy, customize, ship.">
  <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;800;900&display=swap" rel="stylesheet">
  <style>  /* ---- Neo-Brutalist design tokens ---- */
  :root{
    --bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
    --border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
    --accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
    --radius:6px; --radius-lg:10px;
    --shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
    --ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
    --container:1200px; --gutter:20px;
    --fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
    --fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
    --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
      --border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
  }
  /* ---- base layout + components ---- */
  *{box-sizing:border-box}
  .nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
    line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
  .nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  .nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
  .nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
  .nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
  .nb p{margin:0} .nb a{color:inherit}
  .nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    border:2px solid var(--border);background:var(--surface);padding:6px 12px;
    border-radius:999px;box-shadow:var(--shadow)}
  .nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
  .nb .muted{color:var(--muted)}
  .nb .center{text-align:center;margin-inline:auto}
  .nb .grid{display:grid;gap:var(--gutter)}
  .nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
    text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
    padding:14px 22px;background:var(--primary);color:var(--primary-fg);
    box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
  .nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
  .nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
  .nb .btn.outline{background:var(--surface);color:var(--foreground)}
  .nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
  .nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
  .nb .btn.accent{background:var(--accent);color:#0a0a0a}
  .nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
  .nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
  .nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
    padding:4px 10px;border-radius:999px;background:var(--surface)}
  .nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
  .nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
    padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
  .nb .skip:focus{left:8px}
  .nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
  @media (prefers-reduced-motion:reduce){
    .nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
      transition-duration:.001ms!important;animation-iteration-count:1!important}
  }

  .hsaas .grid{grid-template-columns:1fr;gap:42px;align-items:center}
  .hsaas h1{margin-block:18px}.hsaas .lead{margin-bottom:26px;max-width:48ch}
  .hsaas .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hsaas .no-card{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
  .hsaas .mock{position:relative;border:3px solid var(--border);border-radius:var(--radius-lg);
    background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden}
  .hsaas .mock .top{display:flex;gap:8px;padding:14px 16px;border-bottom:3px solid var(--border);align-items:center}
  .hsaas .mock .top b{width:12px;height:12px;border-radius:50%;background:var(--border)}
  .hsaas .mock .body{padding:18px;display:grid;gap:12px}
  .hsaas .mock .row{height:42px;border-radius:6px;border:2px solid var(--border);display:flex;align-items:center;padding:0 14px;font-weight:700;font-size:.8rem}
  .hsaas .mock .row.fill{background:var(--accent)}.hsaas .mock .row.p{background:var(--primary);color:#fff;border-color:var(--primary)}
  .hsaas .float{position:absolute;right:-12px;top:60px;background:var(--lime);border:3px solid var(--border);
    box-shadow:var(--shadow);padding:10px 14px;border-radius:8px;font-weight:800;font-size:.8rem}
  @media(min-width:900px){.hsaas .grid{grid-template-columns:1fr 1fr;gap:56px}}</style>
</head>
<body class="nb">
  <a class="skip" href="#main">Skip to content</a>

  <section class="hsaas" aria-labelledby="hsaas-title">
    <div class="container">
      <div class="grid">
        <div>
          <span class="eyebrow"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3v18h18M7 14l3-4 4 3 5-7'/></svg> For SaaS teams</span>
          <h1 id="hsaas-title">Metrics that move<br>your MRR north.</h1>
          <p class="lead">One dashboard for churn, expansion, activation and revenue. Stop stitching spreadsheets — start deciding.</p>
          <div class="cta">
            <a class="btn" href="#"><svg class="is" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M5 12h14M13 6l6 6-6 6'/></svg> Start free trial</a>
            <a class="btn outline" href="#">Book a demo</a>
          </div>
          <p class="no-card"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M20 6L9 17l-5-5'/></svg> No credit card · 14 days · cancel anytime</p>
        </div>
        <div class="mock" role="img" aria-label="SaaS analytics dashboard">
          <div class="top"><b></b><b></b><b></b></div>
          <div class="body">
            <div class="row p">MRR <span style="margin-left:auto">$48,210 ▲ 12%</span></div>
            <div class="row fill">Churn · 1.4%</div>
            <div class="row">Activation · 64%</div>
            <div class="row">Net revenue retention · 118%</div>
          </div>
          <span class="float">+12% MRR</span>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

# SaaS Hero

SaaS hero with a floating metric mock and reassurance line.

**Technology:** Vanilla HTML/CSS/JS  
**Category:** sections / hero  
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)  
**Responsive:** Mobile-first (320px → 1920px)  
**Dark mode:** via `prefers-color-scheme`  

**Tags:** hero, saas, dashboard, mrr  
**Features:** light/dark, responsive, floating badge

## Usage

1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand.

119 lines UTF-8 · LF · Spaces: 2

AI-ready

Available to your agent.

This section is reachable through the DevSnips CLI, MCP server and Skills integrations — one registry, one resource path.

Resource path

devsnips://sections/hero/hero-saas

Continue browsing

View all

Live section

Add to your project

Implementation

Available to your agent.

Related sections