themes-pastel-dream/cozy_footer.templ
Alex Dunmow de55bbebd6 initial: theme plugin pastel-dream
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/pastel-dream.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-06 14:11:41 +08:00

43 lines
1.9 KiB
Plaintext

package main
// cozyFooterComponent renders the cozy footer with newsletter signup,
// a closing affirmation, an optional menu column, and social pill links.
templ cozyFooterComponent(data CozyFooterData) {
<section class="relative py-16 md:py-20 overflow-hidden bg-watercolor-mint" data-block="pastel-dream:cozy-footer">
// Decorative watercolor blob, top right
<svg class="absolute -top-8 -right-8 w-64 h-64 -z-0" viewBox="0 0 300 300" aria-hidden="true">
<path d="M150,30 C220,30 270,90 270,150 C270,220 200,270 140,270 C80,270 30,210 30,150 C30,90 80,30 150,30 Z" fill="hsl(var(--primary) / 0.16)"></path>
</svg>
<div class="relative z-10 max-w-4xl mx-auto px-4 text-center">
<p class="font-display text-3xl mb-6" style="color: hsl(var(--foreground));">
{ data.Affirmation }
</p>
if data.ShowSignup {
<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-8" data-pastel-signup="true" onsubmit="event.preventDefault();">
<label class="sr-only" for="pastel-newsletter-email">Email</label>
<input
id="pastel-newsletter-email"
type="email"
placeholder="you@calm.day"
class="flex-1 px-5 py-3 font-body rounded-full"
style="background-color: hsl(var(--input)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border));"
/>
<button type="submit" class="pastel-pill">Stay in touch</button>
</form>
}
if len(data.Social) > 0 {
<div class="flex justify-center gap-3 flex-wrap mt-6">
for _, href := range data.Social {
<a href={ templ.SafeURL(href) } class="px-4 py-2 font-body text-xs uppercase tracking-[0.2em] rounded-full" style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border));">
Visit
</a>
}
</div>
}
<p class="font-mono text-xs mt-10" style="color: hsl(var(--muted-foreground));">
Pastel Dream &middot; with care
</p>
</div>
</section>
}