Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tes api kategori

Browse Source
This commit is contained in:
Farhaan4 2025-09-10 20:05:46 +07:00
parent f09d6b8c9c
commit 982aee2a99
25 changed files with 1022 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
proyek-frontend/app/assets/css/main.css
View File

@ -1 +1,4 @@
@import "tailwindcss";
@import "tailwindcss";
html {
scroll-behavior: smooth;
}

133
proyek-frontend/app/components/landing-page/aboutsection.vue Normal file
View File

@ -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>

175
proyek-frontend/app/components/landing-page/featuredtemplates.vue Normal file
View File

@ -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>

207
proyek-frontend/app/components/landing-page/footer.vue Normal file
View File

@ -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>

35
proyek-frontend/app/components/landing-page/header.vue
View File

@ -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>

155
proyek-frontend/app/components/landing-page/hero.vue
View File

@ -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>

112
proyek-frontend/app/components/landing-page/howtosection.vue Normal file
View File

@ -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>

72
proyek-frontend/app/components/landing-page/privilegesection.vue Normal file
View File

@ -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>

69
proyek-frontend/app/components/landing-page/testimonisection.vue Normal file
View File

@ -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>

58
proyek-frontend/app/components/template-page/CategorySelection.vue Normal file
View File

@ -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>

49
proyek-frontend/app/components/template-page/TemplateGrid.vue Normal file
View File

@ -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>

29
proyek-frontend/app/pages/index.vue
View File

@ -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>

31
proyek-frontend/app/pages/template.vue Normal file
View File

@ -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>

10
proyek-frontend/package-lock.json generated
View File

@ -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",

1
proyek-frontend/package.json
View File

@ -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",

BIN
proyek-frontend/public/ABBAUF.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
proyek-frontend/public/event-list0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
proyek-frontend/public/event-list1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
proyek-frontend/public/event-list2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
proyek-frontend/public/event-list3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
proyek-frontend/public/event-list4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
proyek-frontend/public/event-list5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

0
proyek-frontend/app/public/logo1.png → proyek-frontend/public/logo1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 MiB

After

Width:  |  Height:  |  Size: 3.0 MiB

0
proyek-frontend/app/public/logo2.png → proyek-frontend/public/logo2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 456 KiB

After

Width:  |  Height:  |  Size: 456 KiB

BIN
proyek-frontend/public/templat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB