ui 개편 완료

seoul/components/AppHeader.vue

@@ -1,26 +1,50 @@
 <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>
+  <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-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>
+
+      <!-- 우측: 상담신청 텍스트 링크 + 골드 필 버튼 -->
+      <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="#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 
+          :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>
@@ -34,22 +58,43 @@ 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 맞춤과외'
-})
-
-const logoLetter = computed(() => {
-  const name = currentSiteName.value.trim()
-  return name.charAt(0) || 'T'
+  return props.siteName || config.public?.siteName || '로열클래스 1:1 과외'
 })
 </script>
 
 <style scoped>
-header {
-  font-family: inherit;
+.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>