56 lines
2.0 KiB
Vue
56 lines
2.0 KiB
Vue
<template>
|
|
<header class="bg-white/95 backdrop-blur-md border-b border-slate-200/80 sticky top-0 z-40 w-full transition-all">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
|
<NuxtLink to="/" class="flex items-center gap-3 no-underline">
|
|
<div class="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center text-white font-extrabold text-base shadow-sm">
|
|
{{ logoLetter }}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ currentSiteName }}</span>
|
|
<span class="hidden sm:inline-flex items-center text-[11px] font-semibold text-blue-700 bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-100">
|
|
교육청 등록 협력
|
|
</span>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a href="tel:010-5961-5807" class="hidden sm:flex items-center gap-1.5 text-sm font-semibold text-slate-600 hover:text-blue-600 transition no-underline">
|
|
<i class="fa-solid fa-phone text-blue-600 text-xs"></i>
|
|
<span>010-5961-5807</span>
|
|
</a>
|
|
<a href="#consult-section" class="bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-bold px-4 sm:px-5 py-2.5 rounded-xl transition shadow-sm hover:shadow flex items-center gap-1.5 no-underline">
|
|
<span>무료 시범수업 신청</span>
|
|
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
siteName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
const currentSiteName = computed(() => {
|
|
return props.siteName || config.public?.siteName || '1:1 맞춤과외'
|
|
})
|
|
|
|
const logoLetter = computed(() => {
|
|
const name = currentSiteName.value.trim()
|
|
return name.charAt(0) || 'T'
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
font-family: inherit;
|
|
}
|
|
</style>
|