101 lines
3.8 KiB
Vue
101 lines
3.8 KiB
Vue
<template>
|
|
<header class="royal-header sticky top-0 z-50 w-full">
|
|
<!-- 상단 골드 헤어라인 -->
|
|
<div class="gold-top-line"></div>
|
|
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
|
|
<!-- 좌측: 네비게이션 메뉴 (참고 시안 그대로 배치) -->
|
|
<nav class="hidden md:flex items-center gap-6 text-xs lg:text-sm font-medium text-slate-300" aria-label="주요 메뉴">
|
|
<NuxtLink to="/" class="nav-item hover:text-[#e2c687] transition no-underline">홈</NuxtLink>
|
|
<NuxtLink :to="isHome ? '#usp-section' : '/#usp-section'" class="nav-item hover:text-[#e2c687] transition no-underline">특장점</NuxtLink>
|
|
<a href="#tutor-section" class="nav-item hover:text-[#e2c687] transition no-underline">강사진</a>
|
|
<a href="#process-section" class="nav-item hover:text-[#e2c687] transition no-underline">프로세스</a>
|
|
<a href="#stories-section" class="nav-item hover:text-[#e2c687] transition no-underline">성공사례</a>
|
|
</nav>
|
|
|
|
<!-- 모바일용 좌측 전화 아이콘 -->
|
|
<a href="tel:010-5961-5807" class="md:hidden inline-flex items-center gap-1.5 text-xs font-semibold text-[#e2c687] no-underline">
|
|
<i class="fa-solid fa-phone"></i>
|
|
<span>상담직통</span>
|
|
</a>
|
|
|
|
<!-- 중앙: 왕관 엠블럼 & ROYAL CLASS 로열클래스 로고 -->
|
|
<NuxtLink to="/" class="emblem-link flex flex-col items-center justify-center text-center no-underline group">
|
|
<div class="crown-icon-wrap flex items-center justify-center mb-0.5">
|
|
<i class="fa-solid fa-crown text-[#d4b068] text-base sm:text-lg drop-shadow"></i>
|
|
</div>
|
|
<span class="font-royal-serif text-[11px] sm:text-xs font-bold tracking-[0.22em] text-[#e2c687] leading-none">
|
|
ROYAL CLASS
|
|
</span>
|
|
<span class="text-[11px] sm:text-xs font-extrabold text-white/90 tracking-widest mt-0.5">
|
|
{{ currentSiteName }}
|
|
</span>
|
|
</NuxtLink>
|
|
|
|
<!-- 우측: 상담신청 텍스트 링크 + 골드 필 버튼 -->
|
|
<div class="flex items-center gap-3 sm:gap-5">
|
|
<a
|
|
href="tel:010-5961-5807"
|
|
class="hidden sm:inline-flex items-center gap-1.5 text-xs sm:text-sm font-semibold text-slate-200 hover:text-[#e2c687] transition no-underline"
|
|
>
|
|
<span>상담신청</span>
|
|
</a>
|
|
<a
|
|
:href="consultHref"
|
|
class="gold-cta-btn text-xs sm:text-sm font-extrabold px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg transition shadow-md flex items-center gap-1.5 no-underline"
|
|
>
|
|
<span>무료 상담 신청</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
siteName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
consultHref: {
|
|
type: String,
|
|
default: '#consult-section'
|
|
}
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
const route = useRoute()
|
|
const isHome = computed(() => route.path === '/')
|
|
const currentSiteName = computed(() => {
|
|
return props.siteName || config.public?.siteName || '로열클래스 1:1 과외'
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.royal-header {
|
|
background: linear-gradient(180deg, #0d1424 0%, #121c31 100%);
|
|
border-bottom: 1px solid rgba(212, 176, 104, 0.25);
|
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.gold-top-line {
|
|
height: 2px;
|
|
width: 100%;
|
|
background: linear-gradient(90deg, rgba(201, 165, 92, 0.2) 0%, #e2c687 50%, rgba(201, 165, 92, 0.2) 100%);
|
|
}
|
|
|
|
.gold-cta-btn {
|
|
background: linear-gradient(135deg, #e2c687 0%, #c49b50 100%);
|
|
color: #0d1424;
|
|
border: 1px solid #ebd5a4;
|
|
}
|
|
|
|
.gold-cta-btn:hover {
|
|
background: linear-gradient(135deg, #ebd5a4 0%, #d4ab60 100%);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 16px rgba(201, 165, 92, 0.35);
|
|
}
|
|
</style>
|