{% block title %}{{ _("Support") }}{% end block %}
{% block container %}
- <div class="header">
+ <section class="hero has-background-primary-light">
+ <div class="hero-body">
+ <div class="container">
+ <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <ul>
+ <li>
+ <a href="/">Home</a>
+ </li>
+ <li class="is-active">
+ <a href="#" aria-current="page">Support</a>
+ </li>
+ </ul>
+ </nav>
+ <h1 class="title is-1">{{ _("Support") }}</h1>
+ <p class="subtitle">
+ {{ _("Need Help?")}}
+ {{ _("We are here for you") }}
+ </p>
+ </div>
+ </div>
+ </section>
+ <!--<div class="header">
<div class="container">
<h1>{{ _("Need Help?") }}</h1>
{{ _("We are here for you") }}
</p>
</div>
- </div>
+ </div>-->
<div class="container">
- <section>
- <div class="row align-items-center justify-content-between flex-lg-row-reverse">
- <div class="col-12 col-lg-3 text-center">
- <i class="fas fa-pen-alt icon-large my-5"></i>
+ <section class="section is-medium">
+ <div class="columns">
+ <div class="column is-1"></div>
+ <div class="column is-1 is-narrow">
+ <i class="fas fa-solid fa-pen-alt fa-5x"></i>
</div>
+ <div class="column is-1"></div>
- <div class="col-12 col-lg-9">
- <p class="lead">
- Our wiki has everything there is to know about IPFire
- </p>
+ <div class="column is-6">
+ <h5 class="title is-5">
+ IPFire<span class="has-text-primary">_</span>Wiki
+ </h5>
<p>
+ Our wiki has everything there is to know about IPFire
It is written by the community and everyone can join and improve it
</p>
- <a class="btn btn-primary" href="https://wiki.ipfire.org/">
+ </div>
+ <div class="column">
+ <button class="button is-primary is-centered is-narrow is-large has-text-weight-bold" href="https://wiki.ipfire.org/">
{{ _("Go to Wiki") }}
- </a>
+ </button>
</div>
</div>
</section>
- <section>
- <div class="card bg-lwl text-white p-5">
- <div class="row flex-lg-row-reverse justify-content-lg-between">
- <div class="col-12 col-lg-3 text-center">
- <img class="img-fluid w-100 my-5" src="{{ static_url("img/lightningwirelabs-logo.svg") }}"
- alt="{{ _("Lightning Wire Labs") }}">
+ <section class="is-large">
+ <div class="has-background-lwl has-text-white">
+ <div class="columns is-centered is-vcentered">
+ <div class="column is-7">
+ <section class="section">
+ <div class="block">
+ <h3 class="title is-3 has-text-white">{{ _("Get Professional Support") }}</h4>
+ </div>
+ <div class="block">
+ <p>
+ Lightning Wire Labs provides professional support services
+ for companies that use IPFire.
+ </p>
+
+ <p>
+ The team of developers implements custom solutions based on IPFire and
+ carries out development of new features.
+ They will help you with designing a secure network that is tailored to
+ the specific needs of your business and support you with the integration
+ of IPFire.
+ </p>
+ </div>
+ <div class="block">
+ <button class="button is-white has-text-lwl has-text-weight-bold" href="https://www.lightningwirelabs.com/">
+ {{ _("Go to Website") }}
+ </button>
+ </div>
+ </section>
</div>
-
- <div class="col-12 col-lg-7">
- <h4>{{ _("Get Professional Support") }}</h4>
-
- <p>
- Lightning Wire Labs provides professional support services
- for companies that use IPFire.
- </p>
-
- <p>
- The team of developers implements custom solutions based on IPFire and
- carries out development of new features.
- They will help you with designing a secure network that is tailored to
- the specific needs of your business and support you with the integration
- of IPFire.
- </p>
-
- <a class="btn btn-secondary" href="https://www.lightningwirelabs.com/">
- {{ _("Go to Website") }}
- </a>
+ <div class="column is-2">
+ <figure class="image is-128x128">
+ <img src="{{ static_url("img/lightningwirelabs-logo.svg") }}" alt="{{ _("Lightning Wire Labs") }}">
+ </figure>
</div>
</div>
</div>
</section>
- </div>
- <section>
- <div class="container">
- <div class="row align-items-center justify-content-between">
- <div class="col-12 col-lg-3 text-center">
- <span class="fas fa-hands-helping icon-large my-5"></span>
+
+ <section class="section is-medium">
+ <div class="columns">
+ <div class="column is-1"></div>
+ <div class="column is-1 is-narrow">
+ <i class="fas fa-solid fa-hands-helping fa-5x"></i>
</div>
+ <div class="column is-1"></div>
- <div class="col-12 col-lg-9">
- <h4>
- IPFire<span class="text-primary">_</span>Community
- </h4>
+ <div class="column is-6">
+ <h5 class="title is-5">
+ IPFire<span class="has-text-primary">_</span>Community
+ </h5>
<p>
Talk to the IPFire Community on our community portal.
- </p>
-
- <p>
Ask about how to get started with IPFire, how you can
contribute to the project, and what else you always
wanted to know about IPFire...
</p>
-
- <a class="btn btn-primary" href="https://community.ipfire.org/">
+ </div>
+ <div class="column">
+ <button class="button is-primary is-centered is-narrow is-large has-text-weight-bold" href="https://community.ipfire.org/">
{{ _("Go to Community") }}
- </a>
+ </button>
</div>
</div>
- </div>
- </section>
+ </section>
+ </div>
{% end block %}