Benefícios – Page Easy – Apek Marketing

Título (H2)

Subtítulo

Card 1 — Título

Card 1 — Descrição

Card 2 — Título

Card 2 — Descrição

Card 3 — Título

Card 3 — Descrição

Card 4 — Título

Card 4 — Descrição

Card 5 — Título

Card 5 — Descrição

Card 6 — Título

Card 6 — Descrição

<section class="pe-benefits-multi is-glow" id="beneficios">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800;900&display=swap" rel="stylesheet">

.pe-benefits-multi .grid{display:grid;gap:16px}
    @media (min-width:640px){.pe-benefits-multi .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (min-width:980px){.pe-benefits-multi .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Base Card */
    .pe-benefits-multi .card{position:relative;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 36px rgba(0,0,0,.22)}
    .pe-benefits-multi .card-inner{position:relative;padding:22px;min-height:150px;display:grid;align-content:center;justify-items:center;gap:8px;text-align:center}
    .pe-benefits-multi .card-title{margin:0;font:800 16px/1.2 Montserrat,ui-sans-serif}
    .pe-benefits-multi .card-desc{margin:0;color:var(--muted);font:600 13px/1.35 Montserrat,ui-sans-serif}

/* Variant: GLOW */
    .pe-benefits-multi.is-glow .card::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:
      linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%),
      radial-gradient(650px 140px at -5% -10%, var(--accent), transparent 60%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;opacity:.6;pointer-events:none}
    .pe-benefits-multi.is-glow .card:hover{transform:translateY(-2px);transition:.18s ease;box-shadow:0 24px 70px rgba(0,0,0,.30)}

/* Variant: OUTLINE minimal */
    .pe-benefits-multi.is-outline .card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00))}
    .pe-benefits-multi.is-outline .card-inner{padding-top:28px}
    .pe-benefits-multi.is-outline .card-inner::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:.9}
    .pe-benefits-multi.is-outline .card:hover{border-color:rgba(255,255,255,.18)}

/* Variant: STRIPED cards */
    .pe-benefits-multi.is-striped .card{background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.00) 10px 20px),
      var(--card)}
    .pe-benefits-multi.is-striped .card-inner{gap:10px}
    .pe-benefits-multi.is-striped .card-title{font-weight:900}

</style>

Benefícios que elevam seus resultados

Design, performance e conversão em primeiro lugar.

Implementação imediata

Copie, cole e publique em minutos.

Layout premium

Estética moderna com tipografia forte.

Mobile-first

Pensado para converter no celular.

Performance real

CSS escopado e leve, sem conflitos.

Flexível

Personalize cores e textos rapidamente.

Conversão

Componentes focados em ação.