From 58501037f8d8b314ec8076af07884f55228ddcfe Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Wed, 17 Sep 2025 15:03:50 +0700
Subject: [PATCH] kategori(fix dropdown)

---
 .../app/components/landing-page/footer.vue    |   5 +-
 .../template-page/CategorySelection.vue       | 273 ++++++++++--------
 2 files changed, 150 insertions(+), 128 deletions(-)

diff --git a/proyek-frontend/app/components/landing-page/footer.vue b/proyek-frontend/app/components/landing-page/footer.vue
index b7ad38e..475e516 100644
--- a/proyek-frontend/app/components/landing-page/footer.vue
+++ b/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 {
diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index 173cfdd..eaba9b9 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -1,142 +1,164 @@
 <template>
-  <div class="max-w-7xl mx-auto px-4 py-8">
-    <!-- Back button -->
-    <div class="mb-8">
-      <NuxtLink 
-        to="/" 
-        class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
-        </svg>
-        Kembali ke Beranda
-      </NuxtLink>
-    </div>
-
-    <!-- Header -->
-    <h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
-      Pilih Template Favoritmu
-    </h1>
-    <p class="mt-2 text-center text-gray-500">
-      Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya.
-    </p>
-
-    <!-- Loading / Error kategori -->
-    <div v-if="isLoading" class="mt-12 text-center">Memuat kategori...</div>
-    <div v-else-if="error" class="mt-12 text-center text-red-500">
-      Gagal memuat kategori.
-    </div>
-
-    <!-- Kategori Grid -->
-    <div 
-      v-else-if="categories.length > 0" 
-      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 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">
-            {{ category.nama }}
-          </h3>
-          <p class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]">
-            {{ category.deskripsi }}
-          </p>
+  <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">
+          <NuxtLink 
+            to="/" 
+            class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+            Kembali ke Beranda
+          </NuxtLink>
         </div>
-      </div>
-    </div>
 
-    <div v-else class="mt-12 text-center text-gray-500">
-      Belum ada kategori.
-    </div>
+        <!-- Header -->
+        <h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
+          Pilih Kategori Favoritmu
+        </h1>
+        <p class="mt-2 text-center text-gray-500">
+          Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya.
+        </p>
 
-    <!-- Templates Grid -->
-    <div v-if="!isLoadingRandom" class="mt-25">
-      <!-- Kalau kosong -->
-      <div v-if="randomTemplates.length === 0" class="text-center text-gray-500">
-        Belum ada template tersedia.
-      </div>
+        <!-- Loading / Error kategori -->
+        <div v-if="isLoading" class="mt-12 text-center">Memuat kategori...</div>
+        <div v-else-if="error" class="mt-12 text-center text-red-500">
+          Gagal memuat kategori.
+        </div>
 
-      <!-- Kalau ada -->
-      <div 
-        v-else 
-        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
-      >
-        <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"
+        <!-- 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"
         >
-          <!-- Image -->
-          <img
-            :src="t.foto ? `http://localhost:8000${t.foto}` : '/fallback.png'"
-            :alt="t.nama"
-            class="w-full h-48 object-cover"
-            @error="(e) => e.target.src = '/fallback.png'"
-          />
-
-          <!-- Body -->
-          <div class="p-5 text-center">
-            <h4 class="text-xl font-bold text-gray-800 mb-2">{{ t.nama }}</h4>
-            <p class="text-green-600 font-semibold text-xl mb-4">
-              Rp {{ Number(t.harga).toLocaleString('id-ID') }}
-            </p>
-
-            <!-- Dropdown fitur -->
-            <div v-if="t.fiturs && t.fiturs.length > 0" class="relative mb-4">
-              <button
-                @click="toggleDropdown(t.id)"
-                class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-between items-center"
+          <div 
+            v-for="category in categories" 
+            :key="category.id + '-' + category.foto"
+            @click="onCategoryClick(category)"
+            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-full object-cover transition-transform duration-300 group-hover:scale-105"
               >
-                <span class="mx-auto text-gray-700 font-semibold">FITUR YANG TERSEDIA</span>
-                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                </svg>
-              </button>
-
-              <div v-if="openDropdownId === t.id">
-                <ul class="mt-4 space-y-2 text-gray-600 text-left">
-                  <li v-for="f in t.fiturs" :key="f.id" class="flex items-center">
-                    <svg class="h-4 w-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-                    </svg>
-                    {{ f.deskripsi }}
-                  </li>
-                </ul>
-              </div>
+              <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>
 
-            <!-- Buttons -->
-            <div class="flex items-center gap-3 mt-6">
-              <button
-                class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors"
-                @click="onTemplateClick(t)"
-              >
-                Preview
-              </button>
-              <NuxtLink
-                :to="`/form/${t.kategori?.nama?.toLowerCase().replace(/ /g, '-')}` + `?template_id=${t.id}`"
-                class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center"
-              >
-                Order
-              </NuxtLink>
+            <!-- Body -->
+            <div class="p-4">
+              <p class="text-gray-600 text-sm leading-snug line-clamp-3">
+                {{ category.deskripsi }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="mt-12 text-center text-gray-500">
+          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-12">
+          <!-- Kalau kosong -->
+          <div v-if="randomTemplates.length === 0" class="text-center text-gray-500 ">
+            Belum ada template tersedia.
+          </div>
+
+          <!-- Kalau ada -->
+          <div 
+            v-else 
+            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 items-start"
+            >
+              <!-- Image -->
+              <img
+                :src="t.foto ? `http://localhost:8000${t.foto}` : '/fallback.png'"
+                :alt="t.nama"
+                class="w-full h-48 object-cover"
+                @error="(e) => e.target.src = '/fallback.png'"
+              />
+
+              <!-- Body -->
+              <div class="p-5 text-center">
+                <h4 class="text-xl font-bold text-gray-800 mb-2">{{ t.nama }}</h4>
+                <p class="text-green-600 font-semibold text-xl mb-4">
+                  Rp {{ Number(t.harga).toLocaleString('id-ID') }}
+                </p>
+
+                <!-- Dropdown fitur -->
+                <div v-if="t.fiturs && t.fiturs.length > 0" class="relative mb-4">
+                  <button
+                    @click="toggleDropdown(t.id)"
+                    class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-between items-center"
+                  >
+                    <span class="mx-auto text-gray-700 font-semibold">FITUR YANG TERSEDIA</span>
+                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                  </button>
+
+                  <div v-if="openDropdownId === t.id">
+                    <ul class="mt-4 space-y-2 text-gray-600 text-left">
+                      <li v-for="f in t.fiturs" :key="f.id" class="flex items-center">
+                        <svg class="h-4 w-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                        </svg>
+                        {{ f.deskripsi }}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <!-- Buttons -->
+                <div class="flex items-center gap-3 mt-6">
+                  <button
+                    class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors"
+                    @click="onTemplateClick(t)"
+                  >
+                    Preview
+                  </button>
+                  <NuxtLink
+                    :to="`/form/${t.kategori?.nama?.toLowerCase().replace(/ /g, '-')}` + `?template_id=${t.id}`"
+                    class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center"
+                  >
+                    Order
+                  </NuxtLink>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </main>
+
+    <!-- Footer -->
+    <LandingPageFooter class="w-full" />
   </div>
-  <LandingPageFooter />
 </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 {