17 lines
3.2 KiB
Plaintext
17 lines
3.2 KiB
Plaintext
<section data-block="earthen:donation_cta"{% if not headline and not body and not amounts and not buttonLabel and not processorUrl %} data-empty{% endif %} class="earthen-donation-cta py-16 px-4" style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground));">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
{% if headline %}<h2 class="earthen-display text-3xl md:text-4xl mb-4" style="font-family: var(--font-heading, \000022Fraunces\000022, \000022Playfair Display\000022, Georgia, serif); color: hsl(var(--primary));">{{ headline }}</h2>{% endif %}
|
|
{% if body %}<div class="earthen-body text-lg mb-8 mx-auto max-w-xl" style="font-family: var(--font-body, \000022Spectral\000022, Georgia, serif); color: hsl(var(--foreground));">{{ body|safe }}</div>{% endif %}
|
|
<form action="{{ processorUrl|default:"#" }}" method="get" class="space-y-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3" role="radiogroup" aria-label="Preset donation amounts">
|
|
{% if amounts %}{% for a in amounts %}<label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="{{ a }}" class="sr-only"{% if forloop.First %} checked{% endif %}><span>${{ a }}</span></label>{% endfor %}{% else %}<label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="25" class="sr-only" checked><span>$25</span></label><label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="50" class="sr-only"><span>$50</span></label><label data-amount-tile class="earthen-tile flex items-center justify-center cursor-pointer rounded-lg py-4 px-3 text-lg font-semibold transition-colors" style="border: 1px solid hsl(var(--border)); background-color: hsl(var(--background)); color: hsl(var(--foreground));"><input type="radio" name="amount" value="100" class="sr-only"><span>$100</span></label>{% endif %}
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center">
|
|
<label class="sr-only" for="earthen-custom-amount">Custom amount</label>
|
|
<input id="earthen-custom-amount" type="number" name="customAmount" min="1" step="1" placeholder="Other amount" class="flex-1 rounded-lg py-3 px-4 text-base" style="background-color: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--input));">
|
|
<button type="submit" class="earthen-button inline-block rounded-lg py-3 px-6 font-semibold transition-colors" style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));">{{ buttonLabel|default:"Donate" }}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|