313ebaf296
Bootstrapped during the 2026-06-06 BlockNinja consolidation. Was previously an unversioned directory inside ~/src/blockninja-themes/cyberpunk. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
55 lines
2.1 KiB
Plaintext
55 lines
2.1 KiB
Plaintext
package main
|
|
|
|
// heroGlitchComponent renders the cyberpunk:hero_glitch block with an RGB-split H1.
|
|
templ heroGlitchComponent(data HeroGlitchData) {
|
|
<section
|
|
data-block="cyberpunk:hero_glitch"
|
|
class="cyberpunk-hero relative w-full overflow-hidden py-24 md:py-32"
|
|
style="background-color: hsl(var(--background));"
|
|
>
|
|
if data.Scanlines {
|
|
<div aria-hidden="true" class="scanlines pointer-events-none absolute inset-0" data-scanlines-local></div>
|
|
}
|
|
<div class="relative z-10 max-w-5xl mx-auto px-4 text-center">
|
|
if data.Eyebrow != "" {
|
|
<p class="cyberpunk-eyebrow cyberpunk-mono inline-block px-3 py-1 mb-6 text-xs uppercase tracking-[0.35em]" style="color: hsl(var(--accent)); border: 1px dashed hsl(var(--accent));">
|
|
{ data.Eyebrow }
|
|
</p>
|
|
}
|
|
<h1
|
|
class="glitch cyberpunk-display text-5xl md:text-7xl font-bold leading-[1.05] tracking-tight mb-8"
|
|
data-text={ data.Headline }
|
|
style="color: hsl(var(--foreground)); font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif);"
|
|
>
|
|
{ data.Headline }
|
|
</h1>
|
|
if data.Sub != "" {
|
|
<p class="cyberpunk-sub mx-auto max-w-2xl text-lg md:text-xl mb-10" style="color: hsl(var(--muted-foreground));">
|
|
{ data.Sub }
|
|
</p>
|
|
}
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
if data.CTA.Label != "" {
|
|
<a
|
|
href={ templ.SafeURL(safeHref(data.CTA.Href)) }
|
|
class="cyberpunk-btn rgb-split cyberpunk-mono inline-flex items-center gap-2 px-6 py-3 rounded-md font-semibold uppercase tracking-wider"
|
|
style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));"
|
|
>
|
|
<span>{ data.CTA.Label }</span>
|
|
<span aria-hidden="true" class="caret-blink">_</span>
|
|
</a>
|
|
}
|
|
if data.SecondaryCTA.Label != "" {
|
|
<a
|
|
href={ templ.SafeURL(safeHref(data.SecondaryCTA.Href)) }
|
|
class="cyberpunk-btn-ghost cyberpunk-mono inline-flex items-center gap-2 px-6 py-3 rounded-md font-semibold uppercase tracking-wider"
|
|
style="border: 1px solid hsl(var(--accent)); color: hsl(var(--accent));"
|
|
>
|
|
<span>{ data.SecondaryCTA.Label }</span>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|