ui 개선 완료

This commit is contained in:
2026-10-20 13:51:33 +09:00
parent d5e7c16239
commit 24c2ceefa2
24 changed files with 963 additions and 352 deletions
+27 -38
View File
@@ -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"
@@ -82,6 +97,9 @@
:defaultGrade="parsed.grade"
:defaultSubject="parsed.subjectName"
/>
<!-- 14. 클린 사이트 푸터 -->
<AppFooter />
</div>
</template>
@@ -92,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
@@ -122,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>