78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<header class="main-header">
|
|
<nav class="container">
|
|
<div class="logo">
|
|
<img src="/ABBAUF.png" alt="Abbauf Tech Logo" class="logo-icon">
|
|
<span>ABBAUF TECH</span>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li v-for="link in navLinks" :key="link.name">
|
|
<a :href="link.path">{{ link.name }}</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const navLinks = ref([
|
|
{ name: 'Beranda', path: '#beranda' },
|
|
{ name: 'Tentang Kami', path: '#tentang-kami' },
|
|
{ name: 'Templat', path: '#' },
|
|
{ name: 'Panduan', path: '#' },
|
|
{ name: 'Keistimewaan', path: '#' },
|
|
{ name: 'Testimoni', path: '#' },
|
|
]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main-header {
|
|
background-color: #eaf2ff; /* Warna biru muda */
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #d4e3ff;
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 1.5rem;
|
|
color: #0d6efd; /* Biru Primer */
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 40px; /* Sesuaikan ukuran logo */
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.nav-links {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 30px; /* Jarak antar menu */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
font-weight: 500;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: #0d6efd; /* Warna biru saat di-hover */
|
|
}
|
|
</style> |