]> git.ipfire.org Git - ipfire.org.git/commitdiff
support: applied basics of new design
authorRico Hoppe <rico.hoppe@ipfire.org>
Sun, 16 Apr 2023 01:04:06 +0000 (01:04 +0000)
committerRico Hoppe <rico.hoppe@ipfire.org>
Sun, 16 Apr 2023 01:04:06 +0000 (01:04 +0000)
src/templates/static/support.html

index 4925ee8f4e00090a520be3107a4e34a6f4fd6d58..7760f4bc1ed144b0b57d44c2b651ac481debc5b6 100644 (file)
@@ -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>
 
                                {{ _("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 %}