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 --> <!-- 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 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 --> <!-- Foto portrait -->
<img <img
@ -50,9 +50,13 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
<!-- Teks kategori & deskripsi --> <!-- Teks kategori & deskripsi -->
<div class="absolute bottom-0 left-0 right-0 p-4 text-white"> <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
<h3 class="text-xl font-semibold">{{ category.nama }}</h3> <h3 class="text-xl font-semibold mb-2">
<p class="text-sm mt-1 break-words leading-snug"> {{ category.nama }}
</h3>
<p
class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]"
>
{{ category.deskripsi }} {{ category.deskripsi }}
</p> </p>
</div> </div>