arhuako/tayronafoods-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

latest changes

Browse Source
This commit is contained in:
José Conde
2023-08-22 17:03:45 +02:00
parent 7dcaa05fa8
commit d1b38f5052
35 changed files with 549 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/BigCarousel.vue Normal file
View 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>

133
src/components/Menu.vue
View File

@@ -2,66 +2,68 @@
import LocaleSelector from './LocaleSelector.vue';
export default {
props: {
type: String,
title: String,
},
components: { LocaleSelector },
components: { LocaleSelector },
}
</script>
<template>
<section class="menu" :class="type">
<div class="overlay">
<nav>
<img class="logo" src="@images/logo-kreis_34.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="/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 class="menu">
<nav>
<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="/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>
<LocaleSelector class="link"></LocaleSelector>
</div>
</nav>
</section>
</template>
<style lang="scss" scoped>
.menu {
height: 574px;
background-repeat: no-repeat;
background-size: contain;
transition: background-color .3s ease-in-out;
background-color: transparent;
height: 130px;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
width: 100%;
.overlay {
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%);
}
.title {
color: #fff;
font-weight: 500;
font-size: 65px;
line-height: 70px;
text-align: right;
padding: 88px 93px 0;
// background: #000;
}
nav {
padding: 24px 93px 0;
display: grid;
grid-template-columns: auto auto;
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 {
@@ -87,48 +89,7 @@ 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>

42
src/components/ProductBox.vue
View File

@@ -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>

3
src/components/ProductCarousel.vue
View File

@@ -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>

11
src/components/ProductFlipCard.vue
View File

@@ -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
View 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>