150 lines
5.3 KiB
Vue
150 lines
5.3 KiB
Vue
<template>
|
||
<div class="landing-page-wrap bg-[#fbf8f3] min-h-screen text-[#151c28] antialiased">
|
||
<!-- 1. 로열클래스 다크 네이비 & 골드 엠블럼 헤더 -->
|
||
<AppHeader :siteName="siteName" consultHref="#consult-section" />
|
||
|
||
<!-- 2. 더세이브 방식 시맨틱 브레드크럼 및 지역 센터 식별 서브 바 (로열 네이비·골드 톤) -->
|
||
<nav class="bc bg-[#131e35] border-b border-[#c9a55c]/30 py-2.5 px-4" aria-label="현재 위치">
|
||
<div class="max-w-4xl mx-auto flex items-center justify-between flex-wrap gap-2 text-xs">
|
||
<div class="flex items-center gap-1.5 flex-wrap text-slate-300">
|
||
<NuxtLink to="/" class="font-semibold text-[#e2c687] hover:underline">홈</NuxtLink>
|
||
<span class="text-slate-500">›</span>
|
||
<NuxtLink :to="`/${encodeURIComponent(parsed.dong)}`" class="text-slate-200 hover:text-[#e2c687] hover:underline">{{ parsed.dong }} 과외</NuxtLink>
|
||
<span class="text-slate-500">›</span>
|
||
<strong class="font-bold text-white">{{ parsed.shortSido }} {{ parsed.gradeShort }} {{ parsed.subjectName }} 과외</strong>
|
||
</div>
|
||
<div class="hidden sm:flex items-center gap-1.5 text-slate-300 font-medium">
|
||
<span class="inline-flex items-center gap-1 font-bold text-[#0d1424] bg-[#e2c687] px-2.5 py-0.5 rounded-full border border-[#f2dfb3] shadow-xs">
|
||
<i class="fa-solid fa-crown text-[#0d1424] text-[10px]"></i>
|
||
{{ parsed.shortRegionName }} 센터
|
||
</span>
|
||
<span class="text-[#ebd5a4]">검증된 전문 선생님 100% 매칭</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 3. 상단 히어로 배너 (H1 ➔ meta ➔ H2 ➔ P) -->
|
||
<HeroBanner
|
||
:region="parsed.region"
|
||
:shortRegionName="parsed.shortRegionName"
|
||
:grade="parsed.grade"
|
||
:grade-short="parsed.gradeShort"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 3. 실시간 성과 지표 4선 -->
|
||
<QuickMetrics :regionDong="parsed.dong" />
|
||
|
||
<!-- 4. 인근 학교별 내신 기출 정밀 분석 -->
|
||
<NearbySchools
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 5. 과목별 상세 커리큘럼 & 1등급 도약 솔루션 -->
|
||
<SubjectMastery
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:curriculum="curriculum"
|
||
/>
|
||
|
||
<!-- 6. 1:1 강사진 4단계 검증 프로세스 -->
|
||
<TeacherVerification />
|
||
|
||
<!-- 7. 메타인지 스터디 플래너 & 밀착 코칭 시스템 -->
|
||
<CoachingSystem />
|
||
|
||
<!-- 8. 실제 성적 향상 수기 (해당 학년/과목 100% 매칭) -->
|
||
<SuccessStories
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 9. 수업 진행 4단계 절차 안내 -->
|
||
<ProcessGuide />
|
||
|
||
<!-- 10. 자주 묻는 질문 (FAQ - details/summary 시맨틱 구조) -->
|
||
<FaqAccordion
|
||
:regionDong="parsed.dong"
|
||
:shortSido="parsed.shortSido"
|
||
:grade="parsed.grade"
|
||
:gradeShort="parsed.gradeShort"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 11. 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||
<FastConsultFocus
|
||
:regionDong="parsed.dong"
|
||
:shortSido="parsed.shortSido"
|
||
:grade="parsed.grade"
|
||
:gradeShort="parsed.gradeShort"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 12. 과목별 1타 강사진 갤러리 캐러셀 (클릭 시 페이지 모달 확대 및 상담 연동) -->
|
||
<SubjectCarousel
|
||
:regionDong="parsed.dong"
|
||
:shortSido="parsed.shortSido"
|
||
:grade="parsed.grade"
|
||
:gradeShort="parsed.gradeShort"
|
||
:currentSubject="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 13. 크롤러 및 사용자 탐색용 유기적 내부 링크 허브 (Internal Link Hub) -->
|
||
<InternalLinkHub
|
||
:regionDong="parsed.dong"
|
||
:grade="parsed.grade"
|
||
:subjectName="parsed.subjectName"
|
||
/>
|
||
|
||
<!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
|
||
<ConsultForm
|
||
:regionName="parsed.shortRegionName"
|
||
:defaultGrade="parsed.grade"
|
||
:defaultSubject="parsed.subjectName"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { parseRouteSlug, getCurriculumBySubject, getAllSubjectsList, getPopularRegions } from '~/utils/dataHelper'
|
||
import { generateSeoMeta } from '~/utils/seoHelper'
|
||
|
||
const route = useRoute()
|
||
const config = useRuntimeConfig()
|
||
const siteName = config.public?.siteName || '로열클래스 1:1 과외'
|
||
|
||
// URL 파라미터 파싱
|
||
const parsed = computed(() => parseRouteSlug(route.params.slug))
|
||
|
||
// 커리큘럼 데이터 로드
|
||
const curriculum = computed(() => getCurriculumBySubject(parsed.value.subjectKey))
|
||
const allSubjects = getAllSubjectsList()
|
||
const popularRegions = getPopularRegions(12)
|
||
|
||
// 네이버 Yeti 봇 100% 대응 SEO 메타태그 설정
|
||
const seo = computed(() => generateSeoMeta(
|
||
parsed.value,
|
||
config.public.siteName,
|
||
config.public.siteDomain
|
||
))
|
||
|
||
useHead(() => ({
|
||
title: seo.value.title,
|
||
meta: seo.value.meta,
|
||
link: seo.value.link,
|
||
script: seo.value.script
|
||
}))
|
||
</script>
|
||
|
||
<style scoped>
|
||
.landing-page-wrap {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
}
|
||
</style>
|