Create a dedicated content selections page

src/components/ContentSelections.vue

@@ -13,7 +13,6 @@
 <style lang="scss" scoped>
   @import '../scss/_variables';
 
-  .content-selections {
   .content-selection {
     margin-bottom: 80px;
   }
@@ -22,7 +21,6 @@
     display: flex;
     justify-content: flex-end;
   }
-  }
 </style>
 
 <script>

src/main.js

@@ -11,6 +11,7 @@ import News from './views/News'
 import Instances from './views/Instances'
 import HallOfFame from './views/Hall-Of-Fame'
 import FAQ from './views/FAQ'
+import AllContentSelections from './views/All-Content-Selections'
 
 import './scss/main.scss'
 import CommonMixins from './mixins/CommonMixins'
@@ -80,6 +81,10 @@ const routes = [
   {
     path: '/faq',
     component: FAQ
+  },
+  {
+    path: '/content-selections',
+    component: AllContentSelections
   }
 ]
 

src/views/All-Content-Selections.vue

@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="blocks">
+
+      <div class="title-block">
+        <div class="title" v-translate>Our content selections</div>
+
+        <div class="separator"></div>
+      </div>
+
+      <content-selections></content-selections>
+    </div>
+  </main>
+</template>
+
+<style scoped lang="scss">
+  @import '../scss/_variables.scss';
+
+  .blocks {
+    margin: 60px auto;
+  }
+
+</style>
+
+<script>
+  import ContentSelections from '../components/ContentSelections'
+
+  export default {
+    components: {
+      ContentSelections
+    },
+
+    metaInfo: function () {
+      return {
+        title: this.$gettext('Our content selections')
+      }
+    }
+  }
+</script>

src/views/Home.vue

@@ -251,9 +251,9 @@
         </div>
 
         <div class="buttons-row">
-          <button class="jpt-button">
+          <router-link to="/content-selections" class="jpt-button">
             <span v-translate>Explorer les contenus</span>
-          </button>
+          </router-link>
 
           <div>
             <router-link to="/instances" class="jpt-button">