--- a/farol/templates/welcome.j2	Fri Oct 17 16:09:09 2014 +0200
+++ b/farol/templates/welcome.j2	Thu Oct 23 16:18:30 2014 +0200
@@ -24,36 +24,43 @@
 -#}
 
 {% extends "base.j2" %}
+{% from "macros.j2" import panel %}
+
+{% macro progress_label(progress) -%}
+<span class="label label-
+{%- if progress < 70 %}danger{% elif progress < 95 %}warning{% else %}success{% endif -%}
+">{{ progress }}%</span>
+{%- endmacro %}
 
 {% block title %}Welcome{% endblock %}
 
 {% block content %}
-<div class="jumbotron">
-  <h1>Farol <small>A Security Advisory Management Platform</small></h1>
-  <p>Farol is a web platform to manipulate Security Advisories. The main structure is highly inspired from the structure of a CVRF document.</p>
-  <p>This platform is meant as a way to review / create / edit / publish Security Advisories in an accessible way.</p>
-  <p><a class="btn btn-primary btn-lg" role="button" href="{{ url_for('new') }}">Start !</a></p>
+<div class="well well-lg">
+  <h1>Farol <small>The Security Advisory Management Platform</small></h1>
+  <div class="pull-right"><a class="btn btn-primary btn-lg" role="button" href="{{ url_for('new') }}" >Start !</a></div>
+  <p>This web platform offers to review, create, edit and transform security advisories supporting various input and output formats. During your session the advisory is stored in a cache from which you should save your changes to your local file system.</p>
 </div>
-<img src="{{ url_for('static', filename="flower.png") }}" class="img-responsive img-thumbnail" alt="Security Advisories interactions">
 <div class="row">
-  <div class="col-sm-6">
-    <div class="thumbnail">
-      <h3>Security Advisories</h3>
-      <p>A Security Advisory is about the <em>communication</em> of the information that some <em>vulnerability</em> is present in some <em>product</em>.</p>
-      <dl>
-        <dt>communication</dt>
-        <dd>In order to be fully effective, Security Advisories should be sahred.</dd>
-        <dt>vulnerability</dt>
-        <dd>A vulnerability is a weakness which allows an attacker to reduce a system's information assurance. <cite>(Wikipedia)</cite></dd>
-        <dt>product</dt>
-        <dd>A product contains vulnerabilities.</dd>
-    </div>
-  </div>
-  <div class="col-sm-6">
-    <div class="thumbnail">
-      <h3>Advisory formats</h3>
-      <p>Each Party publish Advisories in a format that fit them ...</p>
-    </div>
+  <div class="col-sm-9"><img src="{{ url_for('static', filename="flower.png") }}" class="img-responsive img-thumbnail" alt="Security Advisories interactions"></div>
+  <div class="col-sm-3">
+    {% call panel(heading="Platform status", collapsible=False) %}
+    <div><span class="pull-right badge">{{ version }}</span>Farol version:</div>
+    {% endcall %}
+    {% call panel(heading="Supported input formats", collapsible=False) %}
+      {% for format, progress in imports %}
+        <div>{{ format }} <span class="pull-right">{{ progress_label(progress) }}</span></div>
+      {% endfor %}
+    {% endcall %}
+    {% call panel(heading="Supported output formats", collapsible=False) %}
+      {% for format, progress in exports %}
+        <div>{{ format }} <span class="pull-right">{{ progress_label(progress) }}</span></div>
+      {% endfor %}
+    {% endcall %}
+    {% call panel(heading="Supported use cases", collapsible=False) %}
+      {% for use_case, progress in use_cases %}
+        <div><span class="pull-right">{{ progress_label(progress) }}</span>{{ use_case }}</div>
+      {% endfor %}
+    {% endcall %}
   </div>
 </div>
 {% endblock %}