NovaStack modern SaaS startup hero
PicartWeb/hero-section-collection@87193fd823cb · 3 code file(s)

Licence notice — required by the licence; keep it with this code:

MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

--- index.html ---
<!DOCTYPE html>
<!--
MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern SaaS Startup | Hero Section Collection</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="split-dashboard">
  <header class="site-header">
    <nav class="nav-shell" aria-label="Primary navigation">
      <a class="brand" href="../index.html" aria-label="NovaStack home"><span>01</span>NovaStack</a>
      <button class="menu-toggle" type="button" aria-label="Open navigation menu" aria-controls="navLinks" aria-expanded="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
      <div class="nav-links" id="navLinks">
        <a href="#product">Product</a><a href="#teams">Teams</a><a href="#analytics">Analytics</a>
      </div>
    </nav>
  </header>

  <main>
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-copy">
        <p class="eyebrow">Modern SaaS Startup</p>
        <h1 id="hero-title">Ship customer workflows in one calm operating system.</h1>
        <p class="subtitle">Unify projects, support, billing, and insights with a workspace your whole team will actually enjoy using.</p>
        <div class="hero-actions" aria-label="Hero calls to action">
          <a class="primary-cta" href="#demo">Start Free <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          <a class="secondary-cta" href="#learn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7-11-7Z"/></svg> Watch Demo</a>
        </div>
        <div class="badge-row" aria-label="Highlights"><span>Product</span><span>Teams</span><span>Analytics</span></div>
        <dl class="stats">
          <div><dt>12k teams</dt><dd data-count="12">12k teams</dd></div>
          <div><dt>99.99% uptime</dt><dd>99.99% uptime</dd></div>
        </dl>
      </div>
      <div class="hero-art split-dashboard" aria-label="Modern SaaS Startup illustration" role="img">
      <div class="art-orbit"></div>
      <div class="art-card card-a"><span>01</span><strong>SaaS</strong></div>
      <div class="art-card card-b"><small>12k teams</small><b>99.99% uptime</b></div>
      <div class="art-shape shape-one"></div>
      <div class="art-shape shape-two"></div>
      <div class="art-lines"><i></i><i></i><i></i><i></i></div>
    </div>
      <a class="scroll-indicator" href="#demo" aria-label="Scroll to demo section"><span></span>Scroll</a>
    </section>

    <section class="demo-strip" id="demo" aria-label="Modern SaaS Startup demo information">
      <article>
        <strong>NovaStack</strong>
        <p>This standalone hero includes responsive navigation, working CTAs, animated artwork, badges, stats, and a polished mobile layout.</p>
      </article>
      <article id="learn">
        <strong>Production Ready</strong>
        <p>Copy this folder into a project and customize the brand, palette, CTAs, and illustration directly in the HTML and CSS.</p>
      </article>
    </section>

    <section class="nav-targets" aria-label="NovaStack navigation preview sections">
      <article id="product"><span>01</span><strong>Product</strong><p>NovaStack includes a polished product section placeholder ready for real saas content.</p></article><article id="teams"><span>02</span><strong>Teams</strong><p>NovaStack includes a polished teams section placeholder ready for real saas content.</p></article><article id="analytics"><span>03</span><strong>Analytics</strong><p>NovaStack includes a polished analytics section placeholder ready for real saas content.</p></article>
    </section>
  </main>

  <p class="live-status" role="status" aria-live="polite"></p>
  <script src="script.js"></script>
</body>
</html>

--- script.js ---
/*!
MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
const body = document.body;
const menuToggle = document.querySelector(".menu-toggle");
const navLinks = document.getElementById("navLinks");
const statusBox = document.querySelector(".live-status");
const ctas = document.querySelectorAll(".primary-cta, .secondary-cta");

function closeMenu() {
  body.classList.remove("menu-open");
  menuToggle?.setAttribute("aria-expanded", "false");
}

function showStatus(message) {
  if (!statusBox) return;
  statusBox.textContent = message;
  statusBox.classList.add("show");
  clearTimeout(showStatus.timer);
  showStatus.timer = setTimeout(() => statusBox.classList.remove("show"), 1800);
}

// Mobile navigation keeps aria-expanded synchronized for assistive technology.
menuToggle?.addEventListener("click", () => {
  const isOpen = body.classList.toggle("menu-open");
  menuToggle.setAttribute("aria-expanded", String(isOpen));
});

navLinks?.addEventListener("click", (event) => {
  if (event.target.closest("a")) closeMenu();
});

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") closeMenu();
});

ctas.forEach((cta) => {
  cta.addEventListener("click", () => {
    showStatus("NovaStack: " + cta.textContent.trim() + " selected.");
  });
});

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) entry.target.classList.add("in-view");
  });
}, { threshold: 0.25 });

document.querySelectorAll(".hero-art, .stats div, .demo-strip article").forEach((item) => observer.observe(item));

--- style.css ---
/*!
MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/* Theme variables make each standalone hero easy to rebrand. */
:root{--accent:#4f46e5;--accent-2:#06b6d4;--bg:#f8fafc;--ink:#111827;--muted:color-mix(in srgb,var(--ink) 64%,transparent);--surface:color-mix(in srgb,var(--bg) 84%,white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 30%),var(--bg);color:var(--ink);overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;padding:18px clamp(16px,4vw,64px)}
.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1240px;margin:auto;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:white}
.nav-links{display:flex;align-items:center;gap:8px}.nav-links a{padding:10px 13px;border-radius:999px;color:var(--muted);font-weight:800;font-size:.9rem;transition:.22s ease}.nav-links a:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.menu-toggle{display:none;border:0;width:42px;height:42px;border-radius:50%;background:var(--accent);color:white}
.hero{position:relative;min-height:100vh;display:grid;align-items:center;gap:clamp(28px,5vw,72px);padding:132px clamp(18px,5vw,74px) 76px;max-width:1440px;margin:auto}
.hero-copy{position:relative;z-index:2;animation:rise .65s ease both}.eyebrow{margin:0 0 14px;color:var(--accent);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
h1{font-size:clamp(2.65rem,7vw,6.6rem);line-height:.92;letter-spacing:0;margin:0 0 22px;max-width:850px}
.subtitle{font-size:clamp(1rem,2vw,1.22rem);line-height:1.8;color:var(--muted);max-width:690px;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:22px}.primary-cta,.secondary-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:14px 18px;border-radius:999px;font-weight:900;transition:.22s ease}.primary-cta{background:var(--accent);color:white;box-shadow:0 16px 40px color-mix(in srgb,var(--accent) 28%,transparent)}.secondary-cta{border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.primary-cta:hover,.secondary-cta:hover,.nav-links a:hover{transform:translateY(-2px)}
a:focus-visible,button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 62%,white);outline-offset:4px}
.badge-row{display:flex;flex-wrap:wrap;gap:10px}.badge-row span{padding:8px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:900;font-size:.78rem}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0 0}.stats div{min-width:138px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:20px;background:color-mix(in srgb,var(--bg) 70%,transparent)}dt{color:var(--muted);font-size:.78rem}dd{margin:4px 0 0;font-weight:950;font-size:1.2rem}
/* CSS-only artwork keeps the template dependency-free and copy-paste ready. */
.hero-art{position:relative;min-height:470px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--bg)),color-mix(in srgb,var(--accent-2) 16%,var(--bg)));box-shadow:0 30px 100px color-mix(in srgb,var(--accent) 18%,transparent);overflow:hidden;animation:floatIn .75s ease both}
.art-orbit{position:absolute;inset:12%;border:2px dashed color-mix(in srgb,var(--accent) 42%,transparent)}
.art-card{position:absolute;z-index:3;padding:18px;min-width:170px;background:color-mix(in srgb,var(--bg) 84%,white);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.12)}.art-card span{display:block;color:var(--accent);font-weight:950}.art-card strong,.art-card b{display:block;font-size:1.35rem}.art-card small{color:var(--muted)}
.card-a{left:10%;top:18%}.card-b{right:10%;bottom:16%}
.art-shape{position:absolute;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.86}.shape-one{width:34%;height:34%;left:38%;top:30%;border-radius:34px}.shape-two{width:28%;height:26%;right:12%;top:14%;border-radius:999px;opacity:.42}
.art-lines{position:absolute;left:9%;right:9%;bottom:10%;display:grid;gap:10px}.art-lines i{height:12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 20%,white);animation:pulse 1.8s ease-in-out infinite}.art-lines i:nth-child(2){width:72%;animation-delay:.15s}.art-lines i:nth-child(3){width:54%;animation-delay:.3s}.art-lines i:nth-child(4){width:86%;animation-delay:.45s}
.scroll-indicator{position:absolute;left:clamp(18px,5vw,74px);bottom:22px;display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-weight:800}.scroll-indicator span{width:22px;height:36px;border:2px solid currentColor;border-radius:999px;position:relative}.scroll-indicator span:after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:999px;background:currentColor;transform:translateX(-50%);animation:scrollDot 1.4s ease-in-out infinite}
.demo-strip,.nav-targets{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1180px;margin:0 auto 56px;padding:0 clamp(18px,5vw,74px)}.demo-strip article,.nav-targets article{padding:24px;border-radius:24px;background:color-mix(in srgb,var(--bg) 78%,white);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}.demo-strip p,.nav-targets p{color:var(--muted);line-height:1.7}.nav-targets{grid-template-columns:repeat(3,minmax(0,1fr));scroll-margin-top:110px}.nav-targets article{scroll-margin-top:110px}.nav-targets span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:white;font-weight:950;margin-bottom:12px}.live-status{position:fixed;left:50%;bottom:18px;z-index:30;transform:translateX(-50%) translateY(90px);padding:12px 16px;border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:0 20px 50px rgba(0,0,0,.22);transition:.3s ease}.live-status.show{transform:translateX(-50%) translateY(0)}
.hero{grid-template-columns:1.05fr .95fr}.hero-art{border-radius:38px}.art-card{border-radius:24px}.card-a{left:8%;top:12%}.card-b{right:8%;bottom:12%}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes floatIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{50%{opacity:.42;transform:scaleX(.92)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes equalize{50%{height:35%}}@keyframes scrollDot{50%{transform:translate(-50%,10px);opacity:.35}}
@media (max-width:980px){.menu-toggle{display:grid;place-items:center}.nav-links{position:fixed;inset:82px 16px auto 16px;display:grid;gap:8px;padding:16px;border-radius:24px;background:color-mix(in srgb,var(--bg) 92%,white);box-shadow:0 24px 80px rgba(0,0,0,.22);transform:translateY(-18px);opacity:0;pointer-events:none;transition:.25s ease}.menu-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}.hero,.hero-copy,.hero-art{grid-template-columns:1fr!important;order:initial!important;text-align:left}.hero{padding-top:118px;min-height:auto}.hero-art{min-height:360px;clip-path:none!important;transform:none!important}.law-columns .hero-copy{border-left:0;padding-left:0}.demo-strip,.nav-targets{grid-template-columns:1fr}}
@media (max-width:640px){.site-header{padding:12px}.brand{font-size:.95rem}.hero{padding-left:16px;padding-right:16px}.hero-actions a{width:100%}.stats{display:grid;grid-template-columns:1fr 1fr}.hero-art{min-height:310px}.art-card{min-width:138px;padding:14px}.scroll-indicator{display:none}.demo-strip,.nav-targets{padding-left:16px;padding-right:16px}h1{font-size:2.55rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}