src/components/ui/ContactSplitPhoto.astro
<!-- blurr-lint-disable A2 -->
---
// ContactSplitPhoto, recovered from blurr-components.pages.dev
---
<section class="csp" data-component="contact-split-photo"> <div class="csp__inner"> <!-- Photo --> <div class="csp__photo"> <img data-allow-img src="/img/ext/photo-1497366216548-37526070297c-w800-866217.jpg" alt="" class="csp__img" loading="lazy" decoding="async" > <div class="csp__photo-overlay"> <div class="csp__contact-info"> <a href="tel:+31 6 12345678" class="csp__info-item"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" opacity="0.7"> <path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"></path> </svg> +31 6 12345678 </a> <a href="mailto:hello@blurr.nl" class="csp__info-item"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" opacity="0.7"> <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path> </svg> hello@blurr.nl </a> <p class="csp__info-item"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" opacity="0.7"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path> </svg> Amsterdam, Nederland </p> </div> </div> </div> <!-- Form --> <div class="csp__form-col"> <h2 class="csp__headline">Plan een gesprek</h2> <p class="csp__sub">We reageren binnen 24 uur op werkdagen.</p> <form class="csp__form" novalidate> <div class="csp__field"> <label class="csp__label" for="csp-name"> Naam <span class="csp__req">*</span> </label> <input id="csp-name" name="name" type="text" class="csp__input" required> </div><div class="csp__field"> <label class="csp__label" for="csp-email"> E-mail <span class="csp__req">*</span> </label> <input id="csp-email" name="email" type="email" class="csp__input" required> </div><div class="csp__field"> <label class="csp__label" for="csp-message"> Bericht <span class="csp__req">*</span> </label> <textarea id="csp-message" name="message" class="csp__input csp__textarea" required rows="5"></textarea> </div> <button type="submit" class="csp__submit">Verstuur bericht</button> </form> </div> </div> </section>
<style>
.csp{background:var(--color-bg, #fff);overflow:hidden}
.csp__inner{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.csp__photo{position:relative;overflow:hidden}
.csp__img{width:100%;height:100%;object-fit:cover;display:block}
.csp__photo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 50%);display:flex;align-items:flex-end;padding:2.5rem}
.csp__contact-info{display:flex;flex-direction:column;gap:.75rem}
.csp__info-item{display:flex;align-items:center;gap:.625rem;color:#ffffffd9;font-size:.9rem;text-decoration:none;transition:color .15s}
.csp__info-item:hover{color:#fff}
.csp__form-col{padding:4rem 3.5rem;background:var(--color-bg, #fff)}
.csp__headline{font-size:clamp(1.75rem,2.5vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--color-primary, #0a0a0a);margin-bottom:.875rem}
.csp__sub{font-size:1rem;color:var(--color-muted, #6b7280);line-height:1.6;margin-bottom:2rem}
.csp__field{margin-bottom:1.25rem}
.csp__label{display:block;font-size:.8125rem;font-weight:600;color:var(--color-primary, #0a0a0a);margin-bottom:.5rem}
.csp__req{color:var(--color-accent, #6366f1);margin-left:.2em}
.csp__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}
.csp__input:focus{border-color:var(--color-accent, #6366f1)}
.csp__textarea{resize:vertical;min-height:120px}
.csp__submit{width:100%;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:var(--radius, .5rem);padding:.9375rem;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:filter .2s,transform .2s;margin-top:.5rem}
.csp__submit:hover{filter:brightness(1.1);transform:translateY(-1px)}
.csp__inner{grid-template-columns:1fr}
.csp__photo{min-height:280px}
.csp__form-col{padding:2.5rem 1.5rem}
</style>