36 lines
2.0 KiB
Plaintext
36 lines
2.0 KiB
Plaintext
<section class="relative overflow-hidden py-20 md:py-28 bg-watercolor-blush" data-block="pastel-dream:watercolor-hero">
|
|
<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 eyebrow %}<p class="font-mono text-xs uppercase tracking-[0.2em] mb-4" style="color: hsl(var(--muted-foreground));">
|
|
{{ eyebrow }}
|
|
</p>{% endif %}
|
|
<h1 class="font-display brush-underline text-5xl md:text-6xl leading-tight mb-6" style="color: hsl(var(--foreground));">
|
|
{{ headline|default:"Soft starts"|safe }}
|
|
</h1>
|
|
{% if body %}<div class="font-body text-lg max-w-prose mb-8" style="color: hsl(var(--foreground) / 0.78);">
|
|
{{ body|safe }}
|
|
</div>{% endif %}
|
|
{% if ctaText %}<a href="{{ ctaHref|default:"#" }}" class="pastel-pill text-base animate-breathe">
|
|
{{ ctaText }}
|
|
</a>{% endif %}
|
|
</div>
|
|
{% if image %}<div class="relative">
|
|
<div class="pastel-card overflow-hidden">
|
|
<img src="{{ 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>{% endif %}
|
|
</div>
|
|
</section>
|