207 lines
8.4 KiB
Vue
207 lines
8.4 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 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>© 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> |