nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: initial commit

Browse source 
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger 2024-07-21 22:33:33 +02:00
commit 08d529c381
No known key found for this signature in database
19 changed files with 5714 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

65
summer2024-frontend/src/components/WelcomeComponent.vue Normal file
View file

@ -0,0 +1,65 @@
<script setup>
import { usePostsStore } from '@/stores/posts.js'
const postsStore = usePostsStore()
</script>
<template>
<div class="section" ref="section" data-anchor="welcome-section">
<div id="welcome-container">
<h3 class="welcome-content">3 semaines pour traverser 7 pays d'Europe en train</h3>
<div v-if="postsStore.posts.length > 0">
<p class="welcome-content">suivez mon voyage en naviguant vers le bas</p>
<div class="arrow" />
</div>
<div v-else>
<p>le contenu n'est pas encore disponible, revenez plus tard</p>
</div>
</div>
</div>
</template>
<style scoped>
#welcome-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
}
.welcome-content {
margin-left: 20px;
margin-right: 20px;
}
.arrow {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
display: block;
width: 1.5vw;
height: 1.5vw;
border-bottom: 5px solid white;
border-right: 5px solid white;
transform: rotate(45deg);
animation: arrowAnimation 3s infinite;
}
@keyframes arrowAnimation {
0% {
opacity: 0;
transform: rotate(45deg) translate(-20px, -20px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
}
}
</style>