59 lines
2.0 KiB
Vue
59 lines
2.0 KiB
Vue
<template>
|
|
<section class="bg-[#FFF8EC] py-12 text-center">
|
|
<!-- Title -->
|
|
<div class="mb-8">
|
|
<div class="flex items-center justify-center gap-2 mb-2">
|
|
|
|
<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-700">Gallery</h2>
|
|
</div>
|
|
|
|
<!-- Gallery Grid -->
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 max-w-4xl mx-auto px-4">
|
|
<img v-for="(img, index) in images" :key="index" :src="img" alt="gallery"
|
|
class="rounded-lg object-cover w-full h-full shadow-md" :class="getGridClass(index)" />
|
|
</div>
|
|
|
|
<!-- Quote -->
|
|
<div class="max-w-3xl mx-auto mt-8 px-6">
|
|
<p class="text-gray-600 italic">
|
|
"And among His verses is that He has created for you wives of your own kind,
|
|
so that you may feel comfortable in them, and He has made between you mawadah and mercy.
|
|
Verily in that are signs for the people who think"
|
|
</p>
|
|
<p class="mt-4 text-gray-700 font-semibold">- AR-RUM 21 -</p>
|
|
</div>
|
|
|
|
<!-- Bottom Decoration -->
|
|
<div class="flex items-center justify-center gap-2 mt-6">
|
|
<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>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const images = [
|
|
"/logo1.png", // kiri atas tinggi
|
|
"/logo2.png", // atas tengah
|
|
"/pria.jpg", // atas kanan
|
|
"/wanita.jpg", // bawah kiri
|
|
"/iphone.png", // bawah tengah lebar
|
|
"/templat.jpg" // bawah kanan
|
|
]
|
|
|
|
// kasih ukuran custom seperti masonry
|
|
const getGridClass = (index) => {
|
|
switch (index) {
|
|
case 0: return "row-span-2 h-[400px]" // tinggi besar
|
|
case 4: return "col-span-2 h-[250px]" // lebar besar
|
|
case 3: return "col-span-2 h-[250px]" // melebar
|
|
default: return "h-[200px]"
|
|
}
|
|
}
|
|
</script>
|