From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sun, 25 Jun 2023 21:32:40 +0000 (+0000)
Subject: index.html: restyled the page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c8678b6e76a2c4e51f4eaa65ef782d85359e2195;p=ipfire.org.git

index.html: restyled the page
---

diff --git a/src/templates/index.html b/src/templates/index.html
index f1144317..2c9fe434 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -9,60 +9,68 @@
 
 {% block container %}
 	{% if latest_release %}
-		<div class="bg-light">
-			<div class="container text-center small py-2">
-				{{ _("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="link-dark fw-bold" href="/download/{{ latest_release.slug }}">
-						{{ _("Get It Now") }}
-					</a>
-				{% end %}
+		<section class="has-background-primary-light">
+			<div class="container">
+				<p class="has-text-centered px-2">
+					{{ _("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>
-		</div>
+		</section>
 	{% end %}
 
-	<div class="bg-brand">
-		<div class="container">
-			<h1 class="display-1">{{ _("More Than A Firewall") }}</h1>
-			<h4 class="fw-normal">The market leader in Linux based, Open Source security with a comprehensible feature set</h4>
+	<section class="hero is-large is-primary" id="hero-index">
+		<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>
-	</div>
+	</section>
 
-	<section>
+	<section class="section">
 		<div class="container">
-			<h2 class="text-center mb-5">
-				{{ _("The Open Source Firewall") }}<span class="text-primary">_</span>
-			</h2>
+			<h3 class="title is-3 has-text-centered">
+				{{ _("The Open Source Firewall") }}<span class="has-text-primary">_</span>
+			</h3>
+		</div>
+	</section>
 
-			<div class="row">
-				<div class="col-12 col-lg-4 mb-3 text-center">
-					<span class="fas fa-fire fa-4x bg-light text-primary p-3 mb-2"></span>
+	<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>{{ _("The Right Choice") }}</h4>
+					<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="col-12 col-lg-4 mb-3 text-center">
-					<span class="fab fa-osi fa-4x bg-light text-primary p-3 mb-2"></span>
+				<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>{{ _("Free & Open") }}</h4>
+					<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="col-12 col-lg-4 mb-3 text-center">
+				<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>{{ _("Security") }}</h4>
+					<h4 class="title is-4">{{ _("Security") }}</h4>
 
 					<p class="mb-0">
 						Powerful system, separate applicance, a bit more text here
@@ -72,30 +80,35 @@
 		</div>
 	</section>
 
-	<section>
+	<section class="section">
 		<div class="container">
-			<div class="card bg-lwl text-white p-5">
-				<div class="row flex-lg-row-reverse justify-content-lg-between">
-					<div class="col-12 col-lg-3 text-center">
-						<img class="img-fluid w-100 my-2" src="{{ static_url("img/lightningwirelabs-logo.svg") }}"
-							alt="{{ _("Lightning Wire Labs") }}">
+			<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="col-12 col-lg-7 d-flex flex-column align-items-start align-self-center">
-						<h4>{{ _("Appliances and Support") }}</h4>
-
-						<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>
-
-						<a class="btn btn-secondary" href="https://store.lightningwirelabs.com">
-							{{ _("Go To Store") }}
-						</a>
+					<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 %}
+{% end block %}
\ No newline at end of file