145 lines
4.5 KiB
Vue
145 lines
4.5 KiB
Vue
<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>
|
|
|
|
<!-- 3. 상단 히어로 배너 (H1 태그 포함) -->
|
|
<HeroBanner
|
|
:region="parsed.region"
|
|
:shortRegionName="parsed.shortRegionName"
|
|
:grade="parsed.grade"
|
|
: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) -->
|
|
<FaqAccordion
|
|
:regionDong="parsed.dong"
|
|
:grade="parsed.grade"
|
|
:subjectName="parsed.subjectName"
|
|
/>
|
|
|
|
<!-- 11. 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
|
<FastConsultFocus
|
|
:regionDong="parsed.dong"
|
|
:grade="parsed.grade"
|
|
:subjectName="parsed.subjectName"
|
|
/>
|
|
|
|
<!-- 12. 과목별 1타 강사진 갤러리 캐러셀 (클릭 시 페이지 모달 확대 및 상담 연동) -->
|
|
<SubjectCarousel
|
|
:regionDong="parsed.dong"
|
|
:grade="parsed.grade"
|
|
: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"
|
|
/>
|
|
|
|
<!-- 14. 클린 사이트 푸터 -->
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
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 || '공부짝꿍'
|
|
|
|
// URL 파라미터 파싱
|
|
const slug = route.params.slug
|
|
const parsed = parseRouteSlug(slug)
|
|
|
|
// 커리큘럼 데이터 로드
|
|
const curriculum = getCurriculumBySubject(parsed.subjectKey)
|
|
const allSubjects = getAllSubjectsList()
|
|
const popularRegions = getPopularRegions(12)
|
|
|
|
// 네이버 Yeti 봇 100% 대응 SEO 메타태그 설정
|
|
const seo = generateSeoMeta(
|
|
parsed,
|
|
config.public.siteName,
|
|
config.public.siteDomain
|
|
)
|
|
|
|
useHead({
|
|
title: seo.title,
|
|
meta: seo.meta,
|
|
link: seo.link,
|
|
script: seo.script
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.landing-page-wrap {
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|