index: Update the Christmas Banner

[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 %}
	{# Christmas Banner #}
	{% if now.month == 12 and now.day >= 10 %}
		<section class="hero is-small is-primary">
			<div class="hero-body">
				<div class="container">
					<p class="has-text-centered px-2 py-1">
						<i class="fas fa-gifts"></i>
						<i class="fa-solid fa-candy-cane"></i>
						<i class="fa-solid fa-sleigh"></i>

						This festive season, spread cheer and security!
						Support IPFire with a holiday donation for a safer online world.
						Merry Christmas!

						&nbsp;

						<a class="has-text-weight-bold" href="/donate">
							{{ _("Donate") }}
						</a>
					</p>
				</div>
			</div>
		</section>
	{% end %}

	{% 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="/blog/{{ latest_release.blog.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">
					{{ _("IPFire") }}_ {{ _("More Than A Firewall") }}
				</h1>

				<h4 class="subtitle is-4">
					The Open Source Linux-based Firewall Operating System with a comprehensible feature set
				</h4>
			</div>
		</div>
	</section>

	<section class="section">
		<div class="container">
			<h3 class="title is-2 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 has-text-centered">
					<span class="fas fa-shield-alt fa-4x p-4"></span>

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

					<p class="is-size-5">
						IPFire offers a powerful and secure firewall solution designed
						to protect networks against evolving cyber threats.
					</p>
				</div>

				<div class="column has-text-centered">
					<span class="fas fa-terminal fa-4x p-4"></span>

					<h4 class="title is-4">{{ _("Tailored to Your Needs") }}</h4>

					<p class="is-size-5">
						Enjoy the flexibility of customizing IPFire to match your unique
						network requirements, ensuring a personalized and secure setup.
					</p>
				</div>

				<div class="column has-text-centered">
					<span class="fas fa-fire fa-4x p-4"></span>

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

					<p class="is-size-5">
						Be part of a thriving community where users and developers collaborate,
						sharing insights and innovations to enhance IPFire.
					</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>
								Experience next-level security with our high-performance
								appliances, crafted to optimize IPFire's capabilities.
								Whether you're fortifying a business infrastructure or
								safeguarding your home network, we have the right
								appliance solution tailored for you.
							</p>

							<p>
								We are your partners in ensuring continuous network security.
								Our support solutions keep your systems running smoothly,
								providing peace of mind in the ever-evolving landscape of
								security.
							</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 %}