direct wa LP

proyek-frontend/app/components/landing-page/hero.vue

@@ -1,12 +1,12 @@
 <template>
   <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 pl-15">
           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>
@@ -15,22 +15,43 @@
 
           Tanpa Ribet
         </h1>
-        
+
         <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.
+          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 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">
+          <a :href="waUrl" target="_blank"
-              <path d="M19.2239 4.7761C17.1659 2.7181 14.6599 1.5 11.9999 1.5...Z" fill="#25D366"/>
+            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-md transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg hover:bg-green-500 hover:text-white">
-              <path d="M16.7441 14.968C16.5331 15.538...Z" fill="white"/>
+
+            <!-- Ikon WhatsApp -->
+            <svg class="mr-2 w-6 h-6 transition-colors duration-300" viewBox="0 0 32 32"
+              xmlns="http://www.w3.org/2000/svg">
+              <path class="transition-colors duration-300" fill="#25D366"
+                d="M16 .4a15.6 15.6 0 0 0-13.6 23.8L.4 31.6l7.6-2a15.7 15.7 0 0 0 8 2.2c8.8 0 15.6-7.2 15.6-15.6S24.8.4 16 .4z" />
+              <path class="transition-colors duration-300" fill="#FFF"
+                d="M25.2 22.4c-.4 1-2.2 1.8-3 1.8-.8.2-1.8.4-6.2-1.4-5.2-2.2-8.6-7.4-8.8-7.6-.2-.2-2-2.6-2-5s1.2-3.6 1.6-4c.4-.4.8-.6 1.2-.6h.8c.2 0 .6 0 .8.6.4 1 .8 2 .8 2.2.2.4 0 .8-.2 1.2-.2.2-.4.6-.6.8-.2.2-.4.4-.2.8.4.8 1.6 2.6 3.4 4 .2.2 3.6 3 7 .4.4-.2.8-.2 1.2 0 .4.2 2.6 1.2 3 1.4.4.2.6.2.8.4.2.2.2 1 0 2z" />
             </svg>
+
             <span>Hubungi Kami</span>
           </a>
-          <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">
+
+
+          <a href="/template" class="inline-flex justify-center items-center
+         rounded-xl 
+         bg-gradient-to-r from-blue-600 to-blue-700 
+         px-10 py-3 
+         font-bold text-white 
+         shadow-lg shadow-blue-500/30
+         transition-all duration-300 
+         hover:scale-110 hover:shadow-2xl hover:shadow-blue-600/50 hover:from-blue-700 hover:to-blue-800">
             Lihat Templat
           </a>
-          
+
+
+
+
         </div>
       </div>
 
@@ -58,12 +79,18 @@ onMounted(() => {
   intervalId = setInterval(() => {
     currentWordIndex.value = (currentWordIndex.value + 1) % words.length;
     currentWord.value = words[currentWordIndex.value];
-  }, 1000); 
+  }, 1000);
 });
 
 onUnmounted(() => {
   clearInterval(intervalId);
 });
+
+const adminNumber = "62895602603247";
+const defaultMessage = "Halo Admin, saya mau tanya tentang undangan digital 🙏";
+const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(defaultMessage)}`;
+
+
 </script>
 
 <style scoped>