src/components/ui/FaqCategorized.astro
---
// FaqCategorized, recovered from blurr-components.pages.dev
---
<section class="faqc" data-component="faq-categorized"> <div class="faqc__inner"> <div class="faqc__header"> <p class="faqc__eyebrow">FAQ</p> <h2 class="faqc__title">Veelgestelde <em>vragen</em></h2> <p class="faqc__sub">Staat jouw vraag er niet bij? Neem contact met ons op.</p> </div> <!-- Category tabs --> <div class="faqc__tabs" role="tablist"> <button class="faqc__tab is-active" role="tab" data-cat="general" aria-selected="true"> Algemeen </button><button class="faqc__tab" role="tab" data-cat="ads" aria-selected="false"> Google Ads </button><button class="faqc__tab" role="tab" data-cat="seo" aria-selected="false"> SEO </button> </div> <!-- FAQ panels --> <div class="faqc__panel is-active" data-panel="general" role="tabpanel"> <details class="faqc__item" open> <summary class="faqc__question"> Wat kost het om met BLURR samen te werken? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>We werken met maandelijkse pakketten vanaf €299. Dit is exclusief advertentiebudget. Neem contact op voor een offerte op maat.</p> </div> </details><details class="faqc__item"> <summary class="faqc__question"> Hoe snel zie ik resultaten? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>Eerste resultaten zijn er vaak binnen 2-4 weken. Structurele verbetering zie je na 2-3 maanden consistente optimalisatie.</p> </div> </details><details class="faqc__item"> <summary class="faqc__question"> Kunnen jullie mijn bestaande campagnes overnemen? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>Ja, we doen een gratis audit en nemen je campagnes over met een naadloze overdracht.</p> </div> </details> </div><div class="faqc__panel" data-panel="ads" role="tabpanel"> <details class="faqc__item"> <summary class="faqc__question"> Wat is een goed advertentiebudget voor Google Ads? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>Voor lokale bedrijven start je bij €500/maand. E-commerce werkt goed met €1500+/maand. We adviseren je graag.</p> </div> </details><details class="faqc__item"> <summary class="faqc__question"> Wat is ROAS en hoe meten jullie dat? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>ROAS (Return on Ad Spend) is de verhouding tussen je omzet en advertentie-uitgaven. We meten dit via Google Analytics 4 en je conversietracking.</p> </div> </details><details class="faqc__item"> <summary class="faqc__question"> Hoe lang duurt de opzet van een campagne? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>Nieuwe campagnes zijn live binnen 48-72 uur na onboarding en aanlevering van benodigde informatie.</p> </div> </details> </div><div class="faqc__panel" data-panel="seo" role="tabpanel"> <details class="faqc__item"> <summary class="faqc__question"> Hoe lang duurt SEO? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>SEO is een lange termijn strategie. Eerste verbeteringen zie je na 2-3 maanden, structurele groei na 6-12 maanden.</p> </div> </details><details class="faqc__item"> <summary class="faqc__question"> Wat zit er in een SEO pakket? <svg class="faqc__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path> </svg> </summary> <div class="faqc__answer"> <p>Technische audit, keyword research, on-page optimalisatie, content strategie en linkbuilding, alles op maat van jouw doelen.</p> </div> </details> </div> </div> </section>
<style>
.faqc{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.faqc__inner{max-width:800px;margin:0 auto}
.faqc__header{text-align:center;margin-bottom:3rem}
.faqc__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.faqc__title{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.faqc__title em{font-style:normal;color:var(--color-accent, #6366f1)}
.faqc__sub{font-size:1.0625rem;color:var(--color-muted, #6b7280);line-height:1.6}
.faqc__tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem;border-bottom:2px solid rgba(0,0,0,.07);padding-bottom:0}
.faqc__tab{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border:none;background:none;font-size:.9rem;font-weight:600;color:var(--color-muted, #6b7280);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;font-family:inherit}
.faqc__tab.is-active{color:var(--color-accent, #6366f1);border-bottom-color:var(--color-accent, #6366f1)}
.faqc__tab:hover{color:var(--color-primary, #0a0a0a)}
.faqc__tab-icon svg{width:16px;height:16px}
.faqc__panel{display:none}
.faqc__panel.is-active{display:block}
.faqc__item{border-bottom:1px solid rgba(0,0,0,.07)}
.faqc__item:first-child{border-top:1px solid rgba(0,0,0,.07)}
.faqc__question{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;cursor:pointer;font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a);list-style:none;gap:1rem}
.faqc__question::-webkit-details-marker{display:none}
.faqc__chevron{flex-shrink:0;transition:transform .25s;color:var(--color-muted, #6b7280)}
details[open] .faqc__chevron{transform:rotate(180deg)}
details[open] .faqc__question{color:var(--color-accent, #6366f1)}
.faqc__answer{padding-bottom:1.25rem}
.faqc__answer p{font-size:.9375rem;line-height:1.7;color:var(--color-muted, #6b7280)}
</style>