]> git.ipfire.org Git - ipfire.org.git/blobdiff - src/templates/index.html
index: Reword the three bullet points (once more)
[ipfire.org.git] / src / templates / index.html
index 7098094e9a2296448a3e18b688daa55900ffc43e..8601b79363b5603d07d436db9d0bd1ecd4a4b81b 100644 (file)
 {% extends "base.html" %}
 
 {% block head %}
-       <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.ipfire.org/feed.xml" />
+       <meta name="description" content="{{ _("IPFire is a hardened, versatile, state-of-the-art Open Source firewall based on Linux.") }}" />
+       <link rel="alternate" type="application/atom+xml" title="RSS" href="/blog/feed.xml" />
 {% end block %}
 
 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
 
 {% block container %}
-       <header class="cover">
-               <div class="container d-flex h-100 align-items-center">
-                       <div class="row w-100 flex-md-row-reverse">
-                               <div class="col-12 col-md-5 my-5 text-center">
-                                       <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
-                               </div>
-
-                               <div class="col-12 col-md-7 align-self-center px-3">
-                                       <h1>{{ _("The Open Source Firewall") }}</h1>
-
-                                       <div class="btn-toolbar my-5">
-                                               <a class="btn btn-outline-primary btn-glow-primary btn-lg mr-2" href="/download">{{ _("Download") }}</a>
-                                               <a class="btn btn-outline-secondary btn-glow-secondary btn-lg ml-2" href="/features">{{ _("Features") }}</a>
-                                       </div>
-                               </div>
+       {% if latest_release %}
+               <section class="has-background-light">
+                       <div class="container">
+                               <p class="has-text-centered px-2 py-1">
+                                       {{ _("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="/blog/{{ latest_release.blog.slug }}">
+                                                       {{ _("Read More") }}
+                                               </a>
+                                       {% end %}
+                               </p>
+                       </div>
+               </section>
+       {% end %}
+
+       <section class="hero is-large is-primary" id="hero-index">
+               <video autoplay muted loop playsinline poster="{{ static_url("videos/firewall.jpg") }}">
+                       {# AV1 for modern browsers that support it #}
+                       <source src="{{ static_url("videos/firewall@1920.av1.mp4") }}" type="video/mp4; codecs=av01.0.05M.08" />
+
+                       {# HEVC/H.256 for modern browsers #}
+                       <source src="{{ static_url("videos/firewall@1920.hevc.mp4") }}" type="video/mp4; codecs=hvc1" />
+
+                       {# H.254 as compatibility option for anything else #}
+                       <source src="{{ static_url("videos/firewall@1920.h264.mp4") }}" type="video/mp4; codecs=avc1.4D401E" />
+
+                       <p>
+                               Blazing Fire by Oleg Gamulinskii (CC)
+                               https://www.pexels.com/video/blazing-fire-2715412/
+                       </p>
+               </video>
+
+               <div class="hero-body">
+                       <div class="container">
+                               <h1 class="title is-1">
+                                       {{ _("IPFire") }}_ {{ _("More Than A Firewall") }}
+                               </h1>
+
+                               <h4 class="subtitle is-4">
+                                       The Open Source Linux-based Firewall Operating System with a comprehensible feature set
+                               </h4>
                        </div>
                </div>
-       </header>
+       </section>
 
-       <section class="inverse">
+       <section class="section">
                <div class="container">
-                       <div class="row mb-5">
-                               <div class="col col-md-6">
-                                       <h1 class="mb-0">{{ _("Secure up your network with IPFire") }}</h1>
+                       <h3 class="title is-2 has-text-centered">
+                               {{ _("IPFire") }}<span class="has-text-primary">_</span> &dash; {{ _("The Open Source Firewall") }}
+                       </h3>
+               </div>
+       </section>
 
-                                       <p>
-                                               IPFire comes with a versatile and state of the art firewall engine
-                                               that makes even the most complex setups easy to administer.
-                                       </p>
-                               </div>
-                       </div>
+       <section class="section">
+               <div class="container">
+                       <div class="columns">
+                               <div class="column has-text-centered">
+                                       <span class="fas fa-shield-alt fa-4x p-4"></span>
 
-                       <div class="row mt-5 mb-lg-6 mb-md-5">
-                               <div class="col-md-6 col-lg-4 mb-5 pb-lg-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-shield-alt fa-2x text-primary px-3"></span>
-                                       </div>
+                                       <h4 class="title is-4">{{ _("Robust Network Security") }}</h4>
 
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Firewall") }}</h5>
-                                               <p>
-                                                       IPFire comes with a versatile and state of the art
-                                                       firewall engine that makes even the most complex
-                                                       setups easy to administer.
-                                               </p>
-                                       </div>
+                                       <p class="is-size-5">
+                                               IPFire offers a powerful and secure firewall solution designed
+                                               to protect networks against evolving cyber threats.
+                                       </p>
                                </div>
 
-                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-fast-forward fa-2x text-primary px-3"></span>
-                                       </div>
+                               <div class="column has-text-centered">
+                                       <span class="fas fa-terminal fa-4x p-4"></span>
 
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Performance") }}</h5>
-                                               <p>
-                                                       IPFire is ready for high performance networks
-                                                       and running evenly well on embedded hardware.
-                                               </p>
-                                       </div>
-                               </div>
-
-                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-couch fa-2x text-primary px-3"></span>
-                                       </div>
+                                       <h4 class="title is-4">{{ _("Tailored to Your Needs") }}</h4>
 
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Easy to use") }}</h5>
-                                               <p class="mb-1">
-                                                       IPFire is set up easily in 15 to 20 minutes
-                                                       but also comes with expert features that
-                                                       are needed in professional networks.
-                                               </p>
-                                       </div>
-                               </div>
-
-                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-lock fa-2x text-primary px-3"></span>
-                                       </div>
-
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Network Security") }}</h5>
-                                               <p>
-                                                       IPFire is designed for high security.
-                                                       It is hardened to protect itself from attacks
-                                                       from the network.
-                                               </p>
-                                       </div>
+                                       <p class="is-size-5">
+                                               Enjoy the flexibility of customizing IPFire to match your unique
+                                               network requirements, ensuring a personalized and secure setup.
+                                       </p>
                                </div>
 
-                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fab fa-osi fa-2x text-primary px-3"></span>
-                                       </div>
+                               <div class="column has-text-centered">
+                                       <span class="fas fa-fire fa-4x p-4"></span>
 
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Open Source") }}</h5>
-                                               <p>
-                                                       IPFire is free software and developed by an open community,
-                                                       that improves it every single day.
-                                               </p>
-                                       </div>
-                               </div>
+                                       <h4 class="title is-4">{{ _("Community-Driven") }}</h4>
 
-                               <div class="col-md-6 col-lg-4 mb-5 d-flex">
-                                       <div class="align-self-stretch">
-                                               <span class="fas fa-heart fa-2x text-primary px-3"></span>
-                                       </div>
-
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Trusted by thousands") }}</h5>
-                                               <p>
-                                                       IPFire is developed in Europe and used all over the world
-                                                       <a href="https://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
-                                                       by hundreds of thousands of users every day.
-                                               </p>
-                                       </div>
+                                       <p class="is-size-5">
+                                               Be part of a thriving community where users and developers collaborate,
+                                               sharing insights and innovations to enhance IPFire.
+                                       </p>
                                </div>
                        </div>
                </div>
        </section>
 
-       <section>
+       <section class="section">
                <div class="container">
-                       <div class="row">
-                               <div class="col-12 col-md-6 col-lg-5 mb-5">
-                                       <h1>Latest Release</h1>
-
-                                       <p class="mb-0">
-                                               <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
-                                       </p>
-
-                                       <h3 class="mb-5">
-                                               {% if latest_release.post %}
-                                                       <a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
-                                                               {{ _("%s has been released!") % latest_release.name }}
-                                                       </a>
-                                               {% else %}
-                                                       {{ _("%s has been released!") % latest_release.name }}
-                                               {% end %}
-                                       </h3>
-
-                                       <div class="row">
-                                               <div class="col-12 col-sm-6 col-md-12 col-xl-5 mb-3">
-                                                       <a class="btn btn-primary btn-block" href="/download">
-                                                               <span class="fas fa-download"></span> {{ _("Download") }}
-                                                       </a>
+                       <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>
+                                                               Experience next-level security with our high-performance
+                                                               appliances, crafted to optimize IPFire's capabilities.
+                                                               Whether you're fortifying a business infrastructure or
+                                                               safeguarding your home network, we have the right
+                                                               appliance solution tailored for you.
+                                                       </p>
+
+                                                       <p>
+                                                               We are your partners in ensuring continuous network security.
+                                                               Our support solutions keep your systems running smoothly,
+                                                               providing peace of mind in the ever-evolving landscape of
+                                                               security.
+                                                       </p>
                                                </div>
 
-                                               <div class="col-12 col-sm-6 col-md-12 col-xl-5 mb-3">
-                                                       <a class="btn btn-secondary btn-block" href="/donate">
-                                                               <span class="fas fa-heart"></span> {{ _("Donate") }}
+                                               <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>
-
-                               <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
-                                       <h1>{{ _("What's going on?") }}</h1>
-
-                                       <dl class="dl-horizontal">
-                                               {% for post in posts %}
-                                                       <dt>
-                                                               <small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
-                                                       </dt>
 
-                                                       <dd class="text-overflow mb-4">
-                                                               <a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
-                                                       </dd>
-                                               {% end %}
-                                       </dl>
-
-                                       <a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</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>