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

frontend: remove fullpage.js, rewrite equivalent

Browse source 
Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>
This commit is contained in:
Nicolas Froger 2024-07-27 16:35:53 +02:00
commit 87e3b40a54
No known key found for this signature in database
7 changed files with 353 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

26
summer2024-frontend/src/components/WelcomeComponent.vue
View file

@ -1,7 +1,10 @@
<script setup>
const props = defineProps(['class'])
import { usePostsStore } from '@/stores/posts.js'
import Countdown from '@/components/Countdown.vue'
import { onMounted, ref } from 'vue'
import { ChevronDown } from 'lucide-vue-next'
const enableCountdown = ref(false)
const countdownDate = ref(new Date('2024-07-28 07:00:00'))
@ -18,14 +21,16 @@ const postsStore = usePostsStore()
</script>
<template>
<div class="section" ref="section" data-anchor="welcome-section">
<div :class="props.class" ref="section" data-anchor="welcome-section">
<div class="flex flex-col w-full h-full items-center justify-center text-center">
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mx-4 my-4">
3 semaines pour traverser 7 pays d'Europe en train
</h3>
<div v-if="postsStore.posts.length > 0">
<p class="mx-4">suivez mon voyage en naviguant vers le bas</p>
<div class="arrow" />
<p v-if="postsStore.posts.length > 0" class="mx-4">
suivez mon voyage en naviguant vers le bas
</p>
<div v-if="postsStore.posts.length > 0" class="arrow mt-6">
<ChevronDown size="96" />
</div>
<div v-else>
<p class="mx-4">le contenu n'est pas encore disponible, revenez plus tard</p>
@ -40,29 +45,20 @@ const postsStore = usePostsStore()
<style scoped>
.arrow {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
display: block;
width: 3vh;
height: 3vh;
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);
transform: translate(0, 0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(20px, 20px);
transform: translate(0, 40px);
}
}
</style>