286 lines
10 KiB
Vue
286 lines
10 KiB
Vue
<template>
|
|
<section class="royal-sub-hero relative overflow-hidden text-center" itemscope itemtype="https://schema.org/Course">
|
|
|
|
<!-- 배경: 서울 통창 스카이라인 라운지 이미지 & 다크 네이비 오버레이 -->
|
|
<div class="hero-bg-wrap">
|
|
<img
|
|
src="/img/hero-seoul-bg.jpg"
|
|
:alt="`${shortSidoName} ${gradeShortName} ${subjectName} 과외 · ${region.dong} ${grade} ${subjectName}과외 스터디 라운지`"
|
|
class="hero-bg-img"
|
|
width="1920"
|
|
height="1080"
|
|
decoding="async"
|
|
fetchpriority="high"
|
|
/>
|
|
<div class="hero-bg-overlay"></div>
|
|
</div>
|
|
|
|
<div class="max-w-4xl mx-auto relative z-10 px-4 sm:px-6 pt-12 sm:pt-16 pb-16 sm:pb-20">
|
|
|
|
<!-- 신뢰 보증 크라운 뱃지 -->
|
|
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold bg-[#10192b]/85 border border-[#c9a55c]/50 text-[#e2c687] shadow-md mb-5 backdrop-blur-xs">
|
|
<i class="fa-solid fa-crown text-[#d4b068] text-xs"></i>
|
|
<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-white leading-[1.24] sm:leading-[1.2] mb-3">
|
|
<span class="gold-gradient-text font-royal-serif">{{ shortSidoName }} {{ gradeShortName }} {{ subjectName }} 과외 · {{ region.dong }} {{ grade }} {{ subjectName }}과외</span><br />
|
|
<span class="text-white">1:1 맞춤 학습으로 성적 역전!</span>
|
|
</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-200/90 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="trust-glass-card">
|
|
<i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
|
|
<div>
|
|
<strong class="block text-xs sm:text-sm font-bold text-white">100% 서류 검증</strong>
|
|
<span class="text-[11px] text-slate-300 leading-tight">학력·경력 증명서 인증</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trust-glass-card">
|
|
<i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
|
|
<div>
|
|
<strong class="block text-xs sm:text-sm font-bold text-white">무료 시범수업</strong>
|
|
<span class="text-[11px] text-slate-300 leading-tight">직접 받아보고 선택</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trust-glass-card">
|
|
<i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
|
|
<div>
|
|
<strong class="block text-xs sm:text-sm font-bold text-white">과외 비용 투명 시세</strong>
|
|
<span class="text-[11px] text-slate-300 leading-tight">동네 표준 시세 가이드</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trust-glass-card">
|
|
<i class="fa-solid fa-circle-check text-[#e2c687] text-sm sm:text-base mt-0.5 shrink-0"></i>
|
|
<div>
|
|
<strong class="block text-xs sm:text-sm font-bold text-white">학교별 기출 분석</strong>
|
|
<span class="text-[11px] text-slate-300 leading-tight">{{ region.dong }} 3개년 족보 완파</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시안 스타일 듀얼 CTA 버튼 그룹 -->
|
|
<div class="flex flex-col items-center gap-3.5 mb-6">
|
|
<div class="flex items-center justify-center gap-3 flex-wrap w-full">
|
|
<a
|
|
href="#consult-section"
|
|
class="btn-hero-gold inline-flex items-center justify-center gap-2 py-3.5 px-7 font-extrabold text-sm sm:text-base rounded-lg shadow-lg transition-all no-underline"
|
|
>
|
|
<i class="fa-solid fa-crown text-sm"></i>
|
|
<span>{{ region.dong }} 무료 시범수업 신청</span>
|
|
</a>
|
|
<a
|
|
href="tel:010-5961-5807"
|
|
class="btn-hero-outline inline-flex items-center justify-center gap-2 py-3.5 px-6 font-bold text-sm sm:text-base rounded-lg transition-all no-underline"
|
|
>
|
|
<i class="fa-solid fa-phone text-xs text-[#e2c687]"></i>
|
|
<span>전화 상담 010-5961-5807</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 실시간 접수 롤링 바 -->
|
|
<div class="inline-flex items-center gap-2.5 bg-[#0a101d]/80 border border-[#c9a55c]/40 rounded-full px-4 py-1.5 text-xs text-slate-200 shadow-md mb-6">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-[#e2c687] animate-pulse"></span>
|
|
<span class="font-bold text-[#e2c687]">실시간 매칭</span>
|
|
<span class="text-slate-500">|</span>
|
|
<span class="truncate max-w-[250px] sm:max-w-md font-medium text-slate-200">{{ currentNotice }}</span>
|
|
</div>
|
|
|
|
<!-- 태그 목록 -->
|
|
<div class="flex justify-center flex-wrap gap-1.5">
|
|
<span class="hero-tag">#{{ shortSidoName }}{{ gradeShortName }}{{ subjectName }}과외</span>
|
|
<span class="hero-tag">#{{ shortSidoName }}{{ gradeShortName }}과외</span>
|
|
<span class="hero-tag">#{{ region.dong }}과외</span>
|
|
<span class="hero-tag">#{{ region.dong }}{{ subjectName }}과외</span>
|
|
<span class="hero-tag">#로열클래스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) {
|
|
return `${getShortSido(sido) || '서울'} ${dong}`
|
|
}
|
|
return dong || sido
|
|
}
|
|
return ''
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.royal-sub-hero {
|
|
background-color: #0d1424;
|
|
border-bottom: 2px solid #c9a55c;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.hero-bg-wrap {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-bg-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.hero-bg-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(10, 16, 29, 0.76) 0%,
|
|
rgba(16, 25, 43, 0.72) 50%,
|
|
rgba(10, 16, 29, 0.9) 100%
|
|
);
|
|
}
|
|
|
|
.gold-gradient-text {
|
|
background: linear-gradient(180deg, #f9ebb9 0%, #DFB970 50%, #c19344 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: #ebd5a4;
|
|
margin-bottom: 0.75rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.trust-glass-card {
|
|
background: rgba(16, 25, 43, 0.75);
|
|
border: 1px solid rgba(201, 165, 92, 0.4);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.btn-hero-gold {
|
|
background: linear-gradient(135deg, #e5c889 0%, #c49b50 100%);
|
|
color: #0d1424;
|
|
border: 1px solid #f2dfb3;
|
|
}
|
|
|
|
.btn-hero-gold:hover {
|
|
background: linear-gradient(135deg, #f0d79e 0%, #d4ab5f 100%);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-hero-outline {
|
|
background: rgba(16, 25, 43, 0.72);
|
|
color: #f3e4be;
|
|
border: 1.5px solid #c9a55c;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.btn-hero-outline:hover {
|
|
background: rgba(201, 165, 92, 0.22);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hero-tag {
|
|
font-size: 11px;
|
|
padding: 4px 10px;
|
|
background: rgba(16, 25, 43, 0.8);
|
|
border: 1px solid rgba(201, 165, 92, 0.35);
|
|
color: #e2c687;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|