index.html: restyled the page

diff --git a/src/templates/index.html b/src/templates/index.html
index f1144317ca3af9332e0d8d54facbcc90deb2ab9e..2c9fe434baf62b1c468857b83e2b5ff4ea1b89fe 100644 (file)
--- 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