-{% extends "base-1.html" %}
+{% extends "base.html" %}
+
+{% block head %}
+ <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 %}
- <section class="intro">
- <div class="container">
- <div class="branding">
- <h1 class="display-1">IP<strong>Fire</strong></h1>
- <h2 class="display-4">The Open Source Firewall Distribution</h2>
+ {% 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 %}
+
+
+ <a class="has-text-weight-bold" href="/blog/{{ latest_release.blog.slug }}">
+ {{ _("Read More") }}
+ </a>
+ {% end %}
+ </p>
</div>
-
- <div class="row justify-content-center">
- <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
- <a class="btn btn-outline-secondary btn-lg ml-3" href="/features">{{ _("Features") }}</a>
+ </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>
-
- <div class="page-scroll">
- <a href="#features" class="btn btn-outline-primary rounded-circle scroll">
- <svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
- </a>
- </div>
</section>
- <section id="features" class="content-section">
+ <section class="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 d-flex">
- <div class="feature_icons align-self-stretch">
- <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
- </div>
- <div class="flex-column">
- <h4 class="pb-3">{{ _("Firewall") }}</h4>
- <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>
-
- <div class="col-md-6 col-lg-4 mb-6 d-flex">
- <div class="feature_icons align-self-stretch">
- <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
- </div>
- <div class="flex-column">
- <h4 class="pb-3">{{ _("Performance") }}</h4>
- <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-6 d-flex">
- <div class="feature_icons align-self-stretch">
- <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
- </div>
- <div class="flex-column">
- <h4 class="pb-3">{{ _("Easy to use") }}</h4>
- <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-6 d-flex">
- <div class="feature_icons align-self-stretch">
- <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
- </div>
- <div class="flex-column">
- <h4 class="pb-3">{{ _("Network Security") }}</h4>
- <p>
- IPFire is designed for high security.
- It is hardened to protect itself from attacks
- from the network.
- </p>
- </div>
- </div>
-
- <div class="col-md-6 col-lg-4 mb-6 d-flex">
- <div class="feature_icons align-self-stretch">
- <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
- </div>
- <div class="flex-column">
- <h4 class="pb-3">{{ _("Open Source") }}</h4>
- <p>
- IPFire is free software and developed by an open community,
- that improves it every single day.
- </p>
- </div>
- </div>
-
- <div class="col-md-6 col-lg-4 mb-6 d-flex">
- <div class="feature_icons align-self-stretch">
- <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
- </div>
- <div class="flex-column">
- <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
- <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>
- </div>
- </div>
-
- <div class="row justify-content-center pt-0 pt-md-4">
- <a class="btn btn-primary btn-lg px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
- <a class="btn btn-white btn-lg px-4 px-md-6" href="/features">{{ _("Learn more") }}</a>
- </div>
+ <h3 class="title is-2 has-text-centered">
+ {{ _("IPFire") }}<span class="has-text-primary">_</span> ‐ {{ _("The Open Source Firewall") }}
+ </h3>
</div>
</section>
- <section id="news" class="content-section">
+ <section class="section">
<div class="container">
- <div class="row">
- <div class="col-12 col-md-6 col-lg-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="btn-toolbar mb-6">
- <a class="btn btn-primary btn-md mr-3" href="/download">
- <svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
- {{ _("Download") }}
- </a>
- <a class="btn btn-white btn-md ml-3" href="/donate">
- <svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
- {{ _("Donate") }}
- </a>
- </div>
-
- <p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
+ <div class="columns">
+ <div class="column has-text-centered">
+ <span class="fas fa-shield-alt fa-4x p-4"></span>
+
+ <h4 class="title is-4">{{ _("Robust Network Security") }}</h4>
+
+ <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-12 col-md-6 col-lg-5 offset-lg-2">
- <h2 class="display-2 mb-6">What’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) }} </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="https://planet.ipfire.org/post/{{ item.slug }}">
- {{ item.title }}
- </a>
- {% end %}
- </dd>
- {% end %}
- </dl>
-
- <a class="btn btn-white" href="/news">{{ _("Read More") }}</a>
-
+
+ <div class="column has-text-centered">
+ <span class="fas fa-terminal fa-4x p-4"></span>
+
+ <h4 class="title is-4">{{ _("Tailored to Your Needs") }}</h4>
+
+ <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="column has-text-centered">
+ <span class="fas fa-fire fa-4x p-4"></span>
+
+ <h4 class="title is-4">{{ _("Community-Driven") }}</h4>
+
+ <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 id="fireinfo" class="content-section">
+ <section class="section">
<div class="container">
- <h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
-
- <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6 justify-content-center">
- <div class="col-6 col-md-3 mb-6 text-center">
- <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
- <h5 class="pb-5 fireinfo">{{ latest_release.name }}</h5>
- <div class="r_circle circle mt-5">
- <p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
- </div>
- <script>
- $('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
- </script>
- </div>
+ <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>
- {% if fireinfo_country %}
- <div class="col-6 col-md-3 text-center">
- <p class="mb-0 mb-sm-3 fireinfo_cat truncate">
- {{ _("%.0f%% of all IPFire systems are running in") % (fireinfo_country.percentage * 100) }}
- </p>
- <h5 class="pb-5 fireinfo">{{ fireinfo_country.country.name }}</h5>
- <div class="v_circle circle mt-5">
- <p class="fireinfo_per">{{ "%.0f%%" % (fireinfo_country.percentage * 100) }}</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="block">
+ <a class="button is-white has-text-lwl has-text-weight-bold" href="https://store.lightningwirelabs.com/">
+ {{ _("Go to Store") }}
+ </a>
</div>
- <script>
- $('.v_circle').circleProgress({ value: {{ fireinfo_country.percentage }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
- </script>
</div>
- {% end %}
- </div>
-
- <div class="row justify-content-center">
- <a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
- </div>
- </div>
- </section>
- <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 pb-lg-4">
- <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
- <p class="lead">
- <a href="https://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.
- </p>
- </div>
- <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
- <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
- <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</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 class="text-center">
- <picture>
- <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
- <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
- <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
- <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
- <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
- </picture>
- </div>
</div>
</section>
-<script>
-$(document).ready(function () {
- $('.scroll').on('click', function(event) {
- event.preventDefault();
- $('html, body').stop().animate({
- scrollTop: $('#features').offset().top -72
- }, 1000);
- });
-});
-</script>
{% end block %}
projects / ipfire.org.git / blobdiff