64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<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'))
|
|
|
|
onMounted(() => {
|
|
const now = new Date().getTime()
|
|
const distance = countdownDate.value.getTime() - now
|
|
if (distance > 0) {
|
|
enableCountdown.value = true
|
|
}
|
|
})
|
|
|
|
const postsStore = usePostsStore()
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
<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>
|
|
<div class="mt-16 mx-4" v-if="enableCountdown">
|
|
<p>ça commence dans...</p>
|
|
<Countdown class="text-3xl font-extrabold" :date="countdownDate" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.arrow {
|
|
animation: arrowAnimation 3s infinite;
|
|
}
|
|
|
|
@keyframes arrowAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(0, 0);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(0, 40px);
|
|
}
|
|
}
|
|
</style>
|