From 1814b003902fcf2181430791e856c03703d4e68b Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Thu, 11 Sep 2025 15:04:49 +0700
Subject: [PATCH] fix template & kategori

---
 .../app/components/landing-page/hero.vue      |  3 +-
 .../components/template-page/TemplateGrid.vue | 64 ++++++++++++-------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/proyek-frontend/app/components/landing-page/hero.vue b/proyek-frontend/app/components/landing-page/hero.vue
index a13c963..ea1a9d1 100644
--- a/proyek-frontend/app/components/landing-page/hero.vue
+++ b/proyek-frontend/app/components/landing-page/hero.vue
@@ -27,9 +27,10 @@
             </svg>
             <span>Hubungi Kami</span>
           </a>
-          <a href="#" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-8 py-3 font-bold text-white shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-md hover:bg-blue-700">
+          <a href="/template" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-8 py-3 font-bold text-white shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-md hover:bg-blue-700">
             Lihat Templat
           </a>
+          
         </div>
       </div>
 
diff --git a/proyek-frontend/app/components/template-page/TemplateGrid.vue b/proyek-frontend/app/components/template-page/TemplateGrid.vue
index c04192a..33a8613 100644
--- a/proyek-frontend/app/components/template-page/TemplateGrid.vue
+++ b/proyek-frontend/app/components/template-page/TemplateGrid.vue
@@ -10,44 +10,45 @@
       </h1>
     </div>
 
-    <div v-if="isLoading" class="text-center py-10">
-      <p>Memuat template...</p>
-    </div>
-    <div v-else-if="error" class="text-center py-10 text-red-600">
-      <p>Gagal memuat template. Silakan coba lagi.</p>
-    </div>
+    <div v-if="isLoading" class="text-center py-10"><p>Memuat template...</p></div>
+    <div v-else-if="error" class="text-center py-10 text-red-600"><p>Gagal memuat template.</p></div>
     
     <div v-else-if="templates && templates.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
       
-      <div v-for="tpl in templates" :key="tpl.id" class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col">
-        <img :src="tpl.foto" :alt="tpl.nama" class="w-full h-48 object-cover" />
+      <div v-for="tpl in templates" :key="tpl.id" class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300">
+        <img :src="`http://localhost:8000${tpl.foto}`" alt="Template">
+
         
-        <div class="p-5 flex flex-col flex-grow">
-          <h4 class="text-lg font-bold text-gray-800 truncate mb-1">{{ tpl.nama }}</h4>
-          
+        <div class="p-5 text-center">
+          <h4 class="text-xl font-bold text-gray-800 mb-2">{{ tpl.nama }}</h4>
           <p class="text-green-600 font-semibold text-xl mb-4">
             Rp {{ tpl.harga.toLocaleString('id-ID') }}
           </p>
 
-          <div v-if="tpl.fitur" class="mb-auto text-center">
-    <span class="inline-block bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">
-      {{ tpl.fitur.deskripsi }}
-    </span>
-  </div>
+          <div v-if="tpl.fitur && tpl.fitur.deskripsi" class="relative mb-4">
+            <button @click="toggleDropdown(tpl.id)" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-between items-center text-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 === tpl.id">
+              <ul class="mt-4 space-y-2 text-gray-600">
+                <li v-for="(feature, index) in tpl.fitur.deskripsi.split(',')" :key="index">
+                  {{ feature.trim() }}
+                </li>
+              </ul>
+            </div>
+          </div>
           
           <div class="mt-6">
             <div class="flex items-center gap-3">
-              <button class="w-full bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors">
-                Preview
-              </button>
-              <button class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
-                Order
-              </button>
+              <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">Preview</button>
+              <button class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">Order</button>
             </div>
           </div>
         </div>
       </div>
-      </div>
+    </div>
     
     <div v-else class="text-center py-10 text-gray-500">
       <p>Belum ada template untuk kategori ini.</p>
@@ -56,7 +57,22 @@
 </template>
 
 <script setup>
-// Bagian <script> Anda sudah benar, tidak perlu diubah.
+import { ref } from 'vue';
+
+// State untuk melacak ID dropdown yang sedang terbuka
+const openDropdownId = ref(null);
+
+// Fungsi untuk membuka/menutup dropdown
+const toggleDropdown = (templateId) => {
+  if (openDropdownId.value === templateId) {
+    // Jika dropdown yang sama diklik lagi, tutup
+    openDropdownId.value = null;
+  } else {
+    // Jika dropdown lain diklik, buka yang baru
+    openDropdownId.value = templateId;
+  }
+};
+
 const props = defineProps({
   category: { type: String, required: true },
   id_category: { type: Number, required: true },