themes-y2k/metaball_hero.templ
Alex Dunmow 49f9c90589 initial: theme plugin y2k
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/y2k.

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

65 lines
2.1 KiB
Plaintext

package main
// metaballHeroComponent renders the headline + CTA on a gradient mesh with
// SVG metaballs (Gaussian-blur + threshold filter technique).
templ metaballHeroComponent(data MetaballHeroData) {
<section
class="relative overflow-hidden y2k-mesh-bg py-24 md:py-32"
data-block-key="y2k:metaball_hero"
data-bg-preset={ data.BgPreset }
>
<svg class="absolute inset-0 w-full h-full opacity-80" viewBox="0 0 600 400" preserveAspectRatio="none" aria-hidden="true">
<defs>
<filter id="y2k-metaball" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="18" result="b1"/>
<feGaussianBlur in="b1" stdDeviation="8" result="b2"/>
<feColorMatrix in="b2" type="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 22 -10" result="meta"/>
<feComposite in="meta" in2="SourceGraphic" operator="atop"/>
</filter>
<linearGradient id="y2k-mb-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="currentColor"/>
<stop offset="100%" stop-color="currentColor" stop-opacity="0.7"/>
</linearGradient>
</defs>
<g filter="url(#y2k-metaball)" fill="url(#y2k-mb-grad)" class="text-primary">
<circle class="y2k-metaball" cx="180" cy="200" r="80"/>
<circle class="y2k-metaball" cx="320" cy="160" r="70"/>
<circle class="y2k-metaball" cx="430" cy="240" r="90"/>
</g>
</svg>
<div class="relative z-10 max-w-4xl mx-auto px-4 text-center">
<div class="inline-block px-6 py-4 rounded-2xl bg-card/70 backdrop-blur-md y2k-bevel">
<h1 class="y2k-heading text-[4rem] md:text-[5rem] leading-tight font-bold text-foreground">
{ headlineOrDefault(data.Headline) }
</h1>
if data.Sub != "" {
<p class="text-lg md:text-xl text-foreground/80 mt-3 mb-6">{ data.Sub }</p>
}
if data.CTALabel != "" {
<a href={ templ.SafeURL(ctaHrefOr(data.CTAHref)) } class="y2k-button text-lg">
{ data.CTALabel }
</a>
}
</div>
</div>
</section>
}
func headlineOrDefault(s string) string {
if s == "" {
return "new EP out now"
}
return s
}
func ctaHrefOr(s string) string {
if s == "" {
return "#"
}
return s
}