kategori(fix dropdown)

proyek-frontend/app/components/landing-page/footer.vue

@@ -83,10 +83,11 @@
 
 <style scoped>
 .site-footer {
-  background-color: #f0f2f5; /* Warna abu-abu muda */
+  width: 100%;         
+  background-color: #f0f2f5;
   color: #333;
   padding: 50px 0 20px 0;
-  font-family: 'Inter', sans-serif; /* Menggunakan font yang terlihat modern */
+  font-family: 'Inter', sans-serif;
 }
 
 .container {

proyek-frontend/app/components/template-page/CategorySelection.vue

@@ -1,4 +1,7 @@
 <template>
+  <div class="flex flex-col min-h-screen">
+    <!-- Main Content -->
+    <main class="flex-1">
       <div class="max-w-7xl mx-auto px-4 py-8">
         <!-- Back button -->
         <div class="mb-8">
@@ -15,7 +18,7 @@
 
         <!-- Header -->
         <h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
-      Pilih Template Favoritmu
+          Pilih Kategori Favoritmu
         </h1>
         <p class="mt-2 text-center text-gray-500">
           Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya.
@@ -30,26 +33,31 @@
         <!-- Kategori Grid -->
         <div 
           v-else-if="categories.length > 0" 
-      class="mt-12 flex flex-wrap justify-center gap-6"
+          class="mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 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"
+            class="group cursor-pointer bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300"
           >
+            <!-- Image -->
+            <div class="relative w-full aspect-[4/5] overflow-hidden">
               <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"
+                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/70 via-black/40 to-transparent"></div>
-        <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
-          <h3 class="text-xl font-semibold mb-2">
+              <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>
-          <p class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]">
+            </div>
+
+            <!-- Body -->
+            <div class="p-4">
+              <p class="text-gray-600 text-sm leading-snug line-clamp-3">
                 {{ category.deskripsi }}
               </p>
             </div>
@@ -60,8 +68,18 @@
           Belum ada kategori.
         </div>
 
+        <!-- Header Templates -->
+        <div class="mt-20 text-center">
+          <h2 class="text-2xl md:text-3xl font-bold text-gray-800">
+            Semua Template yang Ada
+          </h2>
+          <p class="mt-2 text-gray-500">
+            Pilih template terbaik sesuai kebutuhan undanganmu.
+          </p>
+        </div>
+
         <!-- Templates Grid -->
-    <div v-if="!isLoadingRandom" class="mt-25">
+        <div v-if="!isLoadingRandom" class="mt-12">
           <!-- Kalau kosong -->
           <div v-if="randomTemplates.length === 0" class="text-center text-gray-500 ">
             Belum ada template tersedia.
@@ -70,12 +88,12 @@
           <!-- Kalau ada -->
           <div 
             v-else 
-        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
+            class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 items-start"
           >
             <div
               v-for="t in randomTemplates"
               :key="t.id"
-          class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"
+              class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 items-start"
             >
               <!-- Image -->
               <img
@@ -136,7 +154,11 @@
           </div>
         </div>
       </div>
-  <LandingPageFooter />
+    </main>
+
+    <!-- Footer -->
+    <LandingPageFooter class="w-full" />
+  </div>
 </template>
 
 <script setup>
@@ -178,7 +200,6 @@ const fetchRandomTemplates = async () => {
   try {
     const res = await $fetch('http://localhost:8000/api/templates/random')
     randomTemplates.value = res
-    console.log('Random templates:', res) // debug
   } catch (err) {
     console.error('Gagal fetch random templates', err)
   } finally {