From e341425b2799f3f03f331f1a4f0f3e4452bd7959 Mon Sep 17 00:00:00 2001
From: timotiabbauftech <timotiabbauftech@gmail.com>
Date: Thu, 9 Oct 2025 11:48:06 +0700
Subject: [PATCH] Create undangan-pernikahan-premium.vue

---
 .../form/undangan-pernikahan-premium.vue      | 173 ++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue

diff --git a/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue b/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue
new file mode 100644
index 0000000..1a38d08
--- /dev/null
+++ b/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue
@@ -0,0 +1,173 @@
+<template>
+    <div class="min-h-screen bg-gray-50 py-10 px-6">
+      <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-lg p-8">
+        <h1 class="text-2xl font-bold text-center text-gray-800">
+          Form Undangan Pernikahan Premium
+        </h1>
+        <p class="text-center text-gray-500 text-sm mb-8">
+          Isi semua data berikut dengan lengkap dan benar.
+        </p>
+  
+        <!-- Data Pemesan -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">📋 Data Pemesan</h2>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.email" type="email" placeholder="Email"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.telepon" type="text" placeholder="No Telepon"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          </div>
+        </section>
+  
+        <!-- Data Mempelai -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💍 Data Mempelai</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Mempelai Pria -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Mempelai Pria</h3>
+              <div class="grid gap-2">
+                <input v-model="form.pria.nama_lengkap" placeholder="Nama Lengkap"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.nama_panggilan" placeholder="Nama Panggilan"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.nama_bapak" placeholder="Nama Bapak"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.nama_ibu" placeholder="Nama Ibu"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.instagram" placeholder="Instagram"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.facebook" placeholder="Facebook"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.twitter" placeholder="Twitter"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+              </div>
+            </div>
+  
+            <!-- Mempelai Wanita -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Mempelai Wanita</h3>
+              <div class="grid gap-2">
+                <input v-model="form.wanita.nama_lengkap" placeholder="Nama Lengkap"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.nama_panggilan" placeholder="Nama Panggilan"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.nama_bapak" placeholder="Nama Bapak"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.nama_ibu" placeholder="Nama Ibu"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.instagram" placeholder="Instagram"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.facebook" placeholder="Facebook"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.twitter" placeholder="Twitter"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+              </div>
+            </div>
+          </div>
+        </section>
+  
+        <!-- Cerita Kita -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Cerita Kita</h2>
+          <textarea v-model="form.cerita" rows="4" placeholder="Ceritakan kisah kalian..."
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition resize-none"></textarea>
+        </section>
+  
+        <!-- Detail Acara -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Detail Acara</h2>
+          <div class="grid md:grid-cols-2 gap-6">
+            <!-- Akad -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Akad</h3>
+              <div class="grid gap-2">
+                <input v-model="form.akad.tanggal" type="date"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+                <input v-model="form.akad.waktu" type="time"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+                <input v-model="form.akad.alamat" placeholder="Alamat Akad"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+                <input v-model="form.akad.link_gmaps" placeholder="Link Gmaps Akad"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+              </div>
+            </div>
+  
+            <!-- Resepsi -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Resepsi</h3>
+              <div class="grid gap-2">
+                <input v-model="form.resepsi.tanggal" type="date"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+                <input v-model="form.resepsi.waktu" type="time"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+                <input v-model="form.resepsi.alamat" placeholder="Alamat Resepsi"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+                <input v-model="form.resepsi.link_gmaps" placeholder="Link Gmaps Resepsi"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+              </div>
+            </div>
+          </div>
+        </section>
+  
+        <!-- Rekening & Musik -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
+          <div class="grid md:grid-cols-3 gap-4">
+            <input v-model="form.rekening1" placeholder="Rekening 1"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.rekening2" placeholder="Rekening 2"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.rekening3" placeholder="Rekening 3"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          </div>
+          <input v-model="form.link_music" placeholder="Link Music (opsional)"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-4 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+        </section>
+  
+        <!-- Galeri Foto -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
+          <div
+            class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex justify-center items-center text-gray-400 cursor-pointer hover:border-blue-400 hover:text-blue-500 transition">
+            <span class="text-3xl font-bold">+</span>
+          </div>
+        </section>
+  
+        <!-- Tombol -->
+        <div class="text-center">
+          <button @click="submitForm"
+            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg shadow-md transition">
+            Konfirmasi
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue'
+  
+  const form = ref({
+    nama_pemesan: '',
+    email: '',
+    telepon: '',
+    pria: {},
+    wanita: {},
+    cerita: '',
+    akad: {},
+    resepsi: {},
+    rekening1: '',
+    rekening2: '',
+    rekening3: '',
+    link_music: ''
+  })
+  
+  const submitForm = () => {
+    console.log('Data terkirim:', form.value)
+    alert('Data berhasil dikonfirmasi!')
+  }
+  </script>
+  
\ No newline at end of file