71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
<template>
|
|
<section class="bg-[#FFF8EC] py-12 px-4">
|
|
<!-- Judul -->
|
|
<div class="flex items-center justify-center gap-2 mb-8">
|
|
<span class="h-[1px] w-12 bg-yellow-400"></span>
|
|
<span class="text-yellow-600 text-2xl">💌</span>
|
|
<span class="h-[1px] w-12 bg-yellow-400"></span>
|
|
</div>
|
|
<h2 class="text-2xl md:text-3xl font-bold text-yellow-600 text-center mb-10">
|
|
Guest Book
|
|
</h2>
|
|
|
|
<!-- Layout Form + Ucapan -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
|
<!-- Form -->
|
|
<div class="bg-white shadow-lg rounded-2xl p-6">
|
|
<h3 class="text-xl font-semibold text-yellow-600 mb-4">Say Something!</h3>
|
|
|
|
<form class="space-y-4">
|
|
<!-- Nama -->
|
|
<input
|
|
type="text"
|
|
placeholder="Your Name"
|
|
class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none"
|
|
/>
|
|
|
|
<!-- Ucapan -->
|
|
<textarea
|
|
rows="3"
|
|
placeholder="Write your message..."
|
|
class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-yellow-400 focus:outline-none"
|
|
></textarea>
|
|
|
|
<!-- Tombol -->
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
|
|
>
|
|
Send Now!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Daftar Ucapan -->
|
|
<div class="bg-white shadow-lg rounded-2xl p-6">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="text-gray-500">💬</span>
|
|
<span class="text-gray-700 font-medium">04 Messages</span>
|
|
</div>
|
|
|
|
<!-- List Ucapan -->
|
|
<div class="space-y-3">
|
|
<div class="p-3 bg-gray-100 rounded-lg">
|
|
<p class="font-semibold text-gray-800">Tia SMAN6BDG</p>
|
|
<p class="text-sm text-gray-600">Congrats!!</p>
|
|
</div>
|
|
|
|
<div class="p-3 bg-gray-100 rounded-lg">
|
|
<p class="font-semibold text-gray-800">Muthia Rahma</p>
|
|
<p class="text-sm text-gray-600">Happy wedd my sisstaa!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
// nanti tinggal ganti data dummy jadi fetch API
|
|
</script>
|