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

[Update Kategori]

Browse Source
This commit is contained in:
Arief Dwi Wicaksono 2025-09-16 13:58:01 +07:00
parent 0f75a7afa5
commit b1f29db598
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,13 +30,13 @@
<!-- Kategori Grid -->
<div
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
v-for="category in categories"
:key="category.id + '-' + category.foto"
@click="onCategoryClick(category)"
class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-full"
class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
>
<!-- Foto portrait -->
<img
@ -50,9 +50,13 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
<!-- Teks kategori & deskripsi -->
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<h3 class="text-xl font-semibold">{{ category.nama }}</h3>
<p class="text-sm mt-1 break-words leading-snug">
<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 }}
</h3>
<p
class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]"
>
{{ category.deskripsi }}
</p>
</div>