Make sections on index page alternating

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

{% extends "base.html" %}

{% block head %}
	<link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.ipfire.org/feed.xml" />
{% end block %}

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

{% block container %}
	<div class="main">
		<div class="container intro">
			<div class="row flex-md-row-reverse">
				<div class="col-md-5 my-5 text-center">
					<img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
				</div>

				<div class="col-md-7 my-5 align-self-center">
					<h1 class="display-1">The Open Source Firewall Distribution</h1>

					<div class="btn-toolbar">
						<a class="btn btn-outline-primary btn-glow-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
						<a class="btn btn-outline-secondary btn-glow-secondary btn-lg ml-3" href="/features">{{ _("Features") }}</a>
					</div>
				</div>
			</div>
		</div>

		<section class="inverse">
			<div class="container">
				<div class="row mb-5">
					<div class="col col-md-6">
						<h1 class="display-1 mb-0">{{ _("Secure up your network with IPFire") }}</h1>

						<p>
							IPFire comes with a versatile and state of the art firewall engine
							that makes even the most complex setups easy to administer.
						</p>

						<div class="btn-toolbar">
							<a class="btn btn-primary mr-2" href="/get-started">{{ _("Get Started") }}</a>
							<a class="btn btn-secondary ml-2" href="/features">{{ _("Learn more") }}</a>
						</div>
					</div>
				</div>

				<div class="row mt-5 mb-lg-6 mb-md-5">
					<div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
						<div class="feature_icons align-self-stretch">
							<svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
						</div>
						<div class="flex-column">
							<h5 class="pb-3">{{ _("Firewall") }}</h5>
							<p>
								IPFire comes with a versatile and state of the art
								firewall engine that makes even the most complex
								setups easy to administer.
							</p>
						</div>
					</div>
					
					<div class="col-md-6 col-lg-4 mb-6 d-flex">
						<div class="feature_icons align-self-stretch">
							<svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
						</div>
						<div class="flex-column">
							<h5 class="pb-3">{{ _("Performance") }}</h5>
							<p>
								IPFire is ready for high performance networks
								and running evenly well on embedded hardware.
							</p>
						</div>	
					</div>
					
					<div class="col-md-6 col-lg-4 mb-6 d-flex">
						<div class="feature_icons align-self-stretch">
							<svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
						</div>
						<div class="flex-column">
							<h5 class="pb-3">{{ _("Easy to use") }}</h5>
							<p class="mb-1">
								IPFire is set up easily in 15 to 20 minutes
								but also comes with expert features that
								are needed in professional networks.
							</p>
						</div>
					</div>

					<div class="col-md-6 col-lg-4 mb-6 d-flex">
						<div class="feature_icons align-self-stretch">
							<svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
						</div>
						<div class="flex-column">
							<h5 class="pb-3">{{ _("Network Security") }}</h5>
							<p>
								IPFire is designed for high security.
								It is hardened to protect itself from attacks
								from the network.
							</p>
						</div>
					</div>
					
					<div class="col-md-6 col-lg-4 mb-6 d-flex">
						<div class="feature_icons align-self-stretch">
							<svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
						</div>
						<div class="flex-column">
							<h5 class="pb-3">{{ _("Open Source") }}</h5>
							<p>
								IPFire is free software and developed by an open community,
								that improves it every single day.
							</p>
						</div>
					</div>
					
					<div class="col-md-6 col-lg-4 mb-6 d-flex">
						<div class="feature_icons align-self-stretch">
							<svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
						</div>
						<div class="flex-column">
							<h5 class="pb-3">{{ _("Trusted by thousands") }}</h5>
							<p>
								IPFire is developed in Europe and used all over the world
								<a href="https://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
								by hundreds of thousands of users every day.
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 col-lg-5 mb-5">
						<h1>Latest Release</h1>

						<p class="mb-0">
							<small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
						</p>

						<h3 class="mb-5">
							{% if latest_release.post %}
								<a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
									{{ _("%s has been released!") % latest_release.name }}
								</a>
							{% else %}
								{{ _("%s has been released!") % latest_release.name }}
							{% end %}
						</h3>

						<div class="btn-toolbar mb-5">
							<a class="btn btn-primary mr-3" href="/download">
								<svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
								{{ _("Download") }}
							</a>

							<a class="btn btn-secondary ml-3" href="/donate">
								<svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
								{{ _("Donate") }}
							</a>
						</div>
					</div>
					
					<div class="col-12 col-md-6 col-lg-5 offset-lg-2">
						<h1>What&rsquo;s going on?</h1>

						<dl class="dl-horizontal">
							{% for post in posts %}
								<dt>
									<small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
								</dt>

								<dd class="text-overflow mb-4">
									<a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
								</dd>
							{% end %}
						</dl>
						
						<a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</a>
					</div>
				</div>
			</div>
		</section>

		<section class="inverse">
			<div class="container">
				<h1 class="text-center">{{ _("Professional Appliances & Services") }}</h1>
				
				<div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
					<div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
						<p class="lead">
							<a href="https://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
							IPFire hardware appliances for enterprises, large businesses and SOHO.
							Deploying one of these on your network will provide you with the
							greatest reliability, stability and performance.
						</p>
					</div>
					<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
						<a class="btn btn-light btn-lg btn-block px-md-0 mb-4" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
						<a class="btn btn-light btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
					</div>
				</div>
				<div class="text-center">
					<picture>
						<source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
						<source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
						<source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
						<source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
						<img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
					</picture>
				</div>
			</div>
		</section>
	</div>
<script>
$(document).ready(function () {
	$('.scroll').on('click', function(event) {
			event.preventDefault();
			$('html, body').stop().animate({
				scrollTop: $('#features').offset().top -72
			}, 1000);
	});
});
</script>
{% end block %}