src/components/footer/FooterMega.astro
---
// FooterMega, recovered from blurr-components.pages.dev
---
<footer class="fm" data-component="footer-mega"> <!-- Featured strip --> <div class="fm__featured"> <div class="fm__featured-inner"> <div class="fm__featured-text"> <p class="fm__featured-label">→ Nieuw: AI Automations</p> <p class="fm__featured-desc">Automatiseer je marketing met onze nieuwe AI agents.</p> </div> <a href="#" class="fm__featured-cta">Meer weten →</a> </div> </div> <div class="fm__body"> <div class="fm__inner"> <!-- Brand col --> <div class="fm__brand"> <a href="/" class="fm__logo"> <span class="fm__logo-text">BLURR</span> </a> <p class="fm__tagline">Online marketing die werkt voor ambitieuze bedrijven.</p> <div class="fm__socials"> <a href="#" class="fm__social" target="_blank" rel="noopener" aria-label="instagram"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg> </a><a href="#" class="fm__social" target="_blank" rel="noopener" aria-label="linkedin"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> </a><a href="#" class="fm__social" target="_blank" rel="noopener" aria-label="twitter"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.633 5.905-5.633zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> </a> </div> <div class="fm__newsletter"> <p class="fm__newsletter-label">Nieuwsbrief</p> <form class="fm__newsletter-form"> <input type="email" placeholder="Jouw e-mailadres" class="fm__newsletter-input"> <button type="submit" class="fm__newsletter-btn">→</button> </form> </div> </div> <!-- Link columns --> <div class="fm__col"> <h3 class="fm__col-heading">Diensten</h3> <ul class="fm__col-links"> <li><a href="#" class="fm__col-link">Google Ads</a></li><li><a href="#" class="fm__col-link">Meta Ads</a></li><li><a href="#" class="fm__col-link">SEO</a></li><li><a href="#" class="fm__col-link">Webdesign</a></li> </ul> </div><div class="fm__col"> <h3 class="fm__col-heading">Bedrijf</h3> <ul class="fm__col-links"> <li><a href="#" class="fm__col-link">Over ons</a></li><li><a href="#" class="fm__col-link">Cases</a></li><li><a href="#" class="fm__col-link">Blog</a></li><li><a href="#" class="fm__col-link">Vacatures</a></li> </ul> </div><div class="fm__col"> <h3 class="fm__col-heading">Contact</h3> <ul class="fm__col-links"> <li><a href="#" class="fm__col-link">Gratis gesprek</a></li><li><a href="#" class="fm__col-link">info@blurr.nl</a></li><li><a href="#" class="fm__col-link">+31 6 12345678</a></li> </ul> </div> </div> </div> <!-- Bottom bar --> <div class="fm__bottom"> <div class="fm__bottom-inner"> <p class="fm__copyright">© 2026 All rights reserved.</p> <div class="fm__bottom-links"> <a href="#" class="fm__bottom-link">Privacybeleid</a><a href="#" class="fm__bottom-link">Algemene voorwaarden</a> </div> </div> </div> </footer>
<style>
.fm{background:var(--color-primary, #0a0a0a);color:#ffffffb3}
.fm__featured{background:var(--color-accent, #6366f1);padding:1.25rem 1.5rem}
.fm__featured-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fm__featured-label{font-weight:700;color:#fff;font-size:.9rem}
.fm__featured-desc{font-size:.85rem;color:#fffc}
.fm__featured-cta{display:inline-block;background:#fff3;color:#fff;padding:.5rem 1.25rem;border-radius:var(--radius, .5rem);text-decoration:none;font-weight:700;font-size:.875rem;white-space:nowrap;transition:background .2s}
.fm__featured-cta:hover{background:#ffffff4d}
.fm__body{padding:4rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
.fm__inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.75fr 1fr 1fr 1fr;gap:3rem}
.fm__logo{text-decoration:none;display:inline-block;margin-bottom:1rem}
.fm__logo-img{height:28px}
.fm__logo-text{font-size:1.125rem;font-weight:800;color:#fff;letter-spacing:-.03em}
.fm__tagline{font-size:.875rem;line-height:1.65;margin-bottom:1.5rem;max-width:26ch}
.fm__socials{display:flex;gap:.625rem;margin-bottom:1.75rem}
.fm__social{width:36px;height:36px;background:#ffffff14;border-radius:var(--radius, .5rem);display:flex;align-items:center;justify-content:center;color:#fff9;text-decoration:none;transition:background .15s,color .15s}
.fm__social:hover{background:var(--color-accent, #6366f1);color:#fff}
.fm__newsletter-label{font-size:.8125rem;font-weight:600;color:#ffffff80;margin-bottom:.625rem;text-transform:uppercase;letter-spacing:.06em}
.fm__newsletter-form{display:flex;gap:0;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius, .5rem);overflow:hidden}
.fm__newsletter-input{flex:1;background:#ffffff0f;border:none;padding:.625rem .875rem;color:#fff;font-size:.875rem;outline:none}
.fm__newsletter-input::placeholder{color:#ffffff4d}
.fm__newsletter-btn{background:var(--color-accent, #6366f1);border:none;color:#fff;padding:.625rem 1rem;cursor:pointer;font-size:1rem;transition:filter .15s}
.fm__newsletter-btn:hover{filter:brightness(1.15)}
.fm__col-heading{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff6;margin-bottom:1rem}
.fm__col-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.fm__col-link{font-size:.875rem;color:#fff9;text-decoration:none;transition:color .15s}
.fm__col-link:hover{color:#fff}
.fm__bottom{padding:1.25rem 1.5rem}
.fm__bottom-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fm__copyright{font-size:.8125rem;color:#ffffff4d}
.fm__bottom-links{display:flex;gap:1.5rem}
.fm__bottom-link{font-size:.8125rem;color:#ffffff4d;text-decoration:none;transition:color .15s}
.fm__bottom-link:hover{color:#ffffffb3}
.fm__inner{grid-template-columns:1fr 1fr}
.fm__brand{grid-column:1 / -1}
.fm__bottom-inner{flex-direction:column;align-items:flex-start}
.fm__inner{grid-template-columns:1fr}
</style>