Compare commits
No commits in common. "f493178e3cc4fd73e754768e0071fc1a0b365f53" and "3402653f197ee37b7db4ed8d70f778b3a41f5f5c" have entirely different histories.
f493178e3c
...
3402653f19
@ -8,9 +8,6 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Righteous&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Righteous&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
||||||
<title>Tayrona Foods</title>
|
<title>Tayrona Foods</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
61
src/App.vue
@ -1,77 +1,30 @@
|
|||||||
<script>
|
<script setup>
|
||||||
import Footer from './components/Footer.vue';
|
import Footer from './components/Footer.vue';
|
||||||
import Menu from './components/Menu.vue';
|
|
||||||
|
|
||||||
const pagesWithCarousel = [
|
|
||||||
'home', 'social', 'about', 'products'
|
|
||||||
];
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
stickyClass: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: { Footer, Menu },
|
|
||||||
created() {
|
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
window.removeEventListener('scroll', this.handleScroll);
|
|
||||||
},
|
|
||||||
beforeRouteEnter() {
|
|
||||||
this.stickyClass = '';
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleScroll() {
|
|
||||||
console.log('this.$route.name :>> ', this.$route.name);
|
|
||||||
if (!pagesWithCarousel.includes(this.$route.name)) {
|
|
||||||
this.stickyClass = 'has-sticky has-sticky-1'
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.scrollY > 0 && window.scrollY <= 574) {
|
|
||||||
this.stickyClass = 'has-sticky has-sticky-0';
|
|
||||||
} else if(window.scrollY > 574) {
|
|
||||||
this.stickyClass = 'has-sticky has-sticky-1';
|
|
||||||
} else {
|
|
||||||
this.stickyClass = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="main-container" :class="stickyClass">
|
<div class="main-container">
|
||||||
<Menu />
|
<RouterView />
|
||||||
<div class="content-wrapper">
|
|
||||||
<RouterView />
|
|
||||||
</div>
|
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.content-wrapper {
|
|
||||||
padding-top: 130px;
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
.content {
|
.content {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0 72px 72px;
|
padding: 0 72px 72px;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 36px;
|
font-size: 52px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 50px;
|
line-height: 70px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 52px 0;
|
padding: 72px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 24px;
|
font-size: 32px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 70px;
|
line-height: 70px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
Before ![]() (image error) Size: 255 KiB |
BIN
src/assets/images/bg_1.png
Normal file
After ![]() (image error) Size: 1.1 MiB |
Before ![]() (image error) Size: 243 KiB After ![]() (image error) Size: 918 KiB ![]() ![]() |
Before Width: 48px | Height: 48px | Size: 15 KiB |
Before ![]() (image error) Size: 860 KiB After ![]() (image error) Size: 887 KiB ![]() ![]() |
BIN
src/assets/images/grains.png
Normal file
After ![]() (image error) Size: 754 KiB |
Before ![]() (image error) Size: 182 KiB |
BIN
src/assets/images/kid-coffee.png
Normal file
After ![]() (image error) Size: 705 KiB |
Before ![]() (image error) Size: 162 KiB |
BIN
src/assets/images/kids.png
Normal file
After ![]() (image error) Size: 1.1 MiB |
Before ![]() (image error) Size: 233 KiB |
BIN
src/assets/images/mountains.png
Normal file
After ![]() (image error) Size: 1.1 MiB |
Before ![]() (image error) Size: 123 KiB |
BIN
src/assets/images/products.png
Normal file
After ![]() (image error) Size: 530 KiB |
Before ![]() (image error) Size: 810 KiB |
BIN
src/assets/images/proysoc.01.png
Normal file
After ![]() (image error) Size: 3.1 MiB |
Before ![]() (image error) Size: 39 KiB |
Before ![]() (image error) Size: 54 KiB |
Before ![]() (image error) Size: 36 KiB |
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="big-carousel">
|
|
||||||
<Carousel :autoplay="5000" class="big-carousel" :wrapAround="true" >
|
|
||||||
<Slide v-for="(slide, index) in images" :key="index">
|
|
||||||
<img :src="$helper.getImage(slide)" alt="" />
|
|
||||||
</Slide>
|
|
||||||
</Carousel>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import 'vue3-carousel/dist/carousel.css'
|
|
||||||
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
images: Array,
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Carousel,
|
|
||||||
Slide,
|
|
||||||
Pagination,
|
|
||||||
Navigation,
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log(this.images);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.big-carousel {
|
|
||||||
margin-top:0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
|
|
||||||
.carousel__slide {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -2,68 +2,64 @@
|
|||||||
import LocaleSelector from './LocaleSelector.vue';
|
import LocaleSelector from './LocaleSelector.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { LocaleSelector },
|
props: {
|
||||||
|
type: String,
|
||||||
|
title: String,
|
||||||
|
},
|
||||||
|
components: { LocaleSelector }
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="menu">
|
<section class="menu" :class="type">
|
||||||
<nav>
|
<div class="overlay">
|
||||||
<img class="logo" src="@images/tayrona-foods-yellow.png" />
|
<nav>
|
||||||
<div class="links">
|
<img class="logo" src="@images/logo-kreis_34.png" />
|
||||||
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
<div class="links">
|
||||||
<router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
|
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
||||||
<router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
|
<router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
|
||||||
<!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
|
<router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
|
||||||
<a href="https://tayronafoods.myshopify.com" target="_blank" class="link">{{ $t('Tienda') }}</a>
|
<router-link class="link" to="/shopping">{{ $t('menu.shopping') }}</router-link>
|
||||||
<router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
|
<router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
|
||||||
<router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
|
<router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
|
||||||
<LocaleSelector class="link"></LocaleSelector>
|
<!-- <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
|
||||||
</div>
|
<router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link> -->
|
||||||
</nav>
|
<LocaleSelector class="link"></LocaleSelector>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<h1 class="title" v-if="title">{{ title }}</h1>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.menu {
|
.menu {
|
||||||
background-color: transparent;
|
height: 574px;
|
||||||
height: 130px;
|
background-repeat: no-repeat;
|
||||||
position: fixed;
|
background-size: contain;
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 1000;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
|
.overlay {
|
||||||
.nav-wrapper {
|
width: 100%;
|
||||||
position: relative;
|
|
||||||
width: 1366px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// background: #000;
|
background: linear-gradient(89.82deg, rgba(30, 30, 30, 0.72) -6.88%, rgba(0, 0, 0, 0.18) 87.45%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 65px;
|
||||||
|
line-height: 70px;
|
||||||
|
text-align: right;
|
||||||
|
padding: 88px 93px 0;
|
||||||
|
}
|
||||||
nav {
|
nav {
|
||||||
margin: 0 auto;
|
padding: 24px 93px 0;
|
||||||
padding: 16px 50px;
|
display: grid;
|
||||||
display: grid;
|
grid-template-columns: auto auto;
|
||||||
grid-template-columns: auto auto;
|
|
||||||
background: transparent;
|
|
||||||
width: 1366px;
|
|
||||||
height: 100%;
|
|
||||||
transition: background-color .3s ease-in-out;
|
|
||||||
|
|
||||||
.has-sticky-0 & {
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-sticky-1 & {
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
height: 100px;
|
height: 90px;
|
||||||
width: 100px;;
|
width: 90px;;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
@ -90,6 +86,28 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.home {
|
||||||
|
background-image: url('@images/mountains.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.about {
|
||||||
|
background-image: url('@images/coffee1.jpg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.products {
|
||||||
|
background-image: url('@images/products.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.social {
|
||||||
|
background-image: url('@images/proysoc.01.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.contact {
|
||||||
|
background-color: #000;
|
||||||
|
height: 180px;
|
||||||
|
.overlay {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="product-box">
|
<div class="product-box">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="kind-image">
|
<div>
|
||||||
<img :src="$helper.getImage(product.kind.image)" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2>{{ $t(product.name) }}</h2>
|
<h2>{{ $t(product.name) }}</h2>
|
||||||
@ -10,30 +10,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-box-image">
|
<div class="product-box-image">
|
||||||
<img :src="$helper.getImage(product.images[0])" alt="" />
|
<img :src="$helper.getImage(product.image)" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<product-table :product="product"></product-table>
|
<!-- <h2>{{ $t(product.footer) }}</h2>
|
||||||
|
<h3>{{ $t(product.footer) }}</h3> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ProductTable from "./ProductTable.vue";
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
product: Object,
|
product: Object,
|
||||||
},
|
}
|
||||||
components: {
|
}
|
||||||
ProductTable,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.product-box {
|
.product-box {
|
||||||
width: 360px;
|
width: 360px;
|
||||||
height: 480px;
|
height: 480px;
|
||||||
|
background: #DAD7DA;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background-position: top left;
|
background-position: top left;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -41,10 +39,6 @@ export default {
|
|||||||
padding: 0 px 0;
|
padding: 0 px 0;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-color: #1f1f1f;
|
|
||||||
border-top-left-radius: 12px;
|
|
||||||
border-top-right-radius: 12px;
|
|
||||||
color: #c1c1a1;
|
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
@ -52,13 +46,6 @@ export default {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 40px auto;
|
grid-template-columns: 40px auto;
|
||||||
|
|
||||||
.kind-image {
|
|
||||||
align-self: start;
|
|
||||||
img {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -71,17 +58,16 @@ export default {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-image {
|
&-image {
|
||||||
width: 360px;
|
width: fixed;
|
||||||
height: 285px;
|
height: fixed;
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<Carousel class="carousel" :items-to-show="3" :wrap-around="false">
|
<Carousel class="carousel" :items-to-show="3" :wrap-around="false">
|
||||||
<Slide v-for="product in products" :key="product.name">
|
<Slide v-for="product in products" :key="product.kind">
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
<ProductBox :product="product"></ProductBox>
|
<ProductBox :product="product"></ProductBox>
|
||||||
</div>
|
</div>
|
||||||
@ -8,6 +8,7 @@
|
|||||||
|
|
||||||
<template #addons>
|
<template #addons>
|
||||||
<Navigation />
|
<Navigation />
|
||||||
|
<Pagination />
|
||||||
</template>
|
</template>
|
||||||
</Carousel>
|
</Carousel>
|
||||||
</template>
|
</template>
|
||||||
|
@ -12,6 +12,9 @@ export default {
|
|||||||
toggle() {
|
toggle() {
|
||||||
this.flipped = !this.flipped;
|
this.flipped = !this.flipped;
|
||||||
},
|
},
|
||||||
|
translate(val) {
|
||||||
|
console.log('Vue.$t :>> ', Vue.$t);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -20,9 +23,9 @@ export default {
|
|||||||
<div class="flip-card" :class="{flipped}" @click="toggle">
|
<div class="flip-card" :class="{flipped}" @click="toggle">
|
||||||
<div v-if="product" class="flip-card-inner" :class="(product && product.kind) || 'no-product'">
|
<div v-if="product" class="flip-card-inner" :class="(product && product.kind) || 'no-product'">
|
||||||
<div class="flip-card-front">
|
<div class="flip-card-front">
|
||||||
<img class="logo" :src="$helper.getImage(product.kind.getImageimage)" />
|
<img class="logo" :src="$helper.getImage(product.image)" />
|
||||||
<div>
|
<div>
|
||||||
<h3 class="title">{{ $t(product.kind.localized)}}</h3>
|
<h3 class="title">{{ $t(product.kind_localized)}}</h3>
|
||||||
<h3 class="slogan">{{ $t(product.slogan) }}</h3>
|
<h3 class="slogan">{{ $t(product.slogan) }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="description">{{ $t(product.description) }}</div>
|
<div class="description">{{ $t(product.description) }}</div>
|
||||||
@ -36,8 +39,8 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
<div class="info-data">
|
<div class="info-data">
|
||||||
<div class="info-data-left">
|
<div class="info-data-left">
|
||||||
<img class="logo" :src="$helper.getImage(product.kind.image)" />
|
<img class="logo" :src="$helper.getImage(product.image)" />
|
||||||
<p class="kind">{{ $t(product.kind.localized) }}</p>
|
<p class="kind">{{ $t(product.kind_localized) }}</p>
|
||||||
<p class="slogan">{{ $t(product.slogan) }}</p>
|
<p class="slogan">{{ $t(product.slogan) }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-data-right">
|
<div class="info-data-right">
|
||||||
|
@ -1,256 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="info" :class="product.kind.name">
|
|
||||||
<div class="info-data">
|
|
||||||
<div class="info-data-left" >
|
|
||||||
<img class="logo" :src="$helper.getImage(product.kind.image)" />
|
|
||||||
<p class="kind">{{ $t(product.kind.localized) }}</p>
|
|
||||||
<p class="slogan">{{ $t(product.slogan) }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="info-data-right">
|
|
||||||
<div class="info-data-row">
|
|
||||||
<div class="info-data-box land">
|
|
||||||
<div class="info-data-box-label">{{ $t("labels.country") }}</div>
|
|
||||||
<div class="info-data-box-value">
|
|
||||||
{{ $t(product.country) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-data-box height">
|
|
||||||
<div class="info-data-box-label">{{ $t("labels.height") }}</div>
|
|
||||||
<div class="info-data-box-value">
|
|
||||||
<div class="text-overflow">
|
|
||||||
{{ $t(product.height) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-data-row">
|
|
||||||
<div class="info-data-box revision">
|
|
||||||
<div class="info-data-box-label">{{ $t("labels.revision") }}</div>
|
|
||||||
<div class="info-data-box-value">
|
|
||||||
<div class="text-overflow">
|
|
||||||
{{ $t(product.revision) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-data-box harvest">
|
|
||||||
<div class="info-data-box-label">{{ $t("labels.harvest") }}</div>
|
|
||||||
<div class="info-data-box-value">
|
|
||||||
<div class="text-overflow">
|
|
||||||
{{ $t(product.harvest) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-data-box profile">
|
|
||||||
<div class="info-data-box-label">{{ $t("labels.profile") }}</div>
|
|
||||||
<div class="info-data-box-value">
|
|
||||||
<div class="text-overflow">
|
|
||||||
{{ $t(product.profile) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-data-row">
|
|
||||||
<div class="info-data-box taste">
|
|
||||||
<div class="info-data-box-label">{{ $t("labels.taste") }}</div>
|
|
||||||
<div class="info-data-box-value">
|
|
||||||
<div class="text-overflow">
|
|
||||||
{{ $t(product.taste) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-data-box mouthfeel">
|
|
||||||
<div class="info-data-box-label">{{ $t("labels.texture") }}</div>
|
|
||||||
<div class="info-data-box-value">
|
|
||||||
<div class="text-overflow">
|
|
||||||
{{ $t(product.texture) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
product: Object
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.info {
|
|
||||||
font-size: 12px;
|
|
||||||
border-bottom-left-radius: 15px;
|
|
||||||
border-bottom-right-radius: 15px;
|
|
||||||
.logo {
|
|
||||||
width: 50px
|
|
||||||
}
|
|
||||||
&.earth {
|
|
||||||
background-color: #A6AF94;
|
|
||||||
}
|
|
||||||
&.water {
|
|
||||||
background-color: #889CA7;
|
|
||||||
}
|
|
||||||
&.air {
|
|
||||||
background-color: #F4EEB0;
|
|
||||||
}
|
|
||||||
&.fire {
|
|
||||||
background-color: #D58C83;
|
|
||||||
}
|
|
||||||
&.no-product {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&-data {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 20% 80%;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 2px;
|
|
||||||
border-bottom-left-radius: 15px;
|
|
||||||
border-bottom-right-radius: 15px;
|
|
||||||
|
|
||||||
&-left {
|
|
||||||
padding-top: 16px;
|
|
||||||
border-bottom-left-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-right {
|
|
||||||
border-bottom-right-radius: 15px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: repeat(3, 1fr);
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.earth & {
|
|
||||||
background-color: #babfa9;
|
|
||||||
}
|
|
||||||
.water & {
|
|
||||||
background-color: #92a7b1;
|
|
||||||
}
|
|
||||||
.air & {
|
|
||||||
background-color: #f4f4cc;
|
|
||||||
}
|
|
||||||
.fire & {
|
|
||||||
background-color: #d59c95;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-row {
|
|
||||||
border-top-style: solid;
|
|
||||||
border-top-width: 2px;
|
|
||||||
border-bottom-style: solid;
|
|
||||||
border-bottom-width: 2px;
|
|
||||||
display: inline-flex;
|
|
||||||
// flex-wrap: nowrap;
|
|
||||||
// justify-content: space-around;
|
|
||||||
min-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.earth & {
|
|
||||||
border-color: #a6af94;
|
|
||||||
}
|
|
||||||
|
|
||||||
.water & {
|
|
||||||
border-color: #889ca7;
|
|
||||||
}
|
|
||||||
.air & {
|
|
||||||
border-color: #f4eeb0;
|
|
||||||
}
|
|
||||||
.fire & {
|
|
||||||
border-color: #d58c83;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-box {
|
|
||||||
padding: 4px 0 0 8px;
|
|
||||||
border-right-style: solid;
|
|
||||||
border-right-width: 3px;
|
|
||||||
min-width: 100px;
|
|
||||||
flex-basis: 0px;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
.text-overflow {
|
|
||||||
// width: 98%;
|
|
||||||
// text-overflow: ellipsis;
|
|
||||||
// overflow: hidden;
|
|
||||||
// white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.earth & {
|
|
||||||
border-color: #a6af94;
|
|
||||||
}
|
|
||||||
|
|
||||||
.water & {
|
|
||||||
border-color: #889ca7;
|
|
||||||
}
|
|
||||||
.air & {
|
|
||||||
border-color: #f4eeb0;
|
|
||||||
}
|
|
||||||
.fire & {
|
|
||||||
border-color: #d58c83;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-label {
|
|
||||||
font-family: "Righteous", cursive;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
&-value {
|
|
||||||
font-family: "Cormorant Garamond", serif;
|
|
||||||
line-height: 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
&.kind {
|
|
||||||
font-family: "Righteous", cursive;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-left: 4px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1.3px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
&.slogan {
|
|
||||||
font-family: "Cormorant Garamond", serif;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 12px;
|
|
||||||
margin-left: 4px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.earth & {
|
|
||||||
border-color: #babfa9;
|
|
||||||
}
|
|
||||||
.water & {
|
|
||||||
border-color: #92a7b1;
|
|
||||||
}
|
|
||||||
.air & {
|
|
||||||
border-color: #f4f4cc;
|
|
||||||
}
|
|
||||||
.fire & {
|
|
||||||
border-color: #d59c95;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
82
src/data.js
@ -1,31 +1,11 @@
|
|||||||
export const kinds = {
|
|
||||||
earth: {
|
|
||||||
name: 'earth',
|
|
||||||
localized: 'common.earth',
|
|
||||||
image: 'logo_tierra.svg'
|
|
||||||
},
|
|
||||||
water: {
|
|
||||||
name: 'water',
|
|
||||||
localized: 'common.water',
|
|
||||||
image: 'logo_agua.svg'
|
|
||||||
},
|
|
||||||
air: {
|
|
||||||
name: 'air',
|
|
||||||
localized: 'common.air',
|
|
||||||
image: 'logo_aire2.svg'
|
|
||||||
},
|
|
||||||
fire: {
|
|
||||||
name: 'fire',
|
|
||||||
localized: 'common.fire',
|
|
||||||
image: 'logo_fuego.svg'
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const products = [
|
export const products = [
|
||||||
{
|
{
|
||||||
kind: kinds.earth,
|
kind: 'earth',
|
||||||
|
kind_localized: 'common.earth',
|
||||||
name: 'products.brasil_de_andrade.name',
|
name: 'products.brasil_de_andrade.name',
|
||||||
images: ['product-brasil-single11.png', 'product-brasil-double1.png',],
|
image: 'logo_tierra.svg',
|
||||||
|
image_product_single: 'product-brasil-single11.png',
|
||||||
|
image_product_double: 'product-brasil-double1.png',
|
||||||
slogan: 'products.brasil_de_andrade.slogan',
|
slogan: 'products.brasil_de_andrade.slogan',
|
||||||
description: 'products.brasil_de_andrade.description',
|
description: 'products.brasil_de_andrade.description',
|
||||||
farm: 'products.brasil_de_andrade.farm',
|
farm: 'products.brasil_de_andrade.farm',
|
||||||
@ -39,9 +19,12 @@ export const products = [
|
|||||||
texture: 'products.brasil_de_andrade.texture'
|
texture: 'products.brasil_de_andrade.texture'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: kinds.water,
|
kind: 'water',
|
||||||
|
kind_localized: 'common.water',
|
||||||
name: 'products.colombia_el_paseito.name',
|
name: 'products.colombia_el_paseito.name',
|
||||||
images: ['product-colombia-single11.png', 'product-colombia-double1.png',],
|
image: 'logo_agua.svg',
|
||||||
|
image_product_single: 'product-colombia-single11.png',
|
||||||
|
image_product_double: 'product-colombia-double1.png',
|
||||||
slogan: 'products.colombia_el_paseito.slogan',
|
slogan: 'products.colombia_el_paseito.slogan',
|
||||||
description: 'products.colombia_el_paseito.description',
|
description: 'products.colombia_el_paseito.description',
|
||||||
farm: 'products.colombia_el_paseito.farm',
|
farm: 'products.colombia_el_paseito.farm',
|
||||||
@ -55,9 +38,12 @@ export const products = [
|
|||||||
texture: 'products.colombia_el_paseito.texture'
|
texture: 'products.colombia_el_paseito.texture'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: kinds.air,
|
kind: 'air',
|
||||||
|
kind_localized: 'common.air',
|
||||||
name: 'products.peru_grad_1.name',
|
name: 'products.peru_grad_1.name',
|
||||||
images: ['product-peru-single11.png', 'product-peru-double1.png',],
|
image: 'logo_aire2.svg',
|
||||||
|
image_product_single: 'product-peru-single11.png',
|
||||||
|
image_product_double: 'product-peru-double1.png',
|
||||||
slogan: 'products.peru_grad_1.slogan',
|
slogan: 'products.peru_grad_1.slogan',
|
||||||
description: 'products.peru_grad_1.description',
|
description: 'products.peru_grad_1.description',
|
||||||
farm: 'products.peru_grad_1.farm',
|
farm: 'products.peru_grad_1.farm',
|
||||||
@ -71,9 +57,12 @@ export const products = [
|
|||||||
texture: 'products.peru_grad_1.texture'
|
texture: 'products.peru_grad_1.texture'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: kinds.fire,
|
kind: 'fire',
|
||||||
|
kind_localized: 'common.fire',
|
||||||
name: 'products.uganda_gnoma.name',
|
name: 'products.uganda_gnoma.name',
|
||||||
images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
|
image: 'logo_fuego.svg',
|
||||||
|
image_product_single: 'product-uganda-single11.png',
|
||||||
|
image_product_double: 'product-uganda-double1.png',
|
||||||
slogan: 'products.uganda_gnoma.slogan',
|
slogan: 'products.uganda_gnoma.slogan',
|
||||||
description: 'products.uganda_gnoma.description',
|
description: 'products.uganda_gnoma.description',
|
||||||
farm: 'products.uganda_gnoma.farm',
|
farm: 'products.uganda_gnoma.farm',
|
||||||
@ -87,34 +76,3 @@ export const products = [
|
|||||||
texture: 'products.uganda_gnoma.texture',
|
texture: 'products.uganda_gnoma.texture',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const slides = {
|
|
||||||
home: [
|
|
||||||
'mountains.jpg',
|
|
||||||
'coffee1.jpg',
|
|
||||||
'products.jpg',
|
|
||||||
'proysoc.01.jpg',
|
|
||||||
'kids.jpg',
|
|
||||||
],
|
|
||||||
about: [
|
|
||||||
'coffee1.jpg',
|
|
||||||
'mountains.jpg',
|
|
||||||
'products.jpg',
|
|
||||||
'proysoc.01.jpg',
|
|
||||||
'kids.jpg',
|
|
||||||
],
|
|
||||||
social: [
|
|
||||||
'proysoc.01.jpg',
|
|
||||||
'kids.jpg',
|
|
||||||
'mountains.jpg',
|
|
||||||
'coffee1.jpg',
|
|
||||||
'products.jpg',
|
|
||||||
],
|
|
||||||
products: [
|
|
||||||
'products.jpg',
|
|
||||||
'coffee1.jpg',
|
|
||||||
'mountains.jpg',
|
|
||||||
'proysoc.01.jpg',
|
|
||||||
'kids.jpg',
|
|
||||||
],
|
|
||||||
};
|
|
@ -10,7 +10,6 @@ export default {
|
|||||||
home: 'Home',
|
home: 'Home',
|
||||||
about: 'Über uns',
|
about: 'Über uns',
|
||||||
products: 'Produkt',
|
products: 'Produkt',
|
||||||
shopping: 'Shopping',
|
|
||||||
social: 'Soziales Projekt',
|
social: 'Soziales Projekt',
|
||||||
contact: 'Kontakt'
|
contact: 'Kontakt'
|
||||||
},
|
},
|
||||||
@ -62,7 +61,7 @@ export default {
|
|||||||
title2:'Unsere Partner'
|
title2:'Unsere Partner'
|
||||||
},
|
},
|
||||||
products_page: {
|
products_page: {
|
||||||
title: 'Disfruta del sabor auténtico de un café recién tostado',
|
title: 'Origen',
|
||||||
subtitle1: 'Die Indianer haben seit jeher eine enge Beziehung zu ihrer na-türlichen Umgebung. Im Einklang mit den vier Elementen - Feuer,Wasser, Luft und Erde - gestalten sie ihr Leben. Dies beschreibt wunderbar unsere Kaffeereihe.',
|
subtitle1: 'Die Indianer haben seit jeher eine enge Beziehung zu ihrer na-türlichen Umgebung. Im Einklang mit den vier Elementen - Feuer,Wasser, Luft und Erde - gestalten sie ihr Leben. Dies beschreibt wunderbar unsere Kaffeereihe.',
|
||||||
|
|
||||||
},
|
},
|
||||||
@ -76,32 +75,32 @@ export default {
|
|||||||
strain: '100% Arábica',
|
strain: '100% Arábica',
|
||||||
country: 'Brasil/ Cerrado, Carmo do paranaiba',
|
country: 'Brasil/ Cerrado, Carmo do paranaiba',
|
||||||
height: '1.100 m',
|
height: '1.100 m',
|
||||||
revision: 'sonnengetrocknet',
|
revision: 'Secado al sol',
|
||||||
harvest: 'handgepflückt',
|
harvest: 'Seleccionado cuidadósamente',
|
||||||
profile: '1/4',
|
profile: '1/4',
|
||||||
taste: 'Schokolade,leichte Fruchtsäure.',
|
taste: 'Chocolate, ligero ácido de frutas.',
|
||||||
texture: 'mild würzig'
|
texture: 'Ligeramente picante'
|
||||||
},
|
},
|
||||||
colombia_el_paseito: {
|
colombia_el_paseito: {
|
||||||
title:'Water',
|
title:'Agua',
|
||||||
slogan: 'Born to feel',
|
slogan: 'Nacido para sentir',
|
||||||
description: `El agua, juega un papel decisivo en la preparación del café.
|
description: `El agua, juega un papel decisivo en la preparación del café.
|
||||||
Por lo tanto, solo utilizamos agua de primera clase que se adapta perfectamente a los requisitos individuales de cada café.
|
Por lo tanto, solo utilizamos agua de primera clase que se adapta perfectamente a los requisitos individuales de cada café.
|
||||||
La cantidad y calidad correcta del agua despliega los aromas y sabores en cada taza.`,
|
La cantidad y calidad correcta del agua despliega los aromas y sabores en cada taza.`,
|
||||||
name: 'Colombia El Pastelito',
|
name: 'Colombia El Pastelito',
|
||||||
farm: 'La Mejorana',
|
farm: 'La Mejorana',
|
||||||
strain: '100% Arábica',
|
strain: '100% Arábica',
|
||||||
country: 'Kolumbien /Quimbaya, Quindío',
|
country: 'Colombia /Quimbaya, Quindío',
|
||||||
height: '1.470 m',
|
height: '1.470 m',
|
||||||
revision: 'Sonnengetrocknet',
|
revision: 'Secado al sol',
|
||||||
harvest: 'handgepflückt',
|
harvest: 'Seleccionado cuidadósamente',
|
||||||
profile: '3/4',
|
profile: '3/4',
|
||||||
taste: 'leichte Karamellnote.',
|
taste: 'Leche acaramelada.',
|
||||||
texture: 'voll'
|
texture: 'Lleno'
|
||||||
},
|
},
|
||||||
peru_grad_1: {
|
peru_grad_1: {
|
||||||
title:'Air',
|
title:'Aire',
|
||||||
slogan: 'Born to inspire',
|
slogan: 'Nacido para inspirar',
|
||||||
description: `El aire, es otra parte esencial de nuestra pasión por el café, damos gran importancia a los granos de café recién tostados que conservan su aroma y sabor inconfundibles.
|
description: `El aire, es otra parte esencial de nuestra pasión por el café, damos gran importancia a los granos de café recién tostados que conservan su aroma y sabor inconfundibles.
|
||||||
Es por eso que tostamos en pequeños lotes para asegurarnos de que cada taza que disfrutes esté llena de frescura y aroma.`,
|
Es por eso que tostamos en pequeños lotes para asegurarnos de que cada taza que disfrutes esté llena de frescura y aroma.`,
|
||||||
name: 'Perú Grad 1',
|
name: 'Perú Grad 1',
|
||||||
@ -109,15 +108,15 @@ export default {
|
|||||||
strain: '100% Arábica',
|
strain: '100% Arábica',
|
||||||
country: 'Perú / Puno, Sandia',
|
country: 'Perú / Puno, Sandia',
|
||||||
height: '1.800 m',
|
height: '1.800 m',
|
||||||
revision: 'Sonnengetrocknet',
|
revision: 'Secado al sol',
|
||||||
harvest: 'handgepflückt',
|
harvest: 'Seleccionado cuidadósamente',
|
||||||
profile: '3/4',
|
profile: '3/4',
|
||||||
taste: 'blumig-fruchtig,Schokolade',
|
taste: '-',
|
||||||
texture: 'würzig'
|
texture: '-'
|
||||||
},
|
},
|
||||||
uganda_gnoma: {
|
uganda_gnoma: {
|
||||||
title:'Fire',
|
title:'Fuego',
|
||||||
slogan: 'Born to succeed',
|
slogan: 'Nacido para triunfar',
|
||||||
description: `El fuego, la pasión que resuena en cada paso de nuestro trabajo.
|
description: `El fuego, la pasión que resuena en cada paso de nuestro trabajo.
|
||||||
Desde la selección de variedades de café verde hasta el cuidadoso tostado y la preparación amorosa, estamos allí con alma y corazón para ofrecerte una experiencia de café extraordinaria.`,
|
Desde la selección de variedades de café verde hasta el cuidadoso tostado y la preparación amorosa, estamos allí con alma y corazón para ofrecerte una experiencia de café extraordinaria.`,
|
||||||
name: 'Uganda Ngoma',
|
name: 'Uganda Ngoma',
|
||||||
@ -125,21 +124,21 @@ export default {
|
|||||||
strain: '100% Robusta',
|
strain: '100% Robusta',
|
||||||
country: 'Uganda / Wakiso District',
|
country: 'Uganda / Wakiso District',
|
||||||
height: '1.250 m',
|
height: '1.250 m',
|
||||||
revision: 'Sonnengetrocknet',
|
revision: 'Secado al sol',
|
||||||
harvest: 'handgepflückt',
|
harvest: 'Seleccionado cuidadósamente',
|
||||||
profile: '4/4',
|
profile: '4/4',
|
||||||
taste: 'Zartbitterschokolade',
|
taste: '-.',
|
||||||
texture: 'sanft'
|
texture: '-'
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
labels: {
|
labels: {
|
||||||
country: 'Land / Region',
|
country: 'País / Región',
|
||||||
height: 'Anbauhöhe',
|
height: 'Altura',
|
||||||
revision: 'Verarbeitung',
|
revision: 'Revisión',
|
||||||
harvest: 'Ernte',
|
harvest: 'Cosecha',
|
||||||
profile: 'Profil',
|
profile: 'Perfil',
|
||||||
taste: 'Geschmack',
|
taste: 'Gusto',
|
||||||
texture: 'Mundgefühl'
|
texture: 'Textura'
|
||||||
},
|
},
|
||||||
|
|
||||||
social: {
|
social: {
|
||||||
@ -150,13 +149,13 @@ export default {
|
|||||||
paragraph4:'Sumérgete en el mundo de Tayrona Foods, donde el café no solo es una pasión, sino también una fuente de cambio y apoyo para quienes más lo necesitan.'
|
paragraph4:'Sumérgete en el mundo de Tayrona Foods, donde el café no solo es una pasión, sino también una fuente de cambio y apoyo para quienes más lo necesitan.'
|
||||||
},
|
},
|
||||||
common: {
|
common: {
|
||||||
earth: 'Eart',
|
earth: 'Tierra',
|
||||||
water: 'Water',
|
water: 'Agua',
|
||||||
air: 'Air',
|
air: 'Aire',
|
||||||
fire: 'Fire',
|
fire: 'Fuego',
|
||||||
company_name: 'Tayrona Foods',
|
company_name: 'Tayrona Foods',
|
||||||
rol_managing_partner: 'Managing Partner',
|
rol_managing_partner: 'Managing Partner',
|
||||||
download: 'Download'
|
download: 'Descargar'
|
||||||
},
|
},
|
||||||
|
|
||||||
contact:{
|
contact:{
|
||||||
|
@ -10,7 +10,6 @@ export default {
|
|||||||
home: 'Home',
|
home: 'Home',
|
||||||
about: 'About',
|
about: 'About',
|
||||||
products: 'Products',
|
products: 'Products',
|
||||||
shopping: 'Shopping',
|
|
||||||
social: 'Social',
|
social: 'Social',
|
||||||
contact: 'Contact'
|
contact: 'Contact'
|
||||||
},
|
},
|
||||||
@ -63,9 +62,8 @@ export default {
|
|||||||
title2:'Partners Certifications'
|
title2:'Partners Certifications'
|
||||||
},
|
},
|
||||||
products_page: {
|
products_page: {
|
||||||
title: 'Disfruta del sabor auténtico de un café recién tostado',
|
title: 'Origin',
|
||||||
subtitle1: 'Indigenous cultures have always had a close relationship with their natural environment, finding harmony with the four elements: fire, water, air, and earth, the meaning of their lives, and it is this close relationship that beautifully describes our series of coffees.',
|
subtitle1: 'Indigenous cultures have always had a close relationship with their natural environment, finding harmony with the four elements: fire, water, air, and earth, the meaning of their lives, and it is this close relationship that beautifully describes our series of coffees.',
|
||||||
download: 'Download here our portfolio',
|
|
||||||
|
|
||||||
},
|
},
|
||||||
products: {
|
products: {
|
||||||
@ -164,9 +162,9 @@ export default {
|
|||||||
title: 'Contact',
|
title: 'Contact',
|
||||||
paragraph1:'If you are interested or have any questions, please contact us!',
|
paragraph1:'If you are interested or have any questions, please contact us!',
|
||||||
paragraph2: 'Email',
|
paragraph2: 'Email',
|
||||||
paragraph3: 'info{\'@\'}tayronafoods.com',
|
paragraph3: 'info@tayronafoods.com',
|
||||||
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
paragraph4: 'alejandro@tayronafoods.com',
|
||||||
paragraph5: 'jose{\'@\'}tayronafoods.com',
|
paragraph5: 'jose@tayronafoods.com',
|
||||||
paragraph6: 'Phones',
|
paragraph6: 'Phones',
|
||||||
paragraph7: '+49(0)176 321 368 59',
|
paragraph7: '+49(0)176 321 368 59',
|
||||||
paragraph8: '+49(0)152 549 389 62',
|
paragraph8: '+49(0)152 549 389 62',
|
||||||
|
@ -62,9 +62,9 @@ export default {
|
|||||||
title2:'Nuestros Aliados'
|
title2:'Nuestros Aliados'
|
||||||
},
|
},
|
||||||
products_page: {
|
products_page: {
|
||||||
title: 'Disfruta del sabor auténtico de un café recién tostado',
|
title: 'Origen',
|
||||||
subtitle1: 'Las culturas indígenas siempre han tenido una estrecha relación con su entorno natural, encontrando en la armonía con los cuatro elementos: fuego, agua, aire y tierra, el sentido de sus vidas, y es esta misma relación la que describe maravillosamente nuestra serie de cafés.',
|
subtitle1: 'Las culturas indígenas siempre han tenido una estrecha relación con su entorno natural, encontrando en la armonía con los cuatro elementos: fuego, agua, aire y tierra, el sentido de sus vidas, y es esta misma relación la que describe maravillosamente nuestra serie de cafés.',
|
||||||
download: 'Descarga aquí nuestro portafolio',
|
|
||||||
},
|
},
|
||||||
products: {
|
products: {
|
||||||
brasil_de_andrade: {
|
brasil_de_andrade: {
|
||||||
@ -163,9 +163,9 @@ export default {
|
|||||||
title: 'Contacto',
|
title: 'Contacto',
|
||||||
paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
|
paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
|
||||||
paragraph2: 'Correo Electrónico',
|
paragraph2: 'Correo Electrónico',
|
||||||
paragraph3: 'info{\'@\'}tayronafoods.com',
|
paragraph3: 'info@tayronafoods.com',
|
||||||
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
paragraph4: 'alejandro@tayronafoods.com',
|
||||||
paragraph5: 'jose{\'@\'}tayronafoods.com',
|
paragraph5: 'jose@tayronafoods.com',
|
||||||
paragraph6: 'Teléfonos',
|
paragraph6: 'Teléfonos',
|
||||||
paragraph7: '+49(0)176 321 368 59',
|
paragraph7: '+49(0)176 321 368 59',
|
||||||
paragraph8: '+49(0)152 549 389 62',
|
paragraph8: '+49(0)152 549 389 62',
|
||||||
|
@ -8,7 +8,6 @@ import ContactView from '../views/contact/Contact.vue';
|
|||||||
import ImpressumView from '../views/impressum/Impressum.vue';
|
import ImpressumView from '../views/impressum/Impressum.vue';
|
||||||
import DataProtectionView from '../views/dataprotection/DataProtection.vue';
|
import DataProtectionView from '../views/dataprotection/DataProtection.vue';
|
||||||
import AgbView from '../views/agb/Agb.vue';
|
import AgbView from '../views/agb/Agb.vue';
|
||||||
import StoreView from '../views/store/StoreView.vue';
|
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHashHistory(),
|
history: createWebHashHistory(),
|
||||||
@ -53,11 +52,6 @@ const router = createRouter({
|
|||||||
name: 'agb',
|
name: 'agb',
|
||||||
component: AgbView,
|
component: AgbView,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/store',
|
|
||||||
name: 'store',
|
|
||||||
component: StoreView,
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1,12 +1,10 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import BigCarousel from '../../components/BigCarousel.vue';
|
import MenuVue from "../../components/Menu.vue";
|
||||||
import Employee from "../../components/Employee.vue";
|
import Employee from "../../components/Employee.vue";
|
||||||
|
|
||||||
import { slides } from '../../data';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<big-carousel :images="slides.about"></big-carousel>
|
<MenuVue type="about" :title="$t('about.title')"></MenuVue>
|
||||||
<section class="about-section content">
|
<section class="about-section content">
|
||||||
<h2>{{ $t('about.subtitle1') }}</h2>
|
<h2>{{ $t('about.subtitle1') }}</h2>
|
||||||
<p>{{ $t('about.paragraph1') }}</p>
|
<p>{{ $t('about.paragraph1') }}</p>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<MenuVue type="contact" />
|
||||||
<div class="contact-section">
|
<div class="contact-section">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<h1>Allgemeine Geschäftsbedingungen (AGB)</h1>
|
<h1>Allgemeine Geschäftsbedingungen (AGB)</h1>
|
||||||
@ -56,8 +57,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import MenuVue from "../../components/Menu.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { MenuVue },
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
<MenuVue type="contact" />
|
||||||
<div class="contact-section">
|
<div class="contact-section">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<h1>{{ $t('contact.title') }}</h1>
|
<h1>{{ $t('contact.title') }}</h1>
|
||||||
@ -19,7 +20,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import MenuVue from '../../components/Menu.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { MenuVue }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,42 +1,47 @@
|
|||||||
<script>
|
<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 {
|
import Certifications from '../../components/Certifications.vue';
|
||||||
data() {
|
import CoffeeFarmer from '../../components/CoffeeFarmer.vue';
|
||||||
return {
|
import Different from '../../components/Different.vue';
|
||||||
slides: slides.home,
|
import Menu from '../../components/Menu.vue';
|
||||||
products,
|
import ProductCarousel from '../../components/ProductCarousel.vue';
|
||||||
};
|
import { products } from '../../data.js';
|
||||||
},
|
|
||||||
components: {
|
export default {
|
||||||
Certifications,
|
data() {
|
||||||
Menu,
|
return {
|
||||||
ProductCarousel,
|
products,
|
||||||
CoffeeFarmer,
|
};
|
||||||
Certifications,
|
},
|
||||||
Different,
|
components: {
|
||||||
BigCarousel,
|
Certifications,
|
||||||
},
|
Menu,
|
||||||
};
|
ProductCarousel,
|
||||||
|
CoffeeFarmer,
|
||||||
|
Certifications,
|
||||||
|
Different
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
productsCarousel() {
|
||||||
|
return this.products.map(p => ({
|
||||||
|
image: p.image_product_single,
|
||||||
|
name: p.name,
|
||||||
|
farm: p.farm,
|
||||||
|
strain: p.strain,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<big-carousel :images="slides"></big-carousel>
|
<Menu type="home" />
|
||||||
<section class="home-section content">
|
<section class="home-section content">
|
||||||
<h2>{{ $t("origins.header") }}</h2>
|
<h2>{{ $t('origins.header') }}</h2>
|
||||||
<ProductCarousel :products="products" />
|
<ProductCarousel :products="productsCarousel" />
|
||||||
<Different />
|
<Different />
|
||||||
<CoffeeFarmer class="mt-5" />
|
<CoffeeFarmer class="mt-5" />
|
||||||
<Certifications />
|
<Certifications />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
<MenuVue type="contact" />
|
||||||
<div class="contact-section">
|
<div class="contact-section">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<h1>Impressum</h1>
|
<h1>Impressum</h1>
|
||||||
@ -18,7 +19,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import MenuVue from '../../components/Menu.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { MenuVue }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,22 +1,31 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import MenuVue from "../../components/Menu.vue";
|
||||||
import 'vue3-carousel/dist/carousel.css'
|
import 'vue3-carousel/dist/carousel.css'
|
||||||
import ProductFlipCard from "../../components/ProductFlipCard.vue";
|
import ProductFlipCard from "../../components/ProductFlipCard.vue";
|
||||||
import Certifications from "../../components/Certifications.vue";
|
import Certifications from "../../components/Certifications.vue";
|
||||||
import ProductCarouselVue from "../../components/ProductCarousel.vue";
|
import ProductCarouselVue from "../../components/ProductCarousel.vue";
|
||||||
import BigCarousel from '../../components/BigCarousel.vue';
|
import { products } from '../../data.js';
|
||||||
import { products, slides } from '../../data.js';
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
products,
|
products,
|
||||||
slides: slides.products
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
MenuVue,
|
||||||
ProductFlipCard,
|
ProductFlipCard,
|
||||||
Certifications,
|
Certifications,
|
||||||
ProductCarouselVue,
|
ProductCarouselVue
|
||||||
BigCarousel
|
},
|
||||||
|
computed: {
|
||||||
|
productsCarousel() {
|
||||||
|
return this.products.map(p => ({
|
||||||
|
image: p.image_product_double,
|
||||||
|
name: p.name,
|
||||||
|
farm: p.farm,
|
||||||
|
strain: p.strain,
|
||||||
|
}));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
download() {
|
download() {
|
||||||
@ -28,15 +37,18 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<big-carousel :images="slides"></big-carousel>
|
<MenuVue type="products"></MenuVue>
|
||||||
<section class="product-section content">
|
<section class="product-section content">
|
||||||
<h2>{{ $t('products_page.title') }}</h2>
|
<h2>{{ $t('products_page.title') }}</h2>
|
||||||
<p hidden>{{ $t('products_page.subtitle1') }}</p>
|
<p>{{ $t('products_page.subtitle1') }}</p>
|
||||||
<p hidden class="centered"><img src="@images/v-elemento.png" /></p>
|
<p class="centered"><img src="@images/v-elemento.png" /></p>
|
||||||
<ProductCarouselVue :products="products" />
|
<div class="cards">
|
||||||
|
<ProductFlipCard class="card" v-for="(product, index) in products" :key="index" :product="product"></ProductFlipCard>
|
||||||
|
</div>
|
||||||
|
<ProductCarouselVue :products="productsCarousel" />
|
||||||
<Certifications />
|
<Certifications />
|
||||||
|
|
||||||
<h6 class="text-centered">{{ $t('products_page.download')}}</h6>
|
<h6 class="text-centered">Descarga aquí nuestro porfolio</h6>
|
||||||
<div class="buttons text-centered">
|
<div class="buttons text-centered">
|
||||||
<button class="mt-5" @click.prevent.stop="download">{{ $t('common.download') }}</button>
|
<button class="mt-5" @click.prevent.stop="download">{{ $t('common.download') }}</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<big-carousel :images="slides.social"></big-carousel>
|
<MenuVue type="social" />
|
||||||
<section class="social-section content">
|
<section class="social-section content">
|
||||||
<h2>{{ $t('social.title') }}</h2>
|
<h2>{{ $t('social.title') }}</h2>
|
||||||
<p>{{ $t('social.paragraph1') }}</p>
|
<p>{{ $t('social.paragraph1') }}</p>
|
||||||
@ -11,20 +11,23 @@
|
|||||||
<p>{{ $t('social.paragraph4') }}</p>
|
<p>{{ $t('social.paragraph4') }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<img src="@images/kid-coffee.jpg">
|
<img src="@images/kid-coffee.png">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script>
|
||||||
import BigCarousel from '../../components/BigCarousel.vue';
|
import MenuVue from '../../components/Menu.vue';
|
||||||
import { slides } from '../../data';
|
|
||||||
|
export default {
|
||||||
|
components: { MenuVue }
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.social-bottom {
|
.social-bottom {
|
||||||
padding: 40px 98px;
|
padding: 40px 98px;
|
||||||
background-image: url('@images/bg_1.jpg');
|
background-image: url('@images/bg_1.png');
|
||||||
background-position: top left;
|
background-position: top left;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
|
@ -1,16 +0,0 @@
|
|||||||
<template>
|
|
||||||
<MenuVue type="contact" />
|
|
||||||
<div><iframe src="http://tayronafoods.myshopify.com"></iframe></div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import MenuVue from '../../components/Menu.vue';
|
|
||||||
export default {
|
|
||||||
components: { MenuVue }
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|