src/components/ui/ContactCentered.astro
---
// ContactCentered, recovered from blurr-components.pages.dev
---
<section class="cc" data-component="contact-centered"> <div class="cc__inner"> <div class="cc__header"> <p class="cc__eyebrow">Contact</p> <h2 class="cc__headline">Stuur ons een bericht</h2> <p class="cc__sub">Heb je een vraag of wil je samenwerken? Vul het formulier in en we nemen snel contact op.</p> </div> <form class="cc__form" id="cc-form" novalidate> <div class="cc__grid"> <div class="cc__field"> <label class="cc__label" for="cc-firstname">Voornaam <span class="cc__req">*</span></label> <input id="cc-firstname" name="firstname" type="text" class="cc__input" required autocomplete="given-name"> </div> <div class="cc__field"> <label class="cc__label" for="cc-lastname">Achternaam</label> <input id="cc-lastname" name="lastname" type="text" class="cc__input" autocomplete="family-name"> </div> <div class="cc__field cc__field--full"> <label class="cc__label" for="cc-email">E-mailadres <span class="cc__req">*</span></label> <input id="cc-email" name="email" type="email" class="cc__input" required autocomplete="email"> </div> <div class="cc__field cc__field--full"> <label class="cc__label" for="cc-phone">Telefoonnummer</label> <input id="cc-phone" name="phone" type="tel" class="cc__input" autocomplete="tel"> </div> <div class="cc__field cc__field--full"> <label class="cc__label" for="cc-subject">Onderwerp</label> <select id="cc-subject" name="subject" class="cc__input cc__select"> <option value="">Kies een onderwerp...</option> <option>Algemene vraag</option> <option>Samenwerking</option> <option>Support</option> <option>Anders</option> </select> </div> <div class="cc__field cc__field--full"> <label class="cc__label" for="cc-message">Bericht <span class="cc__req">*</span></label> <textarea id="cc-message" name="message" class="cc__input cc__textarea" required rows="5"></textarea> </div> </div> <div class="cc__footer"> <p class="cc__privacy">Door te verzenden ga je akkoord met ons <a href="#">privacybeleid</a>.</p> <button type="submit" class="cc__submit">Verstuur bericht</button> </div> </form> <div class="cc__success" id="cc-success" style="display:none"> <svg width="48" height="48" viewBox="0 0 48 48" fill="none"> <circle cx="24" cy="24" r="24" fill="currentColor" opacity="0.1"></circle> <path d="M14 24l8 8 12-14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> </svg> <p>Bedankt! We nemen snel contact met je op.</p> </div> </div> </section>
<style>
.cc{background:var(--color-bg, #fff);padding:5rem 1.5rem}
.cc__inner{max-width:680px;margin:0 auto}
.cc__header{text-align:center;margin-bottom:3rem}
.cc__eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin-bottom:.75rem}
.cc__headline{font-size:clamp(1.875rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.cc__sub{font-size:1.0625rem;color:var(--color-muted, #6b7280);line-height:1.6}
.cc__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.cc__field--full{grid-column:1 / -1}
.cc__label{display:block;font-size:.8125rem;font-weight:600;color:var(--color-primary, #0a0a0a);margin-bottom:.5rem}
.cc__req{color:var(--color-accent, #6366f1);margin-left:.1em}
.cc__input{width:100%;padding:.75rem 1rem;border:1.5px solid rgba(0,0,0,.1);border-radius:var(--radius, .5rem);font-size:.9375rem;font-family:inherit;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .15s;outline:none;-webkit-appearance:none}
.cc__input:focus{border-color:var(--color-accent, #6366f1)}
.cc__textarea{resize:vertical;min-height:120px}
.cc__select{cursor:pointer}
.cc__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.cc__privacy{font-size:.8125rem;color:var(--color-muted, #6b7280)}
.cc__privacy a{color:var(--color-accent, #6366f1);text-decoration:none}
.cc__submit{background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:var(--radius, .5rem);padding:.875rem 2rem;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:filter .2s,transform .2s;white-space:nowrap}
.cc__submit:hover{filter:brightness(1.1);transform:translateY(-1px)}
.cc__success{text-align:center;padding:3rem;color:var(--color-accent, #6366f1)}
.cc__success p{margin-top:1rem;font-size:1.125rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.cc__grid{grid-template-columns:1fr}
.cc__footer{flex-direction:column;align-items:stretch}
.cc__submit{width:100%;text-align:center}
</style>