Redesign iteration 3

app/assets/scss/main.scss

@@ -6,7 +6,7 @@
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: local('Proza Libre Regular '),
+  src: local('Proza Libre Regular'),
   local('Proza Libre-Regular'),
   url('../fonts/proza-libre-v4-latin-regular.woff2') format('woff2')
 }
@@ -16,11 +16,29 @@
   font-style: normal;
   font-display: swap;
   font-weight: 600;
-  src: local('Proza Libre SemiBold '),
+  src: local('Proza Libre SemiBold'),
   local('Proza Libre-SemiBold'),
   url('../fonts/proza-libre-v4-latin-600.woff2') format('woff2')
 }
 
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: local('PT Sans'), local('PTSans-Regular'),
+  url('../fonts/pt-sans-v11-latin-regular.woff2') format('woff2')
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: local('PT Sans Bold'), local('PTSans-Bold'),
+  url('../fonts/pt-sans-v11-latin-700.woff2') format('woff2')
+}
+
 /* Default */
 html {
   position: relative;
@@ -28,7 +46,7 @@ html {
 }
 
 body {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'PT Sans', sans-serif;
   font-size: 16px;
   background-color: #ffad5c;
 }
@@ -81,12 +99,20 @@ main {
     height: 3px;
     background-color: $orange;
     flex-grow: 1;
+    margin-top: 6px;
+  }
+
+  .brand-title {
+    margin-left: 10px;
+    height: 40px;
+    vertical-align: text-bottom;
   }
 }
 
 .subtitle {
   font-size: 24px;
   font-weight: $font-semibold;
+  margin-top: 100px;
 }
 
 .one-column {
@@ -98,6 +124,10 @@ main {
 
   img {
     margin: 30px 0;
+
+    & + .citation {
+      margin-top: 0 !important;
+    }
   }
 }
 
@@ -105,6 +135,7 @@ main {
   display: flex;
   justify-content: flex-end;
   width: 100%;
+  margin: 30px 0;
 }
 
 .bottom-link {
@@ -123,10 +154,15 @@ main {
 .citation {
   display: flex;
   font-size: 24px;
+  margin: 30px 0;
 
   .left-bar {
     margin-right: 10px;
     min-width: 8px;
     background-color: $orange;
   }
+
+  & + img {
+    margin-top: 0 !important;
+  }
 }

app/components/Header.vue

@@ -3,7 +3,7 @@
 
     <nav class="navbar navbar-expand-lg">
       <router-link :to="'/' + $t('lang') + '/'" class="navbar-brand">
-        <img alt="PeerTube" :src="`${$root['/']}img/brand.png`">
+        <img alt="PeerTube" :src="`${$root['/']}img/brand-small.png`">
       </router-link>
 
       <button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

app/views/Home.vue

@@ -3,7 +3,7 @@
 
     <section class="presentation">
       <div class="first-row">
-        <div class="brand">Brand</div>
+        <img class="brand" :src="buildImgUrl('brand.png')" alt="PeerTube logo" />
 
         <div class="description">A free software to take back control of your videos</div>
       </div>
@@ -13,7 +13,7 @@
         PeerTube is the decentralized free software alternative to videos platforms developed by Framasoft
       </div>
 
-      <div class="buttons">
+      <div class="buttons-row">
         <button class="jpt-button what-is-peertube">
           <icon-instance></icon-instance>
 
@@ -52,7 +52,11 @@
 
     <section class="what-is-peertube">
       <div class="section-title">
-        <div>What is PeerTube?</div>
+        <div>
+          What is
+          <img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube" />
+          ?
+        </div>
         <div class="border-title"></div>
       </div>
 
@@ -66,9 +70,9 @@
             </div>
           </div>
 
-          <div>
+          <p>
             Le but n’est pas de remplacer, mais de proposer quelque chose d’autre, avec des valeurs différentes, en parallèle de ce qui existe déjà.
-          </div>
+          </p>
         </div>
       </div>
 
@@ -86,11 +90,11 @@
           </div>
         </div>
 
-        <div>
+        <p>
           N’importe qui ayant un minimum de compétences techniques peut héberger un serveur PeerTube qu’on nomme instance.
           Chaque instance héberge ses propres utilisateur⋅ices et leurs vidéos.
           Ainsi, <strong>toutes les instances sont créées, animées, modérées et maintenues de façon indépendante par des administrateur⋅ices différent⋅e⋅s.</strong>
-        </div>
+        </p>
 
         <div class="bottom-link-wrapper">
           <a href="#" class="bottom-link">
@@ -101,10 +105,10 @@
 
         <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema" />
 
-        <div>
+        <p>
           Mais vous avez tout de même la possibilité de regarder depuis l'instance sur laquelle vous êtes inscrit·e des vidéos qui se trouvent ailleurs ;
           il suffit que l'administrateur·ice l'ai autorisé !
-        </div>
+        </p>
 
         <div class="citation">
           <div class="left-bar"></div>
@@ -112,20 +116,219 @@
           <div class="text">C'est le principe de<strong> la fédération !</strong></div>
         </div>
 
-        <img src="" alt="Another funny federation schema" />
+        <img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema" />
+
+        <p>
+          Mais ce n’est pas tout ! Le protocole de fédération ActivityPub (qu’utilise PeerTube)
+          <strong>permet aussi d’interagir avec d’autres logiciels</strong> utilisant ce même protocole. Par exemple, PeerTube et le
+          réseau social Mastodon, alternative à Twitter, sont liés : <strong>il est possible de « suivre » un utilisateur PeerTube depuis Mastodon</strong>
+          (en affichant dans son fil d'actualités les dernières vidéos postées par le compte suivi),
+          <strong>ou même de commenter une vidéo hébergée sur PeerTube directement depuis Mastodon.</strong>
+        </p>
+
+        <div class="bottom-link-wrapper">
+          <a href="#" class="bottom-link">
+            <span class="text">En savoir plus sur la fédération</span>
+            <icon-right></icon-right>
+          </a>
+        </div>
       </div>
 
+      <div class="free-software one-column">
+        <div class="subtitle">Un code ouvert sous licence libre</div>
+
+        <img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema" />
+
+        <p>
+          Les principaux services de diffusion de vidéo en ligne utilisent vos données pour gagner
+          de l'argent en analysant vos interactions et en utilisant ces informations pour vous matraquer en publicités ciblées.
+        </p>
+
+        <div class="citation">
+          <div class="left-bar"></div>
+
+          <div class="text">
+            PeerTube n’est soumis au monopole d’aucune entreprise, ne dépend d’aucune publicité
+            <strong>et ne vous piste pas.</strong>
+          </div>
+        </div>
+
+       <p>
+         Mais surtout, PeerTube <strong>vous considère comme une personne, et non pas comme un produit qu’il faut
+         profiler et enfermer dans des boucles vidéos.</strong> PeerTube n’utilise par exemple aucun algorithme de recommandation biaisé
+         pour vous faire rester indéfiniment en ligne.
+       </p>
+
+        <p>
+          Tout cela est possible car PeerTube est un logiciel libre (licence GNU-AGPL pour les connaisseur⋅euses).
+          Son code est un « commun » numérique, partagé avec tous et toutes, et non une recette secrète appartenant à Google (pour YouTube)
+          ou à Vivendi/Bolloré (pour Dailymotion). Cette licence libre <strong>garantit nos libertés fondamentales d’utilisateur⋅ices et
+          permet à de nombreux contributeur⋅ices de proposer des évolutions et de nouvelles fonctionnalités.</strong>
+        </p>
+
+        <div class="bottom-link-wrapper">
+          <a href="#" class="bottom-link">
+            <span class="text">En savoir plus sur les logiciels libres</span>
+            <icon-right></icon-right>
+          </a>
+        </div>
+      </div>
+
+      <div class="you-are-a-video-maker one-column">
+        <div class="subtitle">Vous êtes vidéaste ?</div>
+
+        <img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration" />
+
+        <div class="citation">
+          <div class="left-bar"></div>
+
+          <div class="text">
+            PeerTube vous permet de choisir <strong>un hébergement et des règles qui vous correspondent.</strong>
+          </div>
+        </div>
+
+        <div>
+          On l’a vu avec les dérives de YouTube : son hébergeur, Google-Alphabet, peut imposer son système ContentID
+          (le fameux « Robocopyright ») ou ses outils de mise en valeur des vidéos, qui semblent aussi obscurs qu’injustes.
+        </div>
+
+        <div class="citation">
+          <div class="left-bar"></div>
+
+          <div class="text">
+            Être en contact direct avec un hébergeur à taille humaine vous permet, non seulement de ne plus être le client d'une grande
+            entreprise du numérique, mais surtout <strong>d'avoir des rapports privilégiés avec les personnes qui hébergent et diffusent vos données.</strong>
+          </div>
+        </div>
+
+        <div>
+          Avec PeerTube, vous choisissez l’hébergeur de vos vidéos selon ses conditions d’utilisation, telles que la limite d’espace disque par utilisateur⋅ice,
+          la politique de modération, les choix de fédération...
+          Comme vous n’avez pas un géant du web en face de vous, vous pourrez probablement discuter ensemble si vous avez un souci, un besoin, une envie...
+        </div>
+
+        <button class="jpt-button discover-instances">
+          <icon-instance></icon-instance>
+
+          Découvrir les instances PeerTube
+        </button>
+      </div>
+
+      <div class="p2p one-column">
+        <div class="subtitle">De la diffusion – et donc du visionnage – en pair-à-pair</div>
+
+        <img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration" />
+
+        <div class="citation">
+          <div class="left-bar"></div>
+
+          <div class="text">
+            Le logiciel PeerTube peut au besoin utiliser un protocole pair-à-pair (P2P) pour diffuser des vidéos très regardées par
+            les internautes (vidéos virales), ce qui permet d'<strong>alléger la charge des sites web qui les hébergent.</strong>
+          </div>
+        </div>
+
+        <p>
+          Ainsi, quand vous visionnez une vidéo, votre ordinateur participe à sa diffusion. Si beaucoup de personnes regardent la même vidéo
+          au même moment, leur navigateur envoie automatiquement des bouts de la vidéo aux autres spectateur⋅ices.
+          Cela permet de <strong>ne pas surexploiter les ressources du serveur</strong> : les flux se répartissent, le réseau est optimisé.
+        </p>
+
+        <p>
+          Mine de rien, avant cette diffusion en pair-à-pair, les vidéastes à succès (ou les vidéos qui font le buzz) étaient condamnés
+          à s’héberger chez un géant du web dont l’infrastructure peut encaisser des milliers de vues simultanées… Ou à payer très cher un hébergement de vidéo indépendant afin qu’il tienne la charge.
+        </p>
+      </div>
+
+      <div class="you-play">
+        <div class="one-column">
+          <div class="subtitle">À vous de jouer !</div>
+
+          <img :src="buildImgUrl('peertube-you-play.png')" alt="PeerTube you play illustration" />
+        </div>
+
+        <div class="buttons-row">
+          <button class="jpt-button">
+            <span>Explorer les contenus</span>
+          </button>
+
+          <div>
+            <button class="jpt-button">
+              <span>Créer un compte</span>
+            </button>
+            <div class="jpt-button-legend">
+              Pour profiter de toutes les fonctionnalités : historique, abonnements, listes de lectures, notifications...
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div class="behind-peertube one-column">
+        <div class="subtitle">Qui est derrière PeerTube ?</div>
+
+        <img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo" />
+
+        <p>
+          PeerTube est <strong>un logiciel libre gratuit financé par une association</strong> française à but non lucratif : Framasoft.
+        </p>
+
+        <p>
+          Créée en 2004, l'association se consacre désormais à <strong>l’éducation populaire aux enjeux du numérique.</strong>
+          Notre petite structure (moins de 40 membres, moins de 10 salarié·e·s) est connue pour avoir réalisé le projet Dégooglisons Internet,
+          proposant 34 outils en ligne éthiques et alternatifs. Reconnue d’intérêt général, notre association est
+          <strong>financée à plus de 90 % par vos dons</strong>, déductibles des impôts pour les contribuables français·es.
+        </p>
+
+        <p>
+          Suite au financement participatif lancé entre mars et juillet 2018, <strong>Framasoft a pu financer l'emploi du développeur
+          principal de PeerTube.</strong> Ainsi, après une version bêta en mars 2018, la version 1 est sortie en novembre 2018.
+          Depuis, plusieurs versions intermédiaires ont apporté de nombreuses fonctionnalités. Plusieurs collectifs ont déjà monté
+          des hébergements PeerTube, créant ainsi les bases de la fédération.
+        </p>
+
+        <p>
+          <strong>
+            Plus ce logiciel sera utilisé et soutenu, plus des personnes l’utiliseront et y contribueront, et plus vite il évoluera
+            vers une alternative concrète aux plateformes telles que YouTube.
+          </strong>
+        </p>
+
+        <button class="jpt-button">
+          <span>Soutenir Framasoft</span>
+        </button>
+      </div>
     </section>
   </main>
 </template>
 
 <style scoped lang="scss">
+  .buttons-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+
+    button {
+      width: 330px;
+      height: 50px;
+    }
+  }
+
+  .jpt-button-legend {
+    max-width: 330px;
+  }
+
   .presentation {
     .first-row {
       display: flex;
+      align-items: center;
       padding: 70px;
       margin: auto;
 
+      .brand {
+        height: 47px;
+      }
+
       div {
         flex-basis: 100%;
       }
@@ -142,17 +345,6 @@
       margin: 50px auto;
       width: 500px;
     }
-
-    .buttons {
-      display: flex;
-      justify-content: space-between;
-      padding: 0 20px;
-
-      button {
-        width: 330px;
-        height: 50px;
-      }
-    }
   }
 
   .content-selections {
@@ -169,22 +361,37 @@
   .what-is-peertube {
     .ambition {
       display: flex;
-      margin-bottom: 100px;
 
       img {
         margin-right: 30px;
       }
-
-      .citation {
-        margin-bottom: 20px;
     }
   }
 
-    .federation {
+  .you-are-a-video-maker {
-      .citation {
+    .discover-instances {
-        margin-bottom: 30px;
+      min-width: 420px;
+      height: 50px;
+      margin: 50px 0;
     }
   }
+
+  .you-play {
+    .buttons-row {
+      margin-top: 60px;
+    }
+  }
+
+  .behind-peertube {
+    .framasoft-logo {
+      margin: 100px 0;
+    }
+
+    .jpt-button {
+      height: 50px;
+      min-width: 420px;
+      margin: 60px 0;
+    }
   }
 </style>