src/components/ui/BlogGrid.astro
---
// BlogGrid, recovered from blurr-components.pages.dev
---
<section class="bg" data-component="blog-grid"> <div class="bg__inner"> <div class="bg__header"> <p class="bg__eyebrow">Inzichten</p> <h2 class="bg__title">Laatste <em>artikelen</em></h2> </div> <!-- Featured --> <a href="#" class="bg__featured"> <div class="bg__featured-img"> <img data-allow-img src="/img/ext/photo-1460925895917-afdab827c52f-w1200-94b636.jpg" alt="Hoe je Google Ads ROAS verdubbelt in 30 dagen" loading="lazy" decoding="async" > </div> <div class="bg__featured-body"> <span class="bg__cat">Google Ads</span> <h3 class="bg__featured-title">Hoe je Google Ads ROAS verdubbelt in 30 dagen</h3> <p class="bg__featured-excerpt">De meest voorkomende reden voor slechte ROAS? Verkeerde biedstrategie. In dit artikel legt onze specialist stap voor stap uit hoe je dit oplost.</p> <div class="bg__meta"> <div class="bg__meta-text"> <span class="bg__author">Mark Visscher</span> <span class="bg__date-time"> 14 apr 2025 · 8 min </span> </div> </div> </div> </a> <!-- Regular grid --> <div class="bg__grid"> <a href="#" class="bg__card"> <div class="bg__card-img"> <img data-allow-img src="/img/ext/photo-1611532736597-de2d4265fba3-w600-3b3713.jpg" alt="10 Meta Ads fouten die je vandaag moet stoppen" loading="lazy" decoding="async" > </div> <div class="bg__card-body"> <span class="bg__cat">Meta Ads</span> <h3 class="bg__card-title">10 Meta Ads fouten die je vandaag moet stoppen</h3> <p class="bg__card-excerpt">Van verkeerde doelgroepen tot slechte creatives, wij zien dezelfde fouten bij veel adverteerders.</p> <div class="bg__meta"> <div class="bg__meta-text"> <span class="bg__author">Lisa Hoekstra</span> <span class="bg__date-time"> 8 apr 2025 · 5 min </span> </div> </div> </div> </a><a href="#" class="bg__card"> <div class="bg__card-img"> <img data-allow-img src="/img/ext/photo-1504868584819-f8e8b4b6d7e3-w600-1cf55b.jpg" alt="SEO in 2025: wat werkt echt nog?" loading="lazy" decoding="async" > </div> <div class="bg__card-body"> <span class="bg__cat">SEO</span> <h3 class="bg__card-title">SEO in 2025: wat werkt echt nog?</h3> <p class="bg__card-excerpt">AI overwriting, zero-click searches, de SEO wereld verandert. Hier is wat je nu moet doen.</p> <div class="bg__meta"> <div class="bg__meta-text"> <span class="bg__author">Jan Bakker</span> <span class="bg__date-time"> 2 apr 2025 · 7 min </span> </div> </div> </div> </a><a href="#" class="bg__card"> <div class="bg__card-img"> <img data-allow-img src="/img/ext/photo-1547658719-da2b51169166-w600-3b79f8.jpg" alt="Astro vs Next.js: welke voor je marketing site?" loading="lazy" decoding="async" > </div> <div class="bg__card-body"> <span class="bg__cat">Webdesign</span> <h3 class="bg__card-title">Astro vs Next.js: welke voor je marketing site?</h3> <p class="bg__card-excerpt">Performance vergelijking en wanneer je welk framework kiest voor je bedrijfswebsite.</p> <div class="bg__meta"> <div class="bg__meta-text"> <span class="bg__author">Pieter Janssen</span> <span class="bg__date-time"> 28 mrt 2025 · 6 min </span> </div> </div> </div> </a> </div> <div class="bg__cta-wrap"> <a href="#" class="bg__cta">Alle artikelen</a> </div> </div> </section>
<style>
.bg{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.bg__inner{max-width:1200px;margin:0 auto}
.bg__header{margin-bottom:3rem}
.bg__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.bg__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a)}
.bg__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.bg__featured{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:3rem;text-decoration:none;border:1px solid rgba(0,0,0,.07);border-radius:calc(var(--radius, .5rem) * 2);overflow:hidden;transition:box-shadow .2s}
.bg__featured:hover{box-shadow:0 12px 40px #00000014}
.bg__featured-img{height:360px;overflow:hidden}
.bg__featured-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bg__featured:hover .bg__featured-img img{transform:scale(1.03)}
.bg__featured-body{padding:2.5rem}
.bg__featured-title{font-size:1.625rem;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--color-primary, #0a0a0a);margin:.75rem 0 .875rem}
.bg__featured-excerpt{font-size:1rem;line-height:1.65;color:var(--color-muted, #6b7280);margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bg__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.bg__card{text-decoration:none;border:1px solid rgba(0,0,0,.07);border-radius:calc(var(--radius, .5rem) * 1.5);overflow:hidden;transition:box-shadow .2s;display:flex;flex-direction:column}
.bg__card:hover{box-shadow:0 8px 28px #00000012}
.bg__card-img{height:200px;overflow:hidden}
.bg__card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.bg__card:hover .bg__card-img img{transform:scale(1.04)}
.bg__card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.bg__card-title{font-size:1.0625rem;font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--color-primary, #0a0a0a);margin:.625rem 0}
.bg__card-excerpt{font-size:.875rem;line-height:1.6;color:var(--color-muted, #6b7280);flex:1;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bg__cat{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent, #6366f1);background:color-mix(in srgb,var(--color-accent, #6366f1) 10%,transparent);padding:.25rem .625rem;border-radius:100px}
.bg__meta{display:flex;align-items:center;gap:.625rem;margin-top:auto}
.bg__author-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.bg__meta-text{display:flex;flex-direction:column;gap:.125rem}
.bg__author{font-size:.8125rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.bg__date-time{font-size:.75rem;color:var(--color-muted, #6b7280)}
.bg__cta-wrap{text-align:center;margin-top:3rem}
.bg__cta{display:inline-block;border:1.5px solid rgba(0,0,0,.12);color:var(--color-primary, #0a0a0a);padding:.8125rem 2rem;border-radius:var(--radius, .5rem);font-weight:700;font-size:.9375rem;text-decoration:none;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .2s}
.bg__cta:hover{border-color:var(--color-primary, #0a0a0a);background:var(--color-primary, #0a0a0a);color:#fff}
.bg__grid{grid-template-columns:repeat(2,1fr)}
.bg__featured{grid-template-columns:1fr}
.bg__featured-img{height:240px}
.bg__featured-body{padding:1.5rem}
.bg__grid{grid-template-columns:1fr}
</style>