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 0786237b15ba32fb787d1acafab5d289ce7c5187..4925ee8f4e00090a520be3107a4e34a6f4fd6d58 100644 (file)
--- 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 %}