72 lines
4.6 KiB
Vue
72 lines
4.6 KiB
Vue
<template>
|
|
<section class="bg-white py-20 px-5 text-center">
|
|
<div class="container mx-auto">
|
|
<h2 class="text-4xl font-extrabold text-gray-800 mb-2">
|
|
Keistimewaan Kami
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mb-16">
|
|
"Membuat undangan digitalmu terlihat lebih hidup dan istimewa."
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
|
|
|
|
<div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
|
|
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
|
|
</div>
|
|
<h3 class="mb-4 text-xl font-bold text-gray-800">
|
|
Layanan Customer Care Setiap Hari
|
|
</h3>
|
|
<p class="text-base text-gray-600">
|
|
Tim admin siap membantu dari jam 07:00 hingga 20:00 WIB tanpa hari libur.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
|
|
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-2.6-2.6a1 1 0 0 0-1.4 0l-1.6 1.6a1 1 0 0 0 0 1.4l3.77 3.77a6 6 0 0 1-7.94 7.94l-2.6-2.6a1 1 0 0 0-1.4 0L.3 21.7a1 1 0 0 0 0 1.4l.7.7a1 1 0 0 0 1.4 0l2.6-2.6a6 6 0 0 1 7.94-7.94l3.77-3.77z"></path><line x1="12" y1="12" x2="16" y2="16"></line></svg>
|
|
</div>
|
|
<h3 class="mb-4 text-xl font-bold text-gray-800">
|
|
Desain Personal Sesuai Gaya Anda
|
|
</h3>
|
|
<p class="text-base text-gray-600">
|
|
Pilih dari ratusan tema menarik dan ubah warna, font, serta tata letaknya dengan mudah.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
|
|
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
|
</div>
|
|
<h3 class="mb-4 text-xl font-bold text-gray-800">
|
|
Undangan Fleksibel
|
|
</h3>
|
|
<p class="text-base text-gray-600">
|
|
Nikmati kemudahan membagikan undangan dengan jumlah tamu sesuai kebutuhan Anda.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
|
|
<div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
|
|
</div>
|
|
<h3 class="mb-4 text-xl font-bold text-gray-800">
|
|
Tema Eksklusif & Bisa Dikustomisasi
|
|
</h3>
|
|
<p class="text-base text-gray-600">
|
|
Pilih ratusan desain menarik, ubah warna, font, hingga tata letak. Buat undangan yang benar-benar mencerminkan gayamu.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Tidak ada script yang dibutuhkan untuk bagian ini
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Kosong! Semua styling sudah diatur oleh Tailwind di dalam template. */
|
|
</style> |