130 lines
4.0 KiB
Vue
130 lines
4.0 KiB
Vue
<template>
|
|
<section id="beranda" class="hero-section">
|
|
<div class="container hero-layout">
|
|
<div class="hero-text">
|
|
<h1>
|
|
Buat Undangan Digital Praktis
|
|
<span class="highlight">Untuk Semua</span>
|
|
Tanpa Ribet
|
|
</h1>
|
|
<p>
|
|
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"/>
|
|
</svg>
|
|
<span>Hubungi Kami</span>
|
|
</a>
|
|
<a href="#" class="btn btn-primary">Lihat Templat</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-image-wrapper">
|
|
<img src="/logo2.png" alt="Tampilan Undangan Digital di Ponsel">
|
|
<div class="testimonial">
|
|
<p>"Abadikan momen indahmu dengan undangan digital yang elegan."</p>
|
|
<p>"Satu aplikasi untuk semua momen spesialmu."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Script bisa dikosongkan jika tidak ada logika dinamis
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-section {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style> |