Webleb - UI Elements - Minha ofertinha, pode clonar aí espertão

HTML

CSS

JS

/* ============================================================
   NÚCLEO — GROWTH SPRINT 90D
   Frontend completo em JavaScript puro
   ============================================================ */

(() => {
  "use strict";

/* ==========================================================
     CONFIGURAÇÃO DA OFERTA
     ========================================================== */

const APP = {
    brand: "NÚCLEO",

offer: {
      eyebrow: "PLANO DE CRESCIMENTO · 90 DIAS",
      title: "Menos improviso. Mais crescimento.",
      subtitle:
        "Um plano enxuto para posicionar sua marca, ativar aquisição e criar uma operação comercial que continue funcionando depois dos primeiros 90 dias.",

name: "Growth Sprint 90D",
      price: "R$ 4.900",
      priceNote: "investimento inicial · vagas limitadas",

cta: "Quero construir meu plano",

benefits: [
        "Plano de ação executivo e priorizado",
        "Oferta e posicionamento refinados",
        "Funil e aquisição com foco em resultado",
        "Dashboard com KPIs essenciais"
      ]
    },

pillars: [
      {
        number: "01",
        title: "POSICIONAMENTO",
        description:
          "Clareza de marca, ICP, proposta de valor e narrativa comercial."
      },
      {
        number: "02",
        title: "AQUISIÇÃO",
        description:
          "Canais prioritários, conteúdo, mídia e parcerias para gerar demanda."
      },
      {
        number: "03",
        title: "OFERTA",
        description:
          "Arquitetura de oferta, diferenciação, prova e percepção de valor."
      },
      {
        number: "04",
        title: "CONVERSÃO",
        description:
          "Funil, landing page, CTA e processo comercial sem fricção."
      },
      {
        number: "05",
        title: "RETENÇÃO",
        description:
          "Onboarding, experiência e mecanismos para aumentar recorrência."
      },
      {
        number: "06",
        title: "MÉTRICAS",
        description:
          "Painel executivo com KPIs que conectam marketing a receita."
      }
    ],

partners: [
      "Definir ICP, metas e tese de crescimento",
      "Mapear parceiros com acesso ao público-alvo",
      "Criar ofertas e ações de co-marketing",
      "Construir provas e ativos de autoridade",
      "Ativar canais com maior potencial de demanda",
      "Medir contribuição de cada parceiro"
    ],

metrics: [
      ["01", "Posicionamento", "Mensagem clara e diferencial percebido"],
      ["02", "Aquisição", "Canais e campanhas com foco em ROI"],
      ["03", "Conversão", "Oferta, jornada e CTA mais eficientes"],
      ["04", "Retenção", "Experiência que aumenta LTV"],
      ["05", "Dados", "Indicadores para decidir sem achismo"],
      ["06", "Operação", "Rotina comercial simples e escalável"]
    ],

roadmap: [
      ["01–15", "Diagnóstico", "Mapa de cenário, ICP, oferta e prioridades."],
      ["16–30", "Posicionamento", "Mensagem, diferenciais e ativos de conversão."],
      ["31–45", "Aquisição", "Canais, conteúdo e primeira onda de campanhas."],
      ["46–60", "Conversão", "Otimização de funil, CTA e processo comercial."],
      ["61–75", "Parcerias", "Ativações estratégicas e geração de demanda."],
      ["76–90", "Escala", "Dashboard, aprendizados e próximos 90 dias."]
    ]
  };

/* ==========================================================
     CSS
     ========================================================== */

const CSS = `
    :root {
      --bg: #07090d;
      --bg2: #0b0f14;
      --panel: #0d1218;
      --panel2: #111820;

--line: rgba(255,255,255,.075);

--text: #f4f7fa;
      --muted: #8b96a7;
      --muted2: #657182;

--cyan: #22e6dc;
      --green: #7cffb2;

--max: 1180px;
      --radius: 22px;
    }

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

html {
      scroll-behavior: smooth;
    }

body {
      background:
        radial-gradient(
          circle at 80% 0%,
          rgba(34,230,220,.11),
          transparent 30%
        ),
        radial-gradient(
          circle at 10% 40%,
          rgba(124,255,178,.045),
          transparent 25%
        ),
        var(--bg);

color: var(--text);

font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

-webkit-font-smoothing: antialiased;
    }

button,
    input {
      font: inherit;
    }

button {
      cursor: pointer;
    }

a {
      color: inherit;
      text-decoration: none;
    }

.container {
      width: min(var(--max), calc(100% - 40px));
      margin: auto;
    }

/* ========================================================
       NAVBAR
       ======================================================== */

.nav {
      position: sticky;
      top: 0;
      z-index: 100;

backdrop-filter: blur(18px);

background:
        rgba(7,9,13,.78);

border-bottom: 1px solid var(--line);
    }

.nav-inner {
      height: 68px;

display: flex;
      align-items: center;
      justify-content: space-between;
    }

.brand {
      font-size: 17px;
      font-weight: 950;
      letter-spacing: -.06em;
    }

.brand span {
      color: var(--cyan);
    }

.nav-links {
      display: flex;
      gap: 28px;

color: var(--muted);
      font-size: 12px;
    }

.nav-links a {
      transition: .2s ease;
    }

.nav-links a:hover {
      color: white;
    }

.nav-button {
      padding: 10px 15px;

background: #10161d;

color: #dfe6ee;

border:
        1px solid
        var(--line);

border-radius: 11px;

font-size: 11px;
      font-weight: 850;

transition: .2s ease;
    }

.nav-button:hover {
      color: var(--cyan);
      border-color: rgba(34,230,220,.35);
    }

/* ========================================================
       HERO
       ======================================================== */

.hero {
      min-height: 82vh;

display: flex;
      align-items: center;

padding:
        90px
        0
        70px;
    }

.hero-grid {
      display: grid;

grid-template-columns:
        1.15fr
        .85fr;

gap: 70px;

align-items: center;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;

padding:
        7px
        11px;

color: var(--cyan);

background:
        rgba(34,230,220,.055);

border:
        1px solid
        rgba(34,230,220,.18);

border-radius: 999px;

font-size: 10px;
      font-weight: 900;

letter-spacing: .14em;
    }

.dot {
      width: 7px;
      height: 7px;

border-radius: 50%;

background: var(--cyan);

box-shadow:
        0 0 18px
        var(--cyan);
    }

.hero h1 {
      margin:
        23px
        0
        20px;

max-width: 760px;

font-size:
        clamp(
          50px,
          7vw,
          88px
        );

line-height: .94;

letter-spacing: -.07em;
    }

.gradient {
      color: transparent;

background:
        linear-gradient(
          100deg,
          white 20%,
          #7ceee9 100%
        );

-webkit-background-clip: text;
      background-clip: text;
    }

.hero-copy {
      max-width: 650px;

color: var(--muted);

font-size: 17px;

line-height: 1.7;

margin-bottom: 30px;
    }

.actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

.btn {
      display: inline-flex;

align-items: center;
      justify-content: center;

gap: 9px;

padding:
        14px
        18px;

border-radius: 13px;

border: 0;

font-size: 12px;
      font-weight: 900;

transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
    }

.btn-primary {
      color: #04100f;

background:
        linear-gradient(
          135deg,
          #43fff3,
          #78ffb0
        );

box-shadow:
        0 12px 40px
        rgba(34,230,220,.18);
    }

.btn-primary:hover {
      transform: translateY(-2px);

box-shadow:
        0 18px 55px
        rgba(34,230,220,.27);
    }

.btn-secondary {
      color: #dce2ea;

background: #10151c;

border:
        1px solid
        var(--line);
    }

.btn-secondary:hover {
      background: #151b23;
    }

/* ========================================================
       OFFER CARD
       ======================================================== */

.offer-card {
      position: relative;

padding: 28px;

overflow: hidden;

border-radius: 28px;

border:
        1px solid
        rgba(34,230,220,.18);

background:
        linear-gradient(
          145deg,
          rgba(20,30,34,.95),
          rgba(10,14,19,.96)
        );

box-shadow:
        0 35px 100px
        rgba(0,0,0,.38);
    }

.offer-card::before {
      content: "";

position: absolute;

width: 250px;
      height: 250px;

top: -120px;
      right: -100px;

background:
        rgba(34,230,220,.13);

filter: blur(70px);
    }

.offer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

position: relative;
    }

.offer-badge {
      color: var(--cyan);

font-size: 10px;
      font-weight: 900;

letter-spacing: .14em;
    }

.offer-icon {
      width: 37px;
      height: 37px;

display: grid;
      place-items: center;

color: var(--cyan);

background:
        rgba(34,230,220,.08);

border-radius: 10px;
    }

.offer-card h2 {
      position: relative;

margin:
        38px
        0
        12px;

font-size: 28px;

line-height: 1;

letter-spacing: -.05em;
    }

.offer-description {
      position: relative;

color: var(--muted);

font-size: 12px;

line-height: 1.7;
    }

.price {
      display: flex;
      align-items: end;
      gap: 8px;

margin-top: 28px;
    }

.price strong {
      font-size: 42px;
      letter-spacing: -.055em;
    }

.price small {
      margin-bottom: 8px;

color: #7d8899;
    }

.price-note {
      color: #697586;
      font-size: 10px;
    }

.benefits {
      display: grid;
      gap: 12px;

margin:
        22px
        0;
    }

.benefit {
      display: flex;
      gap: 10px;

color: #c4ccd6;

font-size: 12px;
    }

.check {
      color: var(--cyan);
    }

/* ========================================================
       STATS
       ======================================================== */

.stats {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);

background: rgba(255,255,255,.012);
    }

.stats-grid {
      display: grid;

grid-template-columns:
        repeat(4, 1fr);
    }

.stat {
      padding: 27px 20px;

border-right: 1px solid var(--line);
    }

.stat:last-child {
      border-right: 0;
    }

.stat-number {
      font-size: 24px;
      font-weight: 950;

letter-spacing: -.05em;
    }

.stat-label {
      margin-top: 4px;

color: #778294;

font-size: 10px;
    }

/* ========================================================
       SECTIONS
       ======================================================== */

.section {
      padding: 110px 0;
    }

.section-head {
      max-width: 720px;

margin-bottom: 44px;
    }

.section-head h2 {
      margin:
        16px
        0
        13px;

font-size:
        clamp(
          34px,
          4vw,
          52px
        );

line-height: 1;

letter-spacing: -.06em;
    }

.section-head p {
      color: var(--muted);

line-height: 1.7;

font-size: 13px;
    }

/* ========================================================
       CARDS
       ======================================================== */

.cards {
      display: grid;

grid-template-columns:
        repeat(3, 1fr);

gap: 12px;
    }

.card {
      position: relative;

min-height: 190px;

padding: 24px;

overflow: hidden;

background:
        linear-gradient(
          145deg,
          rgba(17,23,32,.9),
          rgba(10,14,19,.9)
        );

border:
        1px solid
        var(--line);

border-radius: 18px;

transition: .3s ease;
    }

.card:hover {
      transform: translateY(-5px);

border-color:
        rgba(34,230,220,.25);

box-shadow:
        0 20px 55px
        rgba(0,0,0,.22);
    }

.card-number {
      color: var(--cyan);

font-family:
        ui-monospace,
        monospace;

font-size: 10px;
      font-weight: 900;
    }

.card h3 {
      margin:
        33px
        0
        9px;

font-size: 14px;

letter-spacing: .03em;
    }

.card p {
      color: #7f8a9b;

font-size: 12px;

line-height: 1.65;
    }

/* ========================================================
       PARTNERS
       ======================================================== */

.dark-panel {
      padding: 32px;

border-radius: 24px;

border:
        1px solid
        var(--line);

background:
        linear-gradient(
          140deg,
          #0d131a,
          #0a0d12
        );
    }

.partner-grid {
      display: grid;

grid-template-columns:
        1fr
        1fr;

column-gap: 40px;
    }

.partner {
      display: flex;

align-items: center;

gap: 14px;

padding: 18px 0;

color: #c3ccd6;

font-size: 12px;

border-bottom:
        1px solid
        var(--line);
    }

.partner-index {
      width: 26px;
      height: 26px;

flex: 0 0 auto;

display: grid;
      place-items: center;

color: var(--cyan);

background:
        rgba(34,230,220,.08);

border-radius: 50%;

font-size: 9px;
      font-weight: 900;
    }

/* ========================================================
       METRICS
       ======================================================== */

.metrics {
      display: grid;

grid-template-columns:
        repeat(3, 1fr);

overflow: hidden;

border:
        1px solid
        var(--line);

border-radius: 20px;
    }

.metric {
      padding: 28px;

border-right:
        1px solid
        var(--line);

border-bottom:
        1px solid
        var(--line);
    }

.metric:nth-child(3n) {
      border-right: 0;
    }

.metric:nth-last-child(-n+3) {
      border-bottom: 0;
    }

.metric-number {
      color: var(--cyan);

font-family:
        ui-monospace,
        monospace;

font-size: 10px;
      font-weight: 900;
    }

.metric h3 {
      margin:
        16px
        0
        6px;

font-size: 14px;
    }

.metric p {
      color: #737f91;

font-size: 11px;

line-height: 1.5;
    }

/* ========================================================
       ROADMAP
       ======================================================== */

.timeline {
      position: relative;

display: grid;

gap: 8px;
    }

.timeline::before {
      content: "";

position: absolute;

left: 72px;
      top: 18px;
      bottom: 18px;

width: 1px;

background:
        linear-gradient(
          var(--cyan),
          rgba(34,230,220,.04)
        );
    }

.step {
      position: relative;

display: grid;

grid-template-columns:
        100px
        1fr;

align-items: center;

min-height: 76px;

padding: 0 20px;

background: #0c1117;

border:
        1px solid
        var(--line);

border-radius: 14px;

transition: .2s ease;
    }

.step:hover {
      background: #10161d;

border-color:
        rgba(34,230,220,.18);
    }

.step-time {
      color: var(--cyan);

font-family:
        ui-monospace,
        monospace;

font-size: 10px;
      font-weight: 900;
    }

.step h3 {
      margin-bottom: 4px;

font-size: 13px;
    }

.step p {
      color: #727d8d;

font-size: 11px;
    }

/* ========================================================
       CTA
       ======================================================== */

.cta {
      padding-bottom: 120px;
    }

.cta-box {
      position: relative;

overflow: hidden;

padding:
        65px
        30px;

text-align: center;

border:
        1px solid
        rgba(34,230,220,.2);

border-radius: 28px;

background:
        radial-gradient(
          circle at 50% 0%,
          rgba(34,230,220,.13),
          transparent 50%
        ),
        #0c1117;
    }

.cta-box h2 {
      max-width: 720px;

margin:
        15px
        auto;

font-size:
        clamp(
          34px,
          5vw,
          58px
        );

line-height: 1;

letter-spacing: -.06em;
    }

.cta-box p {
      max-width: 620px;

margin:
        0
        auto
        26px;

color: #808b9b;

line-height: 1.65;

font-size: 13px;
    }

/* ========================================================
       MODAL
       ======================================================== */

.modal-overlay {
      position: fixed;

inset: 0;

z-index: 500;

display: grid;
      place-items: center;

padding: 20px;

background:
        rgba(0,0,0,.72);

backdrop-filter:
        blur(9px);

animation:
        fadeIn .2s ease;
    }

.modal {
      width: min(520px, 100%);

padding: 28px;

background: #0c1117;

border:
        1px solid
        rgba(34,230,220,.18);

border-radius: 22px;

box-shadow:
        0 30px 100px
        rgba(0,0,0,.55);

animation:
        modalIn .25s ease;
    }

.modal-header {
      display: flex;

justify-content: space-between;
      align-items: flex-start;
    }

.modal h2 {
      margin-top: 12px;

font-size: 26px;

letter-spacing: -.045em;
    }

.close {
      width: 32px;
      height: 32px;

display: grid;
      place-items: center;

color: #aab4c1;

background: #10161d;

border:
        1px solid
        var(--line);

border-radius: 9px;
    }

.form {
      display: grid;

gap: 13px;

margin-top: 24px;
    }

.field {
      display: grid;
      gap: 6px;
    }

.field label {
      color: #7d8898;

font-size: 9px;
      font-weight: 900;

letter-spacing: .1em;

text-transform: uppercase;
    }

.field input {
      width: 100%;

padding: 13px;

color: white;

background: #080c11;

border:
        1px solid
        var(--line);

border-radius: 11px;

outline: none;
    }

.field input:focus {
      border-color:
        rgba(34,230,220,.5);

box-shadow:
        0 0 0 3px
        rgba(34,230,220,.07);
    }

.success {
      margin-top: 20px;

padding: 20px;

color: #b9f6ce;

background:
        rgba(124,255,178,.07);

border:
        1px solid
        rgba(124,255,178,.14);

border-radius: 14px;

font-size: 13px;

line-height: 1.6;
    }

/* ========================================================
       FOOTER
       ======================================================== */

footer {
      padding:
        28px
        0
        45px;

color: #4f5a69;

border-top:
        1px solid
        var(--line);

font-size: 10px;
    }

.footer-inner {
      display: flex;

justify-content: space-between;

gap: 20px;
    }

/* ========================================================
       ANIMAÇÕES
       ======================================================== */

.reveal {
      opacity: 0;

transform:
        translateY(20px);

transition:
        opacity .7s ease,
        transform .7s ease;
    }

.reveal.visible {
      opacity: 1;

transform:
        translateY(0);
    }

@keyframes fadeIn {
      from {
        opacity: 0;
      }

to {
        opacity: 1;
      }
    }

@keyframes modalIn {
      from {
        opacity: 0;
        transform: translateY(15px) scale(.98);
      }

to {
        opacity: 1;
        transform: none;
      }
    }

/* ========================================================
       RESPONSIVO
       ======================================================== */

@media(max-width: 900px) {

.hero-grid {
        grid-template-columns: 1fr;
      }

.hero {
        min-height: auto;
      }

.offer-card {
        max-width: 650px;
      }

.cards {
        grid-template-columns:
          1fr
          1fr;
      }

.metrics {
        grid-template-columns:
          1fr
          1fr;
      }

.metric:nth-child(3n) {
        border-right:
          1px solid
          var(--line);
      }

.metric:nth-child(2n) {
        border-right: 0;
      }

.metric:nth-last-child(-n+3) {
        border-bottom:
          1px solid
          var(--line);
      }

.metric:nth-last-child(-n+2) {
        border-bottom: 0;
      }
    }

@media(max-width: 650px) {

.container {
        width:
          min(
            var(--max),
            calc(100% - 28px)
          );
      }

.nav-links {
        display: none;
      }

.hero {
        padding-top: 65px;
      }

.hero h1 {
        font-size: 49px;
      }

.stats-grid,
      .cards,
      .metrics,
      .partner-grid {
        grid-template-columns: 1fr;
      }

.stat {
        border-right: 0;
        border-bottom:
          1px solid
          var(--line);
      }

.stat:last-child {
        border-bottom: 0;
      }

.metric {
        border-right: 0 !important;
        border-bottom:
          1px solid
          var(--line) !important;
      }

.metric:last-child {
        border-bottom: 0 !important;
      }

.timeline::before {
        left: 54px;
      }

.step {
        grid-template-columns:
          75px
          1fr;

padding:
          0
          13px;
      }

.cta-box {
        padding:
          45px
          20px;
      }

.footer-inner {
        flex-direction: column;
      }
    }
  `;

/* ==========================================================
     ÍCONES SVG
     ========================================================== */

const ICONS = {
    arrow: `
      <svg width="16" height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2">
        <path d="M5 12h14"/>
        <path d="m13 6 6 6-6 6"/>
      </svg>
    `,

external: `
      <svg width="16" height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2">
        <path d="M14 3h7v7"/>
        <path d="M10 14 21 3"/>
        <path d="M21 14v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h6"/>
      </svg>
    `,

close: `
      <svg width="15" height="15"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2">
        <path d="M18 6 6 18"/>
        <path d="m6 6 12 12"/>
      </svg>
    `,

sparkles: `
      <svg width="18" height="18"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2">
        <path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/>
      </svg>
    `
  };

/* ==========================================================
     HELPER
     ========================================================== */

const el = (html) => {
    const template = document.createElement("template");
    template.innerHTML = html.trim();
    return template.content.firstElementChild;
  };

/* ==========================================================
     HTML PRINCIPAL
     ========================================================== */

function render() {

const app = document.querySelector("#app");

if (!app) {
      console.error("Elemento #app não encontrado.");
      return;
    }

app.innerHTML = `

<a href="#top" class="brand">
            ${APP.brand}<span>.</span>
          </a>

<div class="nav-links">
            <a href="#metodo">Método</a>
            <a href="#parcerias">Parcerias</a>
            <a href="#indicadores">Indicadores</a>
            <a href="#roadmap">90 dias</a>
          </div>

<button
            class="nav-button"
            data-open-modal
          >
            Falar sobre o projeto
          </button>

</div>

</nav>

${APP.offer.eyebrow}

</div>

<h1>
                Menos improviso.
                <br>
                <span class="gradient">
                  Mais crescimento.
                </span>
              </h1>

<p class="hero-copy">
                ${APP.offer.subtitle}
              </p>

<button
                  class="btn btn-primary"
                  data-open-modal
                >
                  ${APP.offer.cta}
                  ${ICONS.external}
                </button>

<a
                  href="#metodo"
                  class="btn btn-secondary"
                >
                  Ver como funciona
                  ${ICONS.arrow}
                </a>

</div>

<span class="offer-badge">
                  OFERTA PRINCIPAL
                </span>

<div class="offer-icon">
                  ${ICONS.sparkles}
                </div>

</div>

<h2>
                ${APP.offer.name}
              </h2>

<p class="offer-description">
                Diagnóstico + estratégia + implementação
                prioritária para tirar o crescimento do
                PowerPoint e colocar na operação.
              </p>

<strong>
                  ${APP.offer.price}
                </strong>

<small>
                  à vista
                </small>

</div>

<div class="price-note">
                ${APP.offer.priceNote}
              </div>

${APP.offer.benefits
                  .map(
                    benefit => `
                      <div class="benefit">
                        <span class="check">✓</span>
                        <span>${benefit}</span>
                      </div>
                    `
                  )
                  .join("")}

</div>

<button
                class="btn btn-primary"
                style="width:100%"
                data-open-modal
              >
                Reservar diagnóstico
                ${ICONS.arrow}
              </button>

</aside>

</div>

</section>

<div class="stat">
              <div class="stat-number">90</div>
              <div class="stat-label">
                dias de execução
              </div>
            </div>

<div class="stat">
              <div class="stat-number">06</div>
              <div class="stat-label">
                pilares integrados
              </div>
            </div>

<div class="stat">
              <div class="stat-number">01</div>
              <div class="stat-label">
                dashboard executivo
              </div>
            </div>

<div class="stat">
              <div class="stat-number">∞</div>
              <div class="stat-label">
                ciclo de otimização
              </div>
            </div>

</div>

<div class="eyebrow">
                O MÉTODO
              </div>

<h2>
                Uma máquina de crescimento,
                não uma lista de tarefas.
              </h2>

<p>
                Estratégia, marketing e operação comercial
                conectados em uma única linha de execução.
                Cada etapa tem prioridade, responsável e indicador.
              </p>

</div>

${APP.pillars
                .map(
                  pillar => `
                    <article class="card reveal">

<div class="card-number">
                        ${pillar.number}
                      </div>

<h3>
                        ${pillar.title}
                      </h3>

<p>
                        ${pillar.description}
                      </p>

</article>
                  `
                )
                .join("")}

</div>

</section>

<div class="eyebrow">
                ECOSSISTEMA
              </div>

<h2>
                Parcerias que geram distribuição.
              </h2>

<p>
                Em vez de depender de um único canal,
                criamos uma rede de oportunidades com
                parceiros que já possuem confiança e
                acesso ao seu ICP.
              </p>

</div>

${APP.partners
                  .map(
                    (partner, index) => `
                      <div class="partner">

<span class="partner-index">
                          ${String(index + 1).padStart(2, "0")}
                        </span>

<span>
                          ${partner}
                        </span>

<span
                          style="
                            margin-left:auto;
                            color:#4e5b6a;
                          "
                        >
                          ${ICONS.external}
                        </span>

</div>
                    `
                  )
                  .join("")}

</div>

</section>

<div class="eyebrow">
                INDICADORES
              </div>

<h2>
                O que não é medido
                vira opinião.
              </h2>

<p>
                Um painel compacto para enxergar gargalos,
                oportunidades e evolução sem afogar a
                operação em métricas de vaidade.
              </p>

</div>

${APP.metrics
                .map(
                  metric => `
                    <article class="metric reveal">

<div class="metric-number">
                        ${metric[0]}
                      </div>

<h3>
                        ${metric[1]}
                      </h3>

<p>
                        ${metric[2]}
                      </p>

</article>
                  `
                )
                .join("")}

</div>

</section>

<div class="eyebrow">
                ROADMAP
              </div>

<h2>
                90 dias para sair do diagnóstico
                e chegar à escala.
              </h2>

<p>
                Primeiro clareza.
                Depois ativação.
                Depois otimização.
              </p>

</div>

${APP.roadmap
                .map(
                  step => `
                    <div class="step reveal">

<div>

</div>

</div>
                  `
                )
                .join("")}

</div>

</section>

<div class="eyebrow">
                PRÓXIMO PASSO
              </div>

<h2>
                Se o crescimento importa,
                a execução precisa de um sistema.
              </h2>

<p>
                Vamos identificar o gargalo principal,
                definir a oportunidade mais valiosa e
                montar um plano de 90 dias com prioridade real.
              </p>

<button
                class="btn btn-primary"
                data-open-modal
              >
                Quero meu diagnóstico
                ${ICONS.external}
              </button>

</div>

</section>

</main>

<span>
            ${APP.brand} · Growth Sprint 90D
          </span>

<span>
            Estratégia · Aquisição · Conversão · Retenção
          </span>

</div>

</footer>

`;

createModal();
    initReveal();
    initEvents();
  }

/* ==========================================================
     MODAL
     ========================================================== */

function createModal() {

document.body.insertAdjacentHTML(
      "beforeend",

`

<div>

<div class="eyebrow">
                DIAGNÓSTICO
              </div>

<h2>
                Vamos falar do seu crescimento.
              </h2>

</div>

<button
              class="close"
              id="close-modal"
              aria-label="Fechar"
            >
              ${ICONS.close}
            </button>

</div>

</div>

</div>

<label>
                Empresa
              </label>

</div>

<button
              class="btn btn-primary"
              type="submit"
              id="submit-lead"
            >
              Solicitar diagnóstico
              ${ICONS.arrow}
            </button>

</form>

</div>

`
    );
  }

/* ==========================================================
     EVENTOS
     ========================================================== */

function initEvents() {

const modal =
      document.querySelector("#lead-modal");

const close =
      document.querySelector("#close-modal");

const form =
      document.querySelector("#lead-form");

document.querySelectorAll("[data-open-modal]")
      .forEach(button => {

button.addEventListener(
          "click",
          openModal
        );

});

close.addEventListener(
      "click",
      closeModal
    );

modal.addEventListener(
      "click",
      event => {

if (
          event.target === modal
        ) {
          closeModal();
        }

}
    );

document.addEventListener(
      "keydown",
      event => {

if (
          event.key === "Escape"
        ) {
          closeModal();
        }

}
    );

form.addEventListener(
      "submit",
      submitLead
    );
  }

function openModal() {

const modal =
      document.querySelector("#lead-modal");

modal.style.display = "grid";

document.body.style.overflow = "hidden";

setTimeout(() => {

const input =
        modal.querySelector("input");

input?.focus();

}, 100);
  }

function closeModal() {

const modal =
      document.querySelector("#lead-modal");

modal.style.display = "none";

document.body.style.overflow = "";
  }

/* ==========================================================
     FORMULÁRIO
     ========================================================== */

async function submitLead(event) {

event.preventDefault();

const form = event.currentTarget;

const button =
      document.querySelector("#submit-lead");

const data =
      Object.fromEntries(
        new FormData(form)
      );

button.disabled = true;

button.innerHTML =
      "Enviando…";

try {

const response =
        await fetch(
          "/api/lead",
          {
            method: "POST",

headers: {
              "Content-Type":
                "application/json"
            },

body:
              JSON.stringify(data)
          }
        );

if (!response.ok) {
        throw new Error(
          "Falha no envio"
        );
      }

form.innerHTML = `

<strong>
            Pedido recebido.
          </strong>

Seu diagnóstico foi registrado.
          Agora é só conectar a próxima etapa
          do processo comercial.

</div>

`;

} catch (error) {

console.error(error);

button.disabled = false;

button.innerHTML =
        "Tentar novamente";

alert(
        "Não foi possível enviar agora."
      );
    }
  }

/* ==========================================================
     SCROLL REVEAL
     ========================================================== */

function initReveal() {

const elements =
      document.querySelectorAll(
        ".reveal"
      );

const observer =
      new IntersectionObserver(
        entries => {

entries.forEach(
            entry => {

if (
                entry.isIntersecting
              ) {

entry.target
                  .classList
                  .add("visible");

observer.unobserve(
                  entry.target
                );

}

}
          );

},
        {
          threshold: .12
        }
      );

elements.forEach(
      element =>
        observer.observe(element)
    );
  }

/* ==========================================================
     INJETA O CSS
     ========================================================== */

function injectCSS() {

const style =
      document.createElement("style");

style.id =
      "nucleo-runtime-css";

style.textContent =
      CSS;

document.head.appendChild(style);
  }

/* ==========================================================
     INIT
     ========================================================== */

injectCSS();

render();

})();

Minha ofertinha, pode clonar aí espertão

Recommended