diff --git a/proyek-frontend/app/assets/css/main.css b/proyek-frontend/app/assets/css/main.css
index a461c50..f4c1129 100644
--- a/proyek-frontend/app/assets/css/main.css
+++ b/proyek-frontend/app/assets/css/main.css
@@ -1 +1,4 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+html {
+  scroll-behavior: smooth;
+}
diff --git a/proyek-frontend/app/components/landing-page/aboutsection.vue b/proyek-frontend/app/components/landing-page/aboutsection.vue
new file mode 100644
index 0000000..3aaa753
--- /dev/null
+++ b/proyek-frontend/app/components/landing-page/aboutsection.vue
@@ -0,0 +1,133 @@
+<template>
+  <section id="tentang-kami" class="about-section">
+    <div class="container">
+      <!-- Judul -->
+      <h2 class="section-title">Tentang Kami</h2>
+
+      <!-- Layout gambar + teks -->
+      <div class="about-layout">
+        <div class="about-image">
+          <img src="/logo1.png" alt="Tentang Kami - Undangan Digital" />
+        </div>
+        <div class="about-text">
+          <p>
+            "Abbauf Tech memudahkan pembuatan undangan digital yang praktis dan elegan, siap digunakan untuk berbagai acara spesial Anda."
+          </p>
+        </div>
+      </div>
+
+      <!-- Info Box -->
+      <div class="about-info">
+        <div class="info-card" v-for="(item, index) in infoList" :key="index">
+          <div class="icon">
+            <component :is="item.icon" />
+          </div>
+          <h3>{{ item.title }}</h3>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { h } from "vue";
+import { User, Headphones, Layout } from "lucide-vue-next"; 
+
+// Data untuk kotak informasi
+const infoList = [
+  {
+    title: "300+ Template",
+    icon: () => h(Layout, { size: 36, color: "#0d6efd" }),
+  },
+  {
+    title: "24/7 Support",
+    icon: () => h(Headphones, { size: 36, color: "#0d6efd" }),
+  },
+  {
+    title: "100+ Client",
+    icon: () => h(User, { size: 36, color: "#0d6efd" }),
+  },
+];
+</script>
+
+<style scoped>
+.about-section {
+  padding: 80px 0;
+  background-color: #ffffff;
+  text-align: center;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.section-title {
+  font-size: 2.9rem;
+  font-weight: 700;
+  margin-bottom: 50px;
+  color: #000;
+}
+
+.about-layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  flex-wrap: wrap;
+  margin-bottom: 50px;
+}
+
+.about-image img {
+  max-width: 400px;
+  height: auto;
+  margin-bottom: 20px;
+  margin-right: 20px;
+}
+
+.about-text {
+  max-width: 500px;
+  font-size: 1.4rem;
+  color: #000;
+  line-height: 1.6;
+  font-family: 'Roboto', sans-serif;
+  margin-bottom: 20px;
+}
+
+.about-info {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  flex-wrap: wrap;
+}
+
+.info-card {
+  flex: 1;
+  min-width: 200px;
+  max-width: 250px;
+  border: 3px solid #0d6efd;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.info-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+}
+
+.info-card h3 {
+  margin-top: 15px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/proyek-frontend/app/components/landing-page/featuredtemplates.vue b/proyek-frontend/app/components/landing-page/featuredtemplates.vue
new file mode 100644
index 0000000..0bc9079
--- /dev/null
+++ b/proyek-frontend/app/components/landing-page/featuredtemplates.vue
@@ -0,0 +1,175 @@
+<template>
+  <section id="template" class="feature-section">
+    <div class="featured-header">
+      <h2>Templat Unggulan</h2>
+      <p>"Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya."</p>
+    </div>
+
+    <!-- Grid Template -->
+    <div class="template-grid">
+      <div class="template-card" v-for="i in 6" :key="i">
+        <div class="template-image">
+          <img src="/templat.jpg" alt="Template" />
+        </div>
+
+        <div class="template-body">
+          <h3 class="template-title">Golf Party</h3>
+          <p class="template-price">Rp.89.000</p>
+
+          <select class="template-select">
+            <option>Fitur Terbaik</option>
+            <option>Fitur Lengkap</option>
+          </select>
+
+          <div class="button-group">
+            <button class="btn btn-preview">Preview</button>
+            <button class="btn btn-order">Order</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="see-more">
+      <NuxtLink to="/template">Lihat Selengkapnya...</NuxtLink>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.featured-section {
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.featured-header h2 {
+  font-size: 2.9rem;
+  font-weight: bold;
+  margin-bottom: 30px;
+  text-align: center;
+
+}
+
+.featured-header p {
+  color: #555;
+  margin-bottom: 40px;
+  font-size: 17px;
+  text-align: center;
+}
+
+.template-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 24px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.template-card {
+  background: #f2f2f2;
+  border-radius: 5px;
+  padding: 16px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 400px;
+  overflow: hidden;
+}
+
+.template-image {
+  background: #fff;
+  border-radius: 10px;
+  width: 100%;
+  height: 180px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.template-image img {
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.template-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; 
+  width: 100%;
+  margin-top: 12px;
+  gap: 10px;
+}
+
+.template-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.template-price {
+  color: #008000;
+  font-weight: bold;
+  margin: 0;
+}
+
+.template-select {
+  width: 100%;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+}
+
+.btn {
+  flex: 1;
+  padding: 10px 0;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: 0.2s;
+}
+
+.btn-preview {
+  background: #e5e5e5;
+}
+
+.btn-preview:hover {
+  background: #d6d6d6;
+}
+
+.btn-order {
+  background: #2563eb;
+  color: #fff;
+}
+
+.btn-order:hover {
+  background: #1d4ed8;
+}
+
+.see-more {
+  margin-top: 30px;
+  text-align: right;
+  max-width: 1100px; 
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.see-more a {
+  color: #2563eb;
+  font-weight: 500;
+  text-decoration: none;
+
+}
+
+.see-more a:hover {
+  text-decoration: underline;
+}
+</style>
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 ce53ee4..11e2be7 100644
--- a/proyek-frontend/app/components/landing-page/header.vue
+++ b/proyek-frontend/app/components/landing-page/header.vue
@@ -2,12 +2,13 @@
   <header class="main-header">
     <nav class="container">
       <div class="logo">
-        <img src="/logo1.png" alt="Abbauf Tech Logo" class="logo-icon">
-        <span>ABBAUF TECH</span>
+        <NuxtLink to="/" class="logo-link"> <img src="/ABBAUF.png" alt="Abbauf Tech Logo" class="logo-icon">
+          <span>ABBAUF TECH</span>
+        </NuxtLink>
       </div>
       <ul class="nav-links">
         <li v-for="link in navLinks" :key="link.name">
-          <a :href="link.path">{{ link.name }}</a>
+          <NuxtLink :to="link.path">{{ link.name }}</NuxtLink>
         </li>
       </ul>
     </nav>
@@ -18,18 +19,21 @@
 import { ref } from 'vue';
 
 const navLinks = ref([
-  { name: 'Beranda', path: '#' },
-  { name: 'Tentang Kami', path: '#' },
-  { name: 'Templat', path: '#' },
-  { name: 'Panduan', path: '#' },
-  { name: 'Keistimewaan', path: '#' },
-  { name: 'Testimoni', path: '#' },
+  // Path untuk Beranda diubah menjadi / agar selalu kembali ke halaman utama
+  { name: 'Beranda', path: '/' }, 
+  // Path ini agar berfungsi dari halaman lain (seperti /template)
+  { name: 'Tentang Kami', path: '/#tentang-kami' }, 
+  // INI BAGIAN YANG PALING PENTING: Path diubah ke /template
+  { name: 'Templat', path: '/template' }, 
+  { name: 'Panduan', path: '/#cara' },
+  { name: 'Keistimewaan', path: '/#keistimewaan' },
+  { name: 'Testimoni', path: '/#testi' },
 ]);
 </script>
 
 <style scoped>
 .main-header {
-  background-color: #eaf2ff; /* Warna biru muda */
+  background-color: #eaf2ff; 
   padding: 15px 0;
   border-bottom: 1px solid #d4e3ff;
   width: 100%;
@@ -44,23 +48,24 @@ const navLinks = ref([
   align-items: center;
 }
 
-.logo {
+.logo a.logo-link { /* Style untuk logo link */
   display: flex;
   align-items: center;
   font-weight: bold;
   font-size: 1.5rem;
-  color: #0d6efd; /* Biru Primer */
+  color: #0d6efd; 
+  text-decoration: none; /* Hilangkan garis bawah default */
 }
 
 .logo-icon {
-  width: 40px; /* Sesuaikan ukuran logo */
+  width: 40px;
   margin-right: 10px;
 }
 
 .nav-links {
   list-style: none;
   display: flex;
-  gap: 30px; /* Jarak antar menu */
+  gap: 30px; 
   margin: 0;
   padding: 0;
 }
@@ -73,6 +78,6 @@ const navLinks = ref([
 }
 
 .nav-links a:hover {
-  color: #0d6efd; /* Warna biru saat di-hover */
+  color: #0d6efd; 
 }
 </style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/landing-page/hero.vue b/proyek-frontend/app/components/landing-page/hero.vue
index 05be4f8..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 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/howtosection.vue b/proyek-frontend/app/components/landing-page/howtosection.vue
new file mode 100644
index 0000000..75652a3
--- /dev/null
+++ b/proyek-frontend/app/components/landing-page/howtosection.vue
@@ -0,0 +1,112 @@
+<template>
+  <section id="cara" class="howto-section">
+    <div class="howto-header">
+      <h2>Cara Membuat Undangan Digital</h2>
+      <p>"Buat undanganmu dengan simple, mudah dan praktis."</p>
+    </div>
+
+    <div class="howto-grid">
+      <div class="howto-card" v-for="(item, index) in steps" :key="index">
+        <div class="card-icon">
+          <img :src="`/event-list${index}.png`" :alt="item.title" />
+        </div>
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.desc }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+const steps = [
+  {
+    title: "Mulai dari Kategori",
+    desc: "Pilih Kategory sesuai kebutuhan."
+  },
+  {
+    title: "Tentukan Template",
+    desc: "Sesuaikan desain sesuai selera."
+  },
+  {
+    title: "Isi Data",
+    desc: "Nama, tanggal, lokasi, dan detail acara, dll."
+  },
+  {
+    title: "Bagikan Undangan",
+    desc: "Lewat WhatsApp, link, atau media sosial."
+  },
+  {
+    title: "Lihat Hasil",
+    desc: "Pratinjau undangan sebelum simpan."
+  },
+  {
+    title: "Tambahkan Media",
+    desc: "Foto, musik, dan peta lokasi."
+  }
+];
+</script>
+
+<style scoped>
+.howto-section {
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.howto-header h2 {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.howto-header p {
+  color: #555;
+  font-size: 15px;
+  margin-bottom: 40px;
+}
+
+.howto-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.howto-card {
+  background: #f8f9fc;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  text-align: center;
+  transition: transform 0.2s ease;
+}
+
+.howto-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+
+.card-icon {
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-icon img {
+  width: 60px;
+  height: 60px;
+  object-fit: contain;
+}
+
+.howto-card h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.howto-card p {
+  font-size: 14px;
+  color: #555;
+}
+</style>
diff --git a/proyek-frontend/app/components/landing-page/privilegesection.vue b/proyek-frontend/app/components/landing-page/privilegesection.vue
new file mode 100644
index 0000000..bc53c39
--- /dev/null
+++ 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/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
new file mode 100644
index 0000000..f8ee80d
--- /dev/null
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <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>
+    <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>
+
+    <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div 
+        v-for="category in categories" 
+        :key="category.id"
+        @click="onCategoryClick(category.nama)"
+        class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
+      >
+        <img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
+        <div class="p-6 bg-white">
+          <h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['category-selected']);
+
+const categories = ref([])
+
+// Ambil data kategori dari Laravel API pakai $fetch
+const fetchCategories = async () => {
+  try {
+    categories.value = await $fetch('http://localhost:8000/api/kategoris')
+  } catch (error) {
+    console.error('Gagal ambil kategori:', error)
+  }
+}
+
+const onCategoryClick = (categoryName) => {
+  emit('category-selected', categoryName);
+};
+
+onMounted(() => {
+  fetchCategories()
+})
+</script>
diff --git a/proyek-frontend/app/components/template-page/TemplateGrid.vue b/proyek-frontend/app/components/template-page/TemplateGrid.vue
new file mode 100644
index 0000000..ea8c0ee
--- /dev/null
+++ b/proyek-frontend/app/components/template-page/TemplateGrid.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div class="flex items-center mb-8">
+      <button @click="$emit('back')" class="text-blue-600 hover:text-blue-800 font-semibold mr-4">
+        &larr; Kembali ke Kategori
+      </button>
+      <h1 class="text-3xl md:text-4xl font-bold text-gray-800">
+        Pilih Template {{ category }} Favoritmu
+      </h1>
+    </div>
+    
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div v-for="tpl in templates" :key="tpl.id" class="border rounded-lg p-4 text-center">
+        <img :src="tpl.foto" :alt="tpl.nama" class="bg-gray-200 h-40 mb-4 rounded-md object-cover w-full" />
+        <h4 class="font-semibold">{{ tpl.nama }}</h4>
+        <p class="text-gray-500">Rp {{ tpl.harga }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  category: {
+    type: String,
+    required: true,
+  },
+  id_category: {
+    type: Number,
+    required: true
+  }
+})
+
+const templates = ref([])
+
+const fetchTemplates = async () => {
+  try {
+    templates.value = await $fetch(`http://localhost:8000/api/templates/category/${props.id_category}`)
+  } catch (error) {
+    console.error('Gagal ambil template:', error)
+  }
+}
+
+onMounted(() => {
+  fetchTemplates()
+})
+
+defineEmits(['back']);
+</script>
diff --git a/proyek-frontend/app/pages/index.vue b/proyek-frontend/app/pages/index.vue
index 4b4f062..e9d8c3e 100644
--- a/proyek-frontend/app/pages/index.vue
+++ b/proyek-frontend/app/pages/index.vue
@@ -2,10 +2,39 @@
   <div>
     <LandingPageHeader />
     <LandingPageHero />
+    
+    <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 Footer from '~/components/landing-page/footer.vue'; 
+import TestimoniSection from '~/components/landing-page/testimonisection.vue'; 
 </script>
\ No newline at end of file
diff --git a/proyek-frontend/app/pages/template.vue b/proyek-frontend/app/pages/template.vue
new file mode 100644
index 0000000..cad6a85
--- /dev/null
+++ b/proyek-frontend/app/pages/template.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="container mx-auto px-4 py-16">
+    <TemplatePageCategorySelection 
+      v-if="!selectedCategory" 
+      @category-selected="handleCategorySelect" 
+    />
+
+    <TemplatePageTemplateGrid 
+      v-else 
+      :category="selectedCategory" 
+      @back="goBack" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// State untuk menyimpan kategori yang sedang dipilih
+const selectedCategory = ref(null);
+
+// Fungsi ini akan menangkap event dari CategorySelection
+const handleCategorySelect = (categoryName) => {
+  selectedCategory.value = categoryName;
+};
+
+// Fungsi ini akan menangkap event 'back' dari TemplateGrid
+const goBack = () => {
+  selectedCategory.value = null;
+};
+</script>
\ No newline at end of file
diff --git a/proyek-frontend/package-lock.json b/proyek-frontend/package-lock.json
index 217044f..a38bd39 100644
--- a/proyek-frontend/package-lock.json
+++ b/proyek-frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@nuxt/image": "^1.11.0",
         "@tailwindcss/vite": "^4.1.12",
         "eslint": "^9.34.0",
+        "lucide-vue-next": "^0.542.0",
         "nuxt": "^4.0.3",
         "tailwindcss": "^4.1.12",
         "vue": "^3.5.20",
@@ -10426,6 +10427,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.542.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.542.0.tgz",
+      "integrity": "sha512-cJfyhFoneDgYTouHwUJEutXaCW5EQuRrBsvfELudWnMiwfqvcEtpZTFZLdZ5Nrqow+znzn+Iyhu3KeYIfa3mEg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/luxon": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.1.tgz",
diff --git a/proyek-frontend/package.json b/proyek-frontend/package.json
index 7ae34fa..6c559fa 100644
--- a/proyek-frontend/package.json
+++ b/proyek-frontend/package.json
@@ -16,6 +16,7 @@
     "@nuxt/image": "^1.11.0",
     "@tailwindcss/vite": "^4.1.12",
     "eslint": "^9.34.0",
+    "lucide-vue-next": "^0.542.0",
     "nuxt": "^4.0.3",
     "tailwindcss": "^4.1.12",
     "vue": "^3.5.20",
diff --git a/proyek-frontend/public/ABBAUF.png b/proyek-frontend/public/ABBAUF.png
new file mode 100644
index 0000000..2f25877
Binary files /dev/null and b/proyek-frontend/public/ABBAUF.png differ
diff --git a/proyek-frontend/public/event-list0.png b/proyek-frontend/public/event-list0.png
new file mode 100644
index 0000000..1f6c66f
Binary files /dev/null and b/proyek-frontend/public/event-list0.png differ
diff --git a/proyek-frontend/public/event-list1.png b/proyek-frontend/public/event-list1.png
new file mode 100644
index 0000000..e6c3193
Binary files /dev/null and b/proyek-frontend/public/event-list1.png differ
diff --git a/proyek-frontend/public/event-list2.png b/proyek-frontend/public/event-list2.png
new file mode 100644
index 0000000..03a979b
Binary files /dev/null and b/proyek-frontend/public/event-list2.png differ
diff --git a/proyek-frontend/public/event-list3.png b/proyek-frontend/public/event-list3.png
new file mode 100644
index 0000000..4fc6cda
Binary files /dev/null and b/proyek-frontend/public/event-list3.png differ
diff --git a/proyek-frontend/public/event-list4.png b/proyek-frontend/public/event-list4.png
new file mode 100644
index 0000000..28f280d
Binary files /dev/null and b/proyek-frontend/public/event-list4.png differ
diff --git a/proyek-frontend/public/event-list5.png b/proyek-frontend/public/event-list5.png
new file mode 100644
index 0000000..daefcb3
Binary files /dev/null and b/proyek-frontend/public/event-list5.png differ
diff --git a/proyek-frontend/app/public/logo1.png b/proyek-frontend/public/logo1.png
similarity index 100%
rename from proyek-frontend/app/public/logo1.png
rename to proyek-frontend/public/logo1.png
diff --git a/proyek-frontend/app/public/logo2.png b/proyek-frontend/public/logo2.png
similarity index 100%
rename from proyek-frontend/app/public/logo2.png
rename to proyek-frontend/public/logo2.png
diff --git a/proyek-frontend/public/templat.jpg b/proyek-frontend/public/templat.jpg
new file mode 100644
index 0000000..d950d7e
Binary files /dev/null and b/proyek-frontend/public/templat.jpg differ