foundations and home
This commit is contained in:
José Conde
37
src/components/Certifications.vue
Normal file
37
src/components/Certifications.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<section class="certifications">
|
||||
<header class="header">
|
||||
<h2 class="title">{{ $t('certifications.title') }}</h2>
|
||||
</header>
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 72px 0 76px;
|
||||
}
|
||||
h2.title {
|
||||
font-size: 54px;
|
||||
font-weight: 400;
|
||||
line-height: 63.28px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 600px;
|
||||
background-image: url('@images/bg_1.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
36
src/components/CoffeeFarmer.vue
Normal file
36
src/components/CoffeeFarmer.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<section class="coffeefarmers">
|
||||
<h3 class="header">{{ $t('coffeefarmers.title') }}</h3>
|
||||
<div class="separator"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coffeefarmers {
|
||||
height: 590px;
|
||||
background-image: url('@images/grains.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h3.header {
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
padding: 175px 230px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-top: 2px solid #fff;
|
||||
width: 700px;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
</style>
|
||||
44
src/components/Different.vue
Normal file
44
src/components/Different.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
import DifferentBox from './DifferentBox.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="different">
|
||||
<h2>{{ $t('different.header') }}</h2>
|
||||
<h3>{{ $t('different.subheader') }}</h3>
|
||||
<div class="boxes">
|
||||
<DifferentBox image="coffee-beans1.png" :title="$t('different.beans.title')" :description="$t('different.beans.description')" />
|
||||
<DifferentBox image="badge1.png" :title="$t('different.quality.title')" :description="$t('different.quality.description')" />
|
||||
<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>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.different {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
padding: 72px 64px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 150px;
|
||||
font-size: 52px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 24px;
|
||||
padding: 0 150px;
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.boxes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
50
src/components/DifferentBox.vue
Normal file
50
src/components/DifferentBox.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
image: String,
|
||||
title: String,
|
||||
description: String
|
||||
},
|
||||
methods: {
|
||||
getImage(image) {
|
||||
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="different-box">
|
||||
<img :src="getImage(image)" class="image" />
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<p class="description">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.different-box {
|
||||
width: 280px;
|
||||
height: 284px;
|
||||
background: #E2CAAA;
|
||||
text-align: center;
|
||||
padding: 36px 24px 0;
|
||||
}
|
||||
.image {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
}
|
||||
.title {
|
||||
margin-top: 24px;
|
||||
color: #603809;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 12px;
|
||||
font-style: 400;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #1E1E1E;
|
||||
}
|
||||
</style>
|
||||
136
src/components/Footer.vue
Normal file
136
src/components/Footer.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<footer>
|
||||
<img class="logo" src="@images/logo-kreis_3.png">
|
||||
<div class="contact-info">
|
||||
<h5>{{ $t('footer.contact')}}</h5>
|
||||
<p>Si está interesado o tiene alguna pregunta, ¡contáctenos!</p>
|
||||
<p class="emails">
|
||||
<a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
|
||||
<a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
|
||||
<a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@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">
|
||||
<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 class="links">
|
||||
<a href="#">Impressum</a>
|
||||
<a href="#">Datenschutz</a>
|
||||
<a href="#">AGB</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
footer {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
height: 492px;
|
||||
background-color: #442808;
|
||||
background-image: url('@images/footer_coffee.png');
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
padding-top: 72px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&.links {
|
||||
margin-top: 58px;
|
||||
|
||||
a {
|
||||
margin-right: 200px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@mixin icon($url) {
|
||||
display: inline-block;
|
||||
background-image: url($url);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
left: 92px;
|
||||
width: 168px;
|
||||
height: 161px;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
text-align: center;;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
|
||||
.emails {
|
||||
padding: 0;
|
||||
.email {
|
||||
|
||||
margin-right: 16px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&-icon {
|
||||
@include icon('@images/email.svg');
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone-icon {
|
||||
@include icon('@images/phone.svg');
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.rss a {
|
||||
margin-right: 24px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-icon {
|
||||
@include icon('@images/facebook.svg');
|
||||
}
|
||||
|
||||
.youtube-icon {
|
||||
@include icon('@images/youtube.svg');
|
||||
}
|
||||
|
||||
.instagram-icon {
|
||||
@include icon('@images/instagram.svg');
|
||||
}
|
||||
|
||||
.twitter-icon {
|
||||
@include icon('@images/twitter.svg');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
src/components/Menu.vue
Normal file
94
src/components/Menu.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
title: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="menu" :class="type">
|
||||
<div class="overlay">
|
||||
<nav>
|
||||
<img class="logo" src="@images/logo-kreis_3.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="/social">{{ $t('menu.social') }}</router-link>
|
||||
<router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link> -->
|
||||
</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;
|
||||
|
||||
.overlay {
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
nav {
|
||||
padding: 24px 93px 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
|
||||
.logo {
|
||||
height: 117px;
|
||||
width: 118px;;
|
||||
}
|
||||
|
||||
.links {
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
|
||||
.link {
|
||||
margin-right: 54px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
|
||||
&.router-link-active {
|
||||
color: #FECE16;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #FECE16;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.home {
|
||||
background-image: url('@images/mountains.png');
|
||||
}
|
||||
|
||||
&.about {
|
||||
background-image: url('@images/coffee1.jpg');
|
||||
}
|
||||
|
||||
&.products {
|
||||
background-image: url('@images/products.png');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
src/components/OriginBox.vue
Normal file
50
src/components/OriginBox.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
image: String,
|
||||
title: String,
|
||||
description: String
|
||||
},
|
||||
methods: {
|
||||
getImage(image) {
|
||||
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="origin-box">
|
||||
<img :src="getImage(image)" class="image" />
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<p class="description">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.origin-box {
|
||||
width: 280px;
|
||||
height: 364px;
|
||||
background: #FFF9F1;
|
||||
border: 1px solid rgba(249, 192, 106, 0.42);
|
||||
}
|
||||
.image {
|
||||
width: 280px;
|
||||
height: 222px;
|
||||
}
|
||||
.title {
|
||||
margin-top: 12px;
|
||||
color: #603809;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #1E1E1E;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
35
src/components/Origins.vue
Normal file
35
src/components/Origins.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
import OriginBoxVue from "./OriginBox.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="origins">
|
||||
<h2>{{ $t('origins.header') }}</h2>
|
||||
<div class="boxes">
|
||||
<OriginBoxVue image="coffee_brasil.png" :title="$t('origins.brazil')" :description="$t('origins.brazil_description')" />
|
||||
<OriginBoxVue image="coffee_colombia.png" :title="$t('origins.colombia')" :description="$t('origins.colombia_description')" />
|
||||
<OriginBoxVue image="coffee_peru.png" :title="$t('origins.peru')" :description="$t('origins.peru_description')" />
|
||||
<OriginBoxVue image="coffee_uganda.png" :title="$t('origins.uganda')" :description="$t('origins.uganda_description')" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.origins {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
padding: 72px 64px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 150px;
|
||||
font-size: 52px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.boxes {
|
||||
margin-top: 72px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user