updates
This commit is contained in:
parent
8dcc575699
commit
a85d25af09
BIN
src/assets/images/grains.jpg
Normal file
BIN
src/assets/images/grains.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 607 KiB |
BIN
src/assets/images/product-brasil-double.png
Normal file
BIN
src/assets/images/product-brasil-double.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 285 KiB |
BIN
src/assets/images/product-colombia-double.png
Normal file
BIN
src/assets/images/product-colombia-double.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 130 KiB |
BIN
src/assets/images/product-peru-double.png
Normal file
BIN
src/assets/images/product-peru-double.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 129 KiB |
BIN
src/assets/images/product-uganda-double.png
Normal file
BIN
src/assets/images/product-uganda-double.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 132 KiB |
BIN
src/assets/resources/Porfolio_V elemento_DE.pdf
Normal file
BIN
src/assets/resources/Porfolio_V elemento_DE.pdf
Normal file
Binary file not shown.
BIN
src/assets/resources/Porfolio_V elemento_EN.pdf
Normal file
BIN
src/assets/resources/Porfolio_V elemento_EN.pdf
Normal file
Binary file not shown.
BIN
src/assets/resources/Porfolio_V elemento_ES.pdf
Normal file
BIN
src/assets/resources/Porfolio_V elemento_ES.pdf
Normal file
Binary file not shown.
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="coffeefarmers">
|
||||
<h3 class="header">{{ $t('coffeefarmers.title') }}</h3>
|
||||
<div class="separator"></div>
|
||||
<!-- <div class="separator"></div> -->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -14,9 +14,10 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.coffeefarmers {
|
||||
height: 590px;
|
||||
background-image: url('@images/grains.png');
|
||||
background: white;
|
||||
background-image: url('@images/grains.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -26,6 +27,7 @@ export default {
|
||||
line-height: 58px;
|
||||
padding: 175px 230px 0;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 10px #000;
|
||||
}
|
||||
|
||||
.separator {
|
||||
|
@ -24,7 +24,7 @@ export default {
|
||||
.name {
|
||||
margin: 36px 0 0;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
font-size: 32px;
|
||||
line-height: 28px;
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="locale-selector">
|
||||
<a href="#" @click="toggle">
|
||||
<a href="#" @click.prevent.stop="toggle">
|
||||
<img class="globe-image" src="@images/global.svg" alt="">
|
||||
<span>{{ selectedLocale }}</span>
|
||||
<img src="@images/arrow-down.svg" alt="">
|
||||
</a>
|
||||
<div class="options" v-if="active">
|
||||
<div class="item" v-for="(value, key) in locales" :key="key" @click="changeLocale(key)">{{ value }}</div>
|
||||
<div class="item" v-for="(value, key) in locales" :key="key" @click.prevent.stop="changeLocale(key)">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -66,19 +66,24 @@ export default {
|
||||
}
|
||||
}
|
||||
.options {
|
||||
padding: 8px;
|
||||
padding: 8px 0 8px;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 24px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
color: black;
|
||||
background: #121212;
|
||||
border-radius: 5px;
|
||||
color: #fefefe;
|
||||
}
|
||||
.item {
|
||||
cursor: pointer;
|
||||
margin: 8px 0 0;
|
||||
padding: 8px 0 8px 12px;
|
||||
|
||||
&:hover {
|
||||
color: #FECE16;
|
||||
background: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="product-box">
|
||||
<div class="product-box-image">
|
||||
<img :src="$helper.getImage(product.image_product_1)" alt="">
|
||||
<img :src="$helper.getImage(product.image)" alt="">
|
||||
</div>
|
||||
<div class="product-box-bottom">
|
||||
<h1>{{ $t(product.name) }}</h1>
|
||||
|
78
src/components/ProductCarousel.vue
Normal file
78
src/components/ProductCarousel.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'vue3-carousel/dist/carousel.css'
|
||||
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
||||
import ProductBox from './ProductBox.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
products: Array
|
||||
},
|
||||
components: {
|
||||
Carousel,
|
||||
Slide,
|
||||
Pagination,
|
||||
Navigation,
|
||||
ProductBox,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.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>
|
78
src/data.js
Normal file
78
src/data.js
Normal file
@ -0,0 +1,78 @@
|
||||
export const products = [
|
||||
{
|
||||
kind: 'earth',
|
||||
kind_localized: 'common.earth',
|
||||
name: 'products.brasil_de_andrade.name',
|
||||
image: 'logo_tierra.svg',
|
||||
image_product_single: 'product-brasil-single.png',
|
||||
image_product_double: 'product-brasil-double.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_single: 'product-colombia-single.png',
|
||||
image_product_double: 'product-colombia-double.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_single: 'product-peru-single.png',
|
||||
image_product_double: 'product-peru-double.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_single: 'product-uganda-single.png',
|
||||
image_product_double: 'product-uganda-double.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'
|
||||
},
|
||||
];
|
@ -44,4 +44,26 @@ body {
|
||||
.main-container {
|
||||
width: 1366px;
|
||||
margin: 0 auto;;
|
||||
}
|
||||
|
||||
.text-centered {
|
||||
text-align: center !important;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
.mt-3 {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 32px !important;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: 48px;
|
||||
}
|
@ -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>
|
Loading…
x
Reference in New Issue
Block a user