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/atom+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 h-100">
  13                         {% module ChristmasBanner() %}
  14
  15                         <div class="row d-flex h-100 flex-fill flex-md-row-reverse align-items-center">
  16                                 <div class="col-12 col-md-5 my-5 text-center">
  17                                         <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
  18                                 </div>
  19
  20                                 <div class="col-12 col-md-7 px-3">
  21                                         <h1 class="mb-3">{{ _("The Open Source Firewall") }}</h1>
  22
  23                                         {% if latest_release %}
  24                                                 <span>
  25                                                         {{ _("Latest Release:") }}
  26                                                         <a href="/download">{{ latest_release.name }}</a>
  27                                                         {{ _("from %s") % locale.format_date(latest_release.date, shorter=True) }}
  28                                                 </span>
  29                                         {% end %}
  30
  31                                         <div class="btn-toolbar my-5">
  32                                                 <a class="btn btn-outline-primary glow-primary btn-lg mr-2" href="/download">{{ _("Download") }}</a>
  33                                                 <a class="btn btn-outline-secondary glow-secondary btn-lg ml-2" href="/features">{{ _("Features") }}</a>
  34                                         </div>
  35                                 </div>
  36                         </div>
  37                 </div>
  38         </header>
  39
  40         <section class="inverse">
  41                 <div class="container">
  42                         <div class="row mb-5">
  43                                 <div class="col-12 col-md-9 col-lg-7">
  44                                         <h1 class="mb-0">{{ _("Secure your network with IPFire") }}</h1>
  45
  46                                         <p>
  47                                                 {{ _("IPFire is a hardened, versatile, state-of-the-art Open Source firewall based on Linux.") }}
  48                                                 {{ _("Its ease of use, high performance in any scenario and extensibility make it usable for everyone.") }}
  49                                         </p>
  50
  51                                         <a class="btn btn-secondary mb-5" href="/features">{{ _("Learn More") }}</a>
  52                                 </div>
  53                         </div>
  54
  55                         <div class="row mt-5">
  56                                 <div class="col-md-6 col-lg-4 mb-5 d-flex">
  57                                         <div class="align-self-stretch">
  58                                                 <span class="fas fa-shield-alt fa-2x text-primary px-3"></span>
  59                                         </div>
  60
  61                                         <div class="flex-column">
  62                                                 <h5 class="mb-3">{{ _("Security") }}</h5>
  63
  64                                                 <p>
  65                                                         {{ _("Security is the highest priority in IPFire.") }}
  66                                                         {{ _("It is hardened to protect itself from attacks from the Internet and prevents attacks on your network.") }}
  67                                                 </p>
  68                                         </div>
  69                                 </div>
  70
  71                                 <div class="col-md-6 col-lg-4 mb-5 d-flex">
  72                                         <div class="align-self-stretch">
  73                                                 <span class="fas fa-fire fa-2x text-primary px-3"></span>
  74                                         </div>
  75
  76                                         <div class="flex-column">
  77                                                 <h5 class="mb-3">{{ _("Firewall") }}</h5>
  78
  79                                                 <p>
  80                                                         {{ _("Its powerful firewall engine and Intrusion Prevention System protects your network against attacks from the Internet and Denial-of-Service attacks.") }}
  81                                                 </p>
  82                                         </div>
  83                                 </div>
  84
  85                                 <div class="col-md-6 col-lg-4 mb-5 d-flex">
  86                                         <div class="align-self-stretch">
  87                                                 <span class="fab fa-osi fa-2x text-primary px-3"></span>
  88                                         </div>
  89
  90                                         <div class="flex-column">
  91                                                 <h5 class="mb-3">{{ _("Open Source") }}</h5>
  92
  93                                                 <p>
  94                                                         {{ _("IPFire is free software and developed by an open community and trusted by hundreds of thousands of users from all around the world.") }}
  95                                                 </p>
  96                                         </div>
  97                                 </div>
  98                         </div>
  99                 </div>
 100         </section>
 101 {% end block %}