107 lines
3.8 KiB
Vue
107 lines
3.8 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 pl-15">
|
|
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 pl-15">
|
|
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 pl-15">
|
|
|
|
<a :href="waUrl" target="_blank"
|
|
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-md transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg hover:bg-green-500 hover:text-white">
|
|
|
|
<!-- Ikon WhatsApp -->
|
|
<svg class="mr-2 w-6 h-6 transition-colors duration-300" viewBox="0 0 32 32"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path class="transition-colors duration-300" fill="#25D366"
|
|
d="M16 .4a15.6 15.6 0 0 0-13.6 23.8L.4 31.6l7.6-2a15.7 15.7 0 0 0 8 2.2c8.8 0 15.6-7.2 15.6-15.6S24.8.4 16 .4z" />
|
|
<path class="transition-colors duration-300" fill="#FFF"
|
|
d="M25.2 22.4c-.4 1-2.2 1.8-3 1.8-.8.2-1.8.4-6.2-1.4-5.2-2.2-8.6-7.4-8.8-7.6-.2-.2-2-2.6-2-5s1.2-3.6 1.6-4c.4-.4.8-.6 1.2-.6h.8c.2 0 .6 0 .8.6.4 1 .8 2 .8 2.2.2.4 0 .8-.2 1.2-.2.2-.4.6-.6.8-.2.2-.4.4-.2.8.4.8 1.6 2.6 3.4 4 .2.2 3.6 3 7 .4.4-.2.8-.2 1.2 0 .4.2 2.6 1.2 3 1.4.4.2.6.2.8.4.2.2.2 1 0 2z" />
|
|
</svg>
|
|
|
|
<span>Hubungi Kami</span>
|
|
</a>
|
|
|
|
|
|
<a href="/template" class="inline-flex justify-center items-center
|
|
rounded-xl
|
|
bg-gradient-to-r from-blue-600 to-blue-700
|
|
px-10 py-3
|
|
font-bold text-white
|
|
shadow-lg shadow-blue-500/30
|
|
transition-all duration-300
|
|
hover:scale-110 hover:shadow-2xl hover:shadow-blue-600/50 hover:from-blue-700 hover:to-blue-800">
|
|
Lihat Templat
|
|
</a>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full lg:w-1/2">
|
|
<img src="/iphone.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);
|
|
});
|
|
|
|
const adminNumber = "62895602603247";
|
|
const defaultMessage = "Halo Admin, saya mau tanya tentang undangan digital 🙏";
|
|
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(defaultMessage)}`;
|
|
|
|
|
|
</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> |