NeuralForge AI platform 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>AI Platform | Hero Section Collection</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="orbital-ai">
  <header class="site-header">
    <nav class="nav-shell" aria-label="Primary navigation">
      <a class="brand" href="../index.html" aria-label="NeuralForge home"><span>02</span>NeuralForge</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="#agents">Agents</a><a href="#models">Models</a><a href="#safety">Safety</a>
      </div>
    </nav>
  </header>

  <main>
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-copy">
        <p class="eyebrow">AI Platform</p>
        <h1 id="hero-title">Build AI agents that understand your business context.</h1>
        <p class="subtitle">Deploy retrieval, automation, and evaluation pipelines from one secure platform designed for production AI teams.</p>
        <div class="hero-actions" aria-label="Hero calls to action">
          <a class="primary-cta" href="#demo">Build Agent <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> View Models</a>
        </div>
        <div class="badge-row" aria-label="Highlights"><span>Agents</span><span>Models</span><span>Safety</span></div>
        <dl class="stats">
          <div><dt>8.2B tokens</dt><dd data-count="8.2">8.2B tokens</dd></div>
          <div><dt>42ms median</dt><dd>42ms median</dd></div>
        </dl>
      </div>
      <div class="hero-art orbital-ai" aria-label="AI Platform illustration" role="img">
      <div class="art-orbit"></div>
      <div class="art-card card-a"><span>02</span><strong>Artificial Intelligence</strong></div>
      <div class="art-card card-b"><small>8.2B tokens</small><b>42ms median</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="AI Platform demo information">
      <article>
        <strong>NeuralForge</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="NeuralForge navigation preview sections">
      <article id="agents"><span>01</span><strong>Agents</strong><p>NeuralForge includes a polished agents section placeholder ready for real artificial intelligence content.</p></article><article id="models"><span>02</span><strong>Models</strong><p>NeuralForge includes a polished models section placeholder ready for real artificial intelligence content.</p></article><article id="safety"><span>03</span><strong>Safety</strong><p>NeuralForge includes a polished safety section placeholder ready for real artificial intelligence 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("NeuralForge: " + 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:#7c3aed;--accent-2:#22d3ee;--bg:#050816;--ink:#eef2ff;--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)}
body{background:#050816;color:#eef2ff}.nav-shell{border-color:rgba(255,255,255,.12)}.hero{grid-template-columns:.9fr 1.1fr}.hero-art{border-radius:50%;aspect-ratio:1;background:radial-gradient(circle,rgba(124,58,237,.45),transparent 62%)}.art-orbit{border-radius:50%;animation:spin 12s linear infinite}
@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}}