updates

src/views/home/Home.vue

@@ -1,15 +1,46 @@
-<script setup>
-  import MenuVue from "../../components/Menu.vue";
-  import Origins from "../../components/Origins.vue";
-  import Different from "../../components/Different.vue";
-  import CoffeeFarmer from "../../components/CoffeeFarmer.vue";
-  import Certifications from "../../components/Certifications.vue";
+<script>
+
+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 } from '../../data.js';
+
+  export default {
+    data() {
+      return {
+        products,
+      };
+    },
+    components: {
+      Certifications,
+      Menu,
+      ProductCarousel,
+      CoffeeFarmer,
+      Certifications
+},
+    computed: {
+      productsCarousel() {
+        return this.products.map(p => ({
+          image: p.image_product_single,
+          name:  p.name,
+          farm: p.farm,
+          strain: p.strain,
+        }));
+      }
+    },
+
+  }
 </script>
 
 <template>
-  <MenuVue type="home" />
-  <Origins />
-  <Different />
-  <CoffeeFarmer />
-  <Certifications />
+  <Menu type="home" />
+  <section class="home-section content">
+    <h2>{{ $t('origins.header') }}</h2>
+    <ProductCarousel :products="productsCarousel" />
+    <DifferentVue />
+    <CoffeeFarmer class="mt-5" />
+    <Certifications />
+  </section>
 </template>