latest changes
49
src/App.vue
@ -1,30 +1,42 @@
|
||||
<script>
|
||||
import Footer from './components/Footer.vue';
|
||||
import Menu from './components/Menu.vue';
|
||||
|
||||
const pagesWithCarousel = [
|
||||
'home', 'social', 'about', 'products'
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sticky: false
|
||||
stickyClass: ''
|
||||
}
|
||||
},
|
||||
components: { Footer },
|
||||
components: { Footer, Menu },
|
||||
created() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
computed: {
|
||||
stickyClass() {
|
||||
return `${this.sticky ? 'has-sticky' : ''}`;
|
||||
}
|
||||
beforeRouteEnter() {
|
||||
this.stickyClass = '';
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
if (this.$route.name === 'contact') {
|
||||
return false;
|
||||
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 = '';
|
||||
}
|
||||
this.sticky = window.scrollY > 60;
|
||||
},
|
||||
},
|
||||
}
|
||||
@ -32,27 +44,34 @@
|
||||
|
||||
<template>
|
||||
<div class="main-container" :class="stickyClass">
|
||||
<Menu />
|
||||
<div class="content-wrapper">
|
||||
<RouterView />
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.content-wrapper {
|
||||
padding-top: 130px;
|
||||
background-color: #000;
|
||||
}
|
||||
.content {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 0 72px 72px;
|
||||
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
line-height: 70px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
padding: 72px 0;
|
||||
padding: 52px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
@ -69,9 +88,5 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.has-sticky & {
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
BIN
src/assets/images/bg_1.jpg
Normal file
After Width: | Height: | Size: 255 KiB |
Before Width: | Height: | Size: 1.1 MiB |
Before Width: | Height: | Size: 918 KiB After Width: | Height: | Size: 243 KiB |
Before Width: | Height: | Size: 887 KiB After Width: | Height: | Size: 860 KiB |
Before Width: | Height: | Size: 754 KiB |
BIN
src/assets/images/kid-coffee.jpg
Normal file
After Width: | Height: | Size: 182 KiB |
Before Width: | Height: | Size: 705 KiB |
BIN
src/assets/images/kids.jpg
Normal file
After Width: | Height: | Size: 162 KiB |
Before Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/images/mountains.jpg
Normal file
After Width: | Height: | Size: 233 KiB |
Before Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/images/products.jpg
Normal file
After Width: | Height: | Size: 123 KiB |
Before Width: | Height: | Size: 530 KiB |
BIN
src/assets/images/proysoc.01.jpg
Normal file
After Width: | Height: | Size: 810 KiB |
Before Width: | Height: | Size: 3.1 MiB |
BIN
src/assets/images/tayrona-foods-01.png
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/images/tayrona-foods-white-bg.png
Normal file
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/images/tayrona-foods-yellow.png
Normal file
After Width: | Height: | Size: 36 KiB |
40
src/components/BigCarousel.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<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,66 +2,68 @@
|
||||
import LocaleSelector from './LocaleSelector.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
title: String,
|
||||
},
|
||||
components: { LocaleSelector },
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="menu" :class="type">
|
||||
<div class="overlay">
|
||||
<section class="menu">
|
||||
<nav>
|
||||
<img class="logo" src="@images/logo-kreis_34.png" />
|
||||
<img class="logo" src="@images/tayrona-foods-yellow.png" />
|
||||
<div class="links">
|
||||
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
||||
<router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
|
||||
<router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
|
||||
<router-link class="link" to="/shopping">{{ $t('menu.shopping') }}</router-link>
|
||||
<!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
|
||||
<a href="https://tayronafoods.myshopify.com" target="_blank" class="link">{{ $t('Tienda') }}</a>
|
||||
<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="/social">{{ $t('menu.social') }}</router-link>
|
||||
<router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link> -->
|
||||
<LocaleSelector class="link"></LocaleSelector>
|
||||
</div>
|
||||
</nav>
|
||||
<h1 class="title" v-if="title">{{ title }}</h1>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
height: 574px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: background-color .3s ease-in-out;
|
||||
|
||||
.overlay {
|
||||
background-color: transparent;
|
||||
height: 130px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.nav-wrapper {
|
||||
position: relative;
|
||||
width: 1366px;
|
||||
height: 100%;
|
||||
background: linear-gradient(89.82deg, rgba(30, 30, 30, 0.72) -6.88%, rgba(0, 0, 0, 0.18) 87.45%);
|
||||
// background: #000;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 65px;
|
||||
line-height: 70px;
|
||||
text-align: right;
|
||||
padding: 88px 93px 0;
|
||||
}
|
||||
nav {
|
||||
padding: 24px 93px 0;
|
||||
margin: 0 auto;
|
||||
padding: 16px 50px;
|
||||
display: grid;
|
||||
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 {
|
||||
height: 90px;
|
||||
width: 90px;;
|
||||
height: 100px;
|
||||
width: 100px;;
|
||||
}
|
||||
|
||||
.links {
|
||||
@ -88,47 +90,6 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
.has-sticky & {
|
||||
background-color: #121212;
|
||||
background-image: none;
|
||||
height: 120px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
.overlay {
|
||||
background: #000;
|
||||
width: 1366px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="product-box">
|
||||
<div class="header">
|
||||
<div>
|
||||
|
||||
<div class="kind-image">
|
||||
<img :src="$helper.getImage(product.kind.image)" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>{{ $t(product.name) }}</h2>
|
||||
@ -10,28 +10,30 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-box-image">
|
||||
<img :src="$helper.getImage(product.image)" alt="">
|
||||
<img :src="$helper.getImage(product.images[0])" alt="" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<!-- <h2>{{ $t(product.footer) }}</h2>
|
||||
<h3>{{ $t(product.footer) }}</h3> -->
|
||||
<product-table :product="product"></product-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductTable from "./ProductTable.vue";
|
||||
export default {
|
||||
props: {
|
||||
product: Object,
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ProductTable,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-box {
|
||||
width: 360px;
|
||||
height: 480px;
|
||||
background: #DAD7DA;
|
||||
border-radius: 12px;
|
||||
background-position: top left;
|
||||
box-sizing: border-box;
|
||||
@ -39,6 +41,10 @@ export default {
|
||||
padding: 0 px 0;
|
||||
|
||||
.header {
|
||||
background-color: #1f1f1f;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
color: #c1c1a1;
|
||||
padding: 12px 16px;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
@ -46,6 +52,13 @@ export default {
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto;
|
||||
|
||||
.kind-image {
|
||||
align-self: start;
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0px;
|
||||
font-weight: 500;
|
||||
@ -58,16 +71,17 @@ export default {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: fixed;
|
||||
height: fixed;
|
||||
width: 360px;
|
||||
height: 285px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Carousel class="carousel" :items-to-show="3" :wrap-around="false">
|
||||
<Slide v-for="product in products" :key="product.kind">
|
||||
<Slide v-for="product in products" :key="product.name">
|
||||
<div class="carousel-item">
|
||||
<ProductBox :product="product"></ProductBox>
|
||||
</div>
|
||||
@ -8,7 +8,6 @@
|
||||
|
||||
<template #addons>
|
||||
<Navigation />
|
||||
<Pagination />
|
||||
</template>
|
||||
</Carousel>
|
||||
</template>
|
||||
|
@ -12,9 +12,6 @@ export default {
|
||||
toggle() {
|
||||
this.flipped = !this.flipped;
|
||||
},
|
||||
translate(val) {
|
||||
console.log('Vue.$t :>> ', Vue.$t);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -23,9 +20,9 @@ export default {
|
||||
<div class="flip-card" :class="{flipped}" @click="toggle">
|
||||
<div v-if="product" class="flip-card-inner" :class="(product && product.kind) || 'no-product'">
|
||||
<div class="flip-card-front">
|
||||
<img class="logo" :src="$helper.getImage(product.image)" />
|
||||
<img class="logo" :src="$helper.getImage(product.kind.getImageimage)" />
|
||||
<div>
|
||||
<h3 class="title">{{ $t(product.kind_localized)}}</h3>
|
||||
<h3 class="title">{{ $t(product.kind.localized)}}</h3>
|
||||
<h3 class="slogan">{{ $t(product.slogan) }}</h3>
|
||||
</div>
|
||||
<div class="description">{{ $t(product.description) }}</div>
|
||||
@ -39,8 +36,8 @@ export default {
|
||||
</div>
|
||||
<div class="info-data">
|
||||
<div class="info-data-left">
|
||||
<img class="logo" :src="$helper.getImage(product.image)" />
|
||||
<p class="kind">{{ $t(product.kind_localized) }}</p>
|
||||
<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">
|
||||
|
256
src/components/ProductTable.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<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,11 +1,31 @@
|
||||
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 = [
|
||||
{
|
||||
kind: 'earth',
|
||||
kind_localized: 'common.earth',
|
||||
kind: kinds.earth,
|
||||
name: 'products.brasil_de_andrade.name',
|
||||
image: 'logo_tierra.svg',
|
||||
image_product_single: 'product-brasil-single11.png',
|
||||
image_product_double: 'product-brasil-double1.png',
|
||||
images: ['product-brasil-single11.png', 'product-brasil-double1.png',],
|
||||
slogan: 'products.brasil_de_andrade.slogan',
|
||||
description: 'products.brasil_de_andrade.description',
|
||||
farm: 'products.brasil_de_andrade.farm',
|
||||
@ -19,12 +39,9 @@ export const products = [
|
||||
texture: 'products.brasil_de_andrade.texture'
|
||||
},
|
||||
{
|
||||
kind: 'water',
|
||||
kind_localized: 'common.water',
|
||||
kind: kinds.water,
|
||||
name: 'products.colombia_el_paseito.name',
|
||||
image: 'logo_agua.svg',
|
||||
image_product_single: 'product-colombia-single11.png',
|
||||
image_product_double: 'product-colombia-double1.png',
|
||||
images: ['product-colombia-single11.png', 'product-colombia-double1.png',],
|
||||
slogan: 'products.colombia_el_paseito.slogan',
|
||||
description: 'products.colombia_el_paseito.description',
|
||||
farm: 'products.colombia_el_paseito.farm',
|
||||
@ -38,12 +55,9 @@ export const products = [
|
||||
texture: 'products.colombia_el_paseito.texture'
|
||||
},
|
||||
{
|
||||
kind: 'air',
|
||||
kind_localized: 'common.air',
|
||||
kind: kinds.air,
|
||||
name: 'products.peru_grad_1.name',
|
||||
image: 'logo_aire2.svg',
|
||||
image_product_single: 'product-peru-single11.png',
|
||||
image_product_double: 'product-peru-double1.png',
|
||||
images: ['product-peru-single11.png', 'product-peru-double1.png',],
|
||||
slogan: 'products.peru_grad_1.slogan',
|
||||
description: 'products.peru_grad_1.description',
|
||||
farm: 'products.peru_grad_1.farm',
|
||||
@ -57,12 +71,9 @@ export const products = [
|
||||
texture: 'products.peru_grad_1.texture'
|
||||
},
|
||||
{
|
||||
kind: 'fire',
|
||||
kind_localized: 'common.fire',
|
||||
kind: kinds.fire,
|
||||
name: 'products.uganda_gnoma.name',
|
||||
image: 'logo_fuego.svg',
|
||||
image_product_single: 'product-uganda-single11.png',
|
||||
image_product_double: 'product-uganda-double1.png',
|
||||
images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
|
||||
slogan: 'products.uganda_gnoma.slogan',
|
||||
description: 'products.uganda_gnoma.description',
|
||||
farm: 'products.uganda_gnoma.farm',
|
||||
@ -76,3 +87,34 @@ export const products = [
|
||||
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',
|
||||
],
|
||||
};
|
@ -8,6 +8,7 @@ import ContactView from '../views/contact/Contact.vue';
|
||||
import ImpressumView from '../views/impressum/Impressum.vue';
|
||||
import DataProtectionView from '../views/dataprotection/DataProtection.vue';
|
||||
import AgbView from '../views/agb/Agb.vue';
|
||||
import StoreView from '../views/store/StoreView.vue';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
@ -52,6 +53,11 @@ const router = createRouter({
|
||||
name: 'agb',
|
||||
component: AgbView,
|
||||
},
|
||||
{
|
||||
path: '/store',
|
||||
name: 'store',
|
||||
component: StoreView,
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
|
@ -1,10 +1,12 @@
|
||||
<script setup>
|
||||
import MenuVue from "../../components/Menu.vue";
|
||||
import BigCarousel from '../../components/BigCarousel.vue';
|
||||
import Employee from "../../components/Employee.vue";
|
||||
|
||||
import { slides } from '../../data';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenuVue type="about" :title="$t('about.title')"></MenuVue>
|
||||
<big-carousel :images="slides.about"></big-carousel>
|
||||
<section class="about-section content">
|
||||
<h2>{{ $t('about.subtitle1') }}</h2>
|
||||
<p>{{ $t('about.paragraph1') }}</p>
|
||||
|
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<MenuVue type="contact" />
|
||||
<div class="contact-section">
|
||||
<div class="left">
|
||||
<h1>Allgemeine Geschäftsbedingungen (AGB)</h1>
|
||||
@ -57,10 +56,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuVue from "../../components/Menu.vue";
|
||||
|
||||
export default {
|
||||
components: { MenuVue },
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
|
||||
<MenuVue type="contact" />
|
||||
<div class="contact-section">
|
||||
<div class="left">
|
||||
<h1>{{ $t('contact.title') }}</h1>
|
||||
@ -20,10 +19,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuVue from '../../components/Menu.vue';
|
||||
|
||||
export default {
|
||||
components: { MenuVue }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -1,15 +1,16 @@
|
||||
<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';
|
||||
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,
|
||||
};
|
||||
},
|
||||
@ -19,29 +20,23 @@ import { products } from '../../data.js';
|
||||
ProductCarousel,
|
||||
CoffeeFarmer,
|
||||
Certifications,
|
||||
Different
|
||||
Different,
|
||||
BigCarousel,
|
||||
},
|
||||
computed: {
|
||||
productsCarousel() {
|
||||
return this.products.map(p => ({
|
||||
image: p.image_product_single,
|
||||
name: p.name,
|
||||
farm: p.farm,
|
||||
strain: p.strain,
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Menu type="home" />
|
||||
<big-carousel :images="slides"></big-carousel>
|
||||
<section class="home-section content">
|
||||
<h2>{{ $t('origins.header') }}</h2>
|
||||
<ProductCarousel :products="productsCarousel" />
|
||||
<h2>{{ $t("origins.header") }}</h2>
|
||||
<ProductCarousel :products="products" />
|
||||
<Different />
|
||||
<CoffeeFarmer class="mt-5" />
|
||||
<Certifications />
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
|
||||
<MenuVue type="contact" />
|
||||
<div class="contact-section">
|
||||
<div class="left">
|
||||
<h1>Impressum</h1>
|
||||
@ -19,10 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuVue from '../../components/Menu.vue';
|
||||
|
||||
export default {
|
||||
components: { MenuVue }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -1,31 +1,22 @@
|
||||
<script>
|
||||
import MenuVue from "../../components/Menu.vue";
|
||||
import 'vue3-carousel/dist/carousel.css'
|
||||
import ProductFlipCard from "../../components/ProductFlipCard.vue";
|
||||
import Certifications from "../../components/Certifications.vue";
|
||||
import ProductCarouselVue from "../../components/ProductCarousel.vue";
|
||||
import { products } from '../../data.js';
|
||||
import BigCarousel from '../../components/BigCarousel.vue';
|
||||
import { products, slides } from '../../data.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
products,
|
||||
slides: slides.products
|
||||
};
|
||||
},
|
||||
components: {
|
||||
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,
|
||||
}));
|
||||
}
|
||||
ProductCarouselVue,
|
||||
BigCarousel
|
||||
},
|
||||
methods: {
|
||||
download() {
|
||||
@ -37,15 +28,12 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenuVue type="products"></MenuVue>
|
||||
<big-carousel :images="slides"></big-carousel>
|
||||
<section class="product-section content">
|
||||
<h2>{{ $t('products_page.title') }}</h2>
|
||||
<p>{{ $t('products_page.subtitle1') }}</p>
|
||||
<p class="centered"><img src="@images/v-elemento.png" /></p>
|
||||
<div class="cards">
|
||||
<ProductFlipCard class="card" v-for="(product, index) in products" :key="index" :product="product"></ProductFlipCard>
|
||||
</div>
|
||||
<ProductCarouselVue :products="productsCarousel" />
|
||||
<ProductCarouselVue :products="products" />
|
||||
<Certifications />
|
||||
|
||||
<h6 class="text-centered">{{ $t('products_page.download')}}</h6>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<MenuVue type="social" />
|
||||
<big-carousel :images="slides.social"></big-carousel>
|
||||
<section class="social-section content">
|
||||
<h2>{{ $t('social.title') }}</h2>
|
||||
<p>{{ $t('social.paragraph1') }}</p>
|
||||
@ -11,23 +11,20 @@
|
||||
<p>{{ $t('social.paragraph4') }}</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="@images/kid-coffee.png">
|
||||
<img src="@images/kid-coffee.jpg">
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuVue from '../../components/Menu.vue';
|
||||
|
||||
export default {
|
||||
components: { MenuVue }
|
||||
}
|
||||
<script setup>
|
||||
import BigCarousel from '../../components/BigCarousel.vue';
|
||||
import { slides } from '../../data';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.social-bottom {
|
||||
padding: 40px 98px;
|
||||
background-image: url('@images/bg_1.png');
|
||||
background-image: url('@images/bg_1.jpg');
|
||||
background-position: top left;
|
||||
background-size: contain;
|
||||
height: 600px;
|
||||
|
16
src/views/store/StoreView.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<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>
|