From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 18 Nov 2020 22:51:56 +0000 (+0000)
Subject: support: Update design
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c22b993743e6016298a688108d5b5941c4ba949b;p=ipfire.org.git

support: Update design

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/templates/static/support.html b/src/templates/static/support.html
index 0786237b..4925ee8f 100644
--- a/src/templates/static/support.html
+++ b/src/templates/static/support.html
@@ -3,40 +3,30 @@
 {% block title %}{{ _("Support") }}{% end block %}
 
 {% block container %}
-	<section>
+	<div class="header">
 		<div class="container">
-			<div class="row">
-				<div class="col col-lg-6">
-					<h1 class="display-2">{{ _("Support") }}</h1>
+			<h1>{{ _("Need Help?") }}</h1>
 
-					<p>
-						If you have any questions, IPFire has an active support community
-						and is also backed by a professional development team
-					</p>
-				</div>
-			</div>
+			<p class="text-muted">
+				{{ _("We are here for you") }}
+			</p>
 		</div>
-	</section>
+	</div>
 
-	<section class="inverse">
-		<div class="container">
-			<div class="row justify-content-between flex-md-row-reverse">
-				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-end">
+	<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>
 				</div>
 
-				<div class="col-12 col-md-7">
-					<h1>{{ _("Wiki") }}</h1>
-
-					<p>
-						The IPFire Wiki is the prime resource for everything
-						you need to know about IPFire.
-						There is almost nothing that cannot be found there.
+				<div class="col-12 col-lg-9">
+					<p class="lead">
+						Our wiki has everything there is to know about IPFire
 					</p>
 
 					<p>
-						The wiki is written by the community.
-						Everyone can join and improve it.
+						It is written by the community and everyone can join and improve it
 					</p>
 
 					<a class="btn btn-primary" href="https://wiki.ipfire.org/">
@@ -44,18 +34,52 @@
 					</a>
 				</div>
 			</div>
-		</div>
-	</section>
+		</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") }}">
+					</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>
+				</div>
+			</div>
+		</section>
+	</div>
 
 	<section>
 		<div class="container">
-			<div class="row justify-content-between">
-				<div class="col-12 col-md-3 d-flex align-items-center justify-content-center justify-content-md-start">
+			<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>
 				</div>
 
-				<div class="col-12 col-md-7">
-					<h1>{{ _("Community") }}</h1>
+				<div class="col-12 col-lg-9">
+					<h4>
+						IPFire<span class="text-primary">_</span>Community
+					</h4>
 
 					<p>
 						Talk to the IPFire Community on our community portal.
@@ -67,43 +91,11 @@
 						wanted to know about IPFire...
 					</p>
 
-					<a class="btn btn-secondary" href="https://community.ipfire.org/">
+					<a class="btn btn-primary" href="https://community.ipfire.org/">
 						{{ _("Go to Community") }}
 					</a>
 				</div>
 			</div>
 		</div>
 	</section>
-
-	<section class="inverse">
-		<div class="container">
-			<div class="row justify-content-between flex-md-row-reverse">
-				<div class="col-12 col-md-4 text-center text-md-right">
-					<img class="img-fluid w-100 my-5" src="{{ static_url("img/lightningwirelabs-logo.svg") }}"
-						alt="{{ _("Lightning Wire Labs") }}">
-				</div>
-
-				<div class="col-12 col-md-7">
-					<h1>{{ _("Get Professional Support") }}</h1>
-
-					<p>
-						<a class="text-lwl" href="https://www.lightningwirelabs.com/">Lightning Wire Labs</a>
-						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-lwl mb-5" href="https://www.lightningwirelabs.com/">
-						{{ _("Go to Website") }}
-					</a>
-				</div>
-			</div>
-		</div>
-	</section>
 {% end block %}