ui 개선 완료

gyeonggi/pages/[...slug].vue

@@ -1,13 +1,28 @@
-<template>
-  <div class="landing-page-wrap">
-    <!-- 1. 광고 랜딩 전용 지역 식별 바 (외부 이탈 링크 없음) -->
-    <div class="ad-location-bar">
-      <span class="loc-badge-tag">[지역센터]</span>
-      <span class="loc-text">{{ parsed.shortRegionName }} ({{ parsed.sigungu }}) 관내 초·중·고 전담</span>
-      <span class="loc-tag">1:1 맞춤 배정 센터</span>
+<template>
+  <div class="landing-page-wrap bg-[#F8FAFC] min-h-screen text-slate-800 antialiased">
+    <!-- 1. 클린 미니멀 프리미엄 네비게이션 헤더 (기본 홈과 동일) -->
+    <AppHeader :siteName="siteName" />
+
+    <!-- 2. 세련된 지역 센터 식별 서브 바 (모던 칩 배너) -->
+    <div class="bg-blue-50/70 border-b border-blue-100/70 py-2.5 px-4">
+      <div class="max-w-4xl mx-auto flex items-center justify-between flex-wrap gap-2 text-xs">
+        <div class="flex items-center gap-2">
+          <span class="inline-flex items-center gap-1 font-bold text-blue-700 bg-white px-2.5 py-0.5 rounded-full border border-blue-200/80 shadow-xs">
+            <i class="fa-solid fa-location-dot text-blue-600 text-[10px]"></i>
+            {{ parsed.shortRegionName }} 센터
+          </span>
+          <span class="text-slate-600 font-medium">
+            {{ parsed.dong }} ({{ parsed.sigungu }}) 관내 초·중·고 1:1 맞춤 전담
+          </span>
+        </div>
+        <div class="hidden sm:flex items-center gap-1 text-slate-500 font-medium">
+          <i class="fa-solid fa-shield-check text-emerald-600 text-xs"></i>
+          <span>검증된 전문 선생님 100% 매칭</span>
+        </div>
+      </div>
     </div>
 
-    <!-- 2. 상단 히어로 배너 (Header 제거, H1 태그 포함) -->
+    <!-- 3. 상단 히어로 배너 (H1 태그 포함) -->
     <HeroBanner 
       :region="parsed.region" 
       :shortRegionName="parsed.shortRegionName" 
@@ -76,19 +91,15 @@
       :subjectName="parsed.subjectName" 
     />
 
-    <!-- 12. 과목별 1타 강사진 갤러리 캐러셀 (클릭 시 페이지 모달 확대 및 상담 연동) -->
-    <SubjectCarousel 
-      :regionDong="parsed.dong" 
-      :grade="parsed.grade" 
-      :currentSubject="parsed.subjectName" 
-    />
-
     <!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
     <ConsultForm 
       :regionName="parsed.shortRegionName" 
       :defaultGrade="parsed.grade" 
       :defaultSubject="parsed.subjectName" 
     />
+
+    <!-- 14. 클린 사이트 푸터 -->
+    <AppFooter />
   </div>
 </template>
 
@@ -99,6 +110,7 @@ import { generateSeoMeta } from '~/utils/seoHelper'
 
 const route = useRoute()
 const config = useRuntimeConfig()
+const siteName = config.public?.siteName || '새솔 1:1 맞춤과외'
 
 // URL 파라미터 파싱
 const slug = route.params.slug
@@ -129,34 +141,4 @@ useHead({
   width: 100%;
   overflow-x: hidden;
 }
-
-.ad-location-bar {
-  max-width: 1080px;
-  margin: 10px auto;
-  padding: 8px 16px;
-  font-size: clamp(0.78rem, 2vw, 0.88rem);
-  color: #334155;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.loc-pin {
-  font-size: 1rem;
-}
-
-.loc-text {
-  font-weight: 700;
-  color: var(--primary-color, #1e3a8a);
-}
-
-.loc-tag {
-  font-size: 0.75rem;
-  font-weight: 800;
-  background: var(--badge-bg, rgba(30, 58, 138, 0.08));
-  color: var(--primary-color, #1e3a8a);
-  padding: 2px 8px;
-  border-radius: 4px;
-}
 </style>