src/templates/index.html

   1 {% extends "base.html" %}
   2
   3 {% block head %}
   4         <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.ipfire.org/feed.xml" />
   5 {% end block %}
   6
   7 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
   8
   9 {% block container %}
  10         <div class="main">
  11                 <div class="container intro">
  12                         <div class="row flex-md-row-reverse">
  13                                 <div class="col-md-5 my-5 text-center">
  14                                         <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
  15                                 </div>
  16
  17                                 <div class="col-md-7 my-5 align-self-center">
  18                                         <h1>The Open Source Firewall Distribution</h1>
  19
  20                                         <div class="btn-toolbar">
  21                                                 <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
  22                                                 <a class="btn btn-outline-secondary btn-lg ml-3" href="/features">{{ _("Features") }}</a>
  23                                         </div>
  24                                 </div>
  25                         </div>
  26                 </div>
  27
  28                 <section id="features">
  29                         <div class="container">
  30                                 <div class="row mb-5">
  31                                         <div class="col col-md-6">
  32                                                 <h1 class="mb-0">{{ _("Secure up your network with IPFire") }}</h1>
  33
  34                                                 <p>
  35                                                         IPFire comes with a versatile and state of the art firewall engine
  36                                                         that makes even the most complex setups easy to administer.
  37                                                 </p>
  38
  39                                                 <div class="btn-toolbar">
  40                                                         <a class="btn btn-primary mr-2" href="/get-started">{{ _("Get Started") }}</a>
  41                                                         <a class="btn btn-secondary ml-2" href="/features">{{ _("Learn more") }}</a>
  42                                                 </div>
  43                                         </div>
  44                                 </div>
  45
  46                                 <div class="row mt-5 mb-lg-6 mb-md-5">
  47                                         <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
  48                                                 <div class="feature_icons align-self-stretch">
  49                                                         <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
  50                                                 </div>
  51                                                 <div class="flex-column">
  52                                                         <h5 class="pb-3">{{ _("Firewall") }}</h5>
  53                                                         <p>
  54                                                                 IPFire comes with a versatile and state of the art
  55                                                                 firewall engine that makes even the most complex
  56                                                                 setups easy to administer.
  57                                                         </p>
  58                                                 </div>
  59                                         </div>
  60
  61                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
  62                                                 <div class="feature_icons align-self-stretch">
  63                                                         <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
  64                                                 </div>
  65                                                 <div class="flex-column">
  66                                                         <h5 class="pb-3">{{ _("Performance") }}</h5>
  67                                                         <p>
  68                                                                 IPFire is ready for high performance networks
  69                                                                 and running evenly well on embedded hardware.
  70                                                         </p>
  71                                                 </div>
  72                                         </div>
  73
  74                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
  75                                                 <div class="feature_icons align-self-stretch">
  76                                                         <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
  77                                                 </div>
  78                                                 <div class="flex-column">
  79                                                         <h5 class="pb-3">{{ _("Easy to use") }}</h5>
  80                                                         <p class="mb-1">
  81                                                                 IPFire is set up easily in 15 to 20 minutes
  82                                                                 but also comes with expert features that
  83                                                                 are needed in professional networks.
  84                                                         </p>
  85                                                 </div>
  86                                         </div>
  87
  88                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
  89                                                 <div class="feature_icons align-self-stretch">
  90                                                         <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
  91                                                 </div>
  92                                                 <div class="flex-column">
  93                                                         <h5 class="pb-3">{{ _("Network Security") }}</h5>
  94                                                         <p>
  95                                                                 IPFire is designed for high security.
  96                                                                 It is hardened to protect itself from attacks
  97                                                                 from the network.
  98                                                         </p>
  99                                                 </div>
 100                                         </div>
 101
 102                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
 103                                                 <div class="feature_icons align-self-stretch">
 104                                                         <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
 105                                                 </div>
 106                                                 <div class="flex-column">
 107                                                         <h5 class="pb-3">{{ _("Open Source") }}</h5>
 108                                                         <p>
 109                                                                 IPFire is free software and developed by an open community,
 110                                                                 that improves it every single day.
 111                                                         </p>
 112                                                 </div>
 113                                         </div>
 114
 115                                         <div class="col-md-6 col-lg-4 mb-6 d-flex">
 116                                                 <div class="feature_icons align-self-stretch">
 117                                                         <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
 118                                                 </div>
 119                                                 <div class="flex-column">
 120                                                         <h5 class="pb-3">{{ _("Trusted by thousands") }}</h5>
 121                                                         <p>
 122                                                                 IPFire is developed in Europe and used all over the world
 123                                                                 <a href="https://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
 124                                                                 by hundreds of thousands of users every day.
 125                                                         </p>
 126                                                 </div>
 127                                         </div>
 128                                 </div>
 129                         </div>
 130                 </section>
 131
 132                 <section id="news">
 133                         <div class="container">
 134                                 <div class="row">
 135                                         <div class="col-12 col-md-6 col-lg-5 mb-5">
 136                                                 <h1>Latest Release</h1>
 137
 138                                                 <p class="mb-0">
 139                                                         <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
 140                                                 </p>
 141
 142                                                 <h3 class="mb-5">
 143                                                         {% if latest_release.post %}
 144                                                                 <a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
 145                                                                         {{ _("%s has been released!") % latest_release.name }}
 146                                                                 </a>
 147                                                         {% else %}
 148                                                                 {{ _("%s has been released!") % latest_release.name }}
 149                                                         {% end %}
 150                                                 </h3>
 151
 152                                                 <div class="btn-toolbar mb-5">
 153                                                         <a class="btn btn-primary mr-3" href="/download">
 154                                                                 <svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
 155                                                                 {{ _("Download") }}
 156                                                         </a>
 157
 158                                                         <a class="btn btn-secondary ml-3" href="/donate">
 159                                                                 <svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
 160                                                                 {{ _("Donate") }}
 161                                                         </a>
 162                                                 </div>
 163                                         </div>
 164
 165                                         <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
 166                                                 <h1>What&rsquo;s going on?</h1>
 167
 168                                                 <dl class="dl-horizontal">
 169                                                         {% for post in posts %}
 170                                                                 <dt>
 171                                                                         <small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
 172                                                                 </dt>
 173
 174                                                                 <dd class="text-overflow mb-4">
 175                                                                         <a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
 176                                                                 </dd>
 177                                                         {% end %}
 178                                                 </dl>
 179
 180                                                 <a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</a>
 181                                         </div>
 182                                 </div>
 183                         </div>
 184                 </section>
 185
 186                 <section id="appliances">
 187                         <div class="container">
 188                                 <h1 class="text-center">{{ _("Professional Appliances & Services") }}</h1>
 189
 190                                 <div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
 191                                         <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
 192                                                 <p class="lead">
 193                                                         <a href="https://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
 194                                                         IPFire hardware appliances for enterprises, large businesses and SOHO.
 195                                                         Deploying one of these on your network will provide you with the
 196                                                         greatest reliability, stability and performance.
 197                                                 </p>
 198                                         </div>
 199                                         <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
 200                                                 <a class="btn btn-light btn-lg btn-block px-md-0 mb-4" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
 201                                                 <a class="btn btn-light btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
 202                                         </div>
 203                                 </div>
 204                                 <div class="text-center">
 205                                         <picture>
 206                                                 <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
 207                                                 <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
 208                                                 <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
 209                                                 <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
 210                                                 <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
 211                                         </picture>
 212                                 </div>
 213                         </div>
 214                 </section>
 215         </div>
 216 <script>
 217 $(document).ready(function () {
 218         $('.scroll').on('click', function(event) {
 219                         event.preventDefault();
 220                         $('html, body').stop().animate({
 221                                 scrollTop: $('#features').offset().top -72
 222                         }, 1000);
 223         });
 224 });
 225 </script>
 226 {% end block %}