de55bbebd6
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>
55 lines
2.5 KiB
Plaintext
55 lines
2.5 KiB
Plaintext
package main
|
|
|
|
// watercolorHeroComponent renders the watercolor hero with inline SVG blobs.
|
|
// Path fill colors come from hsl(var(--primary)) / hsl(var(--accent)) so they
|
|
// follow whatever preset is active. A scrim under the headline keeps text
|
|
// readable when an image is provided.
|
|
templ watercolorHeroComponent(data WatercolorHeroData) {
|
|
<section class="relative overflow-hidden py-20 md:py-28 bg-watercolor-blush" data-block="pastel-dream:watercolor-hero">
|
|
// Decorative watercolor blobs. Inline SVG so fills can reference theme tokens.
|
|
<svg class="absolute -top-12 -left-12 w-[28rem] h-[28rem] -z-0 animate-breathe" viewBox="0 0 400 400" aria-hidden="true">
|
|
<path d="M200,40 C290,40 360,120 360,200 C360,290 280,360 200,360 C110,360 40,280 40,200 C40,110 110,40 200,40 Z" fill="hsl(var(--primary) / 0.22)"></path>
|
|
</svg>
|
|
<svg class="absolute -bottom-16 -right-8 w-[24rem] h-[24rem] -z-0 animate-breathe" viewBox="0 0 400 400" aria-hidden="true">
|
|
<path d="M120,60 C200,40 320,80 360,180 C400,280 320,360 220,360 C120,360 40,300 40,220 C40,160 60,80 120,60 Z" fill="hsl(var(--accent) / 0.30)"></path>
|
|
</svg>
|
|
<div class="relative z-10 max-w-6xl mx-auto px-4 grid md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
if data.Eyebrow != "" {
|
|
<p class="font-mono text-xs uppercase tracking-[0.2em] mb-4" style="color: hsl(var(--muted-foreground));">
|
|
{ data.Eyebrow }
|
|
</p>
|
|
}
|
|
<h1 class="font-display brush-underline text-5xl md:text-6xl leading-tight mb-6" style="color: hsl(var(--foreground));">
|
|
@templ.Raw(data.Headline)
|
|
</h1>
|
|
if data.Body != "" {
|
|
<div class="font-body text-lg max-w-prose mb-8" style="color: hsl(var(--foreground) / 0.78);">
|
|
@templ.Raw(data.Body)
|
|
</div>
|
|
}
|
|
if data.CTAText != "" {
|
|
<a href={ templ.SafeURL(data.CTAHref) } class="pastel-pill text-base animate-breathe">
|
|
{ data.CTAText }
|
|
</a>
|
|
}
|
|
</div>
|
|
if data.Image != "" {
|
|
<div class="relative">
|
|
<div class="pastel-card overflow-hidden">
|
|
<img src={ data.Image } alt="" class="w-full h-auto block"/>
|
|
</div>
|
|
</div>
|
|
} else {
|
|
<div class="relative h-64 md:h-80" aria-hidden="true">
|
|
<svg viewBox="0 0 300 240" class="w-full h-full">
|
|
<ellipse cx="150" cy="120" rx="110" ry="80" fill="hsl(var(--secondary) / 0.55)"></ellipse>
|
|
<ellipse cx="120" cy="100" rx="70" ry="50" fill="hsl(var(--accent) / 0.45)"></ellipse>
|
|
<ellipse cx="180" cy="140" rx="60" ry="44" fill="hsl(var(--primary) / 0.40)"></ellipse>
|
|
</svg>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
}
|