web: Replace the background image with a video of fire

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

{% extends "base.html" %}

{% block head %}
	<meta name="description" content="{{ _("IPFire is a hardened, versatile, state-of-the-art Open Source firewall based on Linux.") }}" />
	<link rel="alternate" type="application/atom+xml" title="RSS" href="/blog/feed.xml" />
{% end block %}

{% block title %}{{ _("Welcome to IPFire") }}{% end block %}

{% block container %}
	{% if latest_release %}
		<section class="has-background-light">
			<div class="container">
				<p class="has-text-centered px-2 py-1">
					{{ _("Latest Release: %(release)s from %(when)s") \
						% { "release" : latest_release.name, "when" : locale.format_day(latest_release.date, dow=False) } }}

					{% if latest_release.blog %}
						&nbsp;

						<a class="has-text-weight-bold" href="/download/{{ latest_release.slug }}">
							{{ _("Read More") }}
						</a>
					{% end %}
				</p>
			</div>
		</section>
	{% end %}

	<section class="hero is-large is-primary" id="hero-index">
		<video autoplay muted loop playsinline poster="{{ static_url("videos/firewall.jpg") }}">
			{# AV1 for modern browsers that support it #}
			<source src="{{ static_url("videos/firewall@1920.av1.mp4") }}" type="video/mp4; codecs=av01.0.05M.08" />

			{# HEVC/H.256 for modern browsers #}
			<source src="{{ static_url("videos/firewall@1920.hevc.mp4") }}" type="video/mp4; codecs=hvc1" />

			{# H.254 as compatibility option for anything else #}
			<source src="{{ static_url("videos/firewall@1920.h264.mp4") }}" type="video/mp4; codecs=avc1.4D401E" />

			<p>
				Blazing Fire by Oleg Gamulinskii (CC)
				https://www.pexels.com/video/blazing-fire-2715412/
			</p>
		</video>

		<div class="hero-body">
			<div class="container">
				<h1 class="title is-1">
					{{ _("More Than A Firewall") }}
				</h1>

				<h5 class="title is-5">
					The market leader in Linux based, Open Source security with a comprehensible feature set
				</h5>
			</div>
		</div>
	</section>

	<section class="section">
		<div class="container">
			<h3 class="title is-3 has-text-centered">
				{{ _("IPFire") }}<span class="has-text-primary">_</span> &dash; {{ _("The Open Source Firewall") }}
			</h3>
		</div>
	</section>

	<section class="section">
		<div class="container">
			<div class="columns">
				<div class="column is-one-third has-text-centered">
					<span class="fas fa-fire fa-4x bg-light is-primary p-3 mb-2"></span>

					<h4 class="title is-4">{{ _("The Right Choice") }}</h4>

					<p class="mb-0">
						The only open source firewall with an active community, leading the market
					</p>
				</div>

				<div class="column is-one-third has-text-centered">
					<span class="fas fa-terminal fa-4x bg-light text-primary p-3 mb-2"></span>

					<h4 class="title is-4">{{ _("Free & Open") }}</h4>

					<p class="mb-0">
						Fully open source, complete freedom and for the greater good
					</p>
				</div>

				<div class="column is-one-third has-text-centered">
					<span class="fas fa-shield-alt fa-4x bg-light text-primary p-3 mb-2"></span>

					<h4 class="title is-4">{{ _("Security") }}</h4>

					<p class="mb-0">
						Powerful system, separate applicance, a bit more text here
					</p>
				</div>
			</div>
		</div>
	</section>

	<section class="section">
		<div class="container">
			<div class="box p-6 has-background-lwl has-text-white">
				<div class="columns is-mobile is-vcentered">
					<div class="column">
						<h3 class="title is-3 has-text-white">{{ _("Appliances and Support") }}</h3>

						<div class="block">
							<p>
								You need someone you can call when things go wrong.
								Partnered with Lightning Wire Labs we offer applicances for enterprise
								and XX businesses.
							</p>
						</div>

						<div class="block">
							<a class="button is-white has-text-lwl has-text-weight-bold" href="https://store.lightningwirelabs.com/">
								{{ _("Go to Store") }}
							</a>
						</div>
					</div>

					<div class="column is-narrow is-hidden-mobile has-text-centered">
						<figure class="image m-5 is-128x128">
							<img src="{{ static_url("img/lightningwirelabs-logo.svg") }}" alt="{{ _("Lightning Wire Labs") }}">
						</figure>
					</div>
				</div>
			</div>
		</div>
	</section>
{% end block %}