173 lines
3.0 KiB
Vue
173 lines
3.0 KiB
Vue
<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">
|
|
<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: 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; /* 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>
|