]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blobdiff - templates/index.html
add spacing and menu on mobile
[people/shoehn/ipfire.org.git] / templates / index.html
index 503ddc0d70497c787e4d100effb9ce726bb62103..50a0589f9e31abd7db519507a640fcc3dc55e6a4 100644 (file)
 {% extends "base-1.html" %}
 
-{% block title %}{{ _("Home") }}{% end block %}
+{% block title %}{{ _("Welcome to IPFire") }}{% end block %}
 
-{% block header %}
-       <div class="jumbotron masthead">
+{% block container %}
+       <section class="intro">
                <div class="container">
-                       <div class="row">
-                               <div class="col-lg-4 col-md-4">
-                                       <img src="{{ static_url("images/tux/ipfire_tux_512x512.png") }}" alt="IPFire Logo" />
-                               </div>
-
-                               <div class="col-lg-8 col-md-8">
-                                       <h1>IPFire</h1>
-                                       <p class="lead">An Open Source Firewall Distribution</p>
-
-                                       <p>
-                                               <a class="btn btn-primary btn-lg" href="/download">{{ _("Download IPFire") }}</a>
-                                       </p>
-
-                                       <ul class="masthead-links">
-                                               {% if latest_release %}
-                                                       <li>
-                                                               {{ _("Latest release") }}:<br>
-                                                               {{ latest_release.name }} &dash;
-                                                               {{ locale.format_date(latest_release.date, relative=True, shorter=True) }}
-                                                       </li>
-                                               {% end %}
-                                       </ul>
-                               </div>
+                       <div class="branding">
+                               <h1 class="display-1">IP<strong>Fire</strong></h1>
+                               <h2 class="display-4">The Open Source Firewall Distribution</h2>
+                       </div>
+                               
+                       <div class="row justify-content-center">
+                               <a class="btn btn-outline-primary btn-lg" href="/download">{{ _("Download") }}</a>
+                               <a class="btn btn-outline-secondary btn-lg" href="/featues">{{ _("Features") }}</a>
                        </div>
                </div>
-       </div>
-{% end block %}
-
-{% block body %}
-       <br>
-
-       <div class="row">
-               <div class="col-lg-6 col-md-6 objectives">
-                       {% if lang == "de" %}
-                               <p>
-                                       <strong>IPFire</strong> ist eine gehärtete Linux-Appliance-Distribution
-                                       mit primärem Einsatzzweck als Firewall.
-                               </p>
-                               <p>
-                                       Mit IPFire kommt eine unternehmensfähige Absicherung des Netzwerks
-                                       für Jedermann - vom Heimnetzwerk bis zum großen Unternehmen,
-                                       Schulnetzwerken und Behörden.
-                               </p>
-                               <p>
-                                       Besonderer Fokus liegt auf Sicherheit, Stabilität und einfache Benutzbarkeit.
-                                       Das Nachinstallieren von zusätzlichen Funktionen geht mit nur einem Klick.
-                               </p>
-                       {% else %}
-                               <p>
-                                       <strong>IPFire</strong> is a hardened Linux appliance distribution
-                                       designed for use as a firewall.
-                               </p>
-                               <p>
-                                       It offers corporate-level network protection for anyone who needs it,
-                                       from home users all the way up to large corporations, school networks
-                                       and authorities.
-                               </p>
-                               <p>
-                                       IPFire focusses on security, stability and ease of use.
-                                       A variety of add-ons can be installed with a single click, to
-                                       add more features to the base system.
-                               </p>
-                       {% end %}
-
-                       <hr>
-
-                       <img class="icon pull-left" src="{{ static_url("images/icons/security.png") }}" alt="{{ _("Security") }}" />
-                       <h4>{{ _("Security") }}</h4>
-
-                       {% if lang == "de" %}
-                               <p>
-                                       Das wichtigste: Sicherheitsupdates werden
-                                       regelmäßig und zügig bereitgestellt.
-                               </p>
-                       {% else %}
-                               <p>
-                                       As the most important issue: Security updates
-                                       are deployed regularly and promptly.
-                               </p>
-                       {% end %}
-
-                       <hr>
-
-                       <img class="icon pull-left" src="{{ static_url("images/icons/flexibility.png") }}" alt="{{ _("Flexibility") }}" />
-                       <h4>{{ _("Flexibility") }}</h4>
-
-                       {% if lang == "de" %}
-                               <p>
-                                       IPFire ist ein schlankes System, welches leicht durch
-                                       zusätzliche Funktionen erweitert werden kann.
-                               </p>
-                       {% else %}
-                               <p>
-                                       IPFire is a very small system and can be easily
-                                       customized with additional functions.
-                               </p>
-                       {% end %}
-
-                       <hr>
-
-                       <img class="icon pull-left" src="{{ static_url("images/icons/community.png") }}" alt="{{ _("Community") }}" />
-                       <h4>{{ _("Open Source") }}</h4>
-
-                       {% if lang == "de" %}
-                               <p>
-                                       IPFire ist freie Software, welche von einer offenen
-                                       Community tagtäglich verbessert wird.
-                               </p>
-                       {% else %}
-                               <p>
-                                       IPFire is free software and developed by an open community,
-                                       that improves it every single day.
+               
+               <div id="scrollto" class="page-scroll">
+                       <a href="#features" class="btn btn-outline-primary rounded-circle">
+                               <svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><g><path d="M1.41.02L6 4.694 10.59.02 12 1.46 6 7.581 0 1.459z"/></g></svg>
+                       </a>
+               </div>
+       </section>
+
+       <!-- 
+       <section id="about" class="dark-background text-center">
+               <div class="about-section">
+                       <div class="container">
+                               <p class="lead">
+                                       {% if lang == "de" %}
+                                               Willkommen! <strong>IPFire</strong> ist eine professionelle
+                                               und gehärtete Firewalldistribution, die sicher und einfach zu
+                                               benutzen ist. Mit vielen Funktionen ausgestattet, ist IPFire
+                                               ideal für den Einsatz in Unternehmen, Behörden, und überall sonst.
+                                       {% else %}
+                                               Welcome to <strong>IPFire</strong>, the professional and hardened
+                                               Linux firewall distribution that is secure, easy to operate
+                                               and coming with great functionality so that it is ready
+                                               for enterprises, authorities, and anybody else.
+                                       {% end %}
                                </p>
-                       {% end %}
-
-                       <hr>
-
-                       <p class="ac">
-                               <a href="/features">{{ _("Read more") }} &raquo;</a>
-                       </p>
 
+                               <a class="btn btn-default btn-lg" href="/about">{{ _("Learn More") }}</a>
+                       </div>
                </div>
+       </section>
+       -->
 
-               <div class="col-lg-6 col-md-6">
-                       <div class="panel panel-default">
-                               <div class="panel-body">
-                                       <h3>
-                                               <a href="/news">{{ _("What's new?") }}</a>
-                                               <a class="pull-right" href="http://www.ipfire.org/news.rss"><small>[RSS]</small></a>
-                                       </h3>
-
-                                       <table class="news-entries">
-                                               {% for item in latest_news %}
-                                                       <tr>
-                                                               <td class="date">
-                                                                       {{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;
-                                                               </td>
-                                                               <td class="link">
-                                                                       <a href="/news/{{ item.slug }}">{{ item.title }}</a>
-                                                               </td>
-                                                       </tr>
+       <section id="features" class="content-section">
+               <div class="container">
+                       <h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
+       
+                       <div class="row mb-lg-6 mb-md-5">
+                               <div class="col-md-6 col-lg-4 mb-6 pb-lg-5">
+                                       <div class="feature_icons">
+                                               <svg width="18" height="22" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-1h24v24H-3z"/><path d="M9 0L0 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4L9 0zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V11H2V5.3l7-3.11v8.8z" fill="#b71c1c"/></g></svg>
+                                       </div>
+                                       <h4 class="pb-3">{{ _("Firewall") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       Die vielseitige und State-of-the-Art Firewall-Engine
+                                                       in IPFire ist auch in komplexen Netzen übersichtlich
+                                                       und leicht zu nutzen.
+                                               {% else %}
+                                                       IPFire comes with a versatile and state of the art
+                                                       firewall engine that makes even the most complex
+                                                       setups easy to administer.
                                                {% end %}
-                                       </table>
-
-                                       <hr>
-
-                                       <h3>
-                                               <a href="http://planet.ipfire.org">{{ _("IPFire Planet") }}</a>
-                                               <a class="pull-right" href="http://planet.ipfire.org/rss"><small>[RSS]</small></a>
-                                       </h3>
-
-                                       <table class="news-entries">
-                                               {% for item in planet_posts %}
-                                                       <tr>
-                                                               <td class="date">
-                                                                       {{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;
-                                                               </td>
-                                                               <td class="link">
-                                                                       <a href="http://planet.ipfire.org/post/{{ item.slug }}">{{ item.title }}</a>
-                                                               </td>
-                                                       </tr>
+                                       </p>
+                               </div>
+                               
+                               <div class="col-md-6 col-lg-4 mb-6">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 13a3 3 0 0 1-3-3c0-1.12.61-2.1 1.5-2.61l9.71-5.62-5.53 9.58c-.5.98-1.51 1.65-2.68 1.65zm0-13c1.81 0 3.5.5 4.97 1.32l-2.1 1.21C12 2.19 11 2 10 2a8 8 0 0 0-8 8c0 2.21.89 4.21 2.34 5.65h.01c.39.39.39 1.02 0 1.41-.39.39-1.03.39-1.42.01A9.969 9.969 0 0 1 0 10C0 4.477 4.477 0 10 0zm10 10c0 2.76-1.12 5.26-2.93 7.07-.39.38-1.02.38-1.41-.01a.996.996 0 0 1 0-1.41A7.95 7.95 0 0 0 18 10c0-1-.19-2-.54-2.9L18.67 5C19.5 6.5 20 8.18 20 10z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+                                       </div>
+                                       <h4 class="pb-3">{{ _("Performance") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       Auch schnelle Netze und der Einsatz
+                                                       auf eingebetteten Systemen sind kein Problem
+                                                       für IPFire.
+                                               {% else %}
+                                                       IPFire is ready for high performance networks
+                                                       and running evenly well on embedded hardware.
                                                {% end %}
-                                       </table>
-
-                                       {% if wishlist_items %}
-                                               <hr>
-
-                                               <h3>
-                                                       <a href="http://wishlist.ipfire.org">{{ _("IPFire Wishlist") }}</a>
-                                                       <small>{{ _("The IPFire Crowdfunding Platform") }}</small>
-                                               </h3>
-
-                                               <table class="table-wishlist-widget">
-                                                       {% for item in wishlist_items %}
-                                                               <tr>
-                                                                       <td>
-                                                                               {% if item.is_new() %}
-                                                                                       <span class="label label-success pull-right">{{ _("NEW") }}</span>
-                                                                               {% elif item.remaining_days and item.remaining_days <= 10 %}
-                                                                                       <span class="pull-right">
-                                                                                               {{ _("one day left", "%(num)s days left", item.remaining_days) % { "num" : item.remaining_days } }}
-                                                                                       </span>
-                                                                               {% else %}
-                                                                                       <span class="pull-right">
-                                                                                               {{ _("%d%% funded") % item.percentage }}
-                                                                                       </span>
-                                                                               {% end %}
-
-                                                                               <a href="http://wishlist.ipfire.org/wish/{{ item.slug }}" target="_blank">{{ item.title }}</a>
-
-                                                                               <br class="separator-small">
-
-                                                                               <div class="progress progress-small">
-                                                                                       <div class="progress-bar progress-{{ item.progressbar_colour }}" style="width: {{ "%.2f%%" % item.percentage_bar }};"></div>
-                                                                               </div>
-                                                                       </td>
-                                                               </tr>
-                                                       {% end %}
-                                               </table>
-                                       {% end %}
+                                       </p>    
                                </div>
-
-                               <div class="panel-footer">
-                                       <div class="pull-right">
-                                               <a href="https://www.facebook.com/IPFire.org"><img src="{{ static_url("images/icons/social/facebook.png") }}" alt="Facebook"></a>
-                                               <a href="https://twitter.com/ipfire"><img src="{{ static_url("images/icons/social/twitter.png") }}" alt="Twitter"></a>
+                               
+                               <div class="col-md-6 col-lg-4 mb-6">
+                                       <div class="feature_icons">
+                                               <svg width="22" height="14" viewBox="0 0 22 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h24v24H0z"/></defs><g transform="translate(-1 -5)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z" fill="#b71c1c" mask="url(#b)"/></g></svg>
                                        </div>
+                                       <h4 class="pb-3">{{ _("Easy to use") }}</h4>
+                                       <p class="mb-1">
+                                               {% if lang == "de" %}
+                                                       IPFire ist in 15 bis 20 Minuten installiert
+                                                       und kommt mit vielen wichtigen Funktionen für
+                                                       professionelle Netzwerke.
+                                               {% else %}
+                                                       IPFire is set up easily in 15 to 20 minutes
+                                                       but also comes with expert features that
+                                                       are needed in professional networks.
+                                               {% end %}
+                                       </p>
+                               </div>
 
-                                       <a href="/donate"><strong>{{ _("Please support us with your donation!") }}</strong></a>
+                               <div class="col-md-6 col-lg-4 mb-6">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M11 16h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1H0v-2h7a1 1 0 0 1 1-1h1v-1.66C6.07 13.13 4 10 4 6.67v-4L10 0l6 2.67v4c0 3.33-2.07 6.46-5 7.67V16zM10 2L6 3.69V7h4V2zm0 5v6c1.91-.47 4-2.94 4-5V7h-4z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+                                       </div>
+                                       <h4 class="pb-3">{{ _("Network Security") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       Sicherheit hat höchste Priorität.
+                                                       Das gehärtete System schützt sich selbst vor
+                                                       Angriffen aus dem Netz.
+                                               {% else %}
+                                                       IPFire is designed for high security.
+                                                       It is hardened to protect itself from attacks
+                                                       from the network.
+                                               {% end %}
+                                       </p>
                                </div>
+                               
+                               <div class="col-md-6 col-lg-4 mb-6">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+                                       </div>
+                                       <h4 class="pb-3">{{ _("Open Source") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       IPFire ist freie Software, welche von einer offenen
+                                                       Community tagtäglich verbessert wird.
+                                               {% else %}
+                                                       IPFire is free software and developed by an open community,
+                                                       that improves it every single day.
+                                               {% end %}
+                                       </p>
+                               </div>
+                               
+                               <div class="col-md-6 col-lg-4 mb-6">
+                                       <div class="feature_icons">
+                                               <svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>
+                                       </div>
+                                       <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
+                                       <p>
+                                               {% if lang == "de" %}
+                                                       IPFire wird in Europa entwickelt,
+                                                       <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in vielen Ländern</a>
+                                                       überall auf der Welt eingesetzt, und bietet
+                                                       Internetzugang für hundertausende Nutzer jeden Tag.
+                                               {% else %}
+                                                       IPFire is developed in Europe and used all over the world
+                                                       <a href="http://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
+                                                       by hundreds of thousands of users every day.
+                                               {% end %}
+                                       </p>
+                               </div>
+                       </div>
+                       
+                       <div class="row justify-content-center pt-4">
+                               <a class="btn btn-primary btn-lg px-4" href="/get-started">{{ _("Get Started") }}</a>
+                               <a class="btn btn-white btn-lg px-4" href="/learn-more">{{ _("Learn more") }}</a>
                        </div>
                </div>
-       </div>
-
-       <br class="separator">
+       </section>
 
-       <div class="row">
-               <div class="col-lg-offset-2 col-lg-8 col-md-8">
-                       <div class="panel panel-default">
-                               <div class="panel-body">
-                                       <h3>
-                                               {{ _("IPFire Hardware Appliances & Consulting") }} <small>{{ _("by Lightning Wire Labs") }}</small>
+       <section id="news" class="content-section">
+               <div class="container">
+                       <div class="row">
+                               <div class="col col-md-5 mb-6">
+                                       <h2 class="display-2 mb-6">Latest Release</h2>
+                                       <p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
+                                       <h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
+                                                       {{ _("%s has been released!") % latest_release.name }}
+                                               </a>
                                        </h3>
-
-                                       <div class="row">
-                                               <div class="col-lg-6 col-md-6">
-                                                       {% if lang == "de" %}
-                                                               <p>
-                                                                       Lightning Wire Labs bietet mit IPFire vorinstallierte Hardware-Appliances an.
-                                                                       Dazu bieten sie professionellen Service &amp; Support durch qualifizierte Consultants.
-                                                               </p>
-                                                       {% else %}
-                                                               <p>
-                                                                       Lightning Wire Labs offers hardware appliances that come pre-installed
-                                                                       with the latest version of IPFire.
-                                                                       They also provide professional services &amp; support through their certified consultants.
-                                                               </p>
-                                                       {% end %}
-                                               </div>
-
-                                               <div class="col-lg-6 col-md-6 ac">
-                                                       <a href="http://www.lightningwirelabs.com/products/ipfire/appliances" target="_blank">
-                                                               <img src="{{ static_url("images/LWL/appliance-eco.jpg") }}" alt="Appliance Eco">
-                                                       </a>
+                                       <div class="btn-toolbar mb-6">
+                                               <a class="btn btn-primary mr-3" href="/download"><svg width="14" height="17" viewBox="0 0 14 17" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-5-3h24v24H-5z"/><path d="M14 6h-4V0H4v6H0l7 7 7-7zM0 15v2h14v-2H0z" fill="#fff"/></g></svg>{{ _("Download") }}</a>
+                                               <a class="btn btn-white ml-3" href="/donate"><svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>{{ _("Donate") }}</a>
+                                       </div>
+                                       
+                                       <p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
+                               </div>
+                               
+                               <div class="col col-md-5 offset-md-2">
+                                       <h2 class="display-2 mb-6">What&rsquo;s going on?</h2>
+                                       <dl class="dl-horizontal">
+                                               {% for type, item in latest_news %}
+                                                       <dt>
+                                                               <small>{{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;</small>
+                                                       </dt>
+                                                       <dd class="text-overflow mb-4 pb-4">
+                                                               {% if type == "news" %}
+                                                                       <a href="/news/{{ item.slug }}">
+                                                                               <strong>{{ item.title }}</strong>
+                                                                       </a>
+                                                               {% elif type == "planet" %}
+                                                                       <a href="http://planet.ipfire.org/post/{{ item.slug }}">
+                                                                               {{ item.title }}
+                                                                       </a>
+                                                               {% end %}
+                                                       </dd>
+                                               {% end %}
+                                       </dl>
+                                       
+                                       <a class="btn btn-white" href="/news">{{ _("Read More") }}</a>
+                                       
+                               </div>
+                       </div>
+               </div>
+       </section>
+       
+       <section id="wishlist" class="content-section">
+               <div class="container">
+                       
+                       <h2 class="display-2 text-center text-white">IP<strong>Fire</strong>&rsquo;s Wishlist</h2>
+                       
+                               {% if hottest_wish %}
+       
+                                       {% if hottest_wish.is_new() %}
+                                               <span class="label label-success pull-right">{{ _("NEW") }}</span>
+                                       {% elif hottest_wish.remaining_days and hottest_wish.remaining_days <= 10 %}
+                                               <span class="pull-right">
+                                                       {{ _("one day left", "%(num)s days left", hottest_wish.remaining_days) % { "num" : hottest_wish.remaining_days } }}
+                                               </span>
+                                       {% else %}
+                                               <span class="pull-right">
+                                                       {{ _("%d%% funded") % hottest_wish.percentage }}
+                                               </span>
+                                       {% end %}
+                                       
+                                       <h3 class="text-white pb-5">{{ hottest_wish.title }}</h3>
+       
+                                       <div class="progress progress-small mb-5">
+                                               <div class="progress-bar bg-progress" role="progressbar" aria-valuenow="{{ hottest_wish.percentage_bar }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ hottest_wish.percentage_bar }}%; height: .5rem;">
+                                                       <span class="sr-only">{{ _("%.2f%% complete") % hottest_wish.percentage_bar }}</span>
                                                </div>
                                        </div>
+                                       
+                                       <p class="text-white"><a style="color: white; text-decoration: underline;" href="http://wishlist.ipfire.org/wish/{{ hottest_wish.slug }}">Read more</a> about that wish.</p>
+                                       
+                               {% end %}
+                       
+               </div>
+       </section>
+       
+       <section id="fireinfo" class="content-section">
+               <div class="container">
+                       <h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
+                       
+                       <div class="row pb-5 mb-6">
+                               <div class="col-6 col-md-3 text-center">
+                                       <p class="mb-3"><small>Latest Release</small></p>
+                                       <h4>2.19 Core 109</h4>  
+                               </div>
+                               
+                               <div class="col-6 col-md-3 text-center">
+                                       <p class="mb-3"><small>Favorite Kernel</small></p>
+                                       <h4>3.14.79-ipfire-pae</h4>     
+                               </div>
+                               
+                               <div class="col-6 col-md-3 text-center">
+                                       <p class="mb-3"><small>Favorite CPU</small></p>
+                                       <h4>Intel</h4>  
+                               </div>
+                               
+                               <div class="col-6 col-md-3 text-center">
+                                       <p class="mb-3"><small>Favorite Virtualisation</small></p>
+                                       <h4>VMWare</h4> 
+                               </div>
+                       </div>
+                       
+                       <div class="row justify-content-center">
+                               <a class="btn btn-primary btn-lg" href="/stats">More Stats</a>
+                       </div>
+               </div>
+       </section>
 
-                                       <div class="ac">
-                                               <a href="http://www.lightningwirelabs.com/products/ipfire/appliances" target="_blank">
-                                                       <img src="{{ static_url("images/LWL/appliance-pro.jpg") }}" alt="Appliance Professional">
-                                               </a>
-                                       </div>
+       <section id="appliances" class="content-section">
+               <div class="container">
+                       <h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
+                       
+                       <div class="row mb-lg-6 mb-md-4 pb-6">
+                               <div class="col-md-12 col-lg-7 mb-5 mb-md-6">
+                                       <p class="lead">
+                                               {% if lang == "de" %}
+                                                       <a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> bietet
+                                                       Hardware-Appliances für mittlere bis große Unternehmen und SOHO an.
+                                                       Diese sorgen in jedem Netz für beste Zuverlässigkeit, Stabilität
+                                                       und Performance.
+                                               {% else %}
+                                                       <a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
+                                                       IPFire hardware appliances for enterprises, large businesses and SOHO.
+                                                       Deploying one of these on your network will provide you with the
+                                                       greatest reliability, stability and performance.
+                                               {% end %}
+                                       </p>
                                </div>
-                               <div class="panel-footer ac">
-                                       <a href="http://www.lightningwirelabs.com/" target="_blank">www.lightningwirelabs.com</a>
+                               <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
+                                       <a class="btn btn-bluegrey900 btn-lg btn-block" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
+                                       <a class="btn btn-bluegrey900 btn-lg btn-block" href="/hardware">{{ _("Hardware Appliances") }}</a>
                                </div>
                        </div>
+                       <div class="row justify-content-center">
+                               <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}">
+                       </div>
                </div>
-       </div>
+       </section>
 {% end block %}