Files
vaquant/src/components/AppResume.vue
2019-08-22 11:50:32 +02:00

122 lines
3.6 KiB
Vue

<template>
<div class="app-resume" v-once>
<div class="columns is-multiline text-description is-centered">
<div class="column is-one-third">
<div class="main-icon">
<img class="icon" src="../assets/icons/baseline-cloud_off-24px.svg" alt="offline" />
</div>
<p>
Vos données sont hors-lignes.
Utilisez Vaquant vous voulez, seul ou en groupe.
Les données seront sauvegardées sur internet dès qu'une connexion est disponible
afin de les synchroniser avec vos amis.
</p>
</div>
<div class="column is-one-third">
<div class="main-icon">
<awe-icon icon="users"></awe-icon>
</div>
<p>Choisissez de rendre le compte privé ou public.</p>
<p>Lorsque le compte est privé, seules les personnes du compte accéderont aux dépenses.</p>
<p>Lorsque le compte est public, toutes les personnes accédant au lien pourront voir, modifier ou supprimer les dépenses.</p>
</div>
<!-- <div class="column is-one-third">
<div class="main-icon">
<awe-icon icon="user-lock"/>
</div>
<p>
Les informations sensibles de vos comptes et transactions sont chiffrées de bout en bout.
Seuls les membres d'un compte peuvent visualiser ses données.
</p>
</div>-->
<div class="column is-one-third">
<div class="main-icon">
<awe-icon icon="euro-sign" />&nbsp;
<awe-icon icon="exchange-alt" />&nbsp;
<awe-icon icon="dollar-sign" />
</div>
<p>
Vaquant vous permet d'enregistrer les dépenses dans la monnaie locale de vos vacances
et se charge de faire la conversion pour vous au jour le jour. 😙
</p>
</div>
<div class="column is-one-third">
<div class="main-icon">
<awe-icon icon="sync-alt" />
</div>
<p>
Vaquant se met à jour en direct. Vous recevez automatiquement les
nouveaux comptes et dépenses sans même vous en rendre compte. 🎉
</p>
</div>
<div class="column is-one-third">
<div class="main-icon">
<awe-icon icon="mobile" />
</div>
<p>
Vaquant est simple, sécurisée, rapide et accessible depuis un simple lien internet&nbsp;!
Votre partenaire idéal pour vos voyages&nbsp;! ⛺
</p>
</div>
<div class="column is-one-third">
<div class="main-icon">
<awe-icon icon="hand-holding-usd" />
</div>
<p>
Vaquant propose une offre gratuite sans publicité.
Si vous souhaitez encourager son développement, vous pouvez toujours
<a
target="_blank"
rel="noreferrer"
:href="coffee"
>offrir un ☕</a>&nbsp;!
</p>
<p>
Ou vous pouvez également me supporter sur
<a
target="_blank"
rel="noreferrer"
:href="brave"
>Brave</a>&nbsp;!
</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { COFFEE_LINK, BRAVE_LINK } from '@/utils/constants'
export default Vue.extend({
data() {
return {
coffee: COFFEE_LINK,
brave: BRAVE_LINK
}
}
})
</script>
<style lang="scss" scoped>
.main-icon {
font-size: 34pt;
text-align: center;
}
.text-description {
font-size: 14pt;
text-align: justify;
text-align-last: center;
.column {
padding: 30px;
.emoji {
font-size: 20pt;
text-align: center;
}
}
}
</style>