<script>
import BigCarousel from '../../components/BigCarousel.vue';
import Certifications from "../../components/Certifications.vue";
import CoffeeFarmer from "../../components/CoffeeFarmer.vue";
import Different from "../../components/Different.vue";
import Menu from "../../components/Menu.vue";
import ProductCarousel from "../../components/ProductCarousel.vue";
import { products, slides } from "../../data.js";

export default {
  data() {
    return {
      slides: slides.home,
      products,
    };
  },
  components: {
    Certifications,
    Menu,
    ProductCarousel,
    CoffeeFarmer,
    Certifications,
    Different,
    BigCarousel,
  },
};
</script>

<template>
    <big-carousel :images="slides"></big-carousel>
    <section class="home-section content">
      <h2>{{ $t("origins.header") }}</h2>
      <ProductCarousel :products="products" />
      <Different />
      <CoffeeFarmer class="mt-5" />
      <Certifications />
    </section>
    
</template> 

<style lang="scss" scoped>
</style>