index: Give the page small facelift

This also removes some content that probably does not need to be here.

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

diff --git a/src/templates/index.html b/src/templates/index.html
index 45eb4180eea17749a6756168b8e28c993bfc7832..00527a692483b8875f3345874a81ee9d7f36e9c7 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -92,45 +92,37 @@
                </div>
        </section>
 
-       <section class="section">
-               <div class="container">
-                       <h3 class="title is-2 has-text-centered">
-                               {{ _("IPFire") }}<span class="has-text-primary">_</span> &dash; {{ _("The Open Source Firewall") }}
-                       </h3>
-               </div>
-       </section>
-
        <section class="section">
                <div class="container">
                        <div class="columns">
-                               <div class="column has-text-centered">
+                               <div class="column p-5 has-text-centered">
                                        <span class="fas fa-shield-alt fa-4x p-4"></span>
 
-                                       <h4 class="title is-4">{{ _("Robust Network Security") }}</h4>
+                                       <h5 class="title is-5">{{ _("Robust Network Security") }}</h5>
 
-                                       <p class="is-size-5">
+                                       <p>
                                                IPFire offers a powerful and secure firewall solution designed
                                                to protect networks against evolving cyber threats.
                                        </p>
                                </div>
 
-                               <div class="column has-text-centered">
+                               <div class="column p-5 has-text-centered">
                                        <span class="fas fa-terminal fa-4x p-4"></span>
 
-                                       <h4 class="title is-4">{{ _("Tailored to Your Needs") }}</h4>
+                                       <h5 class="title is-5">{{ _("Tailored to Your Needs") }}</h5>
 
-                                       <p class="is-size-5">
+                                       <p>
                                                Enjoy the flexibility of customizing IPFire to match your unique
                                                network requirements, ensuring a personalized and secure setup.
                                        </p>
                                </div>
 
-                               <div class="column has-text-centered">
+                               <div class="column p-5 has-text-centered">
                                        <span class="fas fa-fire fa-4x p-4"></span>
 
-                                       <h4 class="title is-4">{{ _("Community-Driven") }}</h4>
+                                       <h5 class="title is-5">{{ _("Community-Driven") }}</h5>
 
-                                       <p class="is-size-5">
+                                       <p>
                                                Be part of a thriving community where users and developers collaborate,
                                                sharing insights and innovations to enhance IPFire.
                                        </p>
@@ -150,28 +142,8 @@
        <section class="hero">
                <div class="hero-body">
                        <div class="container">
-                               <div class="columns is-vcentered">
-                                       <div class="column">
-                                               <div class="box">
-                                                       <h5 class="title is-5">{{ _("IPFire Location") }}</h5>
-
-                                                       <div class="content">
-                                                               <p>
-                                                                       IPFire Location is a geolocation service that maps
-                                                                       IP addresses to their geographical locations,
-                                                                       autonomous systems, and more!
-                                                               </p>
-                                                       </div>
-
-                                                       <div class="buttons">
-                                                               <a class="button is-primary is-fullwidth" href="/location">
-                                                                       {{ _("Check It Out") }}
-                                                               </a>
-                                                       </div>
-                                               </div>
-                                       </div>
-
-                                       <div class="column is-half">
+                               <div class="columns is-centered">
+                                       <div class="column is-two-thirds">
                                                <div class="box p-6 has-background-lwl has-text-white">
                                                        <h3 class="title is-3 has-text-white">{{ _("Appliances and Support") }}</h3>
 
@@ -207,32 +179,6 @@
                                                        </div>
                                                </div>
                                        </div>
-
-                                       <div class="column">
-                                               <div class="box">
-                                                       <h5 class="title is-5">{{ _("Donate Today") }}</h5>
-
-                                                       <div class="content">
-                                                               <p>
-                                                                       IPFire is being sponsored by its users.
-                                                                       Help us with your donation today!
-                                                               </p>
-                                                       </div>
-
-                                                       <div class="buttons">
-                                                               <a class="button is-primary is-fullwidth" href="/donate">
-                                                                       <span class="icon-text">
-                                                                               <span class="icon">
-                                                                                       <i class="fas fa-heart"></i>
-                                                                               </span>
-                                                                               <span>
-                                                                                       {{ _("Donate") }}
-                                                                               </span>
-                                                                       </span>
-                                                               </a>
-                                                       </div>
-                                               </div>
-                                       </div>
                                </div>
                        </div>
                </div>