방식 개편
This commit is contained in:
@@ -1,27 +1,45 @@
|
||||
<template>
|
||||
<header class="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">
|
||||
|
||||
<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="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">
|
||||
<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>
|
||||
|
||||
<!-- SEO 메인 H1 (사용자 지정 롱테일 조합형: [지역] + [학년] + [과목]과외 + 검증된 전문 선생님 100% 매칭) -->
|
||||
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.22] sm:leading-[1.18] mb-4">
|
||||
<span>{{ displayRegionName }} {{ grade }} {{ subjectName }}과외</span><br />
|
||||
<span class="text-blue-600">우리 아이 맞춤 검증된 전문 선생님 100% 매칭</span>
|
||||
</h1>
|
||||
|
||||
<!-- 서브 카피 (비용 시세 비교 + 학교 기출 분석 + 무료 시범수업 신뢰 트리거) -->
|
||||
<p class="text-xs sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
|
||||
{{ region.dong }} 인근 학교별 기출 분석부터 과외 비용·시세 비교, 취약 개념 클리닉까지.<br class="hidden sm:inline" />
|
||||
직접 수업받아보고 결정하는 <strong>1:1 무료 방문·화상 시범수업</strong>을 신청하세요.
|
||||
<!-- 1. H1 -->
|
||||
<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>
|
||||
<!-- 2. meta (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" />
|
||||
<!-- 3. H2 (meta 바로 다음 줄) -->
|
||||
<h2 class="hero-subtitle">
|
||||
{{ shortSidoName }} {{ gradeShortName }} 과외 · {{ displayRegionName }} {{ gradeShortName }} {{ subjectName }} 과외
|
||||
검증된 전문 선생님 1:1 매칭
|
||||
</h2>
|
||||
<!-- 4. 일반글 p (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대 핵심 신뢰 지표 바 -->
|
||||
@@ -61,10 +79,8 @@
|
||||
|
||||
<!-- 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"
|
||||
>
|
||||
<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>
|
||||
@@ -75,7 +91,8 @@
|
||||
</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">
|
||||
<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>
|
||||
@@ -84,15 +101,24 @@
|
||||
|
||||
<!-- 태그 목록 -->
|
||||
<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">#{{ 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">#{{ grade }}내신대비</span>
|
||||
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#과외비용시세</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>
|
||||
<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>
|
||||
</header>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -111,12 +137,24 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: '중학생'
|
||||
},
|
||||
gradeShort: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
subjectName: {
|
||||
type: String,
|
||||
default: '수학'
|
||||
}
|
||||
})
|
||||
|
||||
const shortSidoName = computed(() => {
|
||||
return (props.region?.sido || '').replace(/특별시|광역시|특별자치시|도/g, '').trim()
|
||||
})
|
||||
|
||||
const gradeShortName = computed(() => {
|
||||
return props.gradeShort || (props.grade === '초등학생' ? '초등' : props.grade === '고등학생' ? '고등' : '중등')
|
||||
})
|
||||
|
||||
const noticeIdx = ref(0)
|
||||
let timer = null
|
||||
|
||||
@@ -171,4 +209,12 @@ const displayRegionName = computed(() => {
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user