Compare commits
4 Commits
03bf1c3a9e
...
39f8bd82f6
| Author | SHA1 | Date | |
|---|---|---|---|
|
39f8bd82f6 | ||
| a3473ac706 | |||
| c013b52e28 | |||
| ec46813b28 |
10
src/App.vue
10
src/App.vue
@ -26,13 +26,13 @@
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
const limit = 430;
|
||||
const limit = this.$isMobile() ? 115 : 430;
|
||||
if (!pagesWithCarousel.includes(this.$route.name)) {
|
||||
this.stickyClass = 'has-sticky has-sticky-1'
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.scrollY > 0 && window.scrollY <= limit) {
|
||||
if (window.scrollY > 5 && window.scrollY <= limit) {
|
||||
this.stickyClass = 'has-sticky has-sticky-0';
|
||||
} else if(window.scrollY > limit) {
|
||||
this.stickyClass = 'has-sticky has-sticky-1';
|
||||
@ -45,7 +45,7 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="width">{{ width }}px {{ deviceClass }}</div>
|
||||
<!-- <div class="width">{{ width }}px {{ deviceClass }}</div> -->
|
||||
<Menu :class="`${stickyClass}`" />
|
||||
<div class="main-container" :class="`${stickyClass} ${deviceClass}`">
|
||||
<div class="content-wrapper">
|
||||
@ -70,7 +70,7 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
.content-wrapper {
|
||||
padding-top: 91px;
|
||||
padding-top: 120px;
|
||||
background-color: #000;
|
||||
}
|
||||
.content {
|
||||
@ -109,7 +109,7 @@
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.content-wrapper {
|
||||
padding-top: 50px;
|
||||
padding-top: 115px;
|
||||
}
|
||||
.content {
|
||||
padding: 0 16px 72px;
|
||||
|
||||
BIN
src/assets/images/Packaging_new 1.jpg
Normal file
BIN
src/assets/images/Packaging_new 1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 625 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
BIN
src/assets/images/uganda-caffecrem.jpg
Normal file
BIN
src/assets/images/uganda-caffecrem.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
src/assets/images/uganda-single.jpg
Normal file
BIN
src/assets/images/uganda-single.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
@ -22,11 +22,11 @@ export default {
|
||||
}
|
||||
|
||||
h3.header {
|
||||
font-weight: 600;
|
||||
font-weight: 300;
|
||||
font-size: 26px;
|
||||
line-height: 58px;
|
||||
padding: 120px 230px 0;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
padding: 120px 148px 0;
|
||||
text-align: center ;
|
||||
text-shadow: 1px 1px 10px #000;
|
||||
}
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@ import DifferentBox from './DifferentBox.vue';
|
||||
<DifferentBox image="coffee-cup1.png" :title="$t('different.extraordinary.title')" :description="$t('different.extraordinary.description')" />
|
||||
<DifferentBox image="best-price1.png" :title="$t('different.affordable.title')" :description="$t('different.affordable.description')" />
|
||||
</div>
|
||||
<h3>{{ $t('different.subheader1') }}</h3>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -19,7 +20,7 @@ import DifferentBox from './DifferentBox.vue';
|
||||
.different {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
padding: 0 0 72px;
|
||||
padding: 0 0 0px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -32,7 +33,7 @@ import DifferentBox from './DifferentBox.vue';
|
||||
margin-top: 24px;
|
||||
padding: 0 150px;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-weight: 200;
|
||||
margin-bottom: 50px;
|
||||
|
||||
@ -29,6 +29,10 @@ export default {
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
|
||||
<div class="links">
|
||||
@ -44,7 +48,9 @@ export default {
|
||||
</div>
|
||||
</nav>
|
||||
<nav v-else>
|
||||
<img class="logo" src="@images/tayrona-foods-yellow.png" />
|
||||
<div class="logo">
|
||||
<img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
|
||||
</div>
|
||||
<div class="links">
|
||||
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
||||
<router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
|
||||
@ -80,9 +86,9 @@ export default {
|
||||
height: 100%;
|
||||
transition: background-color .3s ease-in-out;
|
||||
|
||||
.logo {
|
||||
height: 75px;
|
||||
width: 75px;;
|
||||
.logo img{
|
||||
height: 100px;
|
||||
width: 100px;;
|
||||
}
|
||||
|
||||
.links {
|
||||
@ -148,6 +154,20 @@ export default {
|
||||
.menu {
|
||||
&-bar {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
height: 115px;
|
||||
transition: height .2s ease-out;
|
||||
|
||||
.logo, .hamburger {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
opacity: 1;
|
||||
transition: opacity .2s ease-out;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
color: white;
|
||||
@ -172,8 +192,17 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
&.has-sticky-0 nav, &.has-sticky-1 nav{
|
||||
background-color: #000;
|
||||
&.has-sticky-0, &.has-sticky-1 {
|
||||
.menu-bar {
|
||||
height: 50px;
|
||||
}
|
||||
.logo {
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
nav {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
50
src/data.js
50
src/data.js
@ -76,7 +76,7 @@ export const products = [
|
||||
{
|
||||
kind: kinds.fire,
|
||||
name: 'products.uganda_gnoma.name',
|
||||
images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
|
||||
images: ['uganda-single.jpg', 'product-uganda-double1.png',],
|
||||
slogan: 'products.uganda_gnoma.slogan',
|
||||
description: 'products.uganda_gnoma.description',
|
||||
farm: 'products.uganda_gnoma.farm',
|
||||
@ -91,51 +91,51 @@ export const products = [
|
||||
url: 'https://tayronafoods.myshopify.com/products/uganda-ngoma',
|
||||
},
|
||||
{
|
||||
kind: kinds.earth,
|
||||
name: 'products.uganda_gnoma.name',
|
||||
images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
|
||||
slogan: 'products.uganda_gnoma.slogan',
|
||||
description: 'products.uganda_gnoma.description',
|
||||
farm: 'products.uganda_gnoma.farm',
|
||||
strain: 'products.uganda_gnoma.strain',
|
||||
country: 'products.uganda_gnoma.country',
|
||||
height: 'products.uganda_gnoma.height',
|
||||
revision: 'products.uganda_gnoma.revision',
|
||||
harvest: 'products.uganda_gnoma.harvest',
|
||||
profile: 'products.uganda_gnoma.profile',
|
||||
taste: 'products.uganda_gnoma.taste',
|
||||
texture: 'products.uganda_gnoma.texture',
|
||||
url: 'https://tayronafoods.myshopify.com/products/uganda-ngoma',
|
||||
},
|
||||
kind: kinds.earth,
|
||||
name: 'products.uganda_gnoma_cream.name',
|
||||
images: ['uganda-caffecrem.jpg',],
|
||||
slogan: 'products.uganda_gnoma_cream.slogan',
|
||||
description: 'products.uganda_gnoma_cream.description',
|
||||
farm: 'products.uganda_gnoma_cream.farm',
|
||||
strain: 'products.uganda_gnoma_cream.strain',
|
||||
country: 'products.uganda_gnoma_cream.country',
|
||||
height: 'products.uganda_gnoma_cream.height',
|
||||
revision: 'products.uganda_gnoma_cream.revision',
|
||||
harvest: 'products.uganda_gnoma_cream.harvest',
|
||||
profile: 'products.uganda_gnoma_cream.profile',
|
||||
taste: 'products.uganda_gnoma_cream.taste',
|
||||
texture: 'products.uganda_gnoma_cream.texture',
|
||||
url: 'https://tayronafoods.myshopify.com/products/uganda-ngoma',
|
||||
},
|
||||
];
|
||||
|
||||
export const slides = {
|
||||
home: [
|
||||
'mountains.jpg',
|
||||
'coffee1.jpg',
|
||||
'Packaging_new.png',
|
||||
'Packaging_new 1.jpg',
|
||||
'proysoc.01.jpg',
|
||||
'kids-coffee.jpg',
|
||||
'kids.jpg',
|
||||
],
|
||||
about: [
|
||||
'coffee1.jpg',
|
||||
'mountains.jpg',
|
||||
'Packaging_new.png',
|
||||
'Packaging_new 1.jpg',
|
||||
'proysoc.01.jpg',
|
||||
'kids-coffee.jpg',
|
||||
'kids.jpg',
|
||||
],
|
||||
social: [
|
||||
'proysoc.01.jpg',
|
||||
'kids-coffee.jpg',
|
||||
'kids.jpg',
|
||||
'mountains.jpg',
|
||||
'coffee1.jpg',
|
||||
'Packaging_new.png',
|
||||
'Packaging_new 1.jpg',
|
||||
],
|
||||
products: [
|
||||
'Packaging_new.png',
|
||||
'Packaging_new 1.jpg',
|
||||
'coffee1.jpg',
|
||||
'mountains.jpg',
|
||||
'proysoc.01.jpg',
|
||||
'kids-coffee.jpg',
|
||||
'kids.jpg',
|
||||
],
|
||||
};
|
||||
@ -131,6 +131,22 @@ export default {
|
||||
taste: 'Zartbitterschokolade',
|
||||
texture: 'sanft'
|
||||
},
|
||||
uganda_gnoma_cream: {
|
||||
title:'Earth',
|
||||
slogan: 'Born to create',
|
||||
description: `El fuego, la pasión que resuena en cada paso de nuestro trabajo.
|
||||
Desde la selección de variedades de café verde hasta el cuidadoso tostado y la preparación amorosa, estamos allí con alma y corazón para ofrecerte una experiencia de café extraordinaria.`,
|
||||
name: 'Uganda Ngoma',
|
||||
farm: 'Caffeè crema ',
|
||||
strain: '100% Robusta',
|
||||
country: 'Uganda / Wakiso District',
|
||||
height: '1.250 m',
|
||||
revision: 'Sonnengetrocknet',
|
||||
harvest: 'handgepflückt',
|
||||
profile: '1/4',
|
||||
taste: 'Zartbitterschokolade',
|
||||
texture: 'sanft'
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
country: 'Land / Region',
|
||||
@ -161,7 +177,7 @@ export default {
|
||||
|
||||
contact:{
|
||||
title: 'Contacto',
|
||||
paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
|
||||
paragraph1: 'Si está interesado o tiene alguna pregunta, <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">¡contáctenos!</a>',
|
||||
paragraph2: 'Correo Electrónico',
|
||||
paragraph3: 'info@tayronafoods.com',
|
||||
paragraph4: 'alejandro@tayronafoods.com',
|
||||
|
||||
@ -133,7 +133,25 @@ export default {
|
||||
taste: '',
|
||||
texture: ''
|
||||
},
|
||||
uganda_gnoma_cream: {
|
||||
title:'Earth',
|
||||
slogan: 'Born to create',
|
||||
description: `El fuego, la pasión que resuena en cada paso de nuestro trabajo.
|
||||
Desde la selección de variedades de café verde hasta el cuidadoso tostado y la preparación amorosa, estamos allí con alma y corazón para ofrecerte una experiencia de café extraordinaria.`,
|
||||
name: 'Uganda Ngoma',
|
||||
farm: 'Caffeè crema ',
|
||||
strain: '100% Robusta',
|
||||
country: 'Uganda / Wakiso District',
|
||||
height: '1.250 m',
|
||||
revision: 'Sun dried',
|
||||
harvest: 'Carefully selected',
|
||||
profile: '1/4',
|
||||
taste: 'Zartbitterschokolade',
|
||||
texture: 'sanft'
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
labels: {
|
||||
country: 'Country / Region',
|
||||
height: 'Height',
|
||||
@ -162,7 +180,7 @@ export default {
|
||||
},
|
||||
contact:{
|
||||
title: 'Contact',
|
||||
paragraph1:'If you are interested or have any questions, please contact us!',
|
||||
paragraph1:'If you are interested or have any questions, please <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">contact us!</a>',
|
||||
paragraph2: 'Email',
|
||||
paragraph3: 'info{\'@\'}tayronafoods.com',
|
||||
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
||||
|
||||
@ -37,6 +37,7 @@ export default {
|
||||
different: {
|
||||
header: '¿Por qué somos diferentes?',
|
||||
subheader: '¡No solo hacemos tu café, hacemos tu día!',
|
||||
subheader1: 'Las grandes ideas comienzan con un excelente café, te ayudaremos a lograrlo.',
|
||||
beans: {
|
||||
title: 'Granos Supremos',
|
||||
description: 'Granos proporcionan gran sabor',
|
||||
@ -131,6 +132,23 @@ export default {
|
||||
taste: '-.',
|
||||
texture: '-'
|
||||
},
|
||||
|
||||
uganda_gnoma_cream: {
|
||||
title:'Tierra',
|
||||
slogan: 'Nacido para crear',
|
||||
description: `El fuego, la pasión que resuena en cada paso de nuestro trabajo.
|
||||
Desde la selección de variedades de café verde hasta el cuidadoso tostado y la preparación amorosa, estamos allí con alma y corazón para ofrecerte una experiencia de café extraordinaria.`,
|
||||
name: 'Uganda Ngoma',
|
||||
farm: 'Caffeè crema ',
|
||||
strain: '100% Robusta',
|
||||
country: 'Uganda / Wakiso District',
|
||||
height: '1.250 m',
|
||||
revision: 'Secado al sol',
|
||||
harvest: 'Seleccionado cuidadósamente',
|
||||
profile: '1/4',
|
||||
taste: '-.',
|
||||
texture: '-'
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
country: 'País / Región',
|
||||
@ -161,7 +179,7 @@ export default {
|
||||
|
||||
contact:{
|
||||
title: 'Contacto',
|
||||
paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
|
||||
paragraph1: 'Si está interesado o tiene alguna pregunta, <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">¡contáctenos!</a>',
|
||||
paragraph2: 'Correo Electrónico',
|
||||
paragraph3: 'info{\'@\'}tayronafoods.com',
|
||||
paragraph4: 'alejandro{\'@\'}tayronafoods.com',
|
||||
|
||||
@ -68,6 +68,10 @@ body {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
a, .link {
|
||||
color: #442808;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.main-container {
|
||||
width: 100%;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="contact-section">
|
||||
<div class="left">
|
||||
<h1>{{ $t('contact.title') }}</h1>
|
||||
<p>{{ $t('contact.paragraph1') }}</p>
|
||||
<p v-html="$t('contact.paragraph1')"></p>
|
||||
<h3>{{ $t('contact.paragraph2') }}</h3>
|
||||
<p>{{ $t('contact.paragraph3') }}</p>
|
||||
<p>{{ $t('contact.paragraph4') }}</p>
|
||||
@ -12,7 +12,7 @@
|
||||
<p>{{ $t('contact.paragraph7') }}</p>
|
||||
<p>{{ $t('contact.paragraph8') }}</p>
|
||||
<h3>{{ $t('contact.paragraph9') }}</h3>
|
||||
<p>{{ $t('contact.paragraph10') }}</p>
|
||||
<p><a href="https://www.instagram.com/tayrona_foods" target="">Instagram</a></p>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
@ -36,20 +36,28 @@ export default {
|
||||
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
font-size: 64px;
|
||||
font-size: 32px;
|
||||
line-height: 75px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 54px;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.contact-section {
|
||||
.left {
|
||||
padding: 36px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user