Compare commits

...

3 Commits

Author SHA1 Message Date
José Conde
adfcc9a0be Merge branch 'rama_carmen' 2023-09-03 20:25:17 +02:00
José Conde
6a3f34f32b adding beta script 2023-09-03 14:53:17 +02:00
José Conde
5cb1042668 adding responsive 1 2023-09-03 14:40:49 +02:00
16 changed files with 332 additions and 91 deletions

View File

@ -4,8 +4,9 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "vite build",
"build:beta": "vite build -- -beta",
"preview": "vite preview"
},
"dependencies": {

View File

@ -9,7 +9,9 @@
export default {
data() {
return {
stickyClass: ''
stickyClass: '',
deviceClass: this.$isMobile() ? 'mobile' : 'desktop',
width: window.innerWidth
}
},
components: { Footer, Menu },
@ -24,15 +26,15 @@
},
methods: {
handleScroll() {
console.log('this.$route.name :>> ', this.$route.name);
const limit = 430;
if (!pagesWithCarousel.includes(this.$route.name)) {
this.stickyClass = 'has-sticky has-sticky-1'
return;
}
if (window.scrollY > 0 && window.scrollY <= 574) {
if (window.scrollY > 0 && window.scrollY <= limit) {
this.stickyClass = 'has-sticky has-sticky-0';
} else if(window.scrollY > 574) {
} else if(window.scrollY > limit) {
this.stickyClass = 'has-sticky has-sticky-1';
} else {
this.stickyClass = '';
@ -43,8 +45,9 @@
</script>
<template>
<div class="main-container" :class="stickyClass">
<Menu />
<div class="width">{{ width }}px {{ deviceClass }}</div>
<Menu :class="`${stickyClass}`" />
<div class="main-container" :class="`${stickyClass} ${deviceClass}`">
<div class="content-wrapper">
<RouterView />
</div>
@ -53,8 +56,21 @@
</template>
<style lang="scss">
.width {
position: fixed;
top: 0;
right: 0;
background-color: white;
color: #121212;
width: 150px;
height: 30px;
z-index: 200550;
border-bottom-right-radius: 10px;
padding: 4px;
opacity: 0.5;
}
.content-wrapper {
padding-top: 130px;
padding-top: 91px;
background-color: #000;
}
.content {
@ -71,17 +87,18 @@
}
h4 {
font-size: 24px;
font-weight: 200;
line-height: 70px;
font-size: 20px;
font-weight: 500;
font-style: italic;
line-height: 42px;
text-align: center;
padding: 72px 264px;
}
p {
font-weight: 200;
font-size: 20px;
line-height: 40px;
font-weight: 300;
font-size: 16px;
line-height: 24px;
text-align: justify;
&.centered {
@ -89,4 +106,17 @@
}
}
}
@media only screen and (max-width: 767px) {
.content-wrapper {
padding-top: 50px;
}
.content {
padding: 0 16px 72px;
h4 {
padding: 72px 0;
}
}
}
</style>

View File

@ -2,11 +2,11 @@
<section class="certifications">
<div class="right">
<h2>{{ $t('certifications.title1') }}</h2>
<p class="centered"><img src="@images/image_membresias.png" /></p>
<p class="centered"><img class="image" src="@images/image_membresias.png" /></p>
</div>
<div class="left">
<h2>{{ $t('certifications.title2') }}</h2>
<p class="centered"><img src="@images/Nuestros_aliados.png" /></p>
<p class="centered"><img class="image" src="@images/Nuestros_aliados.png" /></p>
</div>
</section>
</template>
@ -19,22 +19,40 @@ export default {
</script>
<style lang="scss" scoped>
.header {
h2 {
background-color: #000;
color: #fff;
text-align: center;
padding-bottom: 26px !important;
}
.image {
height: 270px;
widows: 270px;;
}
.certifications {
height: 600px;
background-color: #000;
background-position: top left;
background-size: contain;
height: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items:center;
}
@media only screen and (max-width: 767px) {
h2 {
font-size: 24px !important;
}
.image {
height: 170px;
widows: 170px;;
}
.certifications {
display: flex;
flex-direction: column;
}
}
</style>

View File

@ -13,7 +13,7 @@ export default {
<style lang="scss" scoped>
.coffeefarmers {
height: 480px;
height: 400px;
background: white;
background-image: url('@images/grains.jpg');
background-repeat: no-repeat;
@ -22,10 +22,10 @@ export default {
}
h3.header {
font-weight: 300;
font-size: 36px;
font-weight: 600;
font-size: 26px;
line-height: 58px;
padding: 175px 230px 0;
padding: 120px 230px 0;
text-align: center;
text-shadow: 1px 1px 10px #000;
}
@ -35,4 +35,12 @@ export default {
width: 700px;
margin: 50px auto 0;
}
@media only screen and (max-width: 767px) {
h3.header {
font-size: 26px;
line-height: 36px;
padding: 120px 16px 0;
}
}
</style>

View File

@ -19,11 +19,11 @@ import DifferentBox from './DifferentBox.vue';
.different {
color: #fff;
background-color: #000;
padding: 72px 0;
padding: 0 0 72px;
}
h2 {
padding: 0 150px;
padding-bottom: 26px !important;
font-size: 52px;
text-align: center;
}
@ -41,4 +41,14 @@ import DifferentBox from './DifferentBox.vue';
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 767px) {
h3 {
padding: 0;
}
.boxes {
flex-direction: column;
}
}
</style>

View File

@ -18,29 +18,36 @@ export default {
<style lang="scss" scoped>
.different-box {
width: 280px;
height: 284px;
height: 276px;
background: #E2CAAA;
text-align: center;
padding: 36px 24px 0;
}
.image {
width: 88px;
height: 88px;
width: 70px;
height: 70px;
}
.title {
margin-top: 24px;
margin-top: 16px;
color: #603809;
font-weight: 700;
font-size: 28px;
font-size: 20px;
height: 48px;
}
.description {
margin-top: 12px;
font-style: 300;
font-weight: 200;
font-size: 20px;
font-style: 400;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #1E1E1E;
text-align: center;
}
@media only screen and (max-width: 767px) {
.different-box {
margin: 0 auto 8px;
}
}
</style>

View File

@ -36,4 +36,10 @@ export default {
line-height: 23.44px;
padding: 0;
}
@media only screen and (max-width: 767px) {
.role {
margin-top: 8px;
}
}
</style>

View File

@ -11,14 +11,16 @@
<a href="mailto:alejandro@tayronafoods.com" class="email"><i class="email-icon"></i>alejandro@tayronafoods.com</a>
<a href="mailto:jose@tayronafoods.com" class="email"><i class="email-icon"></i>jose@tayronafoods.com</a>
</p>
<p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
<p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
<p class="rss">
<div class="phones">
<p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
<p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
</div>
<!-- <p class="rss">
<a href="#"><i class="facebook-icon"></i></a>
<a href="#"><i class="instagram-icon"></i></a>
<a href="#"><i class="youtube-icon"></i></a>
<a href="#"><i class="twitter-icon"></i></a>
</p>
</p> -->
<p class="links">
<router-link class="link" to="/impressum">{{ $t('footer.impressum')}}</router-link>
<router-link class="link" to="/dataprotection">{{ $t('footer.dataprotection') }}</router-link>
@ -35,10 +37,11 @@
footer {
position: relative;
color: #fff;
height: 492px;
background-color: #442808;
background-image: url('@images/footer_coffee.png');
background-blend-mode: overlay;
background-position: bottom;
padding-bottom: 36px;
}
h5 {
@ -93,6 +96,10 @@
font-size: 20px;
font-weight: 500;
.phones {
margin-top: 24px;
}
.emails {
padding: 0;
.email {
@ -136,4 +143,30 @@
@include icon('@images/twitter.svg');
}
}
@media only screen and (max-width: 767px) {
h5 {
padding-top: 16px;
}
.contact-info {
.emails {
display: grid;
gap: 8px;
flex-direction: column;
}
p.links {
margin-top: 58px;
a {
margin-right: 20px;
font-size: 80%;
&:last-child {
margin-right: 0;
}
}
}
}
}
</style>

View File

@ -3,13 +3,47 @@ import LocaleSelector from './LocaleSelector.vue';
export default {
components: { LocaleSelector },
data() {
return {
mobileMenuOpened: false
}
},
methods: {
openMobileClick() {
this.mobileMenuOpened = !this.mobileMenuOpened;
},
closeMenu() {
this.mobileMenuOpened = false;
}
},
}
</script>
<template>
<section class="menu">
<nav>
<nav v-if="$isMobile()">
<div class="menu-bar">
<div class="hamburger" @click="openMobileClick">
<div class="hamburger-line"></div>
<div class="hamburger-line"></div>
<div class="hamburger-line"></div>
</div>
</div>
<div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
<div class="links">
<router-link class="link" @click.native="closeMenu" to="/">{{ $t('menu.home')}}</router-link>
<router-link class="link" @click.native="closeMenu" to="/about">{{ $t('menu.about') }}</router-link>
<router-link class="link" @click.native="closeMenu" to="/products">{{ $t('menu.products') }}</router-link>
<!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
<a href="https://tayronafoods.myshopify.com" @click.native="closeMenu" target="_blank" class="link">{{ $t('Tienda') }}</a>
<router-link class="link" @click.native="closeMenu" to="/social">{{ $t('menu.social') }}</router-link>
<router-link class="link" @click.native="closeMenu" to="/contact">{{ $t('menu.contact') }}</router-link>
<LocaleSelector class="link"></LocaleSelector>
</div>
</div>
</nav>
<nav v-else>
<img class="logo" src="@images/tayrona-foods-yellow.png" />
<div class="links">
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
@ -26,44 +60,29 @@ export default {
</template>
<style lang="scss" scoped>
// @media only screen and (min-width: 768px) {
/* tablets and desktop */
.menu {
background-color: transparent;
height: 130px;
position: fixed;
top: 0px;
left: 0px;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
.nav-wrapper {
position: relative;
width: 1366px;
height: 100%;
// background: #000;
}
nav {
margin: 0 auto;
padding: 16px 50px;
padding: 8px 50px;
display: grid;
grid-template-columns: auto auto;
background: transparent;
width: 1366px;
width: 960px;
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: 100px;
width: 100px;;
height: 75px;
width: 75px;;
}
.links {
@ -71,7 +90,7 @@ export default {
align-self: center;
.link {
margin-right: 54px;
margin-right: 20px;
color: #fff;
text-decoration: none;
@ -88,8 +107,74 @@ export default {
}
}
}
}
&.has-sticky-0 nav{
background-color: rgba(0, 0, 0, 0.5);
}
&.has-sticky-1 nav{
background-color: #000;
}
.hamburger {
width: 70px;
height: 50px;
padding: 14px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
&-line {
width: 100%;
background-color: #fff;
height: 2px;
}
}
}
// }
@media only screen and (max-width: 960px) {
.menu {
nav, .nav-wrapper {
width: 100%;
.links .link {
font-size: 82%;
}
}
}
}
@media only screen and (max-width: 767px) {
.menu {
&-bar {
width: 100%;
}
&-content {
color: white;
&.collapsed {
display: none;
}
}
nav {
display: block;
background-color: #000;
padding: 0;
.links {
padding: 0 8px 16px;
.link {
text-align: center;
display: block;
padding: 8px;
font-size: 18px;
}
}
}
&.has-sticky-0 nav, &.has-sticky-1 nav{
background-color: #000;
}
}
}
</style>

View File

@ -32,8 +32,8 @@ export default {
<style lang="scss" scoped>
.product-box {
width: 360px;
height: 480px;
width: 330px;
height: 450px;
border-radius: 12px;
background-position: top left;
box-sizing: border-box;
@ -75,8 +75,8 @@ export default {
}
&-image {
width: 360px;
height: 285px;
width: 330px;
height: 250px;
img {
width: 100%;

View File

@ -1,5 +1,5 @@
<template>
<Carousel class="carousel" :items-to-show="3" :wrap-around="false">
<Carousel class="carousel" v-bind:breakpoints="breakpoints" :items-to-show="1" :wrap-around="false">
<Slide v-for="product in products" :key="product.name">
<div class="carousel-item">
<ProductBox :product="product"></ProductBox>
@ -21,6 +21,19 @@ export default {
props: {
products: Array
},
data: () => ({
// breakpoints are mobile first
// any settings not specified will fallback to the carousel settings
breakpoints: {
// 1024 and up
920: {
itemsToShow: 2,
snapAlign: 'start',
wrapAround: false,
},
},
}),
components: {
Carousel,
Slide,
@ -36,8 +49,8 @@ export default {
.carousel {
margin-top: 32px;
&-item {
min-height: 570px;
width: 360px;
height: 450px;
width: 330px;
font-size: 20px;
}

View File

@ -179,7 +179,6 @@ export default {
padding: 4px 0 0 8px;
border-right-style: solid;
border-right-width: 3px;
min-width: 100px;
flex-basis: 0px;
flex-grow: 1;

View File

@ -42,7 +42,7 @@ body {
}
.main-container {
width: 1366px;
width: 960px;
margin: 0 auto;;
}
@ -66,4 +66,10 @@ body {
}
.mt-6 {
margin-top: 48px;
}
@media only screen and (max-width: 960px) {
.main-container {
width: 100%;
}
}

View File

@ -35,4 +35,14 @@
margin: 0 150px;
}
}
@media only screen and (max-width: 767px) {
.employees {
flex-direction: column;
.employee {
margin: 0 8px 32px;
}
}
}
</style>

View File

@ -6,13 +6,8 @@
<p>{{ $t('social.paragraph2') }}</p>
</section>
<section class="social-bottom">
<div class="left">
<p>{{ $t('social.paragraph3') }}</p>
<p>{{ $t('social.paragraph4') }}</p>
</div>
<div class="right">
<img src="@images/proyect-soc-new.jpg">
</div>
<img src="@images/proyect-soc-new.jpg">
<p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
</section>
</template>
@ -25,19 +20,35 @@ import { slides } from '../../data';
.social-bottom {
padding: 0px 72px;
background-position: top left;
background-size: contain;
height: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
// display: grid;
// grid-template-columns: 1fr 1fr;
.left {
padding: 120px 32px 0 0
padding: 0 32px 0 0
}
img {
float: right;
width: 50%;
padding: 16px
}
p {
font-weight: 200;
color: #ffffff;
font-size: 20px;
line-height: 50px;
font-weight: 500;
color: #603809;
font-size: 24px;
line-height: 40px;
}
}
@media only screen and (max-width: 767px) {
.social-bottom {
padding: 16px;
img {
float: none;
width: 100%;
padding: 0;
}
}
}
</style>

View File

@ -2,10 +2,14 @@ import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
console.log('process.argv :>> ', process.argv);
const base = process.argv.includes('-beta') ? '/beta' : '/';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base,
resolve: {
alias: {
'@images': fileURLToPath(new URL('./src/assets/images',