latest changes
49
src/App.vue
@ -1,30 +1,42 @@
|
|||||||
<script>
|
<script>
|
||||||
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 {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
sticky: false
|
stickyClass: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: { Footer },
|
components: { Footer, Menu },
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
window.addEventListener('scroll', this.handleScroll);
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
window.removeEventListener('scroll', this.handleScroll);
|
window.removeEventListener('scroll', this.handleScroll);
|
||||||
},
|
},
|
||||||
computed: {
|
beforeRouteEnter() {
|
||||||
stickyClass() {
|
this.stickyClass = '';
|
||||||
return `${this.sticky ? 'has-sticky' : ''}`;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleScroll() {
|
handleScroll() {
|
||||||
if (this.$route.name === 'contact') {
|
console.log('this.$route.name :>> ', this.$route.name);
|
||||||
return false;
|
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>
|
<template>
|
||||||
<div class="main-container" :class="stickyClass">
|
<div class="main-container" :class="stickyClass">
|
||||||
|
<Menu />
|
||||||
|
<div class="content-wrapper">
|
||||||
<RouterView />
|
<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: 52px;
|
font-size: 36px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 70px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 72px 0;
|
padding: 52px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 32px;
|
font-size: 24px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 70px;
|
line-height: 70px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -69,9 +88,5 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-sticky & {
|
|
||||||
margin-top: 120px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</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';
|
import LocaleSelector from './LocaleSelector.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
|
||||||
type: String,
|
|
||||||
title: String,
|
|
||||||
},
|
|
||||||
components: { LocaleSelector },
|
components: { LocaleSelector },
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="menu" :class="type">
|
<section class="menu">
|
||||||
<div class="overlay">
|
|
||||||
<nav>
|
<nav>
|
||||||
<img class="logo" src="@images/logo-kreis_34.png" />
|
<img class="logo" src="@images/tayrona-foods-yellow.png" />
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
<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="/about">{{ $t('menu.about') }}</router-link>
|
||||||
<router-link class="link" to="/products">{{ $t('menu.products') }}</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="/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>
|
||||||
<!-- <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>
|
<LocaleSelector class="link"></LocaleSelector>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<h1 class="title" v-if="title">{{ title }}</h1>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.menu {
|
.menu {
|
||||||
height: 574px;
|
background-color: transparent;
|
||||||
background-repeat: no-repeat;
|
height: 130px;
|
||||||
background-size: contain;
|
position: fixed;
|
||||||
transition: background-color .3s ease-in-out;
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
.overlay {
|
z-index: 1000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 1366px;
|
||||||
height: 100%;
|
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 {
|
nav {
|
||||||
padding: 24px 93px 0;
|
margin: 0 auto;
|
||||||
|
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: 90px;
|
height: 100px;
|
||||||
width: 90px;;
|
width: 100px;;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.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>
|
</style>
|
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="product-box">
|
<div class="product-box">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div>
|
<div class="kind-image">
|
||||||
|
<img :src="$helper.getImage(product.kind.image)" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2>{{ $t(product.name) }}</h2>
|
<h2>{{ $t(product.name) }}</h2>
|
||||||
@ -10,28 +10,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-box-image">
|
<div class="product-box-image">
|
||||||
<img :src="$helper.getImage(product.image)" alt="">
|
<img :src="$helper.getImage(product.images[0])" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<!-- <h2>{{ $t(product.footer) }}</h2>
|
<product-table :product="product"></product-table>
|
||||||
<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;
|
||||||
@ -39,6 +41,10 @@ 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;
|
||||||
@ -46,6 +52,13 @@ 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;
|
||||||
@ -58,16 +71,17 @@ export default {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-image {
|
&-image {
|
||||||
width: fixed;
|
width: 360px;
|
||||||
height: fixed;
|
height: 285px;
|
||||||
|
|
||||||
|
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.kind">
|
<Slide v-for="product in products" :key="product.name">
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
<ProductBox :product="product"></ProductBox>
|
<ProductBox :product="product"></ProductBox>
|
||||||
</div>
|
</div>
|
||||||
@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
<template #addons>
|
<template #addons>
|
||||||
<Navigation />
|
<Navigation />
|
||||||
<Pagination />
|
|
||||||
</template>
|
</template>
|
||||||
</Carousel>
|
</Carousel>
|
||||||
</template>
|
</template>
|
||||||
|
@ -12,9 +12,6 @@ export default {
|
|||||||
toggle() {
|
toggle() {
|
||||||
this.flipped = !this.flipped;
|
this.flipped = !this.flipped;
|
||||||
},
|
},
|
||||||
translate(val) {
|
|
||||||
console.log('Vue.$t :>> ', Vue.$t);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -23,9 +20,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.image)" />
|
<img class="logo" :src="$helper.getImage(product.kind.getImageimage)" />
|
||||||
<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>
|
||||||
@ -39,8 +36,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.image)" />
|
<img class="logo" :src="$helper.getImage(product.kind.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">
|
||||||
|
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 = [
|
export const products = [
|
||||||
{
|
{
|
||||||
kind: 'earth',
|
kind: kinds.earth,
|
||||||
kind_localized: 'common.earth',
|
|
||||||
name: 'products.brasil_de_andrade.name',
|
name: 'products.brasil_de_andrade.name',
|
||||||
image: 'logo_tierra.svg',
|
images: ['product-brasil-single11.png', 'product-brasil-double1.png',],
|
||||||
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',
|
||||||
@ -19,12 +39,9 @@ export const products = [
|
|||||||
texture: 'products.brasil_de_andrade.texture'
|
texture: 'products.brasil_de_andrade.texture'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: 'water',
|
kind: kinds.water,
|
||||||
kind_localized: 'common.water',
|
|
||||||
name: 'products.colombia_el_paseito.name',
|
name: 'products.colombia_el_paseito.name',
|
||||||
image: 'logo_agua.svg',
|
images: ['product-colombia-single11.png', 'product-colombia-double1.png',],
|
||||||
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',
|
||||||
@ -38,12 +55,9 @@ export const products = [
|
|||||||
texture: 'products.colombia_el_paseito.texture'
|
texture: 'products.colombia_el_paseito.texture'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: 'air',
|
kind: kinds.air,
|
||||||
kind_localized: 'common.air',
|
|
||||||
name: 'products.peru_grad_1.name',
|
name: 'products.peru_grad_1.name',
|
||||||
image: 'logo_aire2.svg',
|
images: ['product-peru-single11.png', 'product-peru-double1.png',],
|
||||||
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',
|
||||||
@ -57,12 +71,9 @@ export const products = [
|
|||||||
texture: 'products.peru_grad_1.texture'
|
texture: 'products.peru_grad_1.texture'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: 'fire',
|
kind: kinds.fire,
|
||||||
kind_localized: 'common.fire',
|
|
||||||
name: 'products.uganda_gnoma.name',
|
name: 'products.uganda_gnoma.name',
|
||||||
image: 'logo_fuego.svg',
|
images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
|
||||||
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',
|
||||||
@ -76,3 +87,34 @@ 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',
|
||||||
|
],
|
||||||
|
};
|
@ -8,6 +8,7 @@ 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(),
|
||||||
@ -52,6 +53,11 @@ const router = createRouter({
|
|||||||
name: 'agb',
|
name: 'agb',
|
||||||
component: AgbView,
|
component: AgbView,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/store',
|
||||||
|
name: 'store',
|
||||||
|
component: StoreView,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import MenuVue from "../../components/Menu.vue";
|
import BigCarousel from '../../components/BigCarousel.vue';
|
||||||
import Employee from "../../components/Employee.vue";
|
import Employee from "../../components/Employee.vue";
|
||||||
|
|
||||||
|
import { slides } from '../../data';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MenuVue type="about" :title="$t('about.title')"></MenuVue>
|
<big-carousel :images="slides.about"></big-carousel>
|
||||||
<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,5 +1,4 @@
|
|||||||
<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>
|
||||||
@ -57,10 +56,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MenuVue from "../../components/Menu.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { MenuVue },
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
<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>
|
||||||
@ -20,10 +19,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MenuVue from '../../components/Menu.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { MenuVue }
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,15 +1,16 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import BigCarousel from '../../components/BigCarousel.vue';
|
||||||
import Certifications from '../../components/Certifications.vue';
|
import Certifications from "../../components/Certifications.vue";
|
||||||
import CoffeeFarmer from '../../components/CoffeeFarmer.vue';
|
import CoffeeFarmer from "../../components/CoffeeFarmer.vue";
|
||||||
import Different from '../../components/Different.vue';
|
import Different from "../../components/Different.vue";
|
||||||
import Menu from '../../components/Menu.vue';
|
import Menu from "../../components/Menu.vue";
|
||||||
import ProductCarousel from '../../components/ProductCarousel.vue';
|
import ProductCarousel from "../../components/ProductCarousel.vue";
|
||||||
import { products } from '../../data.js';
|
import { products, slides } from "../../data.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
slides: slides.home,
|
||||||
products,
|
products,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -19,29 +20,23 @@ import { products } from '../../data.js';
|
|||||||
ProductCarousel,
|
ProductCarousel,
|
||||||
CoffeeFarmer,
|
CoffeeFarmer,
|
||||||
Certifications,
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Menu type="home" />
|
<big-carousel :images="slides"></big-carousel>
|
||||||
<section class="home-section content">
|
<section class="home-section content">
|
||||||
<h2>{{ $t('origins.header') }}</h2>
|
<h2>{{ $t("origins.header") }}</h2>
|
||||||
<ProductCarousel :products="productsCarousel" />
|
<ProductCarousel :products="products" />
|
||||||
<Different />
|
<Different />
|
||||||
<CoffeeFarmer class="mt-5" />
|
<CoffeeFarmer class="mt-5" />
|
||||||
<Certifications />
|
<Certifications />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
@ -1,6 +1,5 @@
|
|||||||
<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>
|
||||||
@ -19,10 +18,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MenuVue from '../../components/Menu.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { MenuVue }
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -1,31 +1,22 @@
|
|||||||
<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 { products } from '../../data.js';
|
import BigCarousel from '../../components/BigCarousel.vue';
|
||||||
|
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() {
|
||||||
@ -37,15 +28,12 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MenuVue type="products"></MenuVue>
|
<big-carousel :images="slides"></big-carousel>
|
||||||
<section class="product-section content">
|
<section class="product-section content">
|
||||||
<h2>{{ $t('products_page.title') }}</h2>
|
<h2>{{ $t('products_page.title') }}</h2>
|
||||||
<p>{{ $t('products_page.subtitle1') }}</p>
|
<p>{{ $t('products_page.subtitle1') }}</p>
|
||||||
<p class="centered"><img src="@images/v-elemento.png" /></p>
|
<p class="centered"><img src="@images/v-elemento.png" /></p>
|
||||||
<div class="cards">
|
<ProductCarouselVue :products="products" />
|
||||||
<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">{{ $t('products_page.download')}}</h6>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<MenuVue type="social" />
|
<big-carousel :images="slides.social"></big-carousel>
|
||||||
<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,23 +11,20 @@
|
|||||||
<p>{{ $t('social.paragraph4') }}</p>
|
<p>{{ $t('social.paragraph4') }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<img src="@images/kid-coffee.png">
|
<img src="@images/kid-coffee.jpg">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import MenuVue from '../../components/Menu.vue';
|
import BigCarousel from '../../components/BigCarousel.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.png');
|
background-image: url('@images/bg_1.jpg');
|
||||||
background-position: top left;
|
background-position: top left;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
height: 600px;
|
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>
|