Zoeken...  ⌘K GitHub

CtaFreeTrial CTA

CtaFreeTrial component.

/cta-free-trial
src/components/cta/CtaFreeTrial.astro
---
// CtaFreeTrial, recovered from blurr-components.pages.dev
---

<section class="ctaft"> <div class="ctaft-inner"> <h2 class="ctaft-headline">14 dagen gratis uitproberen. Geen creditcard nodig.</h2> <p class="ctaft-sub">Ontdek wat BLURR voor jouw marketing kan betekenen zonder enig risico.</p> <div class="ctaft-features"> <span class="ctaft-feature"><span class="ctaft-check">&#10003;</span>Volledige toegang tot alle functies</span><span class="ctaft-feature"><span class="ctaft-check">&#10003;</span>Persoonlijke onboarding</span><span class="ctaft-feature"><span class="ctaft-check">&#10003;</span>Real-time campagne rapportages</span><span class="ctaft-feature"><span class="ctaft-check">&#10003;</span>Expert support via chat</span> </div> <div class="ctaft-action"> <a href="#" class="ctaft-btn">Start gratis proefperiode &rarr;</a> <p class="ctaft-note">14 dagen gratis · Geen creditcard · Opzegbaar per direct</p> </div> </div> </section>

<style>
.ctaft{background:linear-gradient(160deg,#f8fafc,#eff6ff);padding:6rem 2rem;border-top:1px solid #e5e7eb}
.ctaft-inner{max-width:700px;margin:0 auto;text-align:center}
.ctaft-headline{font-size:clamp(1.875rem,4vw,3rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0 0 1rem}
.ctaft-sub{font-size:1.125rem;color:#6b7280;line-height:1.65;margin:0 0 2rem}
.ctaft-features{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;margin-bottom:2.5rem}
.ctaft-feature{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:#374151}
.ctaft-check{color:#10b981;font-weight:700}
.ctaft-action{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.ctaft-btn{padding:1rem 2.75rem;background:var(--color-accent,#6366f1);color:#fff;font-weight:700;font-size:1.0625rem;border-radius:.5rem;text-decoration:none;transition:opacity .2s,transform .2s;display:inline-flex}
.ctaft-btn:hover{opacity:.88;transform:translateY(-1px)}
.ctaft-note{font-size:.8125rem;color:#9ca3af;margin:0}
</style>