rework homepage

.gitignore

@@ -7,3 +7,4 @@ geckodriver.log
 .env
 .integ.env
 staticfiles
+.DS_Store

aidants_connect_web/static/css/main.css

@@ -5,44 +5,32 @@ body {
   justify-content: space-between;
 }
 
+.navbar {
+  border: 0;
+}
+
 main {
   flex-grow: 1;
 }
 
-.has-tooltip label {
-    display: inline-block;
+.column__image {
+  display: flex;
+  justify-content: center;
 }
 
-.has-tooltip {
-    position: relative;
+.column__image img {
+  max-width: 100%;
+  max-height: 20em;
 }
 
-.tooltip-info {
-    display: inline-block;
-    background-color: #8393a7;
-    border-radius: 50%;
-    width: 1.5em;
-    height: 1.5em;
-    color: #fff;
-    text-align: center;
-    font-weight: 700;
-    position: absolute;
-    margin: 0.1em 0.5em;
-    transform: scale(0.75);
+.issues {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: center;
 }
 
-.tooltip-info:hover::after {
-    color: #ffffff;
-    padding: 0.25em 0.75em;
-    border-radius: 3px;
-    content: attr(data-tooltip);
-    position: absolute;
-    left: 3em;
-    top: 0.75em;
-    transform: translateY(-50%);
-    background-color: #8393a7;
-    z-index: 2;
-    width: auto;
-    min-width: 25em;
-    text-align: left;
-}
+.issues ul {
+  list-style-type: disclosure-closed;
+}

aidants_connect_web/templates/aidants_connect_web/home_page.html

@@ -1,13 +1,44 @@
 {% extends 'layouts/main.html' %}
 
+{% load static %}
+
 {% block content %}
+
 <section class="section">
-    <div class="container">
-  <h1>Bienvenue sur Aidants Connect</h1>
-  <p>
-      L’objectif est de permettre à un professionnel habilité préalablement de réaliser des démarches administratives en ligne à la place d’une personne ne parvenant pas à les faire seule via une connexion sécurisée.
-      Ce dispositif permettra un suivi des actions réalisées sur le compte de la personne, à destination des usagers et des autorités administratives compétentes, et une protection du professionnel déclarant comme de la personne accompagnée en cas d’erreur. L’enjeu est d’empêcher par un tiers l’utilisation de l’identité numérique d’une personne en difficulté avec les outils numériques (comme cela se fait en pratique, avec inscription des mots de passe dans un carnet papier).
-  </p><a href="/authorize?state={{ random_string }}&nonce=TY6">test</a></p>
-</div>
+  <div class="container">
+    <div class="row">
+      <div class="hero__description">
+        <h1>Bienvenue sur Aidants Connect</h1>
+        <p class="lead-text">
+          Le service qui permet aux aidants professionnels de réaliser des démarches administratives en ligne pour le compte d’une personne via une connexion sécurisée.
+        </p>
+        <p>Ce service permet :
+          <ul>
+            <li>une protection du professionel déclarant comme de la personne aidée en cas d’erreur ;</li>
+            <li>un suivi des actions réalisées sur le compte de la personne.</li>
+          </ul>
+        </p>
+      </div>
+      <div class="column__image">
+        <img src="{% static 'images/aidantsconnect.png' %}" />
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section section-grey">
+  <div class="container">
+    <div class="row">
+      <div class="column__image">
+        <img src="{% static 'images/aidantsconnect2.svg' %}" />
+      </div>
+      <div class="issues">
+        <h2>À quel problème répond Aidants Connect ?</h2>
+        <ul>
+          <li>13 millions de français en difficulté numérique</li>
+          <li>Dématérialisation de 250 démarches administratives "icôniques" d’ici 2022</li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </section>
 {% endblock content %}

aidants_connect_web/templates/layouts/nav.html

@@ -5,5 +5,12 @@
       <img class="navbar__logo" src="{% static 'images/logo-marianne.svg' %}"
         alt="aidantconnect.beta.gouv.fr" /><span class="navbar__domain">aidantconnect</span><img src="{% static 'images/pointbetagouvfr.svg' %}" class="navbar__gouvfr" alt="aidantconnect.beta.gouv.fr" />
     </a>
+    <nav role="navigation">
+      <ul class="nav__links">
+        <li class="nav__item">
+          <a href="/authorize?state={{ random_string }}&nonce=TY6">Se connecter</a>
+        </li>
+      </ul>
+    </nav>
   </div>
 </header>