Redesign 2

app/assets/scss/_mixins.scss

@@ -0,0 +1,7 @@
+@mixin disable-default-a-behaviour {
+  &:hover, &:focus, &:active {
+    text-decoration: none !important;
+    outline: none !important;
+    color: inherit !important;
+  }
+}

app/assets/scss/main.scss

@@ -1,4 +1,5 @@
 @import "_variables";
+@import "_mixins";
 
 @font-face {
   font-family: 'Proza Libre';
@@ -7,7 +8,7 @@
   font-weight: 400;
   src: local('Proza Libre Regular '),
   local('Proza Libre-Regular'),
-  url('/assets/fonts/proza-libre-v4-latin-regular.woff2') format('woff2')
+  url('../fonts/proza-libre-v4-latin-regular.woff2') format('woff2')
 }
 
 @font-face {
@@ -17,7 +18,7 @@
   font-weight: 600;
   src: local('Proza Libre SemiBold '),
   local('Proza Libre-SemiBold'),
-  url('/assets/fonts/proza-libre-v4-latin-600.woff2') format('woff2')
+  url('../fonts/proza-libre-v4-latin-600.woff2') format('woff2')
 }
 
 /* Default */
@@ -82,3 +83,50 @@ main {
     flex-grow: 1;
   }
 }
+
+.subtitle {
+  font-size: 24px;
+  font-weight: $font-semibold;
+}
+
+.one-column {
+  width: 600px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    margin: 30px 0;
+  }
+}
+
+.bottom-link-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.bottom-link {
+  @include disable-default-a-behaviour;
+
+  font-weight: $font-semibold;
+  color: #000;
+
+  .text {
+    border-bottom: 3px solid $orange;
+    padding: 0 5px;
+    margin-right: 5px;
+  }
+}
+
+.citation {
+  display: flex;
+  font-size: 24px;
+
+  .left-bar {
+    margin-right: 10px;
+    min-width: 8px;
+    background-color: $orange;
+  }
+}

app/components/ContentSelection.vue

@@ -17,7 +17,6 @@
 
         <span v-if="type === 'instance'">
           <icon-instance></icon-instance>
-
           Go on the instance
         </span>
       </button>
@@ -25,9 +24,11 @@
 
     <div class="right">
       <div class="title">
+        <div class="icon">
           <icon-video v-if="type === 'video'"></icon-video>
           <icon-channel v-if="type === 'channel'"></icon-channel>
           <icon-instance v-if="type === 'instance'"></icon-instance>
+        </div>
 
         {{ title }}
       </div>
@@ -48,7 +49,13 @@
 <style lang="scss" scoped>
   @import '../assets/scss/_variables';
 
+  .root {
+    display: flex;
+  }
+
   .left {
+    margin-right: 20px;
+
     img {
       display: block;
       width: 250px;
@@ -67,10 +74,19 @@
     .title {
       font-size: 24px;
       font-weight: $font-semibold;
+      display: flex;
+      align-items: center;
+
+      .icon {
+        margin-right: 10px;
+        position: relative;
+        top: -2px;
+      }
     }
 
     .description {
       font-size: 16px;
+      min-height: 170px;
     }
 
     .tags {
@@ -78,7 +94,14 @@
 
       .tag {
         border: 1px solid $orange;
+        border-radius: 10px;
         margin-right: 20px;
+        font-size: 14px;
+        min-width: 140px;
+        height: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
   }

app/components/icons/IconRight.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg width="9" height="13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="">
+    <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
+
+    <g class="currentLayer" style=""><title>Layer 1</title>
+      <g id="icone/lien" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="">
+        <polyline id="Shape" stroke="#000000" stroke-width="2" points="0,0 7,6.5 0,13 "/>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+  export default {}
+</script>
+

app/components/icons/IconVideo.vue

@@ -1,22 +1,11 @@
 <template>
-  <svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-    <defs>
+    <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
-      <path d="M18.6666667,2.53166667 C18.6702008,2.06361224 18.4079487,1.6340614 17.99,1.42333333 C17.5936099,1.21047381 17.1101456,1.24452059 16.7475,1.51083333 L14,3.26666667 L14,1.16666667 C14,0.522334459 13.4776655,0 12.8333333,0 L2.33333333,0 C1.04466892,0 0,1.04466892 0,2.33333333 L0,11.6666667 C0,12.9553311 1.04466892,14 2.33333333,14 L12.8333333,14 C13.4776655,14 14,13.4776655 14,12.8333333 L14,10.7333333 L16.7066667,12.4833333 C17.0762078,12.7663078 17.5754888,12.811697 17.99,12.6 C18.4156245,12.3855923 18.6792232,11.9447462 18.6666667,11.4683333 L18.6666667,2.53166667 Z M17.4591667,11.5325 C17.4241667,11.5325 17.395,11.5325 17.3483333,11.4975 L12.8333333,8.61583333 L12.8333333,12.8333333 L2.33333333,12.8333333 C1.68900113,12.8333333 1.16666667,12.3109989 1.16666667,11.6666667 L1.16666667,2.33333333 C1.16666667,1.68900113 1.68900113,1.16666667 2.33333333,1.16666667 L12.8333333,1.16666667 L12.8333333,5.38416667 L17.3833333,2.4675 C17.4059072,2.45096538 17.4365928,2.45096538 17.4591667,2.4675 C17.4853533,2.47764827 17.5018977,2.5036466 17.5001477,2.53166667 L17.5001477,11.4683333 C17.5018977,11.4963534 17.4853533,11.5223517 17.4591667,11.5325 Z" id="path-1"></path>
+
-    </defs>
+    <g class="currentLayer" style=""><title>Layer 1</title>
-    <g id="icone/video" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <path fill="#000" fill-rule="nonzero"
-      <g id="video-camera-line" transform="translate(1.000000, 3.000000)">
+            d="M15.713000297546387,15.71399974822998 h1.4290000200271606 v2.1429998874664307 h-1.4290000200271606 v-2.1429998874664307 zm-4.284999847412109,0 h1.4279999732971191 v2.1429998874664307 H11.428999900817871 v-2.1429998874664307 zm-4.285999774932861,0 h1.4279999732971191 v2.1429998874664307 h-1.4279999732971191 v-2.1429998874664307 zm-4.285999774932861,0 h1.4290000200271606 v2.1429998874664307 h-1.4290000200271606 v-2.1429998874664307 zM15.713000297546387,2.1429998874664307 h1.4290000200271606 v2.1429998874664307 h-1.4290000200271606 V2.1429998874664307 zm-4.284999847412109,0 h1.4279999732971191 v2.1429998874664307 H11.428999900817871 V2.1429998874664307 zm-4.285999774932861,0 h1.4279999732971191 v2.1429998874664307 h-1.4279999732971191 V2.1429998874664307 zm-4.285999774932861,0 h1.4290000200271606 v2.1429998874664307 h-1.4290000200271606 V2.1429998874664307 zm4.714000225067139,11.477999687194824 a0.9210000038146973,0.9210000038146973 0 0 0 0.8859999775886536,0.06499999761581421 l6.236000061035156,-2.8570001125335693 a0.9290000200271606,0.9290000200271606 0 0 0 0,-1.6929999589920044 l-6.236000061035156,-2.8570001125335693 a0.9290000200271606,0.9290000200271606 0 0 0 -1.3140000104904175,0.8640000224113464 v5.714000225067139 c0.004999999888241291,0.3100000023841858 0.16599999368190765,0.5979999899864197 0.42800000309944153,0.7639999985694885 zm0.7149999737739563,-6.142000198364258 L13.791998863220215,10 l-5.506999969482422,2.506999969482422 V7.480000019073486 zM18.56899929046631,0 H1.428999900817871 c-0.7900000214576721,0 -1.4290000200271606,0.6399999856948853 -1.4290000200271606,1.4290000200271606 V18.56999969482422 c0,0.7900000214576721 0.6399999856948853,1.4290000200271606 1.4290000200271606,1.4290000200271606 H18.56899929046631 c0.7900000214576721,0 1.4290000200271606,-0.6399999856948853 1.4290000200271606,-1.4290000200271606 V1.4299999475479126 C19.99899959564209,0.6389999985694885 19.359000205993652,0 18.569998741149902,0 zm0,18.570999145507812 H1.428999900817871 V1.4299999475479126 H18.56899929046631 V18.56999969482422 z"
-        <g id="color" transform="translate(0.166667, 0.500000)">
+            id="svg_1" class=""/>
-          <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-          </mask>
-          <use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
-          <g mask="url(#mask-2)" fill="#868686" id="Rectangle">
-            <g transform="translate(-1.166667, -3.500000)">
-              <rect x="0" y="0" width="21" height="21"></rect>
-            </g>
-          </g>
-        </g>
-      </g>
     </g>
   </svg>
 </template>

app/views/Home.vue

@@ -28,27 +28,99 @@
       </div>
     </section>
 
-    <section>
+    <section class="content-selections">
       <div class="section-title">
         <div>Discover our content selection</div>
         <div class="border-title"></div>
       </div>
 
-      <div v-for="contentSelection in contentSelections">
+      <div class="content-selection" v-for="contentSelection in contentSelections">
         <content-selection :type="contentSelection.type" :title="contentSelection.title"
           :thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
           :description="contentSelection.description"
         >
         </content-selection>
       </div>
+
+      <div class="bottom-link-wrapper">
+        <a href="#" class="bottom-link">
+          <span class="text">Discover PeerTube instances</span>
+          <icon-right></icon-right>
+        </a>
+      </div>
     </section>
 
+    <section class="what-is-peertube">
+      <div class="section-title">
+        <div>What is PeerTube?</div>
+        <div class="border-title"></div>
+      </div>
+
+      <div class="ambition">
+        <img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen" />
+
+        <div>
+          <div class="citation">
+            <div class="text">
+              L’ambition de PeerTube, c'est d’être <strong>une alternative libre et décentralisée</strong> aux services de diffusion de vidéos.
+            </div>
+          </div>
+
+          <div>
+            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>
+        </div>
+      </div>
+
+      <div class="federation one-column">
+        <div class="subtitle">Une fédération d'hébergements interconnectés</div>
+
+        <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema" />
+
+        <div class="citation">
+          <div class="left-bar"></div>
+
+          <div class="text">
+            PeerTube n’est pas pensé pour créer une énorme plateforme centralisant les vidéos du monde entier. Il s’agit plutôt
+            <strong>d'un réseau de nombreux petits hébergeurs de vidéos, connectés les uns aux autres.</strong>
+          </div>
+        </div>
+
+        <div>
+          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>
+
+        <div class="bottom-link-wrapper">
+          <a href="#" class="bottom-link">
+            <span class="text">Discover PeerTube instances</span>
+            <icon-right></icon-right>
+          </a>
+        </div>
+
+        <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema" />
+
+        <div>
+          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>
+
+        <div class="citation">
+          <div class="left-bar"></div>
+
+          <div class="text">C'est le principe de<strong> la fédération !</strong></div>
+        </div>
+
+        <img src="" alt="Another funny federation schema" />
+      </div>
+
+    </section>
   </main>
 </template>
 
 <style scoped lang="scss">
   .presentation {
-
     .first-row {
       display: flex;
       padding: 70px;
@@ -82,17 +154,52 @@
       }
     }
   }
+
+  .content-selections {
+    .content-selection {
+      margin-bottom: 80px;
+    }
+
+    .discover-instances {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .what-is-peertube {
+    .ambition {
+      display: flex;
+      margin-bottom: 100px;
+
+      img {
+        margin-right: 30px;
+      }
+
+      .citation {
+        margin-bottom: 20px;
+      }
+    }
+
+    .federation {
+      .citation {
+        margin-bottom: 30px;
+      }
+    }
+  }
 </style>
 
 <script>
 import IconInstance from '../components/icons/IconInstance.vue'
 import ContentSelection from '../components/ContentSelection.vue'
+import IconRight from '../components/icons/IconRight.vue'
 
 export default {
   components: {
     ContentSelection,
-    IconInstance
+    IconInstance,
+    IconRight
   },
+
   data: () => ({
     contentSelections: [
       {
@@ -104,6 +211,12 @@ export default {
         description: 'Nothing to Hide (2017) est un film documentaire franco-allemand de Marc Meillassoux et Mihaela Gladovic, qui s\'intéresse aux effets de la surveillance de masse sur les individus et la société. Proposant un regard critique à propos des lois sur le renseignement mises en place par de nombreux États ces dernières années, le film nous rappelle à quel point le débat sur l’usage des données personnelles est actuel et questionne les fondements de nos démocraties.',
       }
     ]
-  })
+  }),
+
+  methods: {
+    buildImgUrl (imageName) {
+      return this.$root['/'] + 'img/' + imageName
+    }
+  }
 }
 </script>