262 lines
8.8 KiB
Vue
262 lines
8.8 KiB
Vue
<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/Pernikahan">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="https://instagram.com/abbauftech" target="_blank" class="inline-flex items-center gap-2 font-medium
|
|
bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500
|
|
bg-clip-text text-transparent
|
|
hover:scale-110 transition-all duration-300">
|
|
<!-- Ikon Instagram -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"
|
|
fill="url(#igGradient)">
|
|
<defs>
|
|
<linearGradient id="igGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#8a3ab9" />
|
|
<stop offset="50%" style="stop-color:#e95950" />
|
|
<stop offset="100%" style="stop-color:#fccc63" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5A4.25 4.25 0 0 0 7.75 20.5h8.5a4.25 4.25 0 0 0 4.25-4.25v-8.5A4.25 4.25 0 0 0 16.25 3.5h-8.5zm4.25 3a5.75 5.75 0 1 1 0 11.5 5.75 5.75 0 0 1 0-11.5zm0 1.5a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5zm5-2.25a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
|
|
</svg>
|
|
<!-- Nama IG -->
|
|
<span>@abbauftech</span>
|
|
</a>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<a href="https://www.linkedin.com/posts/abbauf-tech_abbauftech-digitalstrategy-itconsulting-activity-7277021563982340099-8Byg" 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>
|
|
<a :href="waUrl" target="_blank"
|
|
class="inline-flex items-center gap-2 hover:text-green-600 transition-colors">
|
|
<!-- Ikon WhatsApp -->
|
|
<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-.14-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.372 c-.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>
|
|
<!-- Nomor WA -->
|
|
<span>+62 878-7711-7847</span>
|
|
</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>© 2025 ABBAUF TECH - Hak cipta dilindungi undang-undang</p>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const adminNumber = "62895602603247";
|
|
const defaultMessage = "Halo Admin, saya mau tanya tentang undangan digital 🙏";
|
|
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(defaultMessage)}`;
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.site-footer {
|
|
width: 100%;
|
|
background-color: #f0f2f5;
|
|
color: #333;
|
|
padding: 50px 0 20px 0;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.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> |