Playcard
Category: Footers
<footer class="sm:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-full border-amber-900/20 border-t mr-auto ml-auto pt-16 pr-6 pb-12 pl-6" data-element-locator="html > body:nth-of-type(1) > footer:nth-of-type(1)">
<div class="relative">
<div class="text-sm text-amber-400/60 font-sans">(Connect)</div>
<div class="text-center">
<h2 class="sm:text-6xl lg:text-7xl leading-none uppercase text-5xl font-medium text-white/95 tracking-tight">
JOIN OUR
</h2>
<h2 class="text-5xl sm:text-6xl lg:text-7xl leading-none text-white/95 tracking-tight uppercase mt-1 font-sans font-medium">
COFFEE CLUB
</h2>
<div class="mt-6 flex items-center gap-2 text-amber-400/40">
<span class="text-base font-sans">+</span>
<div class="h-px flex-1 bg-amber-900/30"></div>
<span class="text-base font-sans">+</span>
</div>
<p class="sm:text-2xl text-xl font-medium text-neutral-300/90 tracking-tight max-w-3xl mt-6 mr-auto ml-auto">
Handcrafted coffee roasted with care. Expert guidance, premium
beans, and worldwide shipping.
</p>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
<div class="inline-flex items-center gap-2 rounded-full bg-amber-500/10 ring-1 ring-amber-500/20 px-3 py-2 text-sm text-amber-500 mb-4 font-sans">
<span class="h-2 w-2 rounded-full bg-amber-500"></span>
Newsletter
</div>
<h4 class="text-xl text-white tracking-tight mb-4 font-sans">
Stay fresh
</h4>
<form class="space-y-3">
<input type="email" required="" placeholder="you@domain.com" class="w-full h-10 px-4 rounded-xl border text-sm placeholder-white/40 outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500/20 backdrop-blur border-amber-900/30 bg-[#1a1614]/60 text-white">
<button class="w-full inline-flex items-center gap-2 h-10 px-4 rounded-xl ring-1 text-sm transition ring-amber-900/30 text-white bg-amber-950/40 hover:bg-amber-900/40 justify-center font-sans">
Subscribe
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path>
<path d="m21.854 2.147-10.94 10.939" class=""></path>
</svg>
</button>
</form>
</div>
<div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
<h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-sans">
Coffee
</h5>
<ul class="space-y-3 text-base text-white/70">
<li class="">
<a class="transition hover:text-white font-sans" href="#single-origin">
Single Origin
</a>
</li>
<li class="">
<a class="transition hover:text-white font-sans" href="#blends">
Signature Blends
</a>
</li>
<li class="">
<a class="transition hover:text-white font-sans" href="#decaf">
Decaf
</a>
</li>
<li class="">
<a class="transition hover:text-white font-sans" href="#cold-brew">
Cold Brew
</a>
</li>
</ul>
</div>
<div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
<h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-sans">
Learn
</h5>
<ul class="space-y-3 text-base text-white/70">
<li>
<a class="transition hover:text-white font-sans" href="#brewing">
Brewing Guides
</a>
</li>
<li class="">
<a class="transition hover:text-white font-sans" href="#origins">
Coffee Origins
</a>
</li>
<li>
<a class="transition hover:text-white font-sans" href="#roasting">
Roasting Process
</a>
</li>
<li>
<a class="transition hover:text-white font-sans" href="#faq">
FAQ
</a>
</li>
</ul>
</div>
<div class="rounded-2xl overflow-hidden border border-amber-900/30 bg-amber-950/20 p-6">
<h5 class="text-sm uppercase tracking-wider font-medium mb-4 text-white/80 font-sans">
Company
</h5>
<ul class="space-y-3 text-base text-white/70">
<li>
<a class="transition hover:text-white font-sans" href="#about">
Our Story
</a>
</li>
<li>
<a class="transition hover:text-white font-sans" href="#sustainability">
Sustainability
</a>
</li>
<li>
<a class="transition hover:text-white font-sans" href="#wholesale">
Wholesale
</a>
</li>
<li>
<a class="transition hover:text-white font-sans" href="#contact">
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-amber-900/30 flex flex-col sm:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-6">
<span class="bg-center text-3xl italic text-white tracking-tight font-script w-[60px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a68dc15f-fb85-48af-b6c2-5c189e6f4c23_1600w.png)] bg-cover"></span>
<div class="flex items-center gap-4 text-base text-white/60">
<span class="font-sans">© 2025</span>
<span class="hidden sm:inline text-amber-900/30 font-sans">
|
</span>
<a href="#privacy" class="transition hover:text-white font-sans">
Privacy
</a>
<span class="text-amber-900/30 font-sans">/</span>
<a href="#terms" class="transition hover:text-white font-sans">
Terms
</a>
</div>
</div>
<div class="flex gap-3 gap-x-3 gap-y-3 items-center">
<a aria-label="Instagram" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-amber-950/40 text-white/70 hover:text-white hover:bg-amber-900/40" href="https://instagram.com" target="_blank" rel="noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line>
</svg>
</a>
<a aria-label="Facebook" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-amber-950/40 text-white/70 hover:text-white hover:bg-amber-900/40" href="https://facebook.com" target="_blank" rel="noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" class="">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" class=""></path>
</svg>
</a>
<a aria-label="Twitter/X" class="inline-flex h-10 w-10 items-center justify-center rounded-xl transition bg-amber-950/40 text-white/70 hover:text-white hover:bg-amber-900/40" href="https://twitter.com" target="_blank" rel="noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class="">
<path d="M12.6 1.7h2.1l-4.6 5.2 5.4 7.4h-4.2L8.9 9.8l-3.9 4.5H2.9l4.9-5.6L2.6 1.7h4.3l3 4.1 2.7-3.1z" class=""></path>
</svg>
</a>
</div>
</div>
</div>
</footer>
create a canvas to display a footer component. we want the footer component to be centered and the space around it to be flexible empty.
reproduce this footer component. change the content and name
Created by: LandingHero
