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

foundations and home

Browse Source
This commit is contained in:
José Conde
2023-06-11 14:34:05 +02:00
parent 8069c4a5be
commit 8b1cafca1c
48 changed files with 1251 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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