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

fix desain

Browse Source
This commit is contained in:
Muzakki Parsaoran Siregar 2025-09-18 10:14:44 +07:00
parent b3f5e9ad47
commit af5536d212
1 changed files with 30 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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