202 lines
9.6 KiB
Vue
202 lines
9.6 KiB
Vue
<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">
|
|
|
|
<!-- 은은한 상단 엠비언트 라이트 -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
|
|
|
|
<div class="max-w-4xl mx-auto relative z-10">
|
|
|
|
<!-- 신뢰 보증 뱃지 -->
|
|
<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>
|
|
<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>
|
|
<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 방문·화상 맞춤 수업`" />
|
|
<meta itemprop="keywords" :content="`${shortSidoName} ${gradeShortName} ${subjectName} 과외, ${shortSidoName} ${gradeShortName} 과외, ${region.dong} ${gradeShortName} ${subjectName} 과외, ${region.dong} ${gradeShortName} 과외, ${displayRegionName} ${grade} ${subjectName}과외`" />
|
|
<meta itemprop="image" content="/img/math-tutoring.png" />
|
|
<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">
|
|
{{ shortSidoName }} {{ gradeShortName }} {{ subjectName }} 과외 및 {{ shortSidoName }} {{ gradeShortName }} 과외를 찾으시는 학부모님을 위해 {{ region.dong }} 인근 학교별 기출 족보 분석부터 개인별 취약 개념 완벽 보완, 투명한 과외비 안내와 무료 시범수업까지 1:1 밀착 커리큘럼을 제공합니다.
|
|
</p>
|
|
|
|
<!-- 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>
|
|
<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>
|
|
</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>
|
|
<strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
|
|
<span class="text-[11px] text-slate-500 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>
|
|
<strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 투명 시세</strong>
|
|
<span class="text-[11px] text-slate-500 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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</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>
|
|
|
|
<!-- 태그 목록 -->
|
|
<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>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { getShortSido } from '../utils/dataHelper'
|
|
|
|
const props = defineProps({
|
|
region: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
shortRegionName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
grade: {
|
|
type: String,
|
|
default: '중학생'
|
|
},
|
|
gradeShort: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
subjectName: {
|
|
type: String,
|
|
default: '수학'
|
|
}
|
|
})
|
|
|
|
const shortSidoName = computed(() => {
|
|
const s = getShortSido(props.region?.sido || '')
|
|
return s || '경기'
|
|
})
|
|
|
|
const gradeShortName = computed(() => {
|
|
if (props.gradeShort) return props.gradeShort
|
|
return props.grade === '초등학생' ? '초등' : props.grade === '고등학생' ? '고등' : '중등'
|
|
})
|
|
|
|
const noticeIdx = ref(0)
|
|
let timer = null
|
|
|
|
const notices = computed(() => {
|
|
const d = props.region?.dong || '관내'
|
|
const sub = props.subjectName || '과목'
|
|
const grd = props.grade || '중학생'
|
|
return [
|
|
`${d} ${grd} ${sub} 1:1 맞춤 전담 선생님 매칭 완료`,
|
|
`${d} 내신 1등급 도약 무료 시범수업 신청 접수 중`,
|
|
`${d} 학교별 3개년 기출 족보 분석 자료 배부 완료`,
|
|
`${d} 취약 단원 집중 클리닉 및 모의수업 예약 마감 임박`
|
|
]
|
|
})
|
|
|
|
const currentNotice = computed(() => notices.value[noticeIdx.value % notices.value.length])
|
|
|
|
onMounted(() => {
|
|
timer = setInterval(() => {
|
|
noticeIdx.value = (noticeIdx.value + 1) % notices.value.length
|
|
}, 3500)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (timer) clearInterval(timer)
|
|
})
|
|
|
|
const displayRegionName = computed(() => {
|
|
if (props.shortRegionName) return props.shortRegionName
|
|
if (props.region) {
|
|
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 dong || sido
|
|
}
|
|
return ''
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-banner-clean {
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.15rem;
|
|
font-weight: 700;
|
|
color: #334155;
|
|
margin-bottom: 0.75rem;
|
|
line-height: 1.5;
|
|
}
|
|
</style>
|