ui 개편 완료

seoul/components/HeroBanner.vue

@@ -1,21 +1,32 @@
 <template>
-  <section class="hero-banner hero-banner-clean bg-white border-b border-slate-200/80 pt-10 sm:pt-14 pb-14 sm:pb-18 px-4 sm:px-6 relative overflow-hidden text-center" itemscope itemtype="https://schema.org/Course">
+  <section class="royal-sub-hero relative overflow-hidden text-center" itemscope itemtype="https://schema.org/Course">
     
-    <!-- 은은한 상단 엠비언트 라이트 -->
-    <div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
+    <!-- 배경: 서울 통창 스카이라인 라운지 이미지 & 다크 네이비 오버레이 -->
+    <div class="hero-bg-wrap">
+      <img 
+        src="/img/hero-seoul-bg.jpg" 
+        :alt="`${shortSidoName} ${gradeShortName} ${subjectName} 과외 · ${region.dong} ${grade} ${subjectName}과외 스터디 라운지`"
+        class="hero-bg-img"
+        width="1920"
+        height="1080"
+        decoding="async"
+        fetchpriority="high"
+      />
+      <div class="hero-bg-overlay"></div>
+    </div>
 
-    <div class="max-w-4xl mx-auto relative z-10">
+    <div class="max-w-4xl mx-auto relative z-10 px-4 sm:px-6 pt-12 sm:pt-16 pb-16 sm:pb-20">
       
-      <!-- 신뢰 보증 뱃지 -->
-      <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-5">
-        <span class="w-2 h-2 rounded-full bg-blue-600"></span>
+      <!-- 신뢰 보증 크라운 뱃지 -->
+      <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold bg-[#10192b]/85 border border-[#c9a55c]/50 text-[#e2c687] shadow-md mb-5 backdrop-blur-xs">
+        <i class="fa-solid fa-crown text-[#d4b068] text-xs"></i>
         <span>{{ region.dong }} 학군 전담 | 서울대·연고대 및 베테랑 강사진 100% 신원 보증</span>
       </div>
       
       <!-- 네이버 상위 노출 순서: 1. H1 ➔ 2. meta ➔ 3. H2 ➔ 4. 일반글 P -->
-      <h1 itemprop="headline" class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.22] sm:leading-[1.18] mb-3">
-        <span class="highlight text-blue-600">{{ shortSidoName }} {{ gradeShortName }} {{ subjectName }} 과외 · {{ region.dong }} {{ grade }} {{ subjectName }}과외</span><br />
-        1:1 맞춤 학습으로 성적 역전!
+      <h1 itemprop="headline" class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-white leading-[1.24] sm:leading-[1.2] mb-3">
+        <span class="gold-gradient-text font-royal-serif">{{ shortSidoName }} {{ gradeShortName }} {{ subjectName }} 과외 · {{ region.dong }} {{ grade }} {{ subjectName }}과외</span><br />
+        <span class="text-white">1:1 맞춤 학습으로 성적 역전!</span>
       </h1>
       <meta itemprop="name" :content="`${shortSidoName} ${gradeShortName} ${subjectName} 과외 · ${shortSidoName} ${gradeShortName} 과외 (${region.dong})`" />
       <meta itemprop="description" :content="`${shortSidoName} ${gradeShortName} ${subjectName} 과외 및 ${shortSidoName} ${gradeShortName} 과외 전문 매칭. ${displayRegionName} ${grade} ${subjectName} 1:1 방문·화상 맞춤 수업`" />
@@ -24,75 +35,80 @@
       <h2 class="hero-subtitle">
         {{ shortSidoName }} {{ gradeShortName }} 과외 · {{ displayRegionName }} {{ gradeShortName }} {{ subjectName }} 과외 검증된 전문 선생님 1:1 매칭
       </h2>
-      <p class="sub-headline text-xs sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
+      <p class="sub-headline text-xs sm:text-base text-slate-200/90 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
         {{ shortSidoName }} {{ gradeShortName }} {{ subjectName }} 과외 및 {{ shortSidoName }} {{ gradeShortName }} 과외를 찾으시는 학부모님을 위해 {{ region.dong }} 인근 학교별 기출 족보 분석부터 개인별 취약 개념 완벽 보완, 투명한 과외비 안내와 무료 시범수업까지 1:1 밀착 커리큘럼을 제공합니다.
       </p>
 
-      <!-- 4대 핵심 신뢰 지표 바 -->
+      <!-- 4대 핵심 신뢰 지표 바 (다크 글래스 & 골드 보더) -->
       <div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-7 text-left">
-        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
-          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+        <div class="trust-glass-card">
+          <i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
           <div>
-            <strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
-            <span class="text-[11px] text-slate-500 leading-tight">학력·경력 증명서 인증</span>
+            <strong class="block text-xs sm:text-sm font-bold text-white">100% 서류 검증</strong>
+            <span class="text-[11px] text-slate-300 leading-tight">학력·경력 증명서 인증</span>
           </div>
         </div>
 
-        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
-          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+        <div class="trust-glass-card">
+          <i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
           <div>
-            <strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
-            <span class="text-[11px] text-slate-500 leading-tight">직접 받아보고 선택</span>
+            <strong class="block text-xs sm:text-sm font-bold text-white">무료 시범수업</strong>
+            <span class="text-[11px] text-slate-300 leading-tight">직접 받아보고 선택</span>
           </div>
         </div>
 
-        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
-          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+        <div class="trust-glass-card">
+          <i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
           <div>
-            <strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 투명 시세</strong>
-            <span class="text-[11px] text-slate-500 leading-tight">동네 표준 시세 가이드</span>
+            <strong class="block text-xs sm:text-sm font-bold text-white">과외 비용 투명 시세</strong>
+            <span class="text-[11px] text-slate-300 leading-tight">동네 표준 시세 가이드</span>
           </div>
         </div>
 
-        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
-          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+        <div class="trust-glass-card">
+          <i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
           <div>
-            <strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
-            <span class="text-[11px] text-slate-500 leading-tight">{{ region.dong }} 3개년 족보 완파</span>
+            <strong class="block text-xs sm:text-sm font-bold text-white">학교별 기출 분석</strong>
+            <span class="text-[11px] text-slate-300 leading-tight">{{ region.dong }} 3개년 족보 완파</span>
           </div>
         </div>
       </div>
 
-      <!-- CTA 그룹 -->
+      <!-- 시안 스타일 듀얼 CTA 버튼 그룹 -->
       <div class="flex flex-col items-center gap-3.5 mb-6">
-        <a 
-          href="#consult-section" 
-          class="inline-flex items-center justify-center gap-2 w-full max-w-md py-4 px-6 bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-sm sm:text-base rounded-xl shadow-md hover:shadow-lg transition-all"
-        >
-          <i class="fa-solid fa-file-signature text-base"></i>
-          <span>{{ region.dong }} 과외 시세 확인 & 무료 시범수업 신청</span>
-        </a>
-        <div class="flex items-center gap-2 text-xs sm:text-sm text-slate-500">
-          <i class="fa-solid fa-phone text-blue-600 text-xs"></i>
-          <span>실시간 학습상담 직통: <strong class="text-slate-800 font-bold">010-5961-5807</strong></span>
+        <div class="flex items-center justify-center gap-3 flex-wrap w-full">
+          <a 
+            href="#consult-section" 
+            class="btn-hero-gold inline-flex items-center justify-center gap-2 py-3.5 px-7 font-extrabold text-sm sm:text-base rounded-lg shadow-lg transition-all no-underline"
+          >
+            <i class="fa-solid fa-crown text-sm"></i>
+            <span>{{ region.dong }} 무료 시범수업 신청</span>
+          </a>
+          <a 
+            href="tel:010-5961-5807" 
+            class="btn-hero-outline inline-flex items-center justify-center gap-2 py-3.5 px-6 font-bold text-sm sm:text-base rounded-lg transition-all no-underline"
+          >
+            <i class="fa-solid fa-phone text-xs text-[#e2c687]"></i>
+            <span>전화 상담 010-5961-5807</span>
+          </a>
         </div>
       </div>
 
       <!-- 실시간 접수 롤링 바 -->
-      <div class="inline-flex items-center gap-2.5 bg-slate-100/90 border border-slate-200/80 rounded-full px-4 py-1.5 text-xs text-slate-600 shadow-xs mb-6">
-        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
-        <span class="font-bold text-slate-700">실시간 매칭</span>
-        <span class="text-slate-300">|</span>
-        <span class="truncate max-w-[260px] sm:max-w-md font-medium text-slate-600">{{ currentNotice }}</span>
+      <div class="inline-flex items-center gap-2.5 bg-[#0a101d]/80 border border-[#c9a55c]/40 rounded-full px-4 py-1.5 text-xs text-slate-200 shadow-md mb-6">
+        <span class="w-1.5 h-1.5 rounded-full bg-[#e2c687] animate-pulse"></span>
+        <span class="font-bold text-[#e2c687]">실시간 매칭</span>
+        <span class="text-slate-500">|</span>
+        <span class="truncate max-w-[250px] sm:max-w-md font-medium text-slate-200">{{ currentNotice }}</span>
       </div>
 
       <!-- 태그 목록 -->
       <div class="flex justify-center flex-wrap gap-1.5">
-        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ shortSidoName }}{{ gradeShortName }}{{ subjectName }}과외</span>
-        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ shortSidoName }}{{ gradeShortName }}과외</span>
-        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}과외</span>
-        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}{{ subjectName }}과외</span>
-        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#1대1무료시범수업</span>
+        <span class="hero-tag">#{{ shortSidoName }}{{ gradeShortName }}{{ subjectName }}과외</span>
+        <span class="hero-tag">#{{ shortSidoName }}{{ gradeShortName }}과외</span>
+        <span class="hero-tag">#{{ region.dong }}과외</span>
+        <span class="hero-tag">#{{ region.dong }}{{ subjectName }}과외</span>
+        <span class="hero-tag">#로열클래스1대1과외</span>
       </div>
 
     </div>
@@ -101,6 +117,7 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { getShortSido } from '../utils/dataHelper'
 
 const props = defineProps({
   region: {
@@ -126,7 +143,7 @@ const props = defineProps({
 })
 
 const shortSidoName = computed(() => {
-  const s = (props.region?.sido || '').replace(/특별시|광역시|특별자치시|도/g, '').trim()
+  const s = getShortSido(props.region?.sido || '')
   return s || '서울'
 })
 
@@ -168,16 +185,7 @@ const displayRegionName = computed(() => {
     const sido = props.region.sido || ''
     const dong = props.region.dong || ''
     if (sido && dong) {
-      let shortSido = sido.slice(0, 2)
-      if (sido.includes('서울')) shortSido = '서울'
-      else if (sido.includes('대구')) shortSido = '대구'
-      else if (sido.includes('부산')) shortSido = '부산'
-      else if (sido.includes('인천')) shortSido = '인천'
-      else if (sido.includes('광주')) shortSido = '광주'
-      else if (sido.includes('대전')) shortSido = '대전'
-      else if (sido.includes('울산')) shortSido = '울산'
-      else if (sido.includes('경기')) shortSido = '경기'
-      return `${shortSido} ${dong}`
+      return `${getShortSido(sido) || '서울'} ${dong}`
     }
     return dong || sido
   }
@@ -186,15 +194,92 @@ const displayRegionName = computed(() => {
 </script>
 
 <style scoped>
-.hero-banner-clean {
+.royal-sub-hero {
+  background-color: #0d1424;
+  border-bottom: 2px solid #c9a55c;
   word-break: keep-all;
 }
 
+.hero-bg-wrap {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.hero-bg-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.hero-bg-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(10, 16, 29, 0.76) 0%,
+    rgba(16, 25, 43, 0.72) 50%,
+    rgba(10, 16, 29, 0.9) 100%
+  );
+}
+
+.gold-gradient-text {
+  background: linear-gradient(180deg, #f9ebb9 0%, #DFB970 50%, #c19344 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
+}
+
 .hero-subtitle {
-  font-size: 1.15rem;
+  font-size: 1.1rem;
   font-weight: 700;
-  color: #334155;
+  color: #ebd5a4;
   margin-bottom: 0.75rem;
   line-height: 1.5;
 }
+
+.trust-glass-card {
+  background: rgba(16, 25, 43, 0.75);
+  border: 1px solid rgba(201, 165, 92, 0.4);
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  backdrop-filter: blur(4px);
+}
+
+.btn-hero-gold {
+  background: linear-gradient(135deg, #e5c889 0%, #c49b50 100%);
+  color: #0d1424;
+  border: 1px solid #f2dfb3;
+}
+
+.btn-hero-gold:hover {
+  background: linear-gradient(135deg, #f0d79e 0%, #d4ab5f 100%);
+  transform: translateY(-2px);
+}
+
+.btn-hero-outline {
+  background: rgba(16, 25, 43, 0.72);
+  color: #f3e4be;
+  border: 1.5px solid #c9a55c;
+  backdrop-filter: blur(6px);
+}
+
+.btn-hero-outline:hover {
+  background: rgba(201, 165, 92, 0.22);
+  transform: translateY(-2px);
+}
+
+.hero-tag {
+  font-size: 11px;
+  padding: 4px 10px;
+  background: rgba(16, 25, 43, 0.8);
+  border: 1px solid rgba(201, 165, 92, 0.35);
+  color: #e2c687;
+  border-radius: 6px;
+  font-weight: 600;
+}
 </style>