Add mascot to the homepage

src/components/icons/IconLogo.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="2799 -911 16 22" version="1.1" id="svg13" sodipodi:docname="logo.svg" width="16" height="22" inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+    <g id="Artboard_1" data-name="Artboard – 1" class="cls-1" transform="translate(0.03356777,-1.9929667)">
+      <g id="Symbol_3_1" data-name="Symbol 3 – 1" transform="translate(2759,-975)">
+        <g id="Group_44" data-name="Group 44" transform="translate(0,2.333)">
+          <path id="Path_4" data-name="Path 4" class="cls-3" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(989,564)" inkscape:connector-curvature="0" style="fill:#211f20"/>
+          <path id="Path_5" data-name="Path 5" class="cls-4" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(989,574.667)" inkscape:connector-curvature="0" style="fill:#737373"/>
+          <path id="Path_6" data-name="Path 6" class="cls-5" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(997,569.333)" inkscape:connector-curvature="0" style="fill:#f1680d"/>
+          <path id="Path_7" data-name="Path 7" class="cls-6" d="M 0,0 V 10.667 L 8,5.333 Z" transform="rotate(180,24,40)" inkscape:connector-curvature="0" style="fill:rgba(255,255,255,0)"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style>
+  .cls-3 {
+    fill: #211f20;
+  }
+
+  .cls-4 {
+    fill: #737373;
+  }
+
+  .cls-5 {
+    fill: #f1680d;
+  }
+
+  .cls-6 {
+    fill: rgba(255, 255, 255, 0);
+  }
+</style>
+
+<script>
+  export default {}
+</script>

src/views/Home.vue

@@ -8,6 +8,8 @@
         <div class="description" v-translate>A free software to take back control of your videos</div>
       </div>
 
+      <img class="peertube-mascot" :src="buildImgUrl(mascotPaths[currentMascot])" @click="switchMascot()" alt="PeerTube mascot">
+
       <div class="marketing" v-translate>
         With more than 100 000 hosted videos, viewed more than 6 millions times and 20 000 users,
         PeerTube is the decentralized free software alternative to videos platforms developed by Framasoft
@@ -15,7 +17,7 @@
 
       <div class="buttons-row">
         <a href="#what-is-peertube" class="jpt-button jpt-big-button-icon">
-          <icon-instance></icon-instance>
+          <icon-logo></icon-logo>
 
           <span v-translate>What is PeerTube?</span>
         </a>
@@ -427,9 +429,14 @@
         }
       }
 
+      .peertube-mascot {
+        display: block;
+        margin: 30px auto 0;
+      }
+
       .marketing {
         font-size: 16px;
-        margin: 50px auto;
+        margin: 30px auto;
         width: 500px;
         text-align: center;
 
@@ -485,17 +492,39 @@
   import IconInstance from '../components/icons/IconInstance.vue'
   import IconRight from '../components/icons/IconRight.vue'
   import ContentSelections from '../components/ContentSelections'
+  import IconLogo from '../components/icons/IconLogo'
 
   export default {
     components: {
       ContentSelections,
       IconInstance,
-      IconRight
+      IconRight,
+      IconLogo
     },
 
     metaInfo: {
       title: 'JoinPeerTube',
       titleTemplate: null
+    },
+
+    data () {
+      return {
+        mascotPaths: [
+          'mascot/default.png',
+          'mascot/arguing.png',
+          'mascot/oh.png',
+          'mascot/defeated.png',
+          'mascot/happy.png'
+        ],
+        currentMascot: 0
+      }
+    },
+
+    methods: {
+      switchMascot () {
+        this.currentMascot++
+        this.currentMascot %= this.mascotPaths.length
+      }
     }
   }
 </script>