748 lines
39 KiB
Vue
748 lines
39 KiB
Vue
<template>
|
|
<div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative min-h-screen w-full">
|
|
|
|
<!-- 1. Header (클린 미니멀 프리미엄 네비게이션) -->
|
|
<header class="bg-white/95 backdrop-blur-md border-b border-slate-200/80 sticky top-0 z-40 w-full transition-all">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
|
<NuxtLink to="/" class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center text-white font-extrabold text-base shadow-sm">
|
|
{{ siteName.charAt(0) }}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ siteName }}</span>
|
|
<span class="hidden sm:inline-flex items-center text-[11px] font-semibold text-blue-700 bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-100">
|
|
교육청 등록 협력
|
|
</span>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a href="tel:010-5961-5807" class="hidden sm:flex items-center gap-1.5 text-sm font-semibold text-slate-600 hover:text-blue-600 transition">
|
|
<i class="fa-solid fa-phone text-blue-600 text-xs"></i>
|
|
<span>010-5961-5807</span>
|
|
</a>
|
|
<a href="#leadFormSection" class="bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-bold px-4 sm:px-5 py-2.5 rounded-xl transition shadow-sm hover:shadow flex items-center gap-1.5">
|
|
<span>무료 시범수업 신청</span>
|
|
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 2. Main Body -->
|
|
<main class="w-full pb-20">
|
|
|
|
<!-- 히어로 섹션 (H1 -> meta -> H2 -> p 순서) -->
|
|
<section class="hero-section w-full bg-white border-b border-slate-200/80 pt-12 sm:pt-16 pb-20 px-4 sm:px-6 text-center relative overflow-hidden" itemscope itemtype="https://schema.org/EducationalOrganization">
|
|
|
|
<!-- 은은한 상단 엠비언트 라이트 (절제된 디자이너 톤) -->
|
|
<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-6">
|
|
<span class="w-2 h-2 rounded-full bg-blue-600"></span>
|
|
<span>봉선·수완·일곡·첨단 등 광주 전지역 전담 | 서울대·전남대 및 베테랑 강사진 100% 신원 보증</span>
|
|
</div>
|
|
|
|
<!-- 1. 메인 H1 -->
|
|
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.2] sm:leading-[1.18] mb-3">
|
|
광주 중등 수학 과외 · 초·중·고 1:1 맞춤 과외 매칭<br class="hidden sm:inline" />
|
|
<span class="text-blue-600">내신·수능 성적 향상의 시작</span>
|
|
</h1>
|
|
<!-- 2. meta (H1 바로 다음 줄) -->
|
|
<meta itemprop="name" :content="`${siteName} - 광주 중등 수학 과외 · 광주 중등 과외 1:1 매칭`" />
|
|
<meta itemprop="description" content="광주 중등 수학 과외, 광주 중등 과외부터 초등·고등 국영수사과 1:1 방문·화상 맞춤 과외 매칭 및 과외비 투명 비교" />
|
|
<meta itemprop="keywords" content="광주 중등 수학 과외, 광주 중등 과외, 광주 고등 수학 과외, 광주 고등 과외, 광주 초등 수학 과외, 광주 초등 과외, 광주 중등 영어 과외, 광주 과외, 봉선동 과외" />
|
|
<meta itemprop="image" :content="`${siteDomain}/img/math-tutoring.png`" />
|
|
<link itemprop="url" :href="`${siteDomain}/`" />
|
|
<!-- 3. H2 (meta 바로 다음 줄) -->
|
|
<h2 class="hero-subtitle text-base sm:text-lg font-bold text-slate-700 mb-3">광주 중등 과외 · 초등·고등 국영수사과 검증된 전문 선생님 100% 1:1 매칭</h2>
|
|
<!-- 4. 일반글 p (H2 바로 다음 줄) -->
|
|
<p class="hero-desc text-sm sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
|
광주 중등 수학 과외 및 광주 중등 과외, 초등·고등 전 과목 과외 비용·시세 투명 비교부터 검증된 전문 선생님 무료 시범수업까지 학생에게 꼭 맞는 1:1 맞춤 수업을 제공합니다.
|
|
</p>
|
|
|
|
<!-- 4대 핵심 신뢰 보증 지표 (Trust Bar) -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-8">
|
|
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
|
|
<i class="fa-solid fa-circle-check text-blue-600 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 text-left flex items-start gap-2.5">
|
|
<i class="fa-solid fa-circle-check text-blue-600 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 text-left flex items-start gap-2.5">
|
|
<i class="fa-solid fa-circle-check text-blue-600 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 text-left flex items-start gap-2.5">
|
|
<i class="fa-solid fa-circle-check text-blue-600 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>
|
|
|
|
<!-- 실시간 매칭 알림 롤링 바 (세련된 미니멀 디자인) -->
|
|
<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">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span class="font-bold text-slate-700">실시간 접수</span>
|
|
<span class="text-slate-300">|</span>
|
|
<span class="text-slate-600 font-medium animate-pulse">{{ currentRollingMsg }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. 고전환 퀵 간편 신청 폼 섹션 (토스/숨고 스타일 직관적 세그먼트 칩 선택형) -->
|
|
<section id="leadFormSection" class="max-w-3xl mx-auto px-4 sm:px-6 -mt-10 relative z-20">
|
|
<div class="bg-white rounded-2xl border border-slate-200/90 shadow-xl shadow-slate-200/50 p-6 sm:p-9">
|
|
|
|
<div class="text-center mb-7">
|
|
<span class="inline-block text-xs font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full mb-2">30초 빠른 간편 신청</span>
|
|
<h2 class="text-xl sm:text-2xl font-extrabold text-slate-900">
|
|
광주 우리 동네 과외 시세 확인 & 무료 시범수업 신청
|
|
</h2>
|
|
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
|
신청 즉시 전담 학습 매니저가 1:1 맞춤 상담 및 최적의 선생님을 배정해 드립니다.
|
|
</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="handleSubmit" class="space-y-6">
|
|
|
|
<!-- 대상 학년 선택 -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
|
1. 학생 대상 학년 <span class="text-blue-600">*</span>
|
|
</label>
|
|
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
|
<button
|
|
type="button"
|
|
v-for="grade in gradeOptions"
|
|
:key="grade"
|
|
@click="formData.grade = grade"
|
|
:class="[
|
|
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
|
|
formData.grade === grade
|
|
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
|
|
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
|
|
]"
|
|
>
|
|
{{ grade }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 희망 과목 선택 -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
|
2. 희망 과목 <span class="text-blue-600">*</span>
|
|
</label>
|
|
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
|
<button
|
|
type="button"
|
|
v-for="sub in subjectOptions"
|
|
:data-subject="sub"
|
|
:key="sub"
|
|
@click="formData.subject = sub"
|
|
:class="[
|
|
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
|
|
formData.subject === sub
|
|
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
|
|
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
|
|
]"
|
|
>
|
|
{{ sub }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 수업 형태 선택 -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
|
3. 희망 수업 형태
|
|
</label>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<button
|
|
type="button"
|
|
v-for="mode in lessonModes"
|
|
:key="mode.id"
|
|
@click="formData.lessonType = mode.id"
|
|
:class="[
|
|
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center flex items-center justify-center gap-1.5',
|
|
formData.lessonType === mode.id
|
|
? 'bg-slate-900 text-white border-slate-900 shadow-sm'
|
|
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100'
|
|
]"
|
|
>
|
|
<i :class="mode.icon" class="text-xs"></i>
|
|
<span>{{ mode.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 거주 지역 (동/구 단위 입력) -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
|
4. 거주 지역 (동 이름)
|
|
</label>
|
|
<div class="relative">
|
|
<i class="fa-solid fa-location-dot absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
|
|
<input
|
|
type="text"
|
|
v-model="formData.region"
|
|
placeholder="예: 광주 남구 봉선동, 광산구 수완동 등"
|
|
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm transition"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 학습 고민 다중 선택 -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
|
5. 현재 가장 큰 학습 고민 (중복 선택 가능)
|
|
</label>
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
|
<button
|
|
type="button"
|
|
v-for="concern in concernOptions"
|
|
:key="concern"
|
|
@click="toggleConcern(concern)"
|
|
:class="[
|
|
'py-2 px-2.5 rounded-xl text-xs font-medium border transition-all text-center',
|
|
formData.concerns.includes(concern)
|
|
? 'bg-blue-50 text-blue-700 border-blue-300 font-bold'
|
|
: 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'
|
|
]"
|
|
>
|
|
{{ concern }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 학부모 연락처 입력 -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
|
6. 상담 받으실 학부모님 연락처 <span class="text-blue-600">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<i class="fa-solid fa-phone absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
|
|
<input
|
|
type="tel"
|
|
v-model="formData.phone"
|
|
@input="formatPhoneNumber"
|
|
maxlength="13"
|
|
placeholder="010-0000-0000"
|
|
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm font-semibold tracking-wide transition"
|
|
required
|
|
/>
|
|
</div>
|
|
<p class="text-[11px] text-slate-400 mt-1 pl-1">
|
|
* 과외 비용 및 시범수업 안내를 위해 안심번호로 안전하게 연결됩니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 개인정보 수집 동의 -->
|
|
<div class="flex items-center gap-2 pt-1">
|
|
<input
|
|
type="checkbox"
|
|
id="agreeTerms"
|
|
v-model="formData.agree"
|
|
class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500"
|
|
required
|
|
/>
|
|
<label for="agreeTerms" class="text-xs text-slate-500 cursor-pointer">
|
|
개인정보 수집 및 학습 상담 안내를 위한 연락에 동의합니다. (필수)
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 제출 CTA 버튼 -->
|
|
<button
|
|
type="submit"
|
|
:disabled="isSubmitting"
|
|
class="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 text-white font-extrabold text-base rounded-xl shadow-lg shadow-blue-500/25 transition-all flex items-center justify-center gap-2 cursor-pointer"
|
|
>
|
|
<span v-if="!isSubmitting">광주 과외 시세 확인 & 무료 시범수업 신청하기</span>
|
|
<span v-else class="flex items-center gap-2">
|
|
<i class="fa-solid fa-spinner animate-spin"></i>
|
|
접수 처리 중입니다...
|
|
</span>
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<!-- 신청 완료 메시지 팝업 모달/카드 -->
|
|
<div v-if="submitSuccess" id="submitResultBox" class="mt-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-center">
|
|
<i class="fa-solid fa-circle-check text-2xl text-emerald-600 mb-1"></i>
|
|
<h4 class="font-bold text-sm">상담 신청이 정상적으로 완료되었습니다!</h4>
|
|
<p class="text-xs text-emerald-700 mt-1">
|
|
광주 전문 교육 매니저가 남겨주신 연락처로 10분 내 순차 연락을 드립니다.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. 왜 '클래스픽' 과외인가? (차별화 3대 핵심 포인트) -->
|
|
<section class="max-w-5xl mx-auto px-4 sm:px-6 pt-20 pb-16">
|
|
<div class="text-center mb-12">
|
|
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">WHY CHOOSE US</span>
|
|
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
|
|
실패 없는 1:1 과외 매칭 시스템
|
|
</h2>
|
|
<p class="text-slate-500 text-xs sm:text-sm mt-2 max-w-xl mx-auto">
|
|
학습 성향 진단부터 과외 비용 투명 비교, 100% 신원 보증까지 빈틈없이 관리합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
|
01
|
|
</div>
|
|
<h3 class="text-base font-bold text-slate-900 mb-2">엄격한 4단계 강사 검증 시스템</h3>
|
|
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
|
대학 및 전공 증명서, 신원 조회, 교수법 테스트, 인성 면접을 통과한 상위 10% 베테랑 강사만을 배정합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
|
02
|
|
</div>
|
|
<h3 class="text-base font-bold text-slate-900 mb-2">광주 관내 학교별 기출 족보 분석</h3>
|
|
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
|
봉선동·수완동 등 광주 주요 중·고등학교의 최근 3개년 시험 출제 경향과 서술형 채점 기준을 철저히 분석합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
|
03
|
|
</div>
|
|
<h3 class="text-base font-bold text-slate-900 mb-2">100% 무료 시범수업 안심 보장제</h3>
|
|
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
|
수업을 직접 경험해본 후 최종 진행 여부를 결정하세요. 선생님과 성향이 맞지 않을 시 100% 무료 재매칭을 지원합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. 학부모 실제 리얼 후기 & 성적 향상 사례 -->
|
|
<section class="bg-white border-y border-slate-200/80 py-16 px-4 sm:px-6">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-10">
|
|
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">SUCCESS STORIES</span>
|
|
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
|
|
광주 학부모님들의 생생한 성적 역전 후기
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
|
<div class="flex items-center gap-1 text-amber-400 text-xs mb-2">
|
|
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
|
</div>
|
|
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
|
"봉선동 일반고 2학년 수학 4등급에서 허덕였는데, 기출 킬러문항 집중 클리닉 덕분에 이번 기말 94점 1등급 달성했습니다."
|
|
</p>
|
|
<div class="text-[11px] text-slate-500 font-medium">광주 남구 봉선동 고2 학부모님 (수학 과외)</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
|
<div class="flex items-center gap-1 text-amber-400 text-xs mb-2">
|
|
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
|
</div>
|
|
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
|
"수완동 중3 영어 서술형에서 늘 감점당했는데 선생님의 문법 구조화 독해법 덕분에 첫 시험에서 100점 맞았어요."
|
|
</p>
|
|
<div class="text-[11px] text-slate-500 font-medium">광주 광산구 수완동 중3 학부모님 (영어 과외)</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
|
<div class="flex items-center gap-1 text-amber-400 text-xs mb-2">
|
|
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
|
</div>
|
|
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
|
"학원에서는 늘 멍하니 앉아만 있던 아이가 1:1 과외를 시작한 뒤로 자기주도학습 습관이 잡히고 공부에 자신감이 붙었습니다."
|
|
</p>
|
|
<div class="text-[11px] text-slate-500 font-medium">광주 북구 일곡동 중1 학부모님 (전과목 코칭)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5-2. 과목별 1:1 맞춤과외 갤러리 캐러셀 -->
|
|
<SubjectCarousel :regionDong="defaultDong" shortSido="광주" grade="중학생" gradeShort="중등" />
|
|
|
|
<!-- 6. 자주 묻는 질문 (FAQ - 네이티브 details/summary 시맨틱 구조) -->
|
|
<section class="max-w-4xl mx-auto px-4 sm:px-6 py-16">
|
|
<div class="text-center mb-10">
|
|
<h2 class="text-2xl font-extrabold text-slate-900">광주 중등 수학 과외 · 광주 중등 과외 자주 묻는 질문</h2>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<details
|
|
v-for="(faq, idx) in faqs"
|
|
:key="idx"
|
|
:open="idx === 0"
|
|
class="qa border border-slate-200 rounded-xl overflow-hidden bg-white shadow-xs group"
|
|
>
|
|
<summary class="w-full text-left px-5 py-4 font-bold text-sm sm:text-base text-slate-900 cursor-pointer list-none flex justify-between items-center hover:bg-slate-50 transition">
|
|
<span>{{ faq.q }}</span>
|
|
<i class="fa-solid fa-chevron-down text-slate-400 text-xs transition-transform group-open:rotate-180"></i>
|
|
</summary>
|
|
<div class="ans px-5 pb-4 text-xs sm:text-sm text-slate-600 border-t border-slate-100 pt-3 leading-relaxed bg-slate-50/50">
|
|
{{ faq.a }}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. 관내 학년·과목·지역별 내부 연계 허브 (SSR SEO 크롤링 최적화) -->
|
|
<InternalLinkHub :regionDong="defaultDong" grade="중학생" subjectName="수학" />
|
|
|
|
</main>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
const config = useRuntimeConfig()
|
|
const siteName = config.public.siteName || '클래스픽'
|
|
const siteDomain = config.public.siteDomain || 'https://aeseo.store'
|
|
const defaultDong = '봉선동'
|
|
|
|
const gradeOptions = ['초등학생', '중1', '중2', '중3', '고1', '고2·고3']
|
|
const subjectOptions = ['수학', '영어', '국어', '과학', '사회/한국사', '전과목 코칭']
|
|
|
|
const lessonModes = [
|
|
{ id: '방문과외', label: '1:1 방문수업', icon: 'fa-solid fa-house' },
|
|
{ id: '화상과외', label: '1:1 실시간 화상', icon: 'fa-solid fa-laptop' },
|
|
{ id: '방문+화상혼합', label: '방문+화상 혼합', icon: 'fa-solid fa-layer-group' }
|
|
]
|
|
|
|
const concernOptions = [
|
|
'시험 서술형 감점', '개념 이해 부족', '응용/킬러문항 취약',
|
|
'학습 집중력 부족', '공부법/습관 부재', '진로/입시 상담 필요'
|
|
]
|
|
|
|
const formData = reactive({
|
|
grade: '중2',
|
|
subject: '수학',
|
|
lessonType: '방문과외',
|
|
region: '',
|
|
concerns: ['개념 이해 부족', '응용/킬러문항 취약'],
|
|
phone: '',
|
|
agree: true
|
|
})
|
|
|
|
function toggleConcern(concern) {
|
|
const idx = formData.concerns.indexOf(concern)
|
|
if (idx > -1) {
|
|
formData.concerns.splice(idx, 1)
|
|
} else {
|
|
formData.concerns.push(concern)
|
|
}
|
|
}
|
|
|
|
const isSubmitting = ref(false)
|
|
const submitSuccess = ref(false)
|
|
|
|
// 실시간 롤링 메시지
|
|
const rollingMessages = [
|
|
'광주 남구 봉선동 중2 수학 방문과외 시범수업 신청 완료 (1분 전)',
|
|
'광주 광산구 수완동 고1 영어 내신대비 상담 접수 (3분 전)',
|
|
'광주 북구 일곡동 중3 국어·수학 종합 패키지 문의 (5분 전)',
|
|
'광주 서구 치평동 초6 수학 선행학습 매칭 진행 중 (7분 전)'
|
|
]
|
|
const currentRollingMsg = ref(rollingMessages[0])
|
|
let rollingTimer = null
|
|
|
|
onMounted(() => {
|
|
// 외부 모달에서 과목 선택 시 반응형 폼 자동 동기화
|
|
if (typeof window !== 'undefined') {
|
|
window.addEventListener('select-subject', (e) => {
|
|
if (e.detail && e.detail.subject) {
|
|
const target = e.detail.subject;
|
|
try {
|
|
if (typeof subjects !== 'undefined' && Array.isArray(subjects)) {
|
|
const found = subjects.find(s => s.name === target || s.label.startsWith(target));
|
|
if (found) formData.subject = found.name;
|
|
} else if (typeof subjectOptions !== 'undefined' && Array.isArray(subjectOptions)) {
|
|
const found = subjectOptions.find(s => s === target || s.startsWith(target));
|
|
if (found) formData.subject = found;
|
|
} else {
|
|
formData.subject = target;
|
|
}
|
|
} catch (_) {
|
|
formData.subject = target;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
let idx = 0
|
|
rollingTimer = setInterval(() => {
|
|
idx = (idx + 1) % rollingMessages.length
|
|
currentRollingMsg.value = rollingMessages[idx]
|
|
}, 3500)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (rollingTimer) clearInterval(rollingTimer)
|
|
})
|
|
|
|
function formatPhoneNumber() {
|
|
let val = formData.phone.replace(/\D/g, '')
|
|
if (val.length >= 11) {
|
|
val = val.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
|
|
} else if (val.length >= 4) {
|
|
val = val.replace(/(\d{3})(\d{3,4})/, '$1-$2')
|
|
}
|
|
formData.phone = val
|
|
}
|
|
|
|
const faqs = reactive([
|
|
{
|
|
q: '광주 중등 수학 과외 · 광주 중등 과외 무료 시범수업은 어떻게 진행되나요?',
|
|
a: '광주 중등 수학 과외 및 광주 중등 과외 신청서 접수 후 광주 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤 가장 적합한 광주 초·중·고 과외 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
|
|
open: true
|
|
},
|
|
{
|
|
q: '광주 중등 수학 과외 및 광주 초·중·고 과외 비용·시세는 어떻게 되나요?',
|
|
a: '광주 중등 수학 과외, 광주 중등 과외, 광주 초·중·고 과외 비용은 학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 광주 우리 동네 과외 비용을 안내해 드립니다.',
|
|
open: false
|
|
},
|
|
{
|
|
q: '광주 중등 과외 · 광주 초·중·고 과외 선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
|
a: '광주 중등 수학 과외 및 광주 중등 과외 모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 광주 초·중·고 과외 전문 선생님입니다.',
|
|
open: false
|
|
},
|
|
{
|
|
q: '광주 중등 수학 과외 선생님이 아이와 맞지 않으면 교체가 가능한가요?',
|
|
a: '광주 중등 수학 과외 및 광주 중등 과외는 무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 광주 초·중·고 과외 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.',
|
|
open: false
|
|
}
|
|
])
|
|
|
|
async function handleSubmit() {
|
|
if (!formData.grade || !formData.subject || !formData.phone) {
|
|
alert('필수 항목을 모두 입력해 주세요.')
|
|
return
|
|
}
|
|
|
|
isSubmitting.value = true
|
|
try {
|
|
const res = await $fetch('/api/consult', {
|
|
method: 'POST',
|
|
body: {
|
|
name: '학부모 상담 신청',
|
|
phone: formData.phone,
|
|
grade: formData.grade,
|
|
subject: `${formData.subject} (${formData.lessonType})`,
|
|
region: formData.region || '광주 전지역',
|
|
message: `[학습고민] ${formData.concerns.join(', ')}`
|
|
}
|
|
})
|
|
|
|
if (res && res.success) {
|
|
submitSuccess.value = true
|
|
setTimeout(() => {
|
|
document.getElementById('submitResultBox')?.scrollIntoView({ behavior: 'smooth' })
|
|
}, 100)
|
|
} else {
|
|
alert('신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
alert('접수 처리 중 문제가 발생했습니다.')
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// SEO 태그 설정 (지역 기반 + 고의도 롱테일 키워드 30~35자 내외 글자 수 준수)
|
|
// SEO 태그 및 소셜 메타데이터 (네이버/구글 검색 최적화 및 3종 구조화 데이터 JSON-LD)
|
|
useHead({
|
|
title: `광주 중등 수학 과외 · 광주 중등 과외 | 초·중·고 1:1 맞춤 과외 ${siteName}`,
|
|
link: [
|
|
{ rel: 'canonical', href: 'https://aeseo.store/' }
|
|
],
|
|
meta: [
|
|
{ name: 'robots', content: 'index,follow' },
|
|
{ name: 'naver-site-verification', content: '48cf582068341a6e4bebde6900b3e0a0e198f4b6' },
|
|
{ name: 'description', content: `광주 중등 수학 과외, 광주 중등 과외, 봉선동 중등 수학 과외 전문 ${siteName}! 광주 초·중·고 국영수사과 1:1 방문·화상 맞춤 수업, 과외 비용·시세 투명 비교부터 무료 시범수업 신청까지.` },
|
|
{ name: 'keywords', content: '광주 중등 수학 과외, 광주 중등 과외, 광주 고등 수학 과외, 광주 고등 과외, 광주 초등 수학 과외, 광주 초등 과외, 광주 중등 영어 과외, 광주 고등 영어 과외, 광주 과외, 봉선동 과외, 봉선동 중등 수학 과외' },
|
|
{ property: 'og:type', content: 'website' },
|
|
{ property: 'og:locale', content: 'ko_KR' },
|
|
{ property: 'og:site_name', content: siteName },
|
|
{ property: 'og:title', content: `광주 중등 수학 과외 · 광주 중등 과외 | 초·중·고 1:1 맞춤 과외 ${siteName}` },
|
|
{ property: 'og:description', content: `광주 중등 수학 과외, 광주 중등 과외, 봉선동 중등 수학 과외 전문 ${siteName}! 과외 비용·시세 투명 비교부터 무료 시범수업 신청까지 검증된 전문 선생님 100% 매칭` },
|
|
{ property: 'og:url', content: 'https://aeseo.store/' },
|
|
{ property: 'og:image', content: 'https://aeseo.store/img/og-main.png' },
|
|
{ property: 'og:image:type', content: 'image/png' },
|
|
{ property: 'og:image:width', content: '1200' },
|
|
{ property: 'og:image:height', content: '630' },
|
|
{ property: 'og:image:alt', content: '광주 중등 수학 과외 · 광주 중등 과외' },
|
|
{ name: 'twitter:card', content: 'summary_large_image' },
|
|
{ name: 'twitter:title', content: `광주 중등 수학 과외 · 광주 중등 과외 | 초·중·고 1:1 맞춤 과외 ${siteName}` },
|
|
{ name: 'twitter:description', content: `광주 중등 수학 과외, 광주 중등 과외, 봉선동 중등 수학 과외 전문 ${siteName}! 과외 비용·시세 투명 비교부터 무료 시범수업 신청까지 검증된 전문 선생님 100% 매칭` },
|
|
{ name: 'twitter:image', content: 'https://aeseo.store/img/og-main.png' }
|
|
],
|
|
script: [
|
|
// 1. @graph (WebSite + WebPage + ImageObject + EducationalOrganization / LocalBusiness)
|
|
{
|
|
type: 'application/ld+json',
|
|
children: JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@graph': [
|
|
{
|
|
'@type': 'WebSite',
|
|
'@id': `${siteDomain}/#site`,
|
|
url: `${siteDomain}/`,
|
|
name: siteName,
|
|
inLanguage: 'ko-KR'
|
|
},
|
|
{
|
|
'@type': 'WebPage',
|
|
'@id': `${siteDomain}/#page`,
|
|
url: `${siteDomain}/`,
|
|
name: `광주 중등 수학 과외 · 광주 중등 과외 | 초·중·고 1:1 맞춤 과외 ${siteName}`,
|
|
description: `광주 중등 수학 과외, 광주 중등 과외, 봉선동 중등 수학 과외 전문 ${siteName}! 광주 초·중·고 국영수사과 1:1 방문·화상 맞춤 수업`,
|
|
isPartOf: { '@id': `${siteDomain}/#site` },
|
|
primaryImageOfPage: { '@id': `${siteDomain}/#img` },
|
|
inLanguage: 'ko-KR'
|
|
},
|
|
{
|
|
'@type': 'ImageObject',
|
|
'@id': `${siteDomain}/#img`,
|
|
url: `${siteDomain}/img/math-tutoring.png`,
|
|
contentUrl: `${siteDomain}/img/math-tutoring.png`,
|
|
width: 1080,
|
|
height: 1080,
|
|
caption: '광주 중등 수학 과외 · 광주 중등 과외'
|
|
},
|
|
{
|
|
'@type': ['EducationalOrganization', 'LocalBusiness'],
|
|
name: siteName,
|
|
telephone: '+82-10-5961-5807',
|
|
url: `${siteDomain}/`,
|
|
image: [
|
|
`${siteDomain}/img/og-main.png`,
|
|
`${siteDomain}/img/math-tutoring.png`,
|
|
`${siteDomain}/img/english-tutoring.png`,
|
|
`${siteDomain}/img/korean-tutoring.png`,
|
|
`${siteDomain}/img/science-tutoring.png`,
|
|
`${siteDomain}/img/social-studies-tutoring.png`
|
|
],
|
|
address: {
|
|
'@type': 'PostalAddress',
|
|
streetAddress: '봉선중앙로 123 에듀프라자 3층',
|
|
addressLocality: '남구',
|
|
addressRegion: '광주광역시',
|
|
addressCountry: 'KR'
|
|
},
|
|
description: '광주 중등 수학 과외, 광주 중등 과외 및 광주 초·중·고 1:1 맞춤 과외 전문 교육 기관',
|
|
areaServed: '광주광역시 전지역'
|
|
}
|
|
]
|
|
})
|
|
},
|
|
// 2. FAQPage 스키마
|
|
{
|
|
type: 'application/ld+json',
|
|
children: JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'FAQPage',
|
|
mainEntity: faqs.map(faq => ({
|
|
'@type': 'Question',
|
|
name: faq.q,
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: faq.a
|
|
}
|
|
}))
|
|
})
|
|
},
|
|
// 3. ItemList 과목별 및 학년별 갤러리 섹션 스키마 (더세이브 최상위 name/url/image + Google Course 리치 결과)
|
|
{
|
|
type: 'application/ld+json',
|
|
children: JSON.stringify({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'ItemList',
|
|
name: `광주 중등 수학 과외 · 광주 중등 과외 프로그램`,
|
|
itemListElement: [
|
|
{ sub: '수학', grade: '중학생', title: '광주 중등 수학 과외 · 봉선동 중학생 수학과외', desc: '개념 구멍 추적 및 킬러 문항 1:1 완파', img: 'math-tutoring.png' },
|
|
{ sub: '영어', grade: '중학생', title: '광주 중등 영어 과외 · 봉선동 중학생 영어과외', desc: '교과서·부교재 전 지문 변형 및 서술형 영작', img: 'english-tutoring.png' },
|
|
{ sub: '국어', grade: '중학생', title: '광주 중등 국어 과외 · 봉선동 중학생 국어과외', desc: '비문학 독해 논리와 교과서 문학 1:1 정밀 분석', img: 'korean-tutoring.png' },
|
|
{ sub: '과학', grade: '중학생', title: '광주 중등 과학 과외 · 봉선동 중학생 과학과외', desc: '통합과학 원리 이해 및 물화생지 킬러 단원 정복', img: 'science-tutoring.png' },
|
|
{ sub: '사회', grade: '중학생', title: '광주 중등 사회 과외 · 봉선동 중학생 사회과외', desc: '통합사회·한국사 핵심 흐름 및 사탐 만점 전략', img: 'social-studies-tutoring.png' },
|
|
{ sub: '수학', grade: '초등학생', title: '광주 초등 수학 과외 · 봉선동 초등학생 수학과외', desc: '초등 기초 연산부터 중등 과정 개념 선행까지 1:1 맞춤 지도', img: 'math-tutoring.png' },
|
|
{ sub: '수학', grade: '고등학생', title: '광주 고등 수학 과외 · 봉선동 고등학생 수학과외', desc: '광주 관내 고교 기출 족보 분석 및 수능·내신 1등급 완파', img: 'math-tutoring.png' },
|
|
{ sub: '영어', grade: '고등학생', title: '광주 고등 영어 과외 · 봉선동 고등학생 영어과외', desc: '고등 내신 서술형 영작 첨삭 및 모의고사 1등급 구문 독해', img: 'english-tutoring.png' }
|
|
].map((item, idx) => {
|
|
const courseUrl = `${siteDomain}/${encodeURIComponent(defaultDong)}/${encodeURIComponent(item.grade)}/${encodeURIComponent(item.sub)}`
|
|
const imgUrl = `${siteDomain}/img/${item.img}`
|
|
return {
|
|
'@type': 'ListItem',
|
|
position: idx + 1,
|
|
name: item.title,
|
|
url: courseUrl,
|
|
image: imgUrl,
|
|
item: {
|
|
'@type': 'Course',
|
|
name: item.title,
|
|
description: item.desc,
|
|
url: courseUrl,
|
|
image: imgUrl,
|
|
provider: {
|
|
'@type': 'Organization',
|
|
name: siteName,
|
|
sameAs: siteDomain
|
|
},
|
|
offers: {
|
|
'@type': 'Offer',
|
|
category: 'Paid',
|
|
priceCurrency: 'KRW',
|
|
availability: 'https://schema.org/InStock',
|
|
url: courseUrl
|
|
},
|
|
hasCourseInstance: {
|
|
'@type': 'CourseInstance',
|
|
courseMode: ['onsite', 'online']
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
]
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
|
.landing-container {
|
|
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
|
word-break: keep-all;
|
|
}
|
|
</style>
|