diff --git a/proyek-frontend/app/components/landing-page/header.vue b/proyek-frontend/app/components/landing-page/header.vue
index 4563d4a..fd4cb77 100644
--- a/proyek-frontend/app/components/landing-page/header.vue
+++ b/proyek-frontend/app/components/landing-page/header.vue
@@ -2,8 +2,8 @@
   <header class="main-header">
     <nav class="container">
       <div class="logo">
-        <NuxtLink to="/" class="logo-link"> <img :src="logo" alt="Abbauf Tech Logo" class="logo-icon" />
-
+        <NuxtLink to="/" class="logo-link"> 
+          <img :src="logo" alt="Abbauf Tech Logo" class="logo-icon" />
           <span>ABBAUF TECH</span>
         </NuxtLink>
       </div>
@@ -21,24 +21,34 @@ import { ref } from 'vue';
 const logo = '/abbauflogo.png';
 
 const navLinks = ref([
-  // 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' },
+  { name: 'Testimoni', path: '/#testimoni' },
 ]);
 </script>
 
 <style scoped>
+/* ================= NAVBAR ================= */
 .main-header {
   background-color: #eaf2ff; 
   padding: 15px 0;
   border-bottom: 1px solid #d4e3ff;
   width: 100%;
+
+  /* FIXED NAVBAR */
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000; /* pastikan di atas konten */
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+/* Supaya konten di bawah navbar tidak tertutup */
+body {
+  padding-top: 70px; /* sesuaikan dengan tinggi navbar */
 }
 
 .container {
@@ -50,13 +60,13 @@ const navLinks = ref([
   align-items: center;
 }
 
-.logo a.logo-link { /* Style untuk logo link */
+.logo a.logo-link {
   display: flex;
   align-items: center;
   font-weight: bold;
   font-size: 1.5rem;
   color: #0d6efd; 
-  text-decoration: none; /* Hilangkan garis bawah default */
+  text-decoration: none;
 }
 
 .logo-icon {
@@ -82,4 +92,4 @@ const navLinks = ref([
 .nav-links a:hover {
   color: #0d6efd; 
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/proyek-frontend/app/components/landing-page/hero.vue b/proyek-frontend/app/components/landing-page/hero.vue
index ea1a9d1..b61b9d5 100644
--- a/proyek-frontend/app/components/landing-page/hero.vue
+++ b/proyek-frontend/app/components/landing-page/hero.vue
@@ -4,7 +4,7 @@
       
       <div class="w-full text-center lg:w-1/2">
         
-        <h1 class="text-5xl font-extrabold leading-tight text-gray-800 lg:text-6xl">
+        <h1 class="text-5xl font-extrabold leading-tight text-gray-800 lg:text-6xl pl-15">
           Buat Undangan Digital Praktis Untuk
           
           <div class="h-24 flex items-center justify-center">
@@ -16,10 +16,10 @@
           Tanpa Ribet
         </h1>
         
-        <p class="mt-4 mb-8 text-lg text-gray-600">
+        <p class="mt-4 mb-8 text-lg text-gray-600 pl-15">
           Coba undangan digital PRAKTIS untuk berbagai acara. Pilih template praktis atau premium sesuai kebutuhanmu. Praktis, cepat, dan bisa langsung digunakan.
         </p>
-        <div class="flex flex-col justify-center gap-4 sm:flex-row">
+        <div class="flex flex-col justify-center gap-4 sm:flex-row pl-15">
           <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"/>