Compare commits
No commits in common. "adfcc9a0bebc82ae24f50e7b902f4fec9af247b3" and "e04b02e28d8fa47e3d5c23b55ac01e0a1ef1dfcb" have entirely different histories.
adfcc9a0be
...
e04b02e28d
@ -4,9 +4,8 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"build:beta": "vite build -- -beta",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
56
src/App.vue
56
src/App.vue
@ -9,9 +9,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stickyClass: '',
|
||||
deviceClass: this.$isMobile() ? 'mobile' : 'desktop',
|
||||
width: window.innerWidth
|
||||
stickyClass: ''
|
||||
}
|
||||
},
|
||||
components: { Footer, Menu },
|
||||
@ -26,15 +24,15 @@
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
const limit = 430;
|
||||
console.log('this.$route.name :>> ', this.$route.name);
|
||||
if (!pagesWithCarousel.includes(this.$route.name)) {
|
||||
this.stickyClass = 'has-sticky has-sticky-1'
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.scrollY > 0 && window.scrollY <= limit) {
|
||||
if (window.scrollY > 0 && window.scrollY <= 574) {
|
||||
this.stickyClass = 'has-sticky has-sticky-0';
|
||||
} else if(window.scrollY > limit) {
|
||||
} else if(window.scrollY > 574) {
|
||||
this.stickyClass = 'has-sticky has-sticky-1';
|
||||
} else {
|
||||
this.stickyClass = '';
|
||||
@ -45,9 +43,8 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="width">{{ width }}px {{ deviceClass }}</div>
|
||||
<Menu :class="`${stickyClass}`" />
|
||||
<div class="main-container" :class="`${stickyClass} ${deviceClass}`">
|
||||
<div class="main-container" :class="stickyClass">
|
||||
<Menu />
|
||||
<div class="content-wrapper">
|
||||
<RouterView />
|
||||
</div>
|
||||
@ -56,21 +53,8 @@
|
||||
</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: 91px;
|
||||
padding-top: 130px;
|
||||
background-color: #000;
|
||||
}
|
||||
.content {
|
||||
@ -87,18 +71,17 @@
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
line-height: 42px;
|
||||
font-size: 24px;
|
||||
font-weight: 200;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
padding: 72px 264px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 200;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
text-align: justify;
|
||||
|
||||
&.centered {
|
||||
@ -106,17 +89,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.content-wrapper {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.content {
|
||||
padding: 0 16px 72px;
|
||||
|
||||
h4 {
|
||||
padding: 72px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
<section class="certifications">
|
||||
<div class="right">
|
||||
<h2>{{ $t('certifications.title1') }}</h2>
|
||||
<p class="centered"><img class="image" src="@images/image_membresias.png" /></p>
|
||||
<p class="centered"><img src="@images/image_membresias.png" /></p>
|
||||
</div>
|
||||
<div class="left">
|
||||
<h2>{{ $t('certifications.title2') }}</h2>
|
||||
<p class="centered"><img class="image" src="@images/Nuestros_aliados.png" /></p>
|
||||
<p class="centered"><img src="@images/Nuestros_aliados.png" /></p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -19,40 +19,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h2 {
|
||||
.header {
|
||||
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>
|
||||
@ -13,7 +13,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coffeefarmers {
|
||||
height: 400px;
|
||||
height: 480px;
|
||||
background: white;
|
||||
background-image: url('@images/grains.jpg');
|
||||
background-repeat: no-repeat;
|
||||
@ -22,10 +22,10 @@ export default {
|
||||
}
|
||||
|
||||
h3.header {
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
font-size: 36px;
|
||||
line-height: 58px;
|
||||
padding: 120px 230px 0;
|
||||
padding: 175px 230px 0;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 10px #000;
|
||||
}
|
||||
@ -35,12 +35,4 @@ 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>
|
||||
@ -19,11 +19,11 @@ import DifferentBox from './DifferentBox.vue';
|
||||
.different {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
padding: 0 0 72px;
|
||||
padding: 72px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 26px !important;
|
||||
padding: 0 150px;
|
||||
font-size: 52px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -41,14 +41,4 @@ 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>
|
||||
@ -18,36 +18,29 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.different-box {
|
||||
width: 280px;
|
||||
height: 276px;
|
||||
height: 284px;
|
||||
background: #E2CAAA;
|
||||
text-align: center;
|
||||
padding: 36px 24px 0;
|
||||
}
|
||||
.image {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
}
|
||||
.title {
|
||||
margin-top: 16px;
|
||||
margin-top: 24px;
|
||||
color: #603809;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
height: 48px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 12px;
|
||||
font-style: 400;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-style: 300;
|
||||
font-weight: 200;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
color: #1E1E1E;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.different-box {
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -36,10 +36,4 @@ export default {
|
||||
line-height: 23.44px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.role {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,16 +11,14 @@
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
@ -37,11 +35,10 @@
|
||||
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 {
|
||||
@ -96,10 +93,6 @@
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
|
||||
.phones {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.emails {
|
||||
padding: 0;
|
||||
.email {
|
||||
@ -143,30 +136,4 @@
|
||||
@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>
|
||||
@ -3,47 +3,13 @@ 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 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>
|
||||
<nav>
|
||||
<img class="logo" src="@images/tayrona-foods-yellow.png" />
|
||||
<div class="links">
|
||||
<router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
|
||||
@ -60,29 +26,44 @@ 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: 0;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.nav-wrapper {
|
||||
position: relative;
|
||||
width: 1366px;
|
||||
height: 100%;
|
||||
// background: #000;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin: 0 auto;
|
||||
padding: 8px 50px;
|
||||
padding: 16px 50px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
background: transparent;
|
||||
width: 960px;
|
||||
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: 75px;
|
||||
width: 75px;;
|
||||
height: 100px;
|
||||
width: 100px;;
|
||||
}
|
||||
|
||||
.links {
|
||||
@ -90,7 +71,7 @@ export default {
|
||||
align-self: center;
|
||||
|
||||
.link {
|
||||
margin-right: 20px;
|
||||
margin-right: 54px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
|
||||
@ -109,72 +90,6 @@ 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>
|
||||
@ -32,8 +32,8 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-box {
|
||||
width: 330px;
|
||||
height: 450px;
|
||||
width: 360px;
|
||||
height: 480px;
|
||||
border-radius: 12px;
|
||||
background-position: top left;
|
||||
box-sizing: border-box;
|
||||
@ -75,8 +75,8 @@ export default {
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 330px;
|
||||
height: 250px;
|
||||
width: 360px;
|
||||
height: 285px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Carousel class="carousel" v-bind:breakpoints="breakpoints" :items-to-show="1" :wrap-around="false">
|
||||
<Carousel class="carousel" :items-to-show="3" :wrap-around="false">
|
||||
<Slide v-for="product in products" :key="product.name">
|
||||
<div class="carousel-item">
|
||||
<ProductBox :product="product"></ProductBox>
|
||||
@ -21,19 +21,6 @@ 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,
|
||||
@ -49,8 +36,8 @@ export default {
|
||||
.carousel {
|
||||
margin-top: 32px;
|
||||
&-item {
|
||||
height: 450px;
|
||||
width: 330px;
|
||||
min-height: 570px;
|
||||
width: 360px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -179,6 +179,7 @@ export default {
|
||||
padding: 4px 0 0 8px;
|
||||
border-right-style: solid;
|
||||
border-right-width: 3px;
|
||||
min-width: 100px;
|
||||
flex-basis: 0px;
|
||||
flex-grow: 1;
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ body {
|
||||
}
|
||||
|
||||
.main-container {
|
||||
width: 960px;
|
||||
width: 1366px;
|
||||
margin: 0 auto;;
|
||||
}
|
||||
|
||||
@ -67,9 +67,3 @@ body {
|
||||
.mt-6 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.main-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -35,14 +35,4 @@
|
||||
margin: 0 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.employees {
|
||||
flex-direction: column;
|
||||
|
||||
.employee {
|
||||
margin: 0 8px 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -6,8 +6,13 @@
|
||||
<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">
|
||||
<p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -20,35 +25,19 @@ import { slides } from '../../data';
|
||||
.social-bottom {
|
||||
padding: 0px 72px;
|
||||
background-position: top left;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr;
|
||||
background-size: contain;
|
||||
height: 600px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.left {
|
||||
padding: 0 32px 0 0
|
||||
}
|
||||
|
||||
img {
|
||||
float: right;
|
||||
width: 50%;
|
||||
padding: 16px
|
||||
padding: 120px 32px 0 0
|
||||
}
|
||||
p {
|
||||
font-weight: 500;
|
||||
color: #603809;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
font-weight: 200;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
line-height: 50px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.social-bottom {
|
||||
padding: 16px;
|
||||
|
||||
img {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,14 +2,10 @@ 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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user