69 lines
2.8 KiB
Vue
69 lines
2.8 KiB
Vue
<template>
|
|
<section id="testimoni" class="bg-slate-50 py-20 px-5">
|
|
<div class="container mx-auto text-center">
|
|
<h2 class="text-4xl font-extrabold text-gray-800 mb-2">
|
|
Apa Kata Mereka?
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mb-16">
|
|
Kisah sukses dari para pengguna yang telah mempercayakan momen spesialnya kepada kami.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
<div
|
|
v-for="testimonial in testimonials"
|
|
:key="testimonial.id"
|
|
class="flex flex-col rounded-xl bg-white p-8 text-left shadow-lg transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl"
|
|
>
|
|
<div class="mb-4 flex items-center">
|
|
<svg v-for="n in 5" :key="n" class="h-5 w-5" :class="n <= testimonial.rating ? 'text-yellow-400' : 'text-gray-300'" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
|
</div>
|
|
|
|
<p class="mb-6 flex-grow text-gray-600 italic">"{{ testimonial.text }}"</p>
|
|
|
|
<div class="flex items-center">
|
|
<img class="h-12 w-12 rounded-full object-cover" :src="testimonial.avatar" :alt="testimonial.name">
|
|
<div class="ml-4">
|
|
<h4 class="font-bold text-gray-800">{{ testimonial.name }}</h4>
|
|
<p class="text-sm text-gray-500">{{ testimonial.role }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const testimonials = ref([
|
|
{
|
|
id: 1,
|
|
name: 'Rizky & Anisa',
|
|
role: 'Pengantin Baru',
|
|
avatar: 'https://i.pravatar.cc/100?u=rizky',
|
|
rating: 5,
|
|
text: 'Desainnya elegan dan modern! Proses pembuatannya juga cepat banget. Semua tamu memuji undangannya. Terima kasih Abbauf Tech!'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Budi Santoso',
|
|
role: 'Event Organizer',
|
|
avatar: 'https://i.pravatar.cc/100?u=budi',
|
|
rating: 5,
|
|
text: 'Sebagai EO, kami butuh platform yang efisien dan hasilnya premium. Abbauf Tech menjawab semua kebutuhan itu. Klien kami sangat puas.'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Citra Lestari',
|
|
role: 'Ulang Tahun Anak',
|
|
avatar: 'https://i.pravatar.cc/100?u=citra',
|
|
rating: 4,
|
|
text: 'Fitur RSVP dan pengingat sangat membantu. Tema-tema ulang tahunnya juga lucu dan bisa dikustomisasi. Sangat direkomendasikan!'
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Kosong, semua diatur oleh Tailwind */
|
|
</style> |