themes-art-deco/marquee_hero.templ
Alex Dunmow 9fbedf5ba1 initial: theme plugin art-deco
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously
an unversioned directory inside ~/src/blockninja-themes/art-deco.

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

43 lines
1.8 KiB
Plaintext

package main
// marqueeHeroComponent renders the wide hero with stepped ziggurat frame and sunburst overlay.
templ marqueeHeroComponent(data MarqueeHeroData) {
<section data-block="art-deco:marquee_hero" class="relative w-full overflow-hidden deco-grain" style="background-color: hsl(var(--foreground)); color: hsl(var(--background));">
if data.Image != "" {
<div class="absolute inset-0 z-0" aria-hidden="true">
<img src={ data.Image } alt="" class="w-full h-full object-cover" style="opacity: 0.5;"/>
<div class="absolute inset-0" style="background-color: hsl(var(--foreground) / 0.55);"></div>
</div>
}
<div class="absolute inset-x-0 top-0 h-24 z-10 pointer-events-none deco-sunburst" aria-hidden="true"></div>
<div class="relative z-20 max-w-4xl mx-auto px-4 py-32 text-center">
<div class="deco-frame inline-block px-12 py-10" style="background-color: hsl(var(--foreground) / 0.6); border-color: hsl(var(--primary));">
if data.Eyebrow != "" {
<p class="deco-caps mb-4 text-xs" style="color: hsl(var(--primary));">{ data.Eyebrow }</p>
}
if data.Title != "" {
<h1
class="deco-caps deco-underline mb-6 text-5xl md:text-6xl lg:text-7xl"
style="font-family: var(--font-heading, &quot;Italiana&quot;, &quot;Cinzel&quot;, Georgia, serif); color: hsl(var(--background));"
>
{ data.Title }
</h1>
}
if data.Subtitle != "" {
<div
class="text-lg md:text-xl mb-8 max-w-2xl mx-auto"
style="color: hsl(var(--background) / 0.9);"
>
@templ.Raw(data.Subtitle)
</div>
}
if data.CTALabel != "" && data.CTAHref != "" {
<a href={ templ.SafeURL(data.CTAHref) } class="deco-pill" style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary));">
{ data.CTALabel }
</a>
}
</div>
</div>
</section>
}