Create a dedicated content selections page

src/components/ContentSelections.vue

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

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">