From ddea7e321f4a5f2b9ad2a0f353d85afb3694697f Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:23:46 +0700
Subject: [PATCH] fix

---
 .../app/components/landing-page/footer.vue    | 207 ++++++++++++++++++
 .../app/components/landing-page/header.vue    |   4 +-
 .../app/components/landing-page/hero.vue      | 155 +++++--------
 .../landing-page/privilegesection.vue         |  72 ++++++
 .../landing-page/testimonisection.vue         |  69 ++++++
 proyek-frontend/app/pages/index.vue           |  29 ++-
 6 files changed, 427 insertions(+), 109 deletions(-)
 create mode 100644 proyek-frontend/app/components/landing-page/footer.vue
 create mode 100644 proyek-frontend/app/components/landing-page/testimonisection.vue

diff --git a/proyek-frontend/app/components/landing-page/footer.vue b/proyek-frontend/app/components/landing-page/footer.vue
new file mode 100644
index 0000000..b7ad38e
--- /dev/null
+++ b/proyek-frontend/app/components/landing-page/footer.vue
@@ -0,0 +1,207 @@
+<template>
+  <footer class="site-footer">
+    <div class="container footer-content">
+      <div class="footer-brand">
+        <img src="/ABBAUF.png" alt="Abbauf Tech Logo" class="footer-logo">
+      </div>
+
+      <div class="footer-column">
+        <h4>Layanan</h4>
+        <ul class="footer-links">
+          <li><a href="#">Template Undangan Pernikahan</a></li>
+          <li><a href="#">Template Undangan Khitan</a></li>
+          <li><a href="#">Template Undangan Ulang Tahun</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-column">
+        <h4>Ikuti Kami</h4>
+        <ul class="footer-contact-list">
+          <li>
+            <a href="#" class="social-link">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v2.385z"/></svg>
+              <span>ABBAUF TECH</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" class="social-link">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.584-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.584-.012-4.85-.07c-3.252-.148-4.771-1.691-4.919-4.919-.058-1.265-.069-1.645-.069-4.85s.011-3.584.069-4.85c.149-3.225 1.664-4.771 4.919-4.919 1.266-.057 1.644-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.359 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.359-.2 6.78-2.618 6.98-6.98.058-1.281.072-1.689.072-4.948s-.014-3.667-.072-4.947c-.2-4.359-2.618-6.78-6.98-6.98-1.281-.058-1.689-.072-4.948-.072zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.441 1.441 1.441 1.441-.645 1.441-1.441-.645-1.44-1.441-1.44z"/></svg>
+              <span>@abbauf_tech</span>
+            </a>
+          </li>
+          <li>
+            <a href="#" class="social-link">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg>
+              <span>ABBAUF TECH</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="footer-column footer-contact">
+        <h4>Kontak Kami</h4>
+        <ul class="footer-contact-list">
+          <li>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
+            <a href="mailto:contact@abbauf.com">contact@abbauf.com</a>
+          </li>
+          <li>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-3.473-5.712-5.713.041-.09 1.011-2.064 1.011-2.064l-6.795-3.521-2.918 2.918c-1.603 1.603-1.425 4.933 1.011 7.37 4.301 4.301 9.962 3.593 12.301.954l2.688-2.355-2.356-2.688z"/></svg>
+            <a href="tel:02127617679">(021) 2761-7679</a>
+          </li>
+          <li>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.894 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01s-.52.074-.792.372c-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
+            <a href="#">+62 878-7711-7847</a>
+          </li>
+          <li>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
+            <div>
+              <strong>Alamat Kantor Pusat</strong>
+              <p>APL Tower Central Park Lantai 19 Unit T7, Jalan Letjen S. Parman, Kavling 28, RT. 012/006, Kel. Tanjung Duren, Kec. Grogol Petamburan, Jakarta Barat, DKI Jakarta 11470, ID</p>
+            </div>
+          </li>
+           <li>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
+            <div>
+              <strong>Alamat Studio</strong>
+              <p>Jl. Adhi Karya No. 57 RT 003 RW 015, Kel. Depok, Kec. Pancoran Mas, Depok 16431</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <p>&copy; 2025 ABBAUF TECH - Hak cipta dilindungi undang-undang</p>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+// Tidak ada script yang dibutuhkan untuk footer statis ini
+</script>
+
+<style scoped>
+.site-footer {
+  background-color: #f0f2f5; /* Warna abu-abu muda */
+  color: #333;
+  padding: 50px 0 20px 0;
+  font-family: 'Inter', sans-serif; /* Menggunakan font yang terlihat modern */
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1.5fr 1.5fr 2.5fr; /* Mengatur lebar kolom */
+  gap: 40px;
+  padding-bottom: 30px;
+  border-bottom: 1px solid #d9dce1;
+}
+
+.footer-logo {
+  max-width: 150px;
+}
+
+.footer-column h4 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #111;
+}
+
+.footer-links, .footer-contact-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: 12px;
+}
+
+.footer-links a, .social-link {
+  text-decoration: none;
+  color: #555;
+  transition: color 0.3s ease;
+}
+
+.footer-links a:hover, .social-link:hover {
+  color: #0d6efd; /* Biru Primer */
+}
+
+.footer-contact-list li {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 18px;
+  gap: 15px;
+  color: #555;
+}
+
+.footer-contact-list svg {
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.footer-contact-list a {
+  text-decoration: none;
+  color: #555;
+}
+.footer-contact-list a:hover {
+  text-decoration: underline;
+}
+
+.footer-contact-list strong {
+  display: block;
+  color: #111;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.footer-contact-list p {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.social-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 20px;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+/* Penyesuaian untuk layar kecil (Mobile) */
+@media (max-width: 992px) {
+  .footer-content {
+    grid-template-columns: 1fr 1fr; /* 2 kolom di tablet */
+  }
+}
+
+@media (max-width: 768px) {
+  .footer-content {
+    grid-template-columns: 1fr; /* 1 kolom di mobile */
+    text-align: center;
+  }
+  .footer-brand {
+    margin-bottom: 20px;
+  }
+  .footer-logo {
+    margin: 0 auto; /* Logo di tengah */
+  }
+  .footer-contact-list li {
+    align-items: center;
+    text-align: left;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/landing-page/header.vue b/proyek-frontend/app/components/landing-page/header.vue
index 942b049..5fc5812 100644
--- a/proyek-frontend/app/components/landing-page/header.vue
+++ b/proyek-frontend/app/components/landing-page/header.vue
@@ -22,8 +22,8 @@ const navLinks = ref([
   { name: 'Tentang Kami', path: '#tentang-kami' },
   { name: 'Templat', path: '#template' },
   { name: 'Panduan', path: '#cara' },
-  { name: 'Keistimewaan', path: '#' },
-  { name: 'Testimoni', path: '#' },
+  { name: 'Keistimewaan', path: '#keistimewaan' },
+  { name: 'Testimoni', path: '#testi' },
 ]);
 </script>
 
diff --git a/proyek-frontend/app/components/landing-page/hero.vue b/proyek-frontend/app/components/landing-page/hero.vue
index 06664a3..b0c441d 100644
--- a/proyek-frontend/app/components/landing-page/hero.vue
+++ b/proyek-frontend/app/components/landing-page/hero.vue
@@ -1,30 +1,41 @@
 <template>
-  <section id="beranda" class="hero-section">
-    <div class="container hero-layout">
-      <div class="hero-text">
-        <h1>
-          Buat Undangan Digital Praktis
-          <span class="highlight">Untuk Semua</span>
+  <section id="beranda" class="py-20 px-5">
+    <div class="container mx-auto flex flex-col items-center gap-12 lg:flex-row">
+      
+      <div class="w-full text-center lg:w-1/2">
+        
+        <h1 class="text-5xl font-extrabold leading-tight text-gray-800 lg:text-6xl">
+          Buat Undangan Digital Praktis Untuk
+          
+          <div class="h-24 flex items-center justify-center">
+            <Transition name="fade" mode="out-in">
+              <span class="text-blue-600" :key="currentWord">{{ currentWord }}</span>
+            </Transition>
+          </div>
+
           Tanpa Ribet
         </h1>
-        <p>
+        
+        <p class="mt-4 mb-8 text-lg text-gray-600">
           Coba undangan digital PRAKTIS untuk berbagai acara. Pilih template praktis atau premium sesuai kebutuhanmu. Praktis, cepat, dan bisa langsung digunakan.
         </p>
-        <div class="cta-buttons">
-          <a href="#" class="btn btn-whatsapp">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M19.2239 4.7761C17.1659 2.7181 14.6599 1.5 11.9999 1.5C5.9249 1.5 0.9999 6.425 0.9999 12.5C0.9999 14.717 1.6219 16.814 2.7669 18.57L1.4179 22.582L5.5949 21.274C7.2729 22.3 9.2279 22.9 11.2999 22.9H11.9999C18.0749 22.9 22.9999 17.975 22.9999 11.9C22.9999 9.24 21.7819 6.734 19.7239 4.676L19.2239 4.7761Z" fill="#25D366"/>
-              <path d="M16.7441 14.968C16.5331 15.538 15.4211 16.039 14.8811 16.191C14.3411 16.342 13.6261 16.355 13.0611 16.151C12.4961 15.947 11.7581 15.688 10.1581 14.18C8.2541 12.378 7.0981 10.217 6.8481 9.689C6.5991 9.16 5.8611 7.78 5.8611 6.94C5.8611 6.103 6.3051 5.689 6.5541 5.452C6.8031 5.215 7.2021 5.122 7.5121 5.122C7.6561 5.122 7.7951 5.132 7.9251 5.143C8.2851 5.179 8.4711 5.196 8.6511 5.568C8.8611 6.004 9.4211 7.42 9.4911 7.572C9.5611 7.724 9.6111 7.928 9.5111 8.132C9.4111 8.336 9.3521 8.428 9.2111 8.58C9.0711 8.732 8.9411 8.855 8.7911 9.006C8.6711 9.129 8.5511 9.253 8.6811 9.48C8.8111 9.707 9.3011 10.512 10.1211 11.332C11.1611 12.372 11.9611 12.75 12.3011 12.911C12.6411 13.072 12.9861 13.03 13.2361 12.78C13.5611 12.455 13.8861 12.01 14.3061 11.59C14.5411 11.355 14.8361 11.29 15.1361 11.39C15.4361 11.49 16.6361 12.09 16.9961 12.26C17.3561 12.43 17.5761 12.53 17.6561 12.65C17.7361 12.77 17.7411 13.06 17.7111 13.16L17.7161 14.008C17.7161 14.008 17.7111 14.003 17.6811 14.038C17.5911 14.128 17.3011 14.24 16.9511 14.39L16.7441 14.968Z" fill="white"/>
+        <div class="flex flex-col justify-center gap-4 sm:flex-row">
+          <a href="#" class="inline-flex items-center justify-center rounded-lg border-2 border-green-500 bg-white px-8 py-3 font-bold text-gray-800 shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-md">
+            <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M19.2239 4.7761C17.1659 2.7181 14.6599 1.5 11.9999 1.5...Z" fill="#25D366"/>
+              <path d="M16.7441 14.968C16.5331 15.538...Z" fill="white"/>
             </svg>
             <span>Hubungi Kami</span>
           </a>
-          <a href="#" class="btn btn-primary">Lihat Templat</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">
+            Lihat Templat
+          </a>
         </div>
       </div>
 
-      <div class="hero-image-wrapper">
-        <img src="/logo2.png" alt="Tampilan Undangan Digital di Ponsel">
-        <div class="testimonial">
+      <div class="w-full lg:w-1/2">
+        <img src="/logo2.png" alt="Tampilan Undangan Digital di Ponsel" class="mx-auto max-w-full">
+        <div class="mt-6 text-center italic text-gray-500">
           <p>"Abadikan momen indahmu dengan undangan digital yang elegan."</p>
           <p>"Satu aplikasi untuk semua momen spesialmu."</p>
         </div>
@@ -34,97 +45,35 @@
 </template>
 
 <script setup>
-// Script bisa dikosongkan jika tidak ada logika dinamis
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// Bagian script ini tidak perlu diubah
+const words = ['Semua', 'Pernikahan', 'Khitan', 'Ulang Tahun'];
+const currentWordIndex = ref(0);
+const currentWord = ref(words[0]);
+let intervalId = null;
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    currentWordIndex.value = (currentWordIndex.value + 1) % words.length;
+    currentWord.value = words[currentWordIndex.value];
+  }, 1000); 
+});
+
+onUnmounted(() => {
+  clearInterval(intervalId);
+});
 </script>
 
 <style scoped>
-.hero-section {
-  padding: 60px 0;
+/* Bagian style ini tidak perlu diubah */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
 }
 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.hero-layout {
-  display: flex;
-  align-items: center;
-  gap: 50px;
-}
-
-.hero-text {
-  flex: 1; /* Mengambil ruang yang tersedia */
-}
-
-.hero-text h1 {
-  font-size: 3.5rem; /* Ukuran font besar */
-  font-weight: 800;
-  line-height: 1.2;
-  margin-bottom: 20px;
-}
-
-.hero-text h1 .highlight {
-  color: #0d6efd; /* Warna biru untuk "Untuk Semua" */
-}
-
-.hero-text p {
-  font-size: 1.1rem;
-  color: #555;
-  margin-bottom: 30px;
-}
-
-.cta-buttons {
-  display: flex;
-  gap: 15px;
-}
-
-.btn {
-  padding: 15px 30px;
-  border-radius: 8px;
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 1rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.btn:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-}
-
-.btn-whatsapp {
-  background-color: #fff;
-  border: 2px solid #25D366; /* Warna hijau WhatsApp */
-  color: #222;
-}
-.btn-whatsapp svg {
-  margin-right: 8px;
-}
-
-.btn-primary {
-  background-color: #0d6efd; /* Warna biru */
-  color: #fff;
-  border: 2px solid #0d6efd;
-}
-
-.hero-image-wrapper {
-  flex: 1;
-  text-align: center;
-}
-
-.hero-image-wrapper img {
-  max-width: 100%;
-  height: auto;
-}
-
-.testimonial {
-  margin-top: 20px;
-  font-style: italic;
-  color: #444;
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
 </style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/landing-page/privilegesection.vue b/proyek-frontend/app/components/landing-page/privilegesection.vue
index e69de29..bc53c39 100644
--- a/proyek-frontend/app/components/landing-page/privilegesection.vue
+++ b/proyek-frontend/app/components/landing-page/privilegesection.vue
@@ -0,0 +1,72 @@
+<template>
+  <section class="bg-white py-20 px-5 text-center">
+    <div class="container mx-auto">
+      <h2 class="text-4xl font-extrabold text-gray-800 mb-2">
+        Keistimewaan Kami
+      </h2>
+      <p class="text-lg text-gray-600 mb-16">
+        "Membuat undangan digitalmu terlihat lebih hidup dan istimewa."
+      </p>
+
+      <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+        
+        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
+          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
+          </div>
+          <h3 class="mb-4 text-xl font-bold text-gray-800">
+            Layanan Customer Care Setiap Hari
+          </h3>
+          <p class="text-base text-gray-600">
+            Tim admin siap membantu dari jam 07:00 hingga 20:00 WIB tanpa hari libur.
+          </p>
+        </div>
+
+        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
+          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-2.6-2.6a1 1 0 0 0-1.4 0l-1.6 1.6a1 1 0 0 0 0 1.4l3.77 3.77a6 6 0 0 1-7.94 7.94l-2.6-2.6a1 1 0 0 0-1.4 0L.3 21.7a1 1 0 0 0 0 1.4l.7.7a1 1 0 0 0 1.4 0l2.6-2.6a6 6 0 0 1 7.94-7.94l3.77-3.77z"></path><line x1="12" y1="12" x2="16" y2="16"></line></svg>
+          </div>
+          <h3 class="mb-4 text-xl font-bold text-gray-800">
+            Desain Personal Sesuai Gaya Anda
+          </h3>
+          <p class="text-base text-gray-600">
+            Pilih dari ratusan tema menarik dan ubah warna, font, serta tata letaknya dengan mudah.
+          </p>
+        </div>
+
+        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
+          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
+             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+          </div>
+          <h3 class="mb-4 text-xl font-bold text-gray-800">
+            Undangan Fleksibel
+          </h3>
+          <p class="text-base text-gray-600">
+            Nikmati kemudahan membagikan undangan dengan jumlah tamu sesuai kebutuhan Anda.
+          </p>
+        </div>
+        
+        <div class="flex flex-col items-center rounded-xl border border-gray-200 bg-white p-8 text-center shadow-md transition-transform duration-300 hover:-translate-y-2 hover:shadow-xl">
+          <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
+          </div>
+          <h3 class="mb-4 text-xl font-bold text-gray-800">
+            Tema Eksklusif & Bisa Dikustomisasi
+          </h3>
+          <p class="text-base text-gray-600">
+            Pilih ratusan desain menarik, ubah warna, font, hingga tata letak. Buat undangan yang benar-benar mencerminkan gayamu.
+          </p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+// Tidak ada script yang dibutuhkan untuk bagian ini
+</script>
+
+<style scoped>
+/* Kosong! Semua styling sudah diatur oleh Tailwind di dalam template. */
+</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/landing-page/testimonisection.vue b/proyek-frontend/app/components/landing-page/testimonisection.vue
new file mode 100644
index 0000000..965b21b
--- /dev/null
+++ b/proyek-frontend/app/components/landing-page/testimonisection.vue
@@ -0,0 +1,69 @@
+<template>
+  <section id="testimoni" class="bg-slate-50 py-20 px-5">
+    <div class="container mx-auto text-center">
+      <h2 class="text-4xl font-extrabold text-gray-800 mb-2">
+        Apa Kata Mereka?
+      </h2>
+      <p class="text-lg text-gray-600 mb-16">
+        Kisah sukses dari para pengguna yang telah mempercayakan momen spesialnya kepada kami.
+      </p>
+
+      <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        <div 
+          v-for="testimonial in testimonials" 
+          :key="testimonial.id"
+          class="flex flex-col rounded-xl bg-white p-8 text-left shadow-lg transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl"
+        >
+          <div class="mb-4 flex items-center">
+            <svg v-for="n in 5" :key="n" class="h-5 w-5" :class="n <= testimonial.rating ? 'text-yellow-400' : 'text-gray-300'" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
+          </div>
+
+          <p class="mb-6 flex-grow text-gray-600 italic">"{{ testimonial.text }}"</p>
+          
+          <div class="flex items-center">
+            <img class="h-12 w-12 rounded-full object-cover" :src="testimonial.avatar" :alt="testimonial.name">
+            <div class="ml-4">
+              <h4 class="font-bold text-gray-800">{{ testimonial.name }}</h4>
+              <p class="text-sm text-gray-500">{{ testimonial.role }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const testimonials = ref([
+  {
+    id: 1,
+    name: 'Rizky & Anisa',
+    role: 'Pengantin Baru',
+    avatar: 'https://i.pravatar.cc/100?u=rizky',
+    rating: 5,
+    text: 'Desainnya elegan dan modern! Proses pembuatannya juga cepat banget. Semua tamu memuji undangannya. Terima kasih Abbauf Tech!'
+  },
+  {
+    id: 2,
+    name: 'Budi Santoso',
+    role: 'Event Organizer',
+    avatar: 'https://i.pravatar.cc/100?u=budi',
+    rating: 5,
+    text: 'Sebagai EO, kami butuh platform yang efisien dan hasilnya premium. Abbauf Tech menjawab semua kebutuhan itu. Klien kami sangat puas.'
+  },
+  {
+    id: 3,
+    name: 'Citra Lestari',
+    role: 'Ulang Tahun Anak',
+    avatar: 'https://i.pravatar.cc/100?u=citra',
+    rating: 4,
+    text: 'Fitur RSVP dan pengingat sangat membantu. Tema-tema ulang tahunnya juga lucu dan bisa dikustomisasi. Sangat direkomendasikan!'
+  },
+]);
+</script>
+
+<style scoped>
+/* Kosong, semua diatur oleh Tailwind */
+</style>
\ No newline at end of file
diff --git a/proyek-frontend/app/pages/index.vue b/proyek-frontend/app/pages/index.vue
index 56d9f73..e9d8c3e 100644
--- a/proyek-frontend/app/pages/index.vue
+++ b/proyek-frontend/app/pages/index.vue
@@ -2,18 +2,39 @@
   <div>
     <LandingPageHeader />
     <LandingPageHero />
-    <AboutSection />
-    <FeaturedTemplates />
-    <HowToSection />
     
+    <section id="tentang-kami">
+      <AboutSection />
+    </section>
+    
+    <section id="templat">
+      <FeaturedTemplates />
+    </section>
+
+    <section id="panduan">
+      <HowToSection />
+    </section>
+    
+    <section id="keistimewaan">
+      <PrivilegeSection />
+    </section>
+
+    <section id="testimoni">
+      <TestimoniSection />
+    </section>
+    
+    <Footer />
   </div>
 </template>
 
 <script setup>
+// Bagian script Anda sudah benar, tidak perlu diubah.
 import LandingPageHeader from '~/components/landing-page/header.vue';
 import LandingPageHero from '~/components/landing-page/hero.vue';
 import AboutSection from '~/components/landing-page/aboutsection.vue';
 import FeaturedTemplates from '~/components/landing-page/featuredtemplates.vue';
 import HowToSection from '~/components/landing-page/howtosection.vue';
-//import PrivilegeSection from '~/components/landing-page/privilegesection.vue';
+import PrivilegeSection from '~/components/landing-page/privilegesection.vue';
+import Footer from '~/components/landing-page/footer.vue'; 
+import TestimoniSection from '~/components/landing-page/testimonisection.vue'; 
 </script>
\ No newline at end of file