Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Magang-2025:261ad3e67305564ebfa85b22d69fbcf1702dc8bc
Branches Tags
Magang-2025:main
Magang-2025:baru
Magang-2025:production
...
compare: Magang-2025:53719758041fd8d66a6deba2e9fe6355ad26a92a
Branches Tags
Magang-2025:baru
Magang-2025:main
Magang-2025:production

2 Commits
261ad3e673 ... 5371975804

Author SHA1 Message Date
MuzakkiABBAUF
5371975804 Merge branch 'main' of https://git.abbauf.com/Magang-2025/Undangan 2025-09-18 10:15:42 +07:00
MuzakkiABBAUF
af5536d212 fix desain 2025-09-18 10:14:44 +07:00
1 changed files with 30 additions and 34 deletions
Show Stats Expand all files Collapse all files

20
proyek-frontend/app/components/template-page/CategorySelection.vue
View File

@ -33,31 +33,26 @@
<!-- Kategori Grid --> <!-- Kategori Grid -->
<div <div
v-else-if="categories.length > 0" v-else-if="categories.length > 0"
class="mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" class="mt-12 flex flex-wrap justify-center gap-6"
> >
<div <div
v-for="category in categories" v-for="category in categories"
:key="category.id + '-' + category.foto" :key="category.id + '-' + category.foto"
@click="onCategoryClick(category)" @click="onCategoryClick(category)"
class="group cursor-pointer bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300" class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
> >
<!-- Image -->
<div class="relative w-full aspect-[4/5] overflow-hidden">
<img <img
v-if="category.foto" v-if="category.foto"
:src="`http://localhost:8000${category.foto}`" :src="`http://localhost:8000${category.foto}`"
:alt="category.nama" :alt="category.nama"
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
> >
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
<h3 class="absolute bottom-3 left-3 text-xl font-semibold text-white drop-shadow-lg"> <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
<h3 class="text-xl font-semibold mb-2">
{{ category.nama }} {{ category.nama }}
</h3> </h3>
</div> <p class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]">
<!-- Body -->
<div class="p-4">
<p class="text-gray-600 text-sm leading-snug line-clamp-3">
{{ category.deskripsi }} {{ category.deskripsi }}
</p> </p>
</div> </div>
@ -68,6 +63,7 @@
Belum ada kategori. Belum ada kategori.
</div> </div>
<!-- Header Templates --> <!-- Header Templates -->
<div class="mt-20 text-center"> <div class="mt-20 text-center">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800"> <h2 class="text-2xl md:text-3xl font-bold text-gray-800">