Footer with newsletter
Category: Footers
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Marqo Footer</title>
<style>
#app-root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.footer-shadow-blend {
pointer-events: none;
mix-blend-mode: normal;
}
</style>
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
}
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/instrumentsans/v1/Qw3S8DODXN7_L257fX8xN_7f.woff2) format('woff2');
}
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/instrumentsans/v1/Qw3S8DODXN7_L257fX8xN_7f.woff2) format('woff2');
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(6, 64, 53)',
'brand-accent': 'rgb(167, 229, 99)',
'text-deep': 'rgb(6, 64, 53)',
'text-subtle': 'rgb(82, 82, 82)',
'text-muted': 'rgb(140, 140, 140)',
'line-color': 'rgba(0, 0, 0, 0.03)',
},
fontFamily: {
'primary': ['Poppins', 'sans-serif'],
'secondary': ['Instrument Sans', 'sans-serif'],
},
letterSpacing: {
'tight-title': '-1.75px',
}
}
}
}</script></head>
<body id="app-root" class="bg-white overflow-x-hidden font-secondary">
<main><footer class="relative flex flex-col items-center py-20 bg-white overflow-hidden min-h-[745px]">
<!-- Decorative Shadow Image -->
<div class="absolute inset-0 z-0 flex justify-center items-center overflow-hidden opacity-80 pointer-events-none">
<img src="https://framerusercontent.com/images/CUTXSqM03bqBG0VVVfhc98bHnH8.png?width=2499" alt="shadow" class="w-[858px] h-[645px] object-contain translate-x-20 -translate-y-10">
</div>
<div class="relative z-10 w-full max-w-[1200px] px-10 flex flex-col gap-[60px]">
<!-- Top Section -->
<div class="flex flex-row justify-between items-start gap-10">
<div class="flex flex-col gap-5 max-w-[889px]">
<h3 class="font-primary text-[35px] font-medium leading-[38.5px] tracking-tight-title text-text-deep capitalize">
Businesses need big ideas.<br>Join our newletter.
</h3>
<div class="relative w-[479px] h-[52.5px]">
<form class="flex items-center w-full h-full">
<input type="email" placeholder="name@email.com" class="w-full h-full px-[15px] pr-[135px] rounded-full text-[15px] font-secondary outline-none border-none ring-1 ring-inset ring-brand-primary ring-opacity-10 text-brand-primary placeholder-text-muted bg-transparent">
<div class="absolute right-[1px] top-[1px] bottom-[1px]">
<input type="submit" value="Subscribe" class="h-full px-[25px] rounded-full bg-brand-accent text-brand-primary font-semibold text-[14px] cursor-pointer ring-1 ring-brand-primary ring-opacity-100 hover:opacity-90 transition-opacity">
</div>
</form>
</div>
</div>
<div class="w-[231px]">
<img src="https://framerusercontent.com/images/hZbEnm0WPHEUzOuUdx1R8ZGyB4.svg" alt="logo" class="w-full h-[65px] object-contain object-left-top">
</div>
</div>
<!-- Divider -->
<div class="w-full h-[2px] bg-black/5"></div>
<!-- Link List Section -->
<div class="flex flex-row justify-between items-start">
<!-- Pages Column -->
<div class="flex flex-col gap-6">
<h4 class="text-[16px] font-semibold leading-relaxed text-text-deep">Pages</h4>
<div class="flex flex-col gap-4">
<div class="flex flex-row gap-[30px]">
<a href="/" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">Home</a>
<a href="/case-studies" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">Case Studies</a>
<a href="/waitlist" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">Waitlist</a>
</div>
<div class="flex flex-row gap-[30px]">
<a href="/blog" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">Blog</a>
<a href="/updates" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">Updates</a>
<a href="/contact" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">Contact</a>
<a href="/pricing" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">Pricing</a>
</div>
</div>
</div>
<!-- Contact Column -->
<div class="flex flex-col gap-6">
<h4 class="text-[16px] font-semibold leading-relaxed text-text-deep">Contact</h4>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-[10px]">
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M 1.4 12 C 1.015 12 0.686 11.853 0.412 11.56 C 0.141 11.274 -0.007 10.894 0 10.5 L 0 1.5 C 0 1.087 0.137 0.735 0.412 0.441 C 0.686 0.147 1.015 0.001 1.4 0 L 12.6 0 C 12.985 0 13.315 0.147 13.59 0.441 C 13.864 0.735 14 1.088 14 1.5 L 14 10.5 C 14.008 10.893 13.861 11.274 13.59 11.56 C 13.315 11.854 12.986 12 12.6 12 Z M 7 6.619 C 7.131 6.616 7.258 6.576 7.367 6.506 L 12.32 3.187 C 12.41 3.129 12.482 3.049 12.53 2.954 C 12.578 2.858 12.602 2.751 12.6 2.644 C 12.6 2.394 12.5 2.206 12.303 2.081 C 12.104 1.956 11.9 1.962 11.69 2.1 L 7 5.25 L 2.31 2.1 C 2.1 1.962 1.896 1.96 1.697 2.091 C 1.506 2.209 1.393 2.42 1.4 2.644 C 1.398 2.757 1.422 2.87 1.47 2.972 C 1.515 3.065 1.589 3.14 1.68 3.188 L 6.633 6.506 C 6.743 6.577 6.87 6.616 7 6.62 Z" fill="#064035"></path>
</svg>
<a href="mailto:hello@marqo.com" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">hello@marqo.com</a>
</div>
<div class="flex items-center gap-[10px]">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M 10.824 8.183 L 9.127 7.99 C 8.723 7.943 8.32 8.083 8.032 8.371 L 6.802 9.6 C 4.906 8.635 3.366 7.093 2.401 5.197 L 3.636 3.961 C 3.924 3.673 4.065 3.27 4.017 2.866 L 3.823 1.182 C 3.745 0.508 3.173 -0.001 2.494 0 L 1.338 0 C 0.584 0 -0.044 0.628 0.002 1.383 C 0.356 7.088 4.919 11.643 10.617 11.997 C 11.372 12.044 12 11.417 12 10.662 L 12 9.505 C 12.004 8.828 11.497 8.258 10.824 8.182 Z" fill="#064035"></path>
</svg>
<a href="tel:+33173836671" class="text-[16px] text-text-subtle hover:text-text-deep transition-colors">+33 1 73 83 66 71</a>
</div>
</div>
</div>
<!-- Location Column -->
<div class="flex flex-col gap-6">
<h4 class="text-[16px] font-semibold leading-relaxed text-text-deep">Location</h4>
<div class="flex flex-col gap-1">
<p class="text-[16px] text-text-subtle">334 avenue des Ternes</p>
<p class="text-[16px] text-text-subtle">75003 Paris, France</p>
</div>
</div>
</div>
<!-- Divider -->
<div class="w-full h-[2px] bg-black/5"></div>
<!-- Bottom Section -->
<div class="flex flex-row justify-between items-center w-full">
<div class="flex flex-row gap-4">
<!-- Social Icons -->
<a href="https://youtube.com" class="w-[30px] h-[30px] rounded-full bg-brand-primary flex items-center justify-center hover:opacity-80 transition-opacity">
<img src="https://framerusercontent.com/images/AfWprbGq9XYxey6ViHKb1SsLpk.svg" alt="youtube" class="w-4 h-4">
</a>
<a href="https://twitter.com" class="w-[30px] h-[30px] rounded-full bg-brand-primary flex items-center justify-center hover:opacity-80 transition-opacity">
<img src="https://framerusercontent.com/images/q0Ya0XLHpciifpyJKaIll9pp9c.svg" alt="twitter" class="w-4 h-4 text-white">
</a>
<a href="https://pinterest.com" class="w-[30px] h-[30px] rounded-full bg-brand-primary flex items-center justify-center hover:opacity-80 transition-opacity">
<img src="https://framerusercontent.com/images/dzlRukvMZkAG7HyHFSA8z5ov2kA.svg" alt="pinterest" class="w-4 h-4">
</a>
<a href="https://instagram.com" class="w-[30px] h-[30px] rounded-full bg-brand-primary flex items-center justify-center hover:opacity-80 transition-opacity">
<img src="https://framerusercontent.com/images/8bv6PTptSegts6ctbFweEN7zOcg.svg" alt="instagram" class="w-4 h-4">
</a>
</div>
<div class="flex flex-row gap-[60px]">
<a href="/legal/privacy-policy" class="text-[16px] text-text-muted hover:text-text-deep transition-colors">Privacy Policy</a>
<a href="/legal/terms-conditions" class="text-[16px] text-text-muted hover:text-text-deep transition-colors">Terms & Conditions</a>
<a href="https://x.com/_GabinB" class="text-[16px] text-text-muted hover:text-text-deep transition-colors">Made by Gabin B</a>
</div>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
const email = form.querySelector('input[type="email"]').value;
console.log('Subscription request for:', email);
alert('Thank you for subscribing!');
form.reset();
});
}
});
</script></main>
</body></html>
change the textual content
Created by: LandingHero
