src/templates/index.html

   1 {% extends "base.html" %}
   2
   3 {% block head %}
   4         <meta name="description" content="{{ _("IPFire is a hardened, versatile, state-of-the-art Open Source firewall based on Linux.") }}" />
   5         <link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.ipfire.org/feed.xml" />
   6 {% end block %}
   7
   8 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
   9
  10 {% block container %}
  11         <header class="cover">
  12                 <div class="container d-flex h-100 align-items-center">
  13                         <div class="row flex-fill flex-md-row-reverse">
  14                                 <div class="col-12 col-md-5 my-5 text-center">
  15                                         <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
  16                                 </div>
  17
  18                                 <div class="col-12 col-md-7 align-self-center px-3">
  19                                         <h1 class="mb-0">{{ _("The Open Source Firewall") }}</h1>
  20
  21                                         {% if latest_release %}
  22                                                 <p>
  23                                                         {{ _("Latest Release:") }}
  24                                                         <a href="/download">{{ latest_release.name }}</a>
  25                                                         {{ _("from %s") % locale.format_date(latest_release.date, shorter=True) }}
  26                                                 </p>
  27                                         {% end %}
  28
  29                                         <div class="btn-toolbar my-5">
  30                                                 <a class="btn btn-outline-primary btn-glow-primary btn-lg mr-2" href="/download">{{ _("Download") }}</a>
  31                                                 <a class="btn btn-outline-secondary btn-glow-secondary btn-lg ml-2" href="/features">{{ _("Features") }}</a>
  32                                         </div>
  33                                 </div>
  34                         </div>
  35                 </div>
  36         </header>
  37
  38         <section class="inverse">
  39                 <div class="container">
  40                         <div class="row mb-5">
  41                                 <div class="col-12 col-md-9 col-lg-7">
  42                                         <h1 class="mb-0">{{ _("Secure your network with IPFire") }}</h1>
  43
  44                                         <p>
  45                                                 {{ _("IPFire is a hardened, versatile, state-of-the-art Open Source firewall based on Linux.") }}
  46                                                 {{ _("Its ease of use, high performance in any scenario and extensibility make it usable for everyone.") }}
  47                                         </p>
  48
  49                                         <a class="btn btn-secondary mb-5" href="/features">{{ _("Learn More") }}</a>
  50                                 </div>
  51                         </div>
  52
  53                         <div class="row mt-5">
  54                                 <div class="col-md-6 col-lg-4 mb-5 d-flex">
  55                                         <div class="align-self-stretch">
  56                                                 <span class="fas fa-shield-alt fa-2x text-primary px-3"></span>
  57                                         </div>
  58
  59                                         <div class="flex-column">
  60                                                 <h5 class="mb-3">{{ _("Security") }}</h5>
  61
  62                                                 <p>
  63                                                         {{ _("Security is the highest priority in IPFire.") }}
  64                                                         {{ _("It is hardened to protect itself from attacks from the Internet and prevents attacks on your network.") }}
  65                                                 </p>
  66                                         </div>
  67                                 </div>
  68
  69                                 <div class="col-md-6 col-lg-4 mb-5 d-flex">
  70                                         <div class="align-self-stretch">
  71                                                 <span class="fas fa-fire fa-2x text-primary px-3"></span>
  72                                         </div>
  73
  74                                         <div class="flex-column">
  75                                                 <h5 class="mb-3">{{ _("Firewall") }}</h5>
  76
  77                                                 <p>
  78                                                         {{ _("Its powerful firewall engine and Intrusion Prevention System protects your network against attacks from the Internet and Denial-of-Service attacks.") }}
  79                                                 </p>
  80                                         </div>
  81                                 </div>
  82
  83                                 <div class="col-md-6 col-lg-4 mb-5 d-flex">
  84                                         <div class="align-self-stretch">
  85                                                 <span class="fab fa-osi fa-2x text-primary px-3"></span>
  86                                         </div>
  87
  88                                         <div class="flex-column">
  89                                                 <h5 class="mb-3">{{ _("Open Source") }}</h5>
  90
  91                                                 <p>
  92                                                         {{ _("IPFire is free software and developed by an open community and trusted by hundreds of thousands of users from all around the world.") }}
  93                                                 </p>
  94                                         </div>
  95                                 </div>
  96                         </div>
  97                 </div>
  98         </section>
  99
 100         <section>
 101                 <div class="container">
 102                         <div class="row">
 103                                 <div class="col-12 col-md-6 col-lg-5 mb-5">
 104                                         <h1>{{ _("Latest Release") }}</h1>
 105
 106                                         <p class="mb-0">
 107                                                 <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
 108                                         </p>
 109
 110                                         <h3 class="mb-5">
 111                                                 {% if latest_release.post %}
 112                                                         <a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
 113                                                                 {{ _("%s has been released!") % latest_release.name }}
 114                                                         </a>
 115                                                 {% else %}
 116                                                         {{ _("%s has been released!") % latest_release.name }}
 117                                                 {% end %}
 118                                         </h3>
 119
 120                                         <div class="row">
 121                                                 <div class="col-12 col-sm-6 col-md-12 col-xl-5 mb-3">
 122                                                         <a class="btn btn-primary btn-block" href="/download">
 123                                                                 <span class="fas fa-download"></span> {{ _("Download") }}
 124                                                         </a>
 125                                                 </div>
 126
 127                                                 <div class="col-12 col-sm-6 col-md-12 col-xl-5 mb-3">
 128                                                         <a class="btn btn-secondary btn-block" href="/donate">
 129                                                                 <span class="fas fa-heart"></span> {{ _("Donate") }}
 130                                                         </a>
 131                                                 </div>
 132                                         </div>
 133                                 </div>
 134
 135                                 <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
 136                                         <h1>{{ _("What's going on?") }}</h1>
 137
 138                                         <dl class="dl-horizontal">
 139                                                 {% for post in posts %}
 140                                                         <dt>
 141                                                                 <small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
 142                                                         </dt>
 143
 144                                                         <dd class="text-overflow mb-4">
 145                                                                 <a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
 146                                                         </dd>
 147                                                 {% end %}
 148                                         </dl>
 149
 150                                         <a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</a>
 151                                 </div>
 152                         </div>
 153                 </div>
 154         </section>
 155 {% end block %}