--- a/templates/default/presentation/presentation.html	Tue May 26 12:38:56 2020 +0200
+++ b/templates/default/presentation/presentation.html	Fri Apr 16 18:51:12 2021 +0200
@@ -1,200 +1,385 @@
 {% if not embedded %}{% extends 'base/base.html' %}{% endif %}
 
-{% block body %}
-{{ icon_defs('chat', 'lock-filled', 'blog', 'exchange', 'picture', 'calendar', 'clipboard', 'desktop', 'mobile', 'globe', 'terminal', 'shield', 'ok', 'brush', 'unlink', 'heart-filled', 'group', 'box') }}
-<div class="box box--zero box--center">
-    <h1>
-        <img class="img--inline-bottom img--very-small" src="{{media_path}}icons_svg/sat.svg">
-        Salut à Toi
-    </h1>
-    <p class="heading__subtitle">{% trans %}The Universal Communication Ecosystem{% endtrans %}</p>
-</div>
+{% macro download_box(url, name, alias, description) %}
+    <div class="column content has-text-centered">
+        <a href="{{url}}" target="_blank" class="has-text-black">
+            <figure class="icon is-large">
+                {{ icon("box") }}
+            </figure>
+            <figcaption>
+                {% trans %}Click here to install {% endtrans %}<br>
+                <span class="has-text-weight-bold">{{name}}</span><br>
+                (alias <span class="is-italic">{{alias}}</span>, {{description}})
+            </figcaption>
+        </a>
+    </div>
+{% endmacro %}
 
-
-<div class="box box--quarter-screen box--large box--center box--hollow box--extra-margin">
-    <p class="description">{% trans %}Salut à Toi is a all-in-one tool to manage all your communications needs: instant messaging, (micro)blogging, file sharing, events, forums, tasks management, etc.{% endtrans %}</p>
-</div>
+{% block body_wrapper %}
+{{ icon_defs('chat', 'lock-filled', 'blog', 'exchange', 'picture', 'calendar', 'clipboard', 'desktop', 'mobile', 'globe', 'terminal', 'shield', 'ok', 'brush', 'unlink', 'heart-filled', 'group', 'box', 'plus-circled') }}
 
 
-<div class="paired-slides box--large box--middle box-zero box--half-screen box--center">
-    <div><img class="img--center" src="cagou_chat_desktop.jpg"></div>
-    <ul class="list list--features">
-        <li class="list__item">
-            {{ icon('chat', cls='icon--small') }}
-            {% trans %}chat with your friends, family or coworkers{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('lock-filled', cls='icon--small') }}
-            {% trans %}encrypt conversations to protect your privacy{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('blog', cls='icon--small') }}
-            {% trans %}blog publicly or only with a group of contacts{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('exchange', cls='icon--small') }}
-            {% trans %}share files directly (peer to peer) or store them on your server and access them from anywhere{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('picture', cls='icon--small') }}
-            {% trans %}share private photos albums with your family{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('calendar', cls='icon--small') }}
-            {% trans %}create and manage events{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('clipboard', cls='icon--small') }}
-            {% trans %}organise your work using tickets handler{% endtrans %}
-        </li>
-    </ul>
-</div>
-
+<section class="hero is-halfheight is-primary">
+    <div id="toto" class="hero-body">
+        <div class="container">
+            <nav class="level is-mobile">
+                <div class="level-left is-flex-shrink-1">
+                    <div class="level-item">
+                        <figure class="image is-128x128">
+                            <img src="{{media_path}}icons_svg/sat.svg" alt="Libervia logo">
+                        </figure>
+                    </div>
+                    <div class="level-item is-flex-direction-column is-align-items-flex-start is-flex-shrink-1">
+                        <p class="is-size-1 has-text-weight-bold">Libervia</p>
+                        <p class="is-size-5">{% trans %}The Universal Communication Ecosystem{% endtrans %}</p>
+                    </div>
+                </div>
+            </nav>
+            <div class="message is-info">
+                <div class="message-body">
+                    <p class="is-size-5">
+                    {% trans %}Libervia is a all-in-one tool to manage all your communications needs: instant messaging, (micro)blogging, file sharing, photo albums, events, forums, tasks, etc.{% endtrans %}
+                    </p>
+                </div>
+            </div>
+            <nav class="level is-mobile">
+                <div class="level-left">
+                    <div class="level-item">
+                        <a class="button is-large is-info is-rounded" href="#demo">{% trans %}Try it!{% endtrans %}</a>
+                    </div>
+                    <div class="level-item">
+                        <a class="button is-large is-info is-rounded" href="#installation">{% trans %}Install it!{% endtrans %}</a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+</section>
 
-<div class="paired-slides box--large box--middle box-zero box--half-screen box--center">
-    <div><img class="img--center" src="libervia_event.png"></div>
-    <ul class="list list--features">
-        <li class="list__item">
-            {{ icon('desktop', cls='icon--small') }}
-            {% trans %}works natively on desktop (not a disguised web browser){% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('mobile', cls='icon--small') }}
-            {% trans %}works natively on mobile devices (Android){% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('globe', cls='icon--small') }}
-            {% trans %}works on the web{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('shield', cls='icon--small') }}
-            {% trans %}most of web pages can be viewed without javascript enabled, improving security (javascript is used when available){% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('terminal', cls='icon--small') }}
-            {% trans %}powerful command-line interface{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('ok', cls='icon--small') }}
-            {% trans %}cross-platform{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('brush', cls='icon--small') }}
-            {% trans %}highly modular and customisable{% endtrans %}
-        </li>
-    </ul>
-</div>
+<section class="hero is-halfheight">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('chat', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Chat with your friends, family or coworkers{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('lock-filled', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Encrypt conversations to protect your privacy{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('blog', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Blog publicly or only with a group of contacts{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('exchange', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Share files directly (peer to peer) or store them on your server and access them from anywhere{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('picture', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Share private photos albums with your family{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('calendar', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Create and manage events{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('clipboard', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Organise your day to day life or work with lists{% endtrans %}
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="content">
+                        <img src="libervia_web_0.8_blog.jpg" alt="Screenshot of Libervia web 0.8 blog" class="screenshot_web">
+                    </div>
+                </div>
+            </div>
+        </div>
+</section>
 
+<section class="hero is-halfheight has-background-primary-dark has-text-white">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                        <img src="libervia_web_0.8_list_invitation.jpg" alt="">
+                </div>
+                <div class="column">
+                    <div class="content is-size-4">
+                        {% trans %}With its easy invitation system, you can smoothly meet your family or friends. It's a perfect fit to share with your loved ones.{% endtrans %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
 
-<div class="box box--quarter-screen box--zero box--large box--center">
-    <p class="description description--emphasis">
-        {% trans url_open='<a href="/social_contract">'|safe,url_close='</a>'|safe %}
-            Salut à Toi is a Libre software, based on well established standards (XMPP), decentralised and federating. It is developed around strong ethical values. Check our {{url_open}}social contract{{url_close}}.
-        {% endtrans %}
-    </p>
-</div>
+<section class="hero is-halfheight has-background-white-ter">
+    <div class="hero-body">
+        <div class="columns">
+            <div class="column content">
+                <figure>
+                    <img src="libervia_web_0.8_photo_album.jpg" alt="Libervia-web 0.8 photo album" class="screenshot_web">
+                    <figcaption>{% trans %}Share your photo albums{% endtrans %}</figcaption>
+                </figure>
+            </div>
+            <div class="column content">
+                <figure>
+                <img src="libervia_web_0.8_forums.jpg" alt="Libervia-web 0.8 forums" class="screenshot_web">
+                    <figcaption>{% trans %}Arange topics in forums{% endtrans %}</figcaption>
+                </figure>
+            </div>
+            <div class="column content">
+                <figure>
+                <img src="libervia_web_0.8_events.jpg" alt="Libervia-web 0.8 events" class="screenshot_web">
+                    <figcaption>{% trans %}Organise events with your friends{% endtrans %}</figcaption>
+                </figure>
+            </div>
+        </div>
+
+    </div>
+</section>
 
 
-<div class="box box--zero box--large box--center">
-    <ul class="list list--features">
-        <li class="list__item list__item--show-links">
-            {{ icon('unlink', cls='icon--small') }}
-            {% trans %}Salut à Toi is a Libre software{% endtrans %}
+<section class="hero is-halfheight">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns is-vcentered">
+                <div class="column">
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('desktop', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Works natively on desktop{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('globe', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Works on the web{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('mobile', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Works natively on mobile devices (Android){% endtrans %}
+                            <span class="is-italic">
+                                [{% trans %}work in progress{% endtrans %}]
+                            </span>
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('ok', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Cross-platform{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('terminal', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Powerful command-line interface{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('brush', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Highly modular and customisable{% endtrans %}
+                        </div>
+                    </div>
+                    <div class="columns is-gapless is-mobile">
+                        <div class="column list_icon">
+                            {{ icon('plus-circled', cls='icon') }}
+                        </div>
+                        <div class="column">
+                            {% trans %}Lot of powerful tools and features accompany the project, please check documentation{% endtrans %}
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="content">
+                        <img src="libervia_mobile_0.8_chat_upload.jpg" alt="Screenshot of Libervia mobile 0.8 chat with upload panel" class="screenshot_mobile">
+                    </div>
+                </div>
+            </div>
+        </div>
+</section>
 
-            {% trans url_open='<a href="https://repos.goffi.org/sat/file/tip">'|safe,url_close='</a>'|safe %}
-                ({{url_open}}source code{{url_close}}).
+<section class="hero is-halfheight is-primary">
+    <div class="hero-body">
+        <div class="container content">
+            <p class="is-size-4">
+            {% trans url_open='<a href="/social_contract" class="is-underline">'|safe,url_close='</a>'|safe %}
+            Libervia is a Libre software, based on well established standards (XMPP), decentralised and federating. It is developed around strong ethical values. Check our {{url_open}}social contract{{url_close}}.
             {% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('heart-filled', cls='icon--small') }}
-            {% trans %}we follow a social contract, a moral engagement with the community{% endtrans %}
-        </li>
-        <li class="list__item">
-            {{ icon('group', cls='icon--small') }}
-            {% trans %}"Salut a Toi" is also the name of the association which manage the project.<br>Major decisions are debated there.{% endtrans %}
-        </li>
-    </ul>
+            </p>
+        </div>
+    </div>
+</section>
+
+<section class="hero is-halfheight has-background-white-ter">
+    <div class="hero-body is-justify-content-center">
+        <div class="is-flex is-flex-direction-column">
+            <div class="columns is-gapless is-mobile">
+                <div class="column list_icon">
+                    {{ icon('unlink', cls='icon') }}
+                </div>
+                <div class="column">
+                    {% trans %}Libervia is a Libre software{% endtrans %}
+
+                    {% trans url_open='<a href="https://repos.goffi.org/sat/file/tip">'|safe,url_close='</a>'|safe %}
+                    ({{url_open}}source code{{url_close}}).
+                    {% endtrans %}
+                </div>
+            </div>
+            <div class="columns is-gapless is-mobile">
+                <div class="column list_icon">
+                    {{ icon('heart-filled', cls='icon') }}
+                </div>
+                <div class="column">
+                    {% trans %}We follow a social contract, a moral engagement with the community{% endtrans %}
+                </div>
+            </div>
+            <div class="columns is-gapless is-mobile">
+                <div class="column list_icon">
+                    {{ icon('group', cls='icon') }}
+                </div>
+                <div class="column">
+                    {% trans %}"Salut a Toi" is the name of the association which manages the project.<br>Major decisions are debated there.{% endtrans %}
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<div id="demo" class="section container">
+    <h1 class="title is-2">{% trans %}Demo{% endtrans %}</h1>
+    <div class="box content">
+        <p>
+        {% trans
+            demo_url_open='<a href="https://www.libervia.org" target="_blank">'|safe,
+            demo_url_close='</a>'|safe
+        -%}
+        A demo server is available for you to try Libervia at {{demo_url_open}}https://www.libervia.org{{demo_url_close}}.
+        {%- endtrans %}
+        </p>
+        <div class="message is-warning">
+            <div class="message-body">
+                {% trans -%}
+                Please note that this is only for demo purpose, and all data (including accounts) may be wiped out at any time, don't use it for any serious purpose.
+                {%- endtrans %}
+            </div>
+        </div>
+    </div>
 </div>
 
-
-<div class="box box--zero box--large box--center">
-    <h2 class="heading__subtitle heading--paper">
-        {% trans %}installation{% endtrans %}
-    </h2>
-    <h3 class="heading--paper">GNU/Linux</h3>
-    <p>{% trans %}If you are on GNU/Linux the recommended way to install SàT is to use your distribution official packages. Please check your distribution to see if Salut à Toi is available (and request it if it's not). SàT is available at least on Arch Linux and Debian and its derivated.{% endtrans %}</p>
-    <p>{% trans flatpak='<a href="https://flatpak.org/" target="_blank" rel="noreferrer noopener">Flatpak</a>'|safe %}If SàT is not available or the version is too old, you can use {{flatpak}} (which may be installed by default on some recent distributions) to install it, see below.{% endtrans %}</p>
-    <h3 class="heading--paper">Flatpak</h3>
-    <p class="text--warning">
-        {% trans %}
+<div id="installation" class="section container">
+    <h1 class="title is-2">
+        {% trans %}Installation{% endtrans %}
+    </h1>
+    <h3 class="subtitle is-3">GNU/Linux</h3>
+    <div class="content box">
+        <p>{% trans %}If you are on GNU/Linux the recommended way to install Libervia is to use your distribution official packages. Please check your distribution to see if Libervia is available (and request it if it's not). Libervia is available at least on Arch Linux and Debian and its derivated.{% endtrans %}</p>
+        <p>{% trans flatpak='<a href="https://flatpak.org/" target="_blank" rel="noreferrer noopener">Flatpak</a>'|safe %}If Libervia is not available or the version is too old, you can use {{flatpak}} (which may be installed by default on some recent distributions) to install it, see below.{% endtrans %}</p>
+    </div>
+    <h3 class="subtitle is-3">Flatpak</h3>
+    <div class="message is-warning">
+        <div class="message-body">
+            {% trans %}
             Those packages are development preview, they are not stable and bugs and crashes may happen
-        {% endtrans %}
-    </p>
-    <ul class="grid">
-        {% for url, name, description in (
-            ("https://salut-a-toi.org/flatpak/org.salutatoi.Cagou_dev.flatpakref",
-             "Cagou", _("Desktop")),
+            {% endtrans %}
+        </div>
+    </div>
+    <div class="columns">
+        {% for url, name, alias, description in (
+            ("/flatpak/org.libervia.LiberviaDesktop_dev.flatpakref",
+             "Libervia Desktop", "Cagou", _("Desktop")),
 
-            ("https://salut-a-toi.org/flatpak/org.salutatoi.Primitivus_dev.flatpakref",
-             "Primitivus", _("Text User Interface")),
+            ("/flatpak/org.libervia.LiberviaTUI_dev.flatpakref",
+             "Libervia TUI", "Primitivus", _("Text User Interface")),
 
-            ("https://salut-a-toi.org/flatpak/org.salutatoi.Jp_dev.flatpakref",
-             "jp", _("Command Line Interface")),
+            ("/flatpak/org.libervia.LiberviaCLI_dev.flatpakref",
+             "Libervia CLI", "jp", _("Command-Line Interface")),
              ) %}
-            <li class='grid__item grid__item--medium grid__item--selectable'>
-                <a href="{{url}}" target="_blank">
-                    {{ icon('box', cls='icon--block icon--medium') }}
-                    <span>
-                        {% trans %}Click here to install {% endtrans %}
-                        <span class="text--emphasis">{{name}}</span> ({{description}})
-                    </span>
-                </a>
-            </li>
+             {{ download_box(url, name, alias, description) }}
         {% endfor %}
+    </div>
     </ul>
-    <div class="box">
+    <div class="box content">
         <p>{% trans %}If the links above are not working, you can use the following commands (supposing that Flatpak is already installed):{% endtrans %}</p>
-        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.salutatoi.Cagou_dev.flatpakref</pre>
-        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.salutatoi.Primitivus_dev.flatpakref</pre>
-        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.salutatoi.Jp_dev.flatpakref</pre>
+        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaDesktop_dev.flatpakref</pre>
+        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaTUI_dev.flatpakref</pre>
+        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaCLI_dev.flatpakref</pre>
     </div>
-    <h3 class="heading--paper">Android</h3>
-    <p class="text--warning">
-        {% trans %}
+    <h3 class="subtitle is-3">Android</h3>
+    <div class="message is-warning">
+        <div class="message-body">
+            {% trans %}
             This package is a development preview, it is not stable and bugs and crashes may happen
-        {% endtrans %}
-    </p>
-    <ul class="grid">
-        <li class='grid__item grid__item--medium grid__item--selectable'>
-            <a href="https://ftp.goffi.org/cagou/cagou.apk" target="_blank">
-                {{ icon('box', cls='icon--block icon--medium') }}
-                <span>
-                    {% trans %}Click here to install {% endtrans %}
-                    <span class="text--emphasis">
-                        {% trans %}Cagou for Android{% endtrans%}</span>
-                    </span>
-                </span>
-            </a>
-        </li>
-    </ul>
-    <h3 class="heading--paper">
-        {% trans %}
-            Source Code
-        {% endtrans %}
+            {% endtrans %}
+        </div>
+    </div>
+    <div class="columns">
+        {{ download_box("https://ftp.goffi.org/cagou/cagou.apk", "Libervia Mobile", "Cagou", "Android") }}
+    </div>
+    <h3 class="subtitle is-3">
+        {% trans %}Source Code{% endtrans %}
     </h3>
-    <p>{% trans doc_url_open='<a href="/documentation">'|safe,
-                doc_url_close='</a>'|safe %}If you have some technical ability, you can also install directly from source code, please check {{doc_url_open}}documentation{{doc_url_close}} for details {% endtrans %}</p>
-    <h3 class="heading--paper">
-        {% trans %}
-            Other
-        {% endtrans %}
+    <div class="box content">
+        <p>{% trans doc_url_open='<a href="/documentation">'|safe,
+                    doc_url_close='</a>'|safe %}If you have some technical ability, you can also install directly from source code, please check {{doc_url_open}}documentation{{doc_url_close}} for details {% endtrans %}</p>
+    </div>
+    <h3 class="subtitle is-3">
+        {% trans %}Other{% endtrans %}
     </h3>
-    <p>{% trans %}Please note that:{% endtrans %}</p>
-    <ul>
-        <li>{% trans %}Libervia, the web frontend, must be installed from source code, please check documentation for more details{% endtrans %}</li>
-        <li>{% trans %}There are Docker images, but outdated, so we don't list them here. We'll update them as soon as possible.{% endtrans %}</li>
-        <li>{% trans %}Salut à Toi may be installable on many platforms, contact us if you want to see it on a specific one{% endtrans %}</li>
-    </ul>
+    <div class="box content">
+        <p>{% trans %}Please note that:{% endtrans %}</p>
+        <ul>
+            <li>{% trans %}Libervia Web must be installed from source code, please check documentation for more details{% endtrans %}</li>
+            <li>{% trans %}There are Docker images, but outdated, so we don't list them here. We'll update them as soon as possible.{% endtrans %}</li>
+            <li>{% trans %}Libervia may be installable on many platforms, contact us if you want to see it on a specific one{% endtrans %}</li>
+        </ul>
+    </div>
 </div>
 
-{% endblock body %}
+{% endblock body_wrapper %}