From 904fd91be108c3ac487dafbdd17887dee8912c17 Mon Sep 17 00:00:00 2001
From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sun, 16 Apr 2023 01:04:06 +0000
Subject: [PATCH] support: applied basics of new design

---
 src/templates/static/support.html | 143 ++++++++++++++++++------------
 1 file changed, 87 insertions(+), 56 deletions(-)

diff --git a/src/templates/static/support.html b/src/templates/static/support.html
index 4925ee8f..7760f4bc 100644
--- a/src/templates/static/support.html
+++ b/src/templates/static/support.html
@@ -3,7 +3,28 @@
 {% block title %}{{ _("Support") }}{% end block %}
 
 {% block container %}
-	<div class="header">
+	<section class="hero has-background-primary-light">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+					<ul>
+						<li>
+							<a href="/">Home</a>
+						</li>
+						<li class="is-active">
+							<a href="#" aria-current="page">Support</a>
+						</li>
+					</ul>
+				</nav>
+				<h1 class="title is-1">{{ _("Support") }}</h1>
+				<p class="subtitle">
+					{{ _("Need Help?")}}
+					{{ _("We are here for you") }}
+				</p>
+			</div>
+		</div>
+	</section>
+	<!--<div class="header">
 		<div class="container">
 			<h1>{{ _("Need Help?") }}</h1>
 
@@ -11,91 +32,101 @@
 				{{ _("We are here for you") }}
 			</p>
 		</div>
-	</div>
+	</div>-->
 
 	<div class="container">
-		<section>
-			<div class="row align-items-center justify-content-between flex-lg-row-reverse">
-				<div class="col-12 col-lg-3 text-center">
-					<i class="fas fa-pen-alt icon-large my-5"></i>
+		<section class="section is-medium">
+			<div class="columns">
+				<div class="column is-1"></div>
+				<div class="column is-1 is-narrow">
+					<i class="fas fa-solid fa-pen-alt fa-5x"></i>
 				</div>
+				<div class="column is-1"></div>
 
-				<div class="col-12 col-lg-9">
-					<p class="lead">
-						Our wiki has everything there is to know about IPFire
-					</p>
+				<div class="column is-6">
+					<h5 class="title is-5">
+						IPFire<span class="has-text-primary">_</span>Wiki
+					</h5>
 
 					<p>
+						Our wiki has everything there is to know about IPFire
 						It is written by the community and everyone can join and improve it
 					</p>
 
-					<a class="btn btn-primary" href="https://wiki.ipfire.org/">
+				</div>
+				<div class="column">
+					<button class="button is-primary is-centered is-narrow is-large has-text-weight-bold" href="https://wiki.ipfire.org/">
 						{{ _("Go to Wiki") }}
-					</a>
+					</button>
 				</div>
 			</div>
 		</section>
 
-		<section>
-			<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-5" src="{{ static_url("img/lightningwirelabs-logo.svg") }}"
-							alt="{{ _("Lightning Wire Labs") }}">
+		<section class="is-large">
+			<div class="has-background-lwl has-text-white">
+				<div class="columns is-centered is-vcentered">
+					<div class="column is-7">
+						<section class="section">
+							<div class="block">
+								<h3 class="title is-3 has-text-white">{{ _("Get Professional Support") }}</h4>
+							</div>
+							<div class="block">
+								<p>
+									Lightning Wire Labs provides professional support services
+									for companies that use IPFire.
+								</p>
+
+								<p>
+									The team of developers implements custom solutions based on IPFire and
+									carries out development of new features.
+									They will help you with designing a secure network that is tailored to
+									the specific needs of your business and support you with the integration
+									of IPFire.
+								</p>
+							</div>
+							<div class="block">
+								<button class="button is-white has-text-lwl has-text-weight-bold" href="https://www.lightningwirelabs.com/">
+									{{ _("Go to Website") }}
+								</button>
+							</div>
+						</section>
 					</div>
-
-					<div class="col-12 col-lg-7">
-						<h4>{{ _("Get Professional Support") }}</h4>
-
-						<p>
-							Lightning Wire Labs provides professional support services
-							for companies that use IPFire.
-						</p>
-
-						<p>
-							The team of developers implements custom solutions based on IPFire and
-							carries out development of new features.
-							They will help you with designing a secure network that is tailored to
-							the specific needs of your business and support you with the integration
-							of IPFire.
-						</p>
-
-						<a class="btn btn-secondary" href="https://www.lightningwirelabs.com/">
-							{{ _("Go to Website") }}
-						</a>
+					<div class="column is-2">
+						<figure class="image is-128x128">
+							<img src="{{ static_url("img/lightningwirelabs-logo.svg") }}" alt="{{ _("Lightning Wire Labs") }}">
+						</figure>
 					</div>
 				</div>
 			</div>
 		</section>
-	</div>
 
-	<section>
-		<div class="container">
-			<div class="row align-items-center justify-content-between">
-				<div class="col-12 col-lg-3 text-center">
-					<span class="fas fa-hands-helping icon-large my-5"></span>
+
+		<section class="section is-medium">
+			<div class="columns">
+				<div class="column is-1"></div>
+				<div class="column is-1 is-narrow">
+					<i class="fas fa-solid fa-hands-helping fa-5x"></i>
 				</div>
+				<div class="column is-1"></div>
 
-				<div class="col-12 col-lg-9">
-					<h4>
-						IPFire<span class="text-primary">_</span>Community
-					</h4>
+				<div class="column is-6">
+					<h5 class="title is-5">
+						IPFire<span class="has-text-primary">_</span>Community
+					</h5>
 
 					<p>
 						Talk to the IPFire Community on our community portal.
-					</p>
-
-					<p>
 						Ask about how to get started with IPFire, how you can
 						contribute to the project, and what else you always
 						wanted to know about IPFire...
 					</p>
-
-					<a class="btn btn-primary" href="https://community.ipfire.org/">
+				</div>
+				<div class="column">
+					<button class="button is-primary is-centered is-narrow is-large has-text-weight-bold" href="https://community.ipfire.org/">
 						{{ _("Go to Community") }}
-					</a>
+					</button>
 				</div>
 			</div>
-		</div>
-	</section>
+		</section>
+	</div>
 {% end block %}
-- 
2.47.3