restore composer.json, add mysqli extension

resources/js/components/News/News.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="news">
+    <a :href="'/blog/news/' + postData.id + '-' + postData.slug" class="news-img">
+      <img :src="'/' + postData.image" :alt="postData.name" />
+    </a>
+    <div class="news-content">
+      <div class="news-date">
+        {{ postData.date }}
+      </div>
+      <h3 class="news-title">
+        <a :href="'/blog/news/' + postData.id + '-' + postData.slug">
+          {{ postData.name }}
+        </a>
+      </h3>
+      <p class="news-subtitle" v-html="postData.content.replace(/<\/?[^>]+>/ig, '')">
+
+      </p>
+
+      <a :href="'/blog/news/' + postData.id + '-' + postData.slug" class="news-link">
+        {{ $t('vue.news.news_read_more') }}
+        <i class="fal fa-chevron-right ml-2"></i>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['postData'],
+
+  methods: {
+      htmlStrip() {
+
+      }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

resources/js/components/News/NewsSection.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+   <section class="section-news">
+    <div class="container">
+        <h2 class="section-title"><a title="Open another news" href="/blog/news">{{ $t('vue.news.news_title') }}</a></h2>
+        <!-- News on desktop -->
+        <div class="row mt-3 outer-row" v-if="!mobile">
+            <div class="col-lg-5" v-if="topPost">
+                <News :post-data="topPost" />
+            </div>
+
+            <div class="col-lg-7 mt-lg-0 mt-3" >
+                <div class="row inner-row">
+                    <div class="col-md-4 col-sm-6 mb-md-0 mb-3" v-for="(post, index) in postsData" :key="index">
+                        <News :post-data="post" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <NewsSlider :posts-data="postsSlider" v-if="mobile" />
+
+    </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import News from "./News";
+import NewsSlider from './NewsSlider';
+import { isMobileOnly } from 'mobile-device-detect';
+
+export default {
+    props: ['postsData', 'topPost'],
+
+    data() {
+        return {
+            mobile: isMobileOnly ? true : false,
+            postsSlider: this.postsData
+        };
+    },
+    components: {
+        News,
+        NewsSlider
+    },
+
+    mounted() {
+        this.setPostData();
+    },
+
+    methods: {
+        setPostData() {
+            this.postsSlider.unshift(this.topPost);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

resources/js/components/News/NewsSlider.vue

@@ -0,0 +1,114 @@
+<template>
+  <swiper ref="mySwiperNews" class="swiper-container swiper-product swiper-news" :options="swiperOptions">
+    <swiper-slide v-for="post in postsData" v-bind:key="post.id">
+      <News :post-data="post" />
+    </swiper-slide>
+
+    <!-- Add Arrows -->
+    <div class="swiper-button-next swiper-button-next-news" slot="button-next"></div>
+    <div class="swiper-button-prev swiper-button-prev-news" slot="button-prev"></div>
+
+    <!-- Add Pagination -->
+    <div class="swiper-pagination swiper-pagination-news" slot="pagination"></div>
+  </swiper>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import 'swiper/css/swiper.css'
+import News from "./News";
+
+export default {
+  props: ['postsData'],
+
+  components: {
+    Swiper,
+    SwiperSlide,
+    News
+  },
+  
+  data() {
+    return {
+      swiperOptions: {
+        spaceBetween: 20,
+        navigation: {
+          nextEl: ".swiper-button-next-news",
+          prevEl: ".swiper-button-prev-news",
+        },
+        pagination: {
+          el: ".swiper-pagination-news",
+          dynamicBullets: true,
+        },
+        breakpoints: {
+          1200: {
+            slidesPerView: 5,
+          },
+          1024: {
+            slidesPerView: 4,
+          },
+          768: {
+            slidesPerView: 3,
+          },
+          576: {
+            slidesPerView: 2,
+          },
+          0: {
+            slidesPerView: 1.3,
+          },
+        },
+        autoplay: {
+          delay: 3500,
+        },
+      }
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiperNews.$swiper;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+$breakpoints: (
+  "phone-smallest": 251px,
+  "phone-small": 321px,
+  "phone": 400px,
+  "phone-wide": 480px,
+  "phablet": 560px,
+  "tablet-small": 640px,
+  "tablet": 768px,
+  "tablet-wide": 1024px,
+  "desktop": 1248px,
+  "desktop-wide": 1440px,
+  "desktop-large": 2500px,
+);
+
+@mixin mq($width, $type: min) {
+  @if map_has_key($breakpoints, $width) {
+    $width: map_get($breakpoints, $width);
+
+    @if $type==max {
+      $width: $width - 1px;
+    }
+
+    @media only screen and (#{$type}-width: $width) {
+      @content;
+    }
+  }
+}
+
+.swiper-product {
+  padding: 75px 0 20px;
+  margin-top: -50px;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  @include mq("tablet", max) {
+    margin-left: -15px;
+    margin-right: -15px;
+    padding-bottom: 30px;
+  }
+}
+</style>