index: Advertise IPFire Location on the frontpage

Fixes: #13647 - Find a way to link to IPFire Location
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/index.html b/src/templates/index.html
index a50fd965f74bfd3eb26980a2bb96490fb7c36018..afc213fd28ad327b5ceec228333f6e908691de98 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -149,12 +149,34 @@
 
        <section class="section">
                <div class="container">
-                       <div class="box p-6 has-background-lwl has-text-white">
-                               <div class="columns is-mobile is-vcentered">
-                                       <div class="column">
+                       <h5 class="title is-5">{{ _("Looking For More?") }}</h5>
+
+                       <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="box p-6 has-background-lwl has-text-white">
                                                <h3 class="title is-3 has-text-white">{{ _("Appliances and Support") }}</h3>
 
-                                               <div class="block">
+                                               <div class="content">
                                                        <p>
                                                                Experience next-level security with our high-performance
                                                                appliances, crafted to optimize IPFire's capabilities.
@@ -172,16 +194,44 @@
                                                </div>
 
                                                <div class="block">
-                                                       <a class="button is-white has-text-lwl has-text-weight-bold" href="https://store.lightningwirelabs.com/?utm_source={{ hostname }}&amp;utm_medium=frontpage">
+                                                       <a class="button is-white has-text-lwl is-fullwidth has-text-weight-bold"
+                                                                       href="https://store.lightningwirelabs.com/?utm_source={{ hostname }}&amp;utm_medium=frontpage">
                                                                {{ _("Go to Store") }}
                                                        </a>
                                                </div>
+
+                                               <div class="block has-text-centered">
+                                                       <figure class="image is-128x128 is-inline-block">
+                                                               <img src="{{ static_url("img/lightningwirelabs-logo.svg") }}"
+                                                                       alt="{{ _("Lightning Wire Labs") }}">
+                                                       </figure>
+                                               </div>
                                        </div>
+                               </div>
+
+                               <div class="column">
+                                       <div class="box">
+                                               <h5 class="title is-5">{{ _("Donate Today") }}</h5>
 
-                                       <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 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>