791 lines
41 KiB
Vue
791 lines
41 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">
|
||
|
||
<!-- 히어로 섹션 (네이버 상위 노출 DOM 순서: 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 itemprop="headline" 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 (마이크로데이터) -->
|
||
<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 -->
|
||
<h2 class="hero-subtitle text-base sm:text-lg font-bold text-slate-700 mb-3">
|
||
서울 중등 과외 · 초등·고등 국영수사과 검증된 전문 선생님 100% 1:1 매칭
|
||
</h2>
|
||
|
||
<!-- 4. 일반글 P -->
|
||
<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">인근 중·고교 3개년 족보</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="truncate max-w-[260px] sm:max-w-md font-medium text-slate-600">{{ currentNotice }}</span>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. 리드 수집 폼 섹션 (상급자 에듀테크 플랫폼 스타일 모듈) -->
|
||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||
<div class="bg-white rounded-2xl shadow-xl border border-slate-200/90 p-6 sm:p-9 transition-all">
|
||
|
||
<header class="text-center mb-7 pb-5 border-b border-slate-100">
|
||
<div class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-blue-50 text-blue-700 border border-blue-100 mb-2">
|
||
선착순 30명 한정 전액 무료
|
||
</div>
|
||
<h2 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight">
|
||
우리 동네 과외 시세 확인 & 무료 시범수업 신청
|
||
</h2>
|
||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||
단 1분 간단 입력으로 아이에게 가장 적합한 1:1 맞춤 선생님과 진단 리포트를 배정해 드립니다.
|
||
</p>
|
||
</header>
|
||
|
||
<form @submit.prevent="handleSubmit" class="space-y-6">
|
||
|
||
<!-- 1) 학년 선택 (초등 / 중등 / 고등 분기 탭 & 세부 선택) -->
|
||
<div>
|
||
<label for="studentGrade" 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-1 sm:grid-cols-3 gap-2 mb-2">
|
||
<button
|
||
type="button"
|
||
@click="selectGradeStage('초등')"
|
||
:class="[
|
||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
gradeStage === '초등'
|
||
? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
초등부 (1~6학년)
|
||
</button>
|
||
<button
|
||
type="button"
|
||
@click="selectGradeStage('중등')"
|
||
:class="[
|
||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
gradeStage === '중등'
|
||
? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
중등부 (1~3학년)
|
||
</button>
|
||
<button
|
||
type="button"
|
||
@click="selectGradeStage('고등')"
|
||
:class="[
|
||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
gradeStage === '고등'
|
||
? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
고등부 / N수
|
||
</button>
|
||
</div>
|
||
|
||
<select
|
||
id="studentGrade"
|
||
v-model="formData.grade"
|
||
required
|
||
class="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3 outline-none font-medium transition"
|
||
>
|
||
<option value="" disabled>세부 학년을 선택해 주세요</option>
|
||
<option v-for="opt in currentGradeOptions" :key="opt" :value="opt">{{ opt }}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 2) 취약 과목 빠른 선택 (Chip 버튼) -->
|
||
<div>
|
||
<div class="flex justify-between items-center mb-2">
|
||
<label class="block text-xs sm:text-sm font-bold text-slate-800">
|
||
2. 집중 지도가 필요한 과목 <span class="text-blue-600">*</span>
|
||
</label>
|
||
<span class="text-[11px] text-slate-400 font-normal">복수/단일 클릭</span>
|
||
</div>
|
||
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2 text-center">
|
||
<button
|
||
v-for="subj in subjects"
|
||
:key="subj.name"
|
||
type="button"
|
||
:data-subject="subj.name"
|
||
@click="formData.subject = subj.name"
|
||
:class="[
|
||
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
formData.subject === subj.name
|
||
? 'bg-blue-600 border-blue-600 text-white shadow-sm'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
<span>{{ subj.label }}</span>
|
||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-blue-100' : 'text-slate-400'">
|
||
{{ subj.badge }}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3) 희망 수업 형태 (방문 / 화상) -->
|
||
<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">
|
||
<label
|
||
v-for="type in lessonTypes"
|
||
:key="type"
|
||
class="flex items-center justify-center p-3 rounded-xl border text-xs sm:text-sm font-semibold cursor-pointer transition text-center"
|
||
:class="formData.lessonType === type ? 'bg-blue-50 border-blue-600 text-blue-700 font-bold' : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'"
|
||
>
|
||
<input type="radio" :value="type" v-model="formData.lessonType" class="hidden" />
|
||
<span>{{ type }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4) 현재 가장 큰 고민 (체크박스) -->
|
||
<div>
|
||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
||
4. 현재 가장 큰 학습 고민 (복수 선택 가능)
|
||
</label>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs sm:text-sm">
|
||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200/90 rounded-xl cursor-pointer hover:bg-slate-100/70 transition">
|
||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500">
|
||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5) 거주 지역 / 학교명 입력 -->
|
||
<div>
|
||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||
5. 거주 지역 및 재학 학교명 <span class="text-slate-400 font-normal text-xs">(인근 학교 기출 족보 매칭용)</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="regionInput"
|
||
v-model="formData.region"
|
||
placeholder="예: 서울 강남구 대치동 / 단대부고"
|
||
class="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3.5 outline-none placeholder:text-slate-400 transition"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 6) 학부모 연락처 -->
|
||
<div>
|
||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||
6. 학부모 연락처 <span class="text-blue-600">*</span>
|
||
<span class="text-slate-400 font-normal text-xs">(과외 시세 안내 및 시범수업 조율용)</span>
|
||
</label>
|
||
<div class="relative">
|
||
<input
|
||
type="tel"
|
||
id="parentPhone"
|
||
v-model="formData.phone"
|
||
@input="formatPhone"
|
||
required
|
||
placeholder="010-0000-0000"
|
||
maxlength="13"
|
||
class="w-full bg-slate-50 border border-slate-200 text-slate-900 text-base font-bold rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3.5 pl-11 outline-none tracking-wider"
|
||
/>
|
||
<i class="fa-solid fa-mobile-screen absolute left-4 top-4 text-slate-400 text-base"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 개인정보 동의 -->
|
||
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
|
||
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500">
|
||
<label for="privacyAgree" class="cursor-pointer">
|
||
[필수] 과외 상담 및 무료 시범수업 안내를 위한 개인정보 수집에 동의합니다.
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 제출 버튼 (고급스러운 솔리드 로열 블루) -->
|
||
<button
|
||
type="submit"
|
||
:disabled="isSubmitting"
|
||
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-xl shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
<i class="fa-solid fa-circle-check text-lg"></i>
|
||
<span>{{ isSubmitting ? '신청서 접수 중...' : '우리 동네 과외 시세 확인 & 무료 시범수업 신청하기' }}</span>
|
||
</button>
|
||
|
||
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
|
||
<i class="fa-solid fa-shield-halved text-xs"></i>
|
||
<span>입력하신 개인정보는 암호화되어 안전하게 보호되며, 무분별한 광고 전화를 드리지 않습니다.</span>
|
||
</div>
|
||
|
||
<!-- 안내 박스 -->
|
||
<div class="mt-3 p-3.5 bg-blue-50/60 border border-blue-100 rounded-xl flex items-start gap-2.5 text-xs text-slate-700 leading-relaxed">
|
||
<i class="fa-solid fa-circle-info text-blue-600 mt-0.5 text-sm shrink-0"></i>
|
||
<div>
|
||
<strong class="font-bold text-slate-900 block mb-0.5">신속 상담 안내</strong>
|
||
<span>접수 즉시 지역 전담 학습 매니저가 학교별 출제 경향과 최적의 선생님 매칭 일정을 유선으로 안내해 드립니다. (직통 상담: <a href="tel:010-5961-5807" class="font-bold text-blue-600 underline">010-5961-5807</a>)</span>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
<!-- 완료 메시지 -->
|
||
<div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-xl text-emerald-950 text-xs sm:text-sm">
|
||
<div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-emerald-800">
|
||
<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
|
||
<span>맞춤 과외 시세 및 무료 시범수업 신청이 완료되었습니다!</span>
|
||
</div>
|
||
<p class="leading-relaxed text-slate-700">
|
||
기재해주신 연락처로 <strong>‘관내 학교별 내신 분석 요약표’</strong>가 발송되며, 전문 학습 매니저가 1:1 맞춤 선생님 추천 및 무료 모의수업 일정을 조율해 드립니다.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. 성적 향상 사례 (깔끔하고 신뢰도 높은 후기 그리드) -->
|
||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||
<header class="text-center mb-8">
|
||
<span class="text-xs sm:text-sm font-bold text-blue-600 tracking-wider bg-blue-50 px-3 py-1 rounded-full border border-blue-100">
|
||
PROVEN RESULTS
|
||
</span>
|
||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2 tracking-tight">실제 성적 상승 및 수강 후기</h2>
|
||
<p class="text-xs sm:text-sm text-slate-500 mt-1">1:1 밀착 관리를 통해 내신 1등급과 수능 역전을 이뤄낸 학생들의 변화입니다.</p>
|
||
</header>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
|
||
<!-- Case 1 -->
|
||
<div class="bg-white p-6 rounded-2xl border border-slate-200/90 shadow-xs hover:shadow-md transition">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="flex items-center gap-2">
|
||
<span class="bg-blue-50 text-blue-700 font-bold text-xs px-2.5 py-1 rounded-md border border-blue-100">수학 역전</span>
|
||
<span class="font-bold text-sm sm:text-base text-slate-800">대치동 고2 김OO 학생</span>
|
||
</div>
|
||
<span class="text-xs text-slate-400 font-medium">3개월 만에 달성</span>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||
<span class="text-slate-400">진단 전: 5등급 (42점)</span>
|
||
<span class="text-blue-600 font-bold">진단 후: 2등급 (89점)</span>
|
||
</div>
|
||
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 82%"></div>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||
"함수의 그래프 해석 구멍을 정확히 집어주셔서, 그 부분만 집중 보완하니 점수가 수직 상승했습니다."
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Case 2 -->
|
||
<div class="bg-white p-6 rounded-2xl border border-slate-200/90 shadow-xs hover:shadow-md transition">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="flex items-center gap-2">
|
||
<span class="bg-emerald-50 text-emerald-700 font-bold text-xs px-2.5 py-1 rounded-md border border-emerald-100">영어 서술형</span>
|
||
<span class="font-bold text-sm sm:text-base text-slate-800">서초동 중3 이OO 학생</span>
|
||
</div>
|
||
<span class="text-xs text-slate-400 font-medium">2개월 만에 달성</span>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||
<span class="text-slate-400">진단 전: 68점 (B등급)</span>
|
||
<span class="text-emerald-600 font-bold">진단 후: 98점 (전교 4등)</span>
|
||
</div>
|
||
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||
<div class="bg-emerald-600 h-2.5 rounded-full" style="width: 95%"></div>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||
"무작정 단어만 외우다 영포자가 될 뻔했는데, 문장 구조 분석법을 배우고 학교 서술형 감점이 0점이 되었습니다."
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 학부모 리뷰 (2열) -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div class="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
|
||
<div class="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>
|
||
<h4 class="font-bold text-sm sm:text-base text-slate-800">대치동 학부모 최OO님</h4>
|
||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"아이 성향에 맞지 않는 억지 공부 대신 딱 필요한 단원만 짚어주시니 스스로 책상에 앉네요."</p>
|
||
</div>
|
||
|
||
<div class="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
|
||
<div class="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>
|
||
<h4 class="font-bold text-sm sm:text-base text-slate-800">양천구 목동 학부모 박OO님</h4>
|
||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"리포트 내용이 학원 상담보다 훨씬 객관적이고 정확했습니다. 선생님 케미도 정말 만족합니다."</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
|
||
<SubjectCarousel :regionDong="defaultDong" shortSido="서울" grade="중학생" gradeShort="중등" />
|
||
|
||
<!-- 6. FAQ 섹션 (더세이브 방식 네이티브 details/summary 시맨틱 구조) -->
|
||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||
<header class="text-center mb-8">
|
||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1 tracking-tight">서울 1:1 맞춤 과외 자주 묻는 질문</h2>
|
||
<p class="text-xs sm:text-sm text-slate-500 mt-1">서울 학부모님들께서 가장 많이 문의하시는 과외 진행 절차입니다.</p>
|
||
</header>
|
||
|
||
<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 p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 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-xs sm:text-sm text-slate-400 transition-transform group-open:rotate-180"></i>
|
||
</summary>
|
||
<div class="ans p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||
{{ faq.a }}
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<InternalLinkHub :regionDong="defaultDong" grade="중학생" subjectName="수학" />
|
||
|
||
</main>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted } from 'vue'
|
||
|
||
const config = useRuntimeConfig()
|
||
const siteName = config.public.siteName || '로열클래스 1:1 과외'
|
||
const siteDomain = config.public.siteDomain || 'https://aeseo.cloud'
|
||
const defaultDong = '대치동'
|
||
|
||
const isSubmitting = ref(false)
|
||
const submitSuccess = ref(false)
|
||
|
||
const gradeStage = ref('중등')
|
||
|
||
const gradeOptionsByStage = {
|
||
'초등': [
|
||
'초등 1~3학년 (기초 연산·한글 습관)',
|
||
'초등 4학년 (개념 이해·응용)',
|
||
'초등 5학년 (분수·도형 심화)',
|
||
'초등 6학년 (중등 선행 대비)'
|
||
],
|
||
'중등': [
|
||
'중학교 1학년 (자유학기제·자기주도학습)',
|
||
'중학교 2학년 (내신 지필평가 본격 대비)',
|
||
'중학교 3학년 (고등 진학·심화 선행)'
|
||
],
|
||
'고등': [
|
||
'고등학교 1학년 (공통과목 1등급 집중)',
|
||
'고등학교 2학년 (내신 수시 + 수능 정시)',
|
||
'고등학교 3학년 / N수 (수능 최저·실전 파이널)'
|
||
]
|
||
}
|
||
|
||
const currentGradeOptions = computed(() => {
|
||
return gradeOptionsByStage[gradeStage.value] || []
|
||
})
|
||
|
||
function selectGradeStage(stage) {
|
||
gradeStage.value = stage
|
||
formData.grade = currentGradeOptions.value[0] || ''
|
||
}
|
||
|
||
const rollingMessages = [
|
||
"서울 강남구 대치동 중2 수학 무료 시범수업 신청 완료 (방금 전)",
|
||
"서울 서초구 반포동 고1 영어 내신대비 과외 매칭 접수 (1분 전)",
|
||
"서울 송파구 잠실동 중3 과학 오답분석 리포트 신청 (3분 전)",
|
||
"서울 노원구 중계동 초6 중등수학 선행 시범수업 신청 (5분 전)",
|
||
"서울 양천구 목동 고2 국어 비문학 클리닉 신청 (7분 전)"
|
||
]
|
||
const currentNotice = ref(rollingMessages[0])
|
||
let rollingIdx = 0
|
||
|
||
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;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
formData.grade = currentGradeOptions.value[1] || currentGradeOptions.value[0]
|
||
setInterval(() => {
|
||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||
currentNotice.value = rollingMessages[rollingIdx]
|
||
}, 3500)
|
||
})
|
||
|
||
const subjects = [
|
||
{ name: '수학', label: '수학', badge: '인기 1위' },
|
||
{ name: '영어', label: '영어', badge: '내신필수' },
|
||
{ name: '국어', label: '국어', badge: '비문학' },
|
||
{ name: '과학', label: '과학', badge: '탐구영역' },
|
||
{ name: '사회', label: '사회', badge: '한국사' },
|
||
{ name: '전과목', label: '전과목', badge: '학습습관' }
|
||
]
|
||
|
||
const lessonTypes = ['1:1 방문 과외', '1:1 실시간 화상', '상담 후 추천']
|
||
|
||
const concernOptions = [
|
||
'응용·심화 및 킬러 문항 해결력 부족',
|
||
'서술형 주관식 감점 방지 및 시간 부족',
|
||
'개념 이해 부족 및 기초 연산 흔들림',
|
||
'스스로 공부하는 자기주도 학습 습관 부재'
|
||
]
|
||
|
||
const formData = reactive({
|
||
grade: '중학교 2학년 (내신 지필평가 본격 대비)',
|
||
subject: '수학',
|
||
lessonType: '1:1 방문 과외',
|
||
concerns: ['응용·심화 및 킬러 문항 해결력 부족'],
|
||
region: '',
|
||
phone: '',
|
||
privacy: true
|
||
})
|
||
|
||
function formatPhone(e) {
|
||
let val = e.target.value.replace(/[^0-9]/g, '')
|
||
if (val.length > 11) val = val.slice(0, 11)
|
||
if (val.length >= 7) {
|
||
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분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.'
|
||
},
|
||
{
|
||
q: '서울 중등 수학 과외 · 서울 초·중·고 과외 비용 및 시세는 어떻게 되나요?',
|
||
a: '서울 중등 과외 및 초등·고등 과외 비용은 학년과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 우리 동네 과외 비용을 안내해 드립니다.'
|
||
},
|
||
{
|
||
q: '서울 중등 과외 선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
||
a: '서울 중등 수학 과외 및 서울 초·중·고 과외 모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.'
|
||
},
|
||
{
|
||
q: '서울 중등 수학 과외 선생님이 아이와 맞지 않으면 교체가 가능한가요?',
|
||
a: '네, 서울 중등 과외 무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.'
|
||
}
|
||
])
|
||
|
||
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
|
||
}
|
||
}
|
||
|
||
const homeCanonical = siteDomain.endsWith('/') ? siteDomain : `${siteDomain}/`
|
||
const homeTitle = `서울 중등 수학 과외 · 서울 중등 과외 | 초·중·고 1:1 맞춤 과외 ${siteName}`
|
||
const homeDesc = `서울 중등 수학 과외, 서울 중등 과외, ${defaultDong} 중등 수학 과외 전문 ${siteName}! 초·중·고 국영수사과 과외 비용·시세 투명 비교부터 검증된 전문 선생님 무료 시범수업 신청까지 1:1 맞춤 솔루션`
|
||
const allBrandImages = [
|
||
`${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`
|
||
]
|
||
|
||
// SEO 태그 및 소셜 메타데이터 (더세이브 방식 메타태그 + 3분할 구조화 데이터 JSON-LD)
|
||
useHead({
|
||
title: homeTitle,
|
||
link: [
|
||
{ rel: 'canonical', href: homeCanonical }
|
||
],
|
||
meta: [
|
||
{ name: 'robots', content: 'index,follow' },
|
||
{ name: 'naver-site-verification', content: '299523ed34c7419d7fb724426e14b5def8badac7' },
|
||
{ name: 'description', content: homeDesc },
|
||
{ name: 'keywords', content: '서울 중등 수학 과외, 서울 중등 과외, 서울 고등 수학 과외, 서울 고등 과외, 서울 초등 수학 과외, 서울 초등 과외, 서울 중등 영어 과외, 서울 고등 영어 과외, 서울 과외, 대치동 과외, 대치동 중등 수학 과외' },
|
||
{ property: 'og:type', content: 'website' },
|
||
{ property: 'og:locale', content: 'ko_KR' },
|
||
{ property: 'og:site_name', content: siteName },
|
||
{ property: 'og:title', content: homeTitle },
|
||
{ property: 'og:description', content: homeDesc },
|
||
{ property: 'og:url', content: homeCanonical },
|
||
{ property: 'og:image', content: `${siteDomain}/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: homeTitle },
|
||
{ name: 'twitter:description', content: homeDesc },
|
||
{ name: 'twitter:image', content: `${siteDomain}/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: homeCanonical,
|
||
name: siteName,
|
||
inLanguage: 'ko-KR'
|
||
},
|
||
{
|
||
'@type': 'WebPage',
|
||
'@id': `${homeCanonical}#page`,
|
||
url: homeCanonical,
|
||
name: homeTitle,
|
||
description: homeDesc,
|
||
isPartOf: { '@id': `${siteDomain}/#site` },
|
||
primaryImageOfPage: { '@id': `${homeCanonical}#img` },
|
||
inLanguage: 'ko-KR'
|
||
},
|
||
{
|
||
'@type': 'ImageObject',
|
||
'@id': `${homeCanonical}#img`,
|
||
url: `${siteDomain}/img/math-tutoring.png`,
|
||
contentUrl: `${siteDomain}/img/math-tutoring.png`,
|
||
width: 1080,
|
||
height: 1080,
|
||
caption: '서울 중등 수학 과외 · 서울 중등 과외'
|
||
},
|
||
{
|
||
'@type': ['EducationalOrganization', 'LocalBusiness'],
|
||
'@id': `${siteDomain}/#org`,
|
||
name: siteName,
|
||
telephone: '+82-10-5961-5807',
|
||
url: homeCanonical,
|
||
image: allBrandImages,
|
||
priceRange: '₩₩',
|
||
address: {
|
||
'@type': 'PostalAddress',
|
||
streetAddress: '테헤란로 123 비전타워 4층',
|
||
addressLocality: '강남구',
|
||
addressRegion: '서울특별시',
|
||
addressCountry: 'KR'
|
||
},
|
||
description: homeDesc,
|
||
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 + item: Course 바인딩)
|
||
{
|
||
type: 'application/ld+json',
|
||
children: JSON.stringify({
|
||
'@context': 'https://schema.org',
|
||
'@type': 'ItemList',
|
||
name: '서울 중등 수학 과외 · 서울 중등 과외 및 학년별·과목별 1:1 맞춤 과외 프로그램',
|
||
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: '서울 초등 수학 과외 기초 연산 습관 형성 및 중등 선행 심화 대비', img: 'math-tutoring.png' },
|
||
{ sub: '영어', grade: '고등학생', title: '서울 고등 영어 과외 · 고등학생 영어과외', desc: '서울 고등 영어 과외 내신 서술형 감점 방지 및 수능 1등급 완성', img: 'english-tutoring.png' },
|
||
{ sub: '수학', grade: '고등학생', title: '서울 고등 수학 과외 · 고등학생 수학과외', desc: '서울 고등 수학 과외 공통수학·미적분 킬러 문항 및 내신 1등급 전략', img: 'math-tutoring.png' }
|
||
].map((item, idx) => {
|
||
const courseUrl = `${siteDomain}/${encodeURIComponent(defaultDong)}/${encodeURIComponent(item.grade)}/${encodeURIComponent(item.sub)}`
|
||
const courseImg = `${siteDomain}/img/${item.img}`
|
||
const courseName = `${item.title} (${defaultDong})`
|
||
return {
|
||
'@type': 'ListItem',
|
||
position: idx + 1,
|
||
name: courseName,
|
||
url: courseUrl,
|
||
image: courseImg,
|
||
item: {
|
||
'@type': 'Course',
|
||
name: courseName,
|
||
description: item.desc,
|
||
url: courseUrl,
|
||
image: courseImg,
|
||
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>
|