8 lines
2.1 KiB
Plaintext
8 lines
2.1 KiB
Plaintext
<section data-block="earthen:impact_metrics"{% if not title and not metrics and not illustration %} data-empty{% endif %} class="earthen-impact-metrics py-16 px-4" style="background-color: hsl(var(--background)); color: hsl(var(--foreground));">
|
|
<div class="max-w-5xl mx-auto">
|
|
{% if title %}<h2 class="earthen-display text-3xl md:text-4xl text-center mb-12" style="font-family: var(--font-heading, \000022Fraunces\000022, \000022Playfair Display\000022, Georgia, serif); color: hsl(var(--primary));">{{ title }}</h2>{% endif %}
|
|
{% if illustration %}<div class="flex justify-center mb-8"><img src="{{ illustration }}" alt="" class="max-h-40 object-contain"></div>{% elif title or metrics %}<div class="flex justify-center mb-8"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="64" height="64" data-motif="fern" class="earthen-glyph" style="color: hsl(var(--primary));" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M24 44V8"></path><path d="M24 12c-4-2-7-2-9 0M24 12c4-2 7-2 9 0"></path><path d="M24 18c-6-2-10-1-12 1M24 18c6-2 10-1 12 1"></path><path d="M24 25c-7-1-12 0-14 3M24 25c7-1 12 0 14 3"></path><path d="M24 33c-7 0-11 2-12 5M24 33c7 0 11 2 12 5"></path></svg></div>{% endif %}
|
|
{% if metrics %}<div class="grid gap-8 {% if metrics|length == 1 %}grid-cols-1{% elif metrics|length == 2 %}grid-cols-1 sm:grid-cols-2{% elif metrics|length == 3 %}grid-cols-1 sm:grid-cols-3{% else %}grid-cols-2 lg:grid-cols-4{% endif %}">{% for m in metrics %}<div class="text-center px-4"><div class="earthen-display text-5xl font-semibold mb-2" style="font-family: var(--font-heading, \000022Fraunces\000022, \000022Playfair Display\000022, Georgia, serif); color: hsl(var(--accent));">{{ m.value }}{{ m.suffix }}</div><div class="earthen-body uppercase tracking-wider text-sm" style="font-family: var(--font-body, \000022Spectral\000022, Georgia, serif); color: hsl(var(--muted-foreground));">{{ m.label }}</div></div>{% endfor %}</div>{% else %}<p class="text-center" style="color: hsl(var(--muted-foreground));">Add impact metrics to bring this section to life.</p>{% endif %}
|
|
</div>
|
|
</section>
|