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>
43 lines
1.8 KiB
Plaintext
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, "Italiana", "Cinzel", 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>
|
|
}
|