updates
This commit is contained in:
José Conde
@ -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>
|
||||
@ -1,90 +1,10 @@
|
||||
<script>
|
||||
import MenuVue from "../../components/Menu.vue";
|
||||
import 'vue3-carousel/dist/carousel.css'
|
||||
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
||||
import ProductFlipCard from "../../components/ProductFlipCard.vue";
|
||||
import ProductBox from '../../components/ProductBox.vue';
|
||||
import Certifications from "../../components/Certifications.vue";
|
||||
|
||||
const products = [
|
||||
{
|
||||
kind: 'earth',
|
||||
kind_localized: 'common.earth',
|
||||
name: 'products.brasil_de_andrade.name',
|
||||
image: 'logo_tierra.svg',
|
||||
image_product_1: 'product-brasil-single.png',
|
||||
image_product_2: 'product-brasil-single.png',
|
||||
slogan: 'products.brasil_de_andrade.slogan',
|
||||
description: 'products.brasil_de_andrade.description',
|
||||
farm: 'products.brasil_de_andrade.farm',
|
||||
strain: 'products.brasil_de_andrade.strain',
|
||||
country: 'products.brasil_de_andrade.country',
|
||||
height: 'products.brasil_de_andrade.height',
|
||||
revision: 'products.brasil_de_andrade.revision',
|
||||
harvest: 'products.brasil_de_andrade.harvest',
|
||||
profile: 'products.brasil_de_andrade.profile',
|
||||
taste: 'products.brasil_de_andrade.taste',
|
||||
texture: 'products.brasil_de_andrade.texture'
|
||||
},
|
||||
{
|
||||
kind: 'water',
|
||||
kind_localized: 'common.water',
|
||||
name: 'products.colombia_el_paseito.name',
|
||||
image: 'logo_agua.svg',
|
||||
image_product_1: 'product-brasil-single.png',
|
||||
image_product_2: 'product-brasil-single.png',
|
||||
slogan: 'products.colombia_el_paseito.slogan',
|
||||
description: 'products.colombia_el_paseito.description',
|
||||
farm: 'products.colombia_el_paseito.farm',
|
||||
strain: 'products.colombia_el_paseito.strain',
|
||||
country: 'products.colombia_el_paseito.country',
|
||||
height: 'products.colombia_el_paseito.height',
|
||||
revision: 'products.colombia_el_paseito.revision',
|
||||
harvest: 'products.colombia_el_paseito.harvest',
|
||||
profile: 'products.colombia_el_paseito.profile',
|
||||
taste: 'products.colombia_el_paseito.taste',
|
||||
texture: 'products.colombia_el_paseito.texture'
|
||||
},
|
||||
{
|
||||
kind: 'air',
|
||||
kind_localized: 'common.air',
|
||||
name: 'products.peru_grad_1.name',
|
||||
image: 'logo_aire2.svg',
|
||||
image_product_1: 'product-brasil-single.png',
|
||||
image_product_2: 'product-brasil-single.png',
|
||||
slogan: 'products.peru_grad_1.slogan',
|
||||
description: 'products.peru_grad_1.description',
|
||||
farm: 'products.peru_grad_1.farm',
|
||||
strain: 'products.peru_grad_1.strain',
|
||||
country: 'products.peru_grad_1.country',
|
||||
height: 'products.peru_grad_1.height',
|
||||
revision: 'products.peru_grad_1.revision',
|
||||
harvest: 'products.peru_grad_1.harvest',
|
||||
profile: 'products.peru_grad_1.profile',
|
||||
taste: 'products.peru_grad_1.taste',
|
||||
texture: 'products.peru_grad_1.texture'
|
||||
},
|
||||
{
|
||||
kind: 'fire',
|
||||
kind_localized: 'common.fire',
|
||||
name: 'products.uganda_gnoma.name',
|
||||
image: 'logo_fuego.svg',
|
||||
image_product_1: 'product-brasil-single.png',
|
||||
image_product_2: 'product-brasil-single.png',
|
||||
slogan: 'products.uganda_gnoma.slogan',
|
||||
description: 'products.uganda_gnoma.description',
|
||||
farm: 'products.uganda_gnoma.farm',
|
||||
strain: 'products.uganda_gnoma.strain',
|
||||
country: 'products.uganda_gnoma.country',
|
||||
height: 'products.uganda_gnoma.height',
|
||||
revision: 'products.uganda_gnoma.revision',
|
||||
harvest: 'products.uganda_gnoma.harvest',
|
||||
profile: 'products.uganda_gnoma.profile',
|
||||
taste: 'products.uganda_gnoma.taste',
|
||||
texture: 'products.uganda_gnoma.texture'
|
||||
},
|
||||
];
|
||||
|
||||
import ProductCarouselVue from "../../components/ProductCarousel.vue";
|
||||
import { products } from '../../data.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -92,19 +12,26 @@
|
||||
};
|
||||
},
|
||||
components: {
|
||||
MenuVue,
|
||||
Carousel,
|
||||
Slide,
|
||||
Pagination,
|
||||
Navigation,
|
||||
ProductFlipCard,
|
||||
ProductBox,
|
||||
Certifications
|
||||
},
|
||||
MenuVue,
|
||||
ProductFlipCard,
|
||||
Certifications,
|
||||
ProductCarouselVue
|
||||
},
|
||||
computed: {
|
||||
productsCarousel() {
|
||||
return this.products.map(p => ({
|
||||
image: p.image_product_double,
|
||||
name: p.name,
|
||||
farm: p.farm,
|
||||
strain: p.strain,
|
||||
}));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getImage(image) {
|
||||
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
|
||||
},
|
||||
download() {
|
||||
const fileURL = new URL(`/src/assets/resources/Porfolio_V elemento_${this.$i18n.locale.toUpperCase()}.pdf`, import.meta.url).href;
|
||||
window.open(fileURL);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -118,76 +45,36 @@
|
||||
<div class="cards">
|
||||
<ProductFlipCard class="card" v-for="(product, index) in products" :key="index" :product="product"></ProductFlipCard>
|
||||
</div>
|
||||
<Carousel class="carousel" :items-to-show="2" :wrap-around="false">
|
||||
<Slide v-for="product in products" :key="product.kind">
|
||||
<div class="carousel-item">
|
||||
<ProductBox :product="product"></ProductBox>
|
||||
</div>
|
||||
</Slide>
|
||||
|
||||
<template #addons>
|
||||
<Navigation />
|
||||
<Pagination />
|
||||
</template>
|
||||
</Carousel>
|
||||
<ProductCarouselVue :products="productsCarousel" />
|
||||
<Certifications />
|
||||
|
||||
<h6 class="text-centered">Descarga aquí nuestro porfolio</h6>
|
||||
<div class="buttons text-centered">
|
||||
<button class="mt-5" @click.prevent.stop="download">Descargar</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.product-section.content {
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
font-size: 52px;
|
||||
text-align: left;
|
||||
line-height: 60px;
|
||||
}
|
||||
button {
|
||||
width: 154px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 8px;
|
||||
}
|
||||
.carousel {
|
||||
margin-top: 32px;
|
||||
&-item {
|
||||
min-height: 570px;
|
||||
width: 625px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&__slide {
|
||||
padding: 10px;
|
||||
}
|
||||
&__pagination-button:hover::after, &__pagination-button--active::after {
|
||||
background: rgba(255,255,255, 0.6);
|
||||
}
|
||||
|
||||
&__pagination-button {
|
||||
&::after{
|
||||
background: rgba(255,255,255, 0.3);
|
||||
}
|
||||
|
||||
&--active::after {
|
||||
background: rgba(255,255,255, 0.6);
|
||||
&:hover {
|
||||
background: rgba(255,255,255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__prev,
|
||||
&__next {
|
||||
box-sizing: content-box;
|
||||
background : rgba(255,255,255, 0.3);
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
background : rgba(255,255,255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user