Zoeken...  ⌘K GitHub

CtaDownload CTA

CtaDownload component.

/cta-download
src/components/cta/CtaDownload.astro
---
// CtaDownload, recovered from blurr-components.pages.dev
---

<section class="ctadl"> <div class="ctadl-inner"> <div class="ctadl-text"> <span class="ctadl-eyebrow">Gratis download</span> <h2 class="ctadl-headline">De Complete Google Ads Gids 2025</h2> <p class="ctadl-sub">Alles wat je moet weten over Google Ads in één overzichtelijk document. Van structuur tot biedstrategie.</p> <a href="#" class="ctadl-btn">Download gratis ↓</a> </div> <div class="ctadl-preview"> <div class="ctadl-doc"> <span class="ctadl-doc-icon"></span> <span class="ctadl-doc-title">Google Ads Gids 2025</span> <span class="ctadl-doc-meta">PDF · 42 pagina&#39;s</span> </div> </div> </div> </section>

<style>
.ctadl{background:#f8fafc;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;padding:4rem 2rem}
.ctadl-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:center}
.ctadl-eyebrow{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.ctadl-headline{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;color:#0a0a0a;letter-spacing:-.03em;line-height:1.2;margin:0 0 .875rem}
.ctadl-sub{font-size:1rem;color:#6b7280;line-height:1.65;margin:0 0 1.75rem}
.ctadl-btn{display:inline-flex;align-items:center;padding:.75rem 1.75rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:.9375rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.ctadl-btn:hover{opacity:.88}
.ctadl-doc{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:2rem 1.75rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;min-width:160px;box-shadow:0 4px 20px #0000000f}
.ctadl-doc-icon{font-size:3rem}
.ctadl-doc-title{font-size:.875rem;font-weight:600;color:#0a0a0a;text-align:center}
.ctadl-doc-meta{font-size:.75rem;color:#9ca3af}
.ctadl-inner{grid-template-columns:1fr;gap:2rem}
.ctadl-doc{flex-direction:row;min-width:auto}
</style>