79 lines
2.9 KiB
Vue
79 lines
2.9 KiB
Vue
<template>
|
|
<section id="beranda" class="py-20 px-5">
|
|
<div class="container mx-auto flex flex-col items-center gap-12 lg:flex-row">
|
|
|
|
<div class="w-full text-center lg:w-1/2">
|
|
|
|
<h1 class="text-5xl font-extrabold leading-tight text-gray-800 lg:text-6xl">
|
|
Buat Undangan Digital Praktis Untuk
|
|
|
|
<div class="h-24 flex items-center justify-center">
|
|
<Transition name="fade" mode="out-in">
|
|
<span class="text-blue-600" :key="currentWord">{{ currentWord }}</span>
|
|
</Transition>
|
|
</div>
|
|
|
|
Tanpa Ribet
|
|
</h1>
|
|
|
|
<p class="mt-4 mb-8 text-lg text-gray-600">
|
|
Coba undangan digital PRAKTIS untuk berbagai acara. Pilih template praktis atau premium sesuai kebutuhanmu. Praktis, cepat, dan bisa langsung digunakan.
|
|
</p>
|
|
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
|
<a href="#" class="inline-flex items-center justify-center rounded-lg border-2 border-green-500 bg-white px-8 py-3 font-bold text-gray-800 shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-md">
|
|
<svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M19.2239 4.7761C17.1659 2.7181 14.6599 1.5 11.9999 1.5...Z" fill="#25D366"/>
|
|
<path d="M16.7441 14.968C16.5331 15.538...Z" fill="white"/>
|
|
</svg>
|
|
<span>Hubungi Kami</span>
|
|
</a>
|
|
<a href="#" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-8 py-3 font-bold text-white shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-md hover:bg-blue-700">
|
|
Lihat Templat
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full lg:w-1/2">
|
|
<img src="/logo2.png" alt="Tampilan Undangan Digital di Ponsel" class="mx-auto max-w-full">
|
|
<div class="mt-6 text-center italic text-gray-500">
|
|
<p>"Abadikan momen indahmu dengan undangan digital yang elegan."</p>
|
|
<p>"Satu aplikasi untuk semua momen spesialmu."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
|
|
// Bagian script ini tidak perlu diubah
|
|
const words = ['Semua', 'Pernikahan', 'Khitan', 'Ulang Tahun'];
|
|
const currentWordIndex = ref(0);
|
|
const currentWord = ref(words[0]);
|
|
let intervalId = null;
|
|
|
|
onMounted(() => {
|
|
intervalId = setInterval(() => {
|
|
currentWordIndex.value = (currentWordIndex.value + 1) % words.length;
|
|
currentWord.value = words[currentWordIndex.value];
|
|
}, 1000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(intervalId);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Bagian style ini tidak perlu diubah */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style> |