design: Adjust the size of titles and breadcrumbs

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

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

{% block head %}
	<meta name="description" content="{{ _("A powerful location database to find people on the Internet") }}" />
{% end block %}

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

{% block container %}
	<section class="hero is-primary">
		<div class="hero-body">
			<div class="container">
				<nav class="breadcrumb" aria-label="breadcrumbs">
					<ul>
						<li>
							<a href="/">
								{{ _("Home") }}
							</a>
						</li>
						<li>
							<a href="#">
								{{ _("Projects") }}
							</a>
						</li>
						<li class="is-active">
							<a href="#" aria-current="page">{{ _("Location") }}</a>
						</li>
					</ul>
				</nav>

				<h1 class="title">{{ _("IPFire Location") }}</h1>
				<h6 class="subtitle">
					{{ _("A powerful, free IP address location database") }}
				</h6>
			</div>
		</div>
	</section>

	{% if address.country_code %}
		<section class="has-background-light">
			<div class="container">
				<p class="has-text-centered px-2 py-1">
					{{ _("We have detected you visiting us from %s.") % format_country_name(address.country_code) }}
					<a href="/projects/location/lookup/{{ address }}">{{ _("Learn More") }}</a>
				</p>
			</div>
		</section>
	{% end %}

	<section class="section">
		<div class="container">
			<div class="block">
				<p class="is-size-4">
					IPFire<span class="has-text-primary">_</span> Location is being used in
					firewalls or other threat detection software, load-balancers, online shops,
					websites, analytics &amp; reporting tools and more to detect the
					originating country by IP address.
					We are proud that our software is faster than others
					by maintaining a smaller memory footprint which puts it
					first in performance.
				</p>
			</div>

			<div class="block">
				<p>
					Our daily updated database does not only have information
					about the originating country of all IPv6 and IPv4 addresses.
					It identifies the Autonomous System (AS) these IP
					addresses belong to, as well and more...
					<code>libloc</code> is the C/C++ library that fires our
					location services and runs on *nix, Mac OS X and more.
					Integration into existing software is very easy and
					bindings for languages like Python and Perl are available.
				</p>
			</div>

			<div class="buttons">
				<a class="button is-light" href="/projects/location/how-to-use">
					{{ _("How To Use") }}
				</a>

				<a class="button is-primary" href="/donate">
					{{ _("Donate") }}
				</a>
			</div>
		</section>
	</div>

	<section class="hero is-light">
		<div class="hero-body">
			<div class="container">
				<div class="columns is-multiline">
					<div class="column is-half">
						<div class="columns is-mobile is-vcentered">
							<div class="column is-3 has-text-centered">
								<span class="fas fa-biohazard fa-5x"></span>
							</div>

							<div class="column">
								<p class="title is-5">{{ _("Threat Detection") }}</p>

								<p>
									{{ _("Location information is crucial to identify where an attacker is coming from.") }}
									<br>
									{{ _("Analyze your traffic for malicious autonomous systems and block the straight away with IPFire.") }}
								</p>
							</div>
						</div>
					</div>

					<div class="column is-half">
						<div class="columns is-mobile is-vcentered">
							<div class="column is-3 has-text-centered">
								<span class="fas fa-balance-scale fa-5x"></span>
							</div>

							<div class="column">
								<p class="title is-5">{{ _("Load-Balancing") }}</p>

								<p>
									{{ _("Redirect your users to the nearest data center to given them a better user experience with faster websites and faster downloads.") }}
								</p>
							</div>
						</div>
					</div>

					<div class="column is-half">
						<div class="columns is-mobile is-vcentered">
							<div class="column is-3 has-text-centered">
								<span class="fas fa-route fa-5x"></span>
							</div>

							<div class="column">
								<p class="title is-5">{{ _("Online Visitors") }}</p>

								<p>
									{{ _("Comply with legal requirements and show visitors the correct information depending on the country they are visiting from.") }}
								</p>
							</div>
						</div>
					</div>

					<div class="column is-half">
						<div class="columns is-mobile is-vcentered">
							<div class="column is-3 has-text-centered">
								<span class="fab fa-osi fa-5x"></span>
							</div>

							<div class="column">
								<p class="title is-5">{{ _("Open Source") }}</p>

								<p>
									{{ _("libloc is free software and relies on support from the community.") }}
									{{ _("You can support us by helping to improve our database or with your donation.") }}
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="hero">
		<div class="hero-body">
			<div class="container">
				<p class="title">{{ _("Who Is Using IPFire Location?") }}</p>

				<div class="level">
					<div class="level-item">
						<a href="https://www.ipfire.org/" rel="noopener">
							<figure class="image is-128x128">
								<img src="{{ static_url("img/ipfire-tux.png") }}" alt="{{ _("IPFire") }}">
							</figure>
						</a>
					</div>

					<div class="level-item">
						<a href="https://www.torproject.org/" rel="noopener">
							<figure class="image is-128x128">
								<img src="{{ static_url("img/tor.svg") }}" alt="{{ _("The Tor Project") }}">
							</figure>
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
{% end block %}