Cara membuat undangan

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

@@ -0,0 +1,172 @@
+<template>
+  <section id="template" class="featured-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">
+      <a href="#">Lihat Selengkapnya...</a>
+    </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;
+}
+
+.featured-header p {
+  color: #555;
+  margin-bottom: 40px;
+  font-size: 17px;
+}
+
+.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: 14px;
+  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; /* biar ke kanan */
+  max-width: 1100px; /* sama kayak grid */
+  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>

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

@@ -20,8 +20,8 @@ import { ref } from 'vue';
 const navLinks = ref([
   { name: 'Beranda', path: '#beranda' },
   { name: 'Tentang Kami', path: '#tentang-kami' },
-  { name: 'Templat', path: '#' },
+  { name: 'Templat', path: '#template' },
-  { name: 'Panduan', path: '#' },
+  { name: 'Panduan', path: '#cara' },
   { name: 'Keistimewaan', path: '#' },
   { name: 'Testimoni', path: '#' },
 ]);

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

@@ -0,0 +1,111 @@
+<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);
+}
+
+.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>

proyek-frontend/app/pages/index.vue

@@ -3,6 +3,9 @@
     <LandingPageHeader />
     <LandingPageHero />
     <AboutSection />
+    <FeaturedTemplates />
+    <HowToSection />
+    
   </div>
 </template>
 
@@ -10,4 +13,7 @@
 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';
 </script>