sponsors: Make the amount shorter

[ipfire.org.git] / src / templates / sponsors / index.html

{% extends "../base.html" %}

{% block title %}♥ {{ _("Sponsor Us") }}{% end block %}

{% block container %}
	{# Supported currencies #}
	{% set currencies = ("EUR", "USD") %}

	{# Proposed Amounts #}
	{% set amounts = (5, 10, 20, 30, 50) %}

	<section class="hero is-primary is-fullheight-with-navbar">
		<div class="hero-body is-flex-grow-2">
			<div class="container">
				<h1 class="title">
					{{ _("Become A Sponsor Today") }}
				</h1>

				<p class="subtitle">
					{{ _("Powered by Sponsors, Securing the Future") }}
				</p>

				<div class="columns p-5">
					{% for amount in amounts %}
						<div class="column">
							<form method="GET" action="/sponsors/next">
								<input type="hidden" name="amount" value="{{ amount }}">
								<input type="hidden" name="currency" value="{{ currency }}">

								<button class="button is-large is-fullwidth"">
									{{ format_money(amount, currency).replace(".00", "") }}
									<small>/{{ _("month") }}</small>
								</button>
							</form>
						</div>
					{% end %}
				</div>

				<div class="columns">
					<div class="column has-text-centered">
						<p>
							Sponsoring IPFire is crucial for sustaining the development,
							ensuring continuous improvement, global accessibility, and
							community support.
						</p>
					</div>

					<div class="column has-text-centered">
						<p>
							Be featured as a key supporter on our website, social media,
							and official communications, showcasing your commitment to
							IPFire and open-source initiatives.
						</p>
					</div>

					<div class="column has-text-centered">
						<p>
							Collaborate directly with the IPFire development team.
							Influence roadmaps, propose features, and be at the forefront
							of innovations shaping the future of network security.
						</p>
					</div>
				</div>
			</div>
		</div>

		<div class="hero-body is-flex-shrink-2">
			<div class="container">
				<div class="level">
					<div class="level-item is-justify-content-space-between is-align-content-center">
						<span class="pf pf-2x pf-american-express mx-1"></span>
						<span class="pf pf-2x pf-mastercard-alt mx-1"></span>
						<span class="pf pf-2x pf-visa mx-1"></span>
						<span class="pf pf-2x pf-sepa mx-1"></span>
						<span class="pf pf-2x pf-paypal mx-1"></span>
					</div>

					{# Offer alternative currencies #}
					{% for c in currencies %}
						{% if not c == currency %}
							<div class="level-item">
								<a href="/sponsors?currency={{ c }}">
									{{ _("I prefer sponsoring in %s") % format_currency(c) }}
								</a>
							</div>
						{% end %}
					{% end %}

					<div class="level-item">
						<a href="/sponsors/faq">
							{{ _("Frequently Asked Questions") }}
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
{% end block %}