init slider

content/page/tft/carousel/Slide1/index.md

@@ -0,0 +1,4 @@
+---
+id: slide1
+img: ./bg_1.jpg
+---

content/page/tft/carousel/Slide2/index.md

@@ -0,0 +1,4 @@
+---
+id: slide2
+img: ./bg_2.jpg
+---

content/page/tft/carousel/Slide3/index.md

@@ -0,0 +1,4 @@
+---
+id: slide3
+img: ./bg_3.jpg
+---

content/page/tft/carousel/Slide4/index.md

@@ -0,0 +1,4 @@
+---
+id: slide4
+img: ./bg_4.jpg
+---

content/page/tft/carousel/Slide5/index.md

@@ -0,0 +1,4 @@
+---
+id: slide5
+img: ./bg_5.jpg
+---

content/page/tft/carousel/Slide6/index.md

@@ -0,0 +1,4 @@
+---
+id: slide6
+img: ./bg_6.jpg
+---

content/page/tft/carousel/Slide7/index.md

@@ -0,0 +1,4 @@
+---
+id: slide7
+img: ./bg_7.jpg
+---

content/page/tft/carousel/main/index.md

@@ -0,0 +1,6 @@
+---
+id: slider_main
+title: AMAZING PARTNERS TRUST
+subtitle: THE THREEFOLD GRID AND TFT
+---
+Some of the biggest names in the industry share our vision.

content/page/tft/tft.md

@@ -13,4 +13,6 @@ link: /
 cta: tft_cta
 brandPanel: tft_brandPanel
 card: tft_card
+carousel: [slide1, slide2, slide3, slide4, slide5, slide6 , slide7]
+sliderMain: slider_main
 ---

gridsome.config.js

@@ -371,6 +371,22 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Carousel',
+                path: './content/page/**/carousel/**/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'CarouselMain',
+                path: './content/page/**/carousel/main/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -429,7 +445,9 @@ module.exports = {
                     jobs: 'Jobs',
                     customCTA: 'CustomCTA',
                     pageHeader: 'PageHeader',
-                    card: 'Card'
+                    card: 'Card',
+                    carousel: 'Carousel',
+                    sliderMain: 'CarouselMain'
                 }
             }
         },

package.json

@@ -1,43 +1 @@
-
-{
-"name": "www_threefold_io",
-"private": true,
-"scripts": {
-    "build": "gridsome build",
-    "develop": "gridsome develop",
-    "explore": "gridsome explore"
-},
-"dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-brands-svg-icons": "^5.14.0",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/vue-fontawesome": "^2.0.0",
-    "@gridsome/source-filesystem": "^0.6.2",
-    "@gridsome/transformer-remark": "^0.6.2",
-    "@noxify/gridsome-remark-classes": "^1.0.0",
-    "@noxify/gridsome-remark-table-align": "^1.0.0",
-    "axios": "^0.21.1",
-    "babel-runtime": "^6.26.0",
-    "core-js": "^3.6.5",
-    "gridsome": "^0.7.3",
-    "gridsome-plugin-matomo": "^0.1.0",
-    "gridsome-plugin-remark-prismjs-all": "^0.3.5",
-    "gridsome-plugin-tailwindcss": "^3.0.1",
-    "gridsome-source-graphql": "^1.0.2",
-    "gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
-    "lodash": "^4.17.20",
-    "pluralize": "^8.0.0",
-    "sass-loader": "^10.0.2",
-    "tailwindcss": "^2.0.0",
-    "tailwindcss-gradients": "^3.0.0",
-    "tailwindcss-tables": "^0.4.0",
-    "v-tooltip": "^2.0.3",
-    "vue-markdown": "^2.1.2",
-    "isexe": "^2.0.0",
-    "vue-share-it": "^1.1.4",
-    "node-sass": "^6.0.1"
-    },
-    "devDependencies": {
-        "@tailwindcss/aspect-ratio": "^0.2.0"
-    }
-}
+{"name":"www_threefold_io","private":true,"scripts":{"build":"gridsome build","develop":"gridsome develop","explore":"gridsome explore"},"dependencies":{"@fortawesome/fontawesome-svg-core":"^1.2.30","@fortawesome/free-brands-svg-icons":"^5.14.0","@fortawesome/free-solid-svg-icons":"^5.14.0","@fortawesome/vue-fontawesome":"^2.0.0","@gridsome/source-filesystem":"^0.6.2","@gridsome/transformer-remark":"^0.6.2","@noxify/gridsome-remark-classes":"^1.0.0","@noxify/gridsome-remark-table-align":"^1.0.0","axios":"^0.21.1","babel-runtime":"^6.26.0","core-js":"^3.6.5","gridsome":"^0.7.3","gridsome-plugin-matomo":"^0.1.0","gridsome-plugin-remark-prismjs-all":"^0.3.5","gridsome-plugin-tailwindcss":"^3.0.1","gridsome-source-graphql":"^1.0.2","gridsome-source-static-meta":"github:noxify/gridsome-source-static-meta#master","isexe":"^2.0.0","lodash":"^4.17.20","node-sass":"^6.0.1","pluralize":"^8.0.0","sass-loader":"^10.0.2","tailwindcss":"^2.0.0","tailwindcss-gradients":"^3.0.0","tailwindcss-tables":"^0.4.0","v-tooltip":"^2.0.3","vue-markdown":"^2.1.2","vue-share-it":"^1.1.4","vue-slick-carousel":"^1.0.6"},"devDependencies":{"@tailwindcss/aspect-ratio":"^0.2.0"}}

src/assets/scss/main.scss

@@ -9,7 +9,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
 
 blockquote {
-  @apply border-l;
+  // @apply border-l;
   @apply border-l-4;
   @apply border-l-blue-500;
   @apply pl-4;
@@ -48,7 +48,7 @@ body {
 }
 
 pre {
-  @apply border-l;
+  // @apply border-l;
   @apply border-l-2;
   @apply border-l-gray-500;
   @apply pl-4;
@@ -117,7 +117,7 @@ ul {
 }
 
 .flex-post {
-  @apply border-b;
+  // @apply border-b;
   @apply border-b-gray-300;
   @apply flex-col;
   @apply w-full;

src/components/custom/Slider.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="my-20">
+    <div v-if="main" class="text-center">
+      <h2 class="text-7xl">{{ main.title }}</h2>
+      <h2 v-if="main.subtitle" class="text-7xl">{{ main.subtitle }}</h2>
+      <div
+        class="my-10 max-w-2xl text-xl mx-auto text-gray-600 sm:mt-4"
+        v-html="main.content"
+      ></div>
+    </div>
+    <VueSlickCarousel v-bind="settings">
+      <div
+        class="px-2"
+        v-for="(slide, index) in slides"
+        :key="`${slide}-${index}`"
+      >
+        <img :src="img(slide.img)" class="h-100" />
+      </div>
+    </VueSlickCarousel>
+  </div>
+</template>
+
+<script>
+import "vue-slick-carousel/dist/vue-slick-carousel.css";
+export default {
+  props: ["main", "slides"],
+  data() {
+    return {
+      settings: {
+        arrows: true,
+        slidesToShow: 4,
+        slidesToScroll: 4,
+        responsive: [
+          {
+            breakpoint: 1024,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 3,
+              infinite: true,
+              dots: true,
+              arrows: false,
+            },
+          },
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 2,
+              initialSlide: 2,
+              dots: true,
+              arrows: false,
+            },
+          },
+          {
+            breakpoint: 480,
+            settings: {
+              slidesToShow: 1,
+              slidesToScroll: 1,
+              dots: true,
+              arrows: false,
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    img(slide) {
+      if (!slide) return "";
+      if (slide.src) return slide.src;
+      return slide;
+    },
+  },
+};
+</script>
+
+<style>
+.slick-prev:before,
+.slick-next:before {
+  color: black !important;
+  z-index: 999999999;
+}
+</style>
+

src/main.js

@@ -13,6 +13,9 @@ import { fab } from '@fortawesome/free-brands-svg-icons'
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import shareIt from 'vue-share-it';
 
+import VueSlickCarousel from "vue-slick-carousel";
+import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
+
 require("gridsome-plugin-remark-prismjs-all/themes/night-owl.css");
 require("prismjs/themes/prism-solarizedlight.css");
 
@@ -20,10 +23,11 @@ config.autoAddCss = false;
 library.add(fas);
 library.add(fab);
 
-export default function(Vue, { router, head, isClient }) {
+export default function (Vue, { router, head, isClient }) {
     // Set default layout as a global component
     Vue.component('Layout', DefaultLayout)
     Vue.component('font-awesome', FontAwesomeIcon)
+    Vue.component('VueSlickCarousel', VueSlickCarousel)
     Vue.use(VTooltip, {
         defaultPlacement: 'top-end',
         defaultClass: 'bg-black text-xs px-2 leading-normal py-1 rounded absolute text-gray-400 max-w-xs mb-1'

src/templates/MarkdownPage.vue

@@ -72,7 +72,7 @@
       class="mx-auto mt-10"
       :src="$page.markdownPage.solution_image.src"
     /> -->
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
+    <div class="container sm:pxi-0 mx-auto py-5 overflow-visible">
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="
@@ -109,6 +109,12 @@
         :id="$page.markdownPage.id"
         :card="$page.markdownPage.card"
       />
+
+      <Slider
+        v-if="$page.markdownPage.carousel"
+        :slides="$page.markdownPage.carousel"
+        :main="$page.markdownPage.sliderMain"
+      />
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&
@@ -435,6 +441,18 @@
       image
      }
 
+     carousel {
+        id
+        img
+      }
+
+      sliderMain {
+        id
+        title
+        subtitle
+        content
+      }
+
      card{
        id
        img
@@ -480,7 +498,7 @@ import AppListItem from "~/components/AppListItem.vue";
 import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
 import CenteredAccordion from "~/components/marketing/sections/faq-sections/CenteredAccordion.vue";
 import CustomCTA from "~/components/custom/sections/CustomCTA.vue";
-
+import Slider from "~/components/custom/Slider.vue";
 export default {
   components: {
     NewCard,
@@ -504,6 +522,7 @@ export default {
     Partenerships,
     CenteredAccordion,
     CustomCTA,
+    Slider,
   },
   computed: {
     getImg() {