80 lines
3.0 KiB
Vue
80 lines
3.0 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
|
|
<!-- Navigation (hanya muncul kalau bukan di landing) -->
|
|
<nav v-if="currentSection !== 'landing'"
|
|
class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20">
|
|
<ul class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800">
|
|
<li>
|
|
<button @click="currentSection='introduction'" :class="navClass('introduction')">Intro</button>
|
|
</li>
|
|
<li>
|
|
<button @click="currentSection='event'" :class="navClass('event')">Event</button>
|
|
</li>
|
|
<li>
|
|
<button @click="currentSection='galeri'" :class="navClass('galeri')">Gallery</button>
|
|
</li>
|
|
<li>
|
|
<button @click="currentSection='say'" :class="navClass('say')">Guest Book</button>
|
|
</li>
|
|
<li>
|
|
<button @click="currentSection='thanks'" :class="navClass('thanks')">Thanks</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Music Icon -->
|
|
<div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
|
|
<button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
|
|
{{ isPlaying ? '⏸️' : '▶️' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="relative z-10 min-h-screen flex items-center justify-center p-4">
|
|
<Landing v-if="currentSection==='landing'"
|
|
:childName="childName"
|
|
:guestName="guestName"
|
|
@open-invitation="currentSection='introduction'" />
|
|
|
|
<Introduction v-if="currentSection==='introduction'"
|
|
:age="age"
|
|
:childName="childName"
|
|
:childOrder="childOrder"
|
|
:parentNames="parentNames"
|
|
:childPhoto="childPhoto"/>
|
|
|
|
<Event v-if="currentSection==='event'" />
|
|
<Gallery v-if="currentSection==='galeri'" />
|
|
<GuestBook v-if="currentSection==='say'" />
|
|
<ThankYou v-if="currentSection==='thanks'" />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import Landing from '~/components/templates/Ultah/Landing.vue'
|
|
import Introduction from '~/components/templates/Ultah/Introduction.vue'
|
|
import Event from '~/components/templates/Ultah/Event.vue'
|
|
import Gallery from '~/components/templates/Ultah/Gallery.vue'
|
|
import GuestBook from '~/components/templates/Ultah/GuestBook.vue'
|
|
import ThankYou from '~/components/templates/Ultah/ThankYou.vue'
|
|
|
|
const childName = ref('Rayyanza Malik Ahmad')
|
|
const guestName = ref('Gempita Nora Marten')
|
|
const age = ref(4)
|
|
const childOrder = ref(2)
|
|
const parentNames = ref('Raffi Ahmad & Nagita Slavina')
|
|
const childPhoto = ref('')
|
|
const isPlaying = ref(false)
|
|
const currentSection = ref('landing')
|
|
|
|
const toggleMusic = () => { isPlaying.value = !isPlaying.value }
|
|
|
|
const navClass = (section) => {
|
|
return currentSection.value === section
|
|
? 'text-orange-700 underline'
|
|
: 'hover:text-orange-600'
|
|
}
|
|
</script>
|