727 lines
36 KiB
Vue
727 lines
36 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">
|
||
<div 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">
|
||
T
|
||
</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>
|
||
</div>
|
||
|
||
<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">
|
||
|
||
<!-- 히어로 섹션 (AI 스타일 형광/물결 제거, 정제된 모던 에듀테크 캔버스) -->
|
||
<section class="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">
|
||
|
||
<!-- 은은한 상단 엠비언트 라이트 (절제된 디자이너 톤) -->
|
||
<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>
|
||
|
||
<!-- 메인 H1 (지역 기반 검색 상위 노출 30자 규격 및 학부모 고의도 롱테일 키워드) -->
|
||
<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-4">
|
||
대구 초·중·고 1:1 맞춤 과외 매칭<br class="hidden sm:inline" />
|
||
<span class="text-blue-600">검증된 전문 선생님 100% 매칭</span>
|
||
</h1>
|
||
|
||
<!-- 서브 헤드라인 (비용 시세 비교 + 수성구 등 학교 기출 분석 + 무료 시범수업) -->
|
||
<p class="text-sm sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||
과외 비용·시세 투명 비교부터 무료 시범수업 신청까지.<br class="hidden sm:inline" />
|
||
수성구·달서구 등 대구 관내 학교별 기출 족보를 완벽 분석하여 <strong>내신 1등급 역전 솔루션</strong>을 제공합니다.
|
||
</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="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"
|
||
:data-subject="subj.name"
|
||
:key="subj.name"
|
||
type="button"
|
||
@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">진단 전: 4등급 (55점)</span>
|
||
<span class="text-blue-600 font-bold">진단 후: 1등급 (96점)</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: 90%"></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">
|
||
"수성구 내신 킬러 문제에서 항상 시간 부족으로 무너졌는데, 문제 유형별 접근법을 1:1로 훈련받고 전교 3등을 했습니다."
|
||
</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">진단 전: 73점 (B등급)</span>
|
||
<span class="text-emerald-600 font-bold">진단 후: 99점 (A등급 전교권)</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: 97%"></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>
|
||
</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">"수성구 학원가 대형 강의만 듣다 성적이 멈췄었는데, 1:1 과외로 모르는 부분을 집중 클리닉하니 아이 표정부터 달라졌습니다."</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 grade="초·중·고" />
|
||
|
||
<!-- 6. FAQ 섹션 (정돈된 아코디언) -->
|
||
<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">자주 묻는 질문</h2>
|
||
<p class="text-xs sm:text-sm text-slate-500 mt-1">대구 학부모님들께서 가장 많이 문의하시는 과외 진행 절차입니다.</p>
|
||
</header>
|
||
|
||
<div class="space-y-3">
|
||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-xs">
|
||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 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" :class="{ 'rotate-180': faq.open }"></i>
|
||
</button>
|
||
<div v-show="faq.open" class="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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted } from 'vue'
|
||
|
||
const config = useRuntimeConfig()
|
||
const siteName = config.public.siteName || '티처브릿지'
|
||
const siteDomain = config.public.siteDomain || 'https://soohyun.store'
|
||
|
||
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 수학 무료 시범수업 신청 완료 (방금 전)",
|
||
"대구 달서구 월성동 중3 영어 내신대비 과외 매칭 접수 (1분 전)",
|
||
"대구 수성구 만촌동 중2 과학 오답분석 리포트 신청 (3분 전)",
|
||
"대구 북구 침산동 초6 중등수학 선행 시범수업 신청 (5분 전)",
|
||
"대구 수성구 황금동 고1 국어 비문학 클리닉 신청 (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분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
|
||
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: '과외매칭센터 | 대구 초·중·고 검증된 맞춤 과외 매칭',
|
||
link: [
|
||
{ rel: 'canonical', href: 'https://soohyun.store/' }
|
||
],
|
||
meta: [
|
||
{ name: 'naver-site-verification', content: 'dfb36e971115b72176e1c1e37c6ca27a95e855e3' },
|
||
{ name: 'google-site-verification', content: 'DvXzTXFe_DBt8nrIiI7SwWYgOENNAWNW5op79syf5pM' },
|
||
{ name: 'description', content: '과외 비용·시세 투명 비교부터 무료 시범수업 신청까지. 명문대 및 베테랑 전문 강사진 1:1 맞춤 배정 솔루션' },
|
||
{ property: 'og:type', content: 'website' },
|
||
{ property: 'og:site_name', content: '과외매칭센터' },
|
||
{ property: 'og:title', content: '과외매칭센터 | 대구 초·중·고 맞춤 과외 매칭' },
|
||
{ property: 'og:description', content: '과외 비용·시세 투명 비교부터 무료 시범수업 신청까지. 검증된 전문 선생님 100% 매칭' },
|
||
{ property: 'og:url', content: 'https://soohyun.store/' },
|
||
{ property: 'og:image', content: 'https://soohyun.store/img/og-main.png' },
|
||
{ property: 'og:image:width', content: '1200' },
|
||
{ property: 'og:image:height', content: '630' },
|
||
{ name: 'twitter:card', content: 'summary_large_image' },
|
||
{ name: 'twitter:title', content: '과외매칭센터 | 대구 초·중·고 맞춤 과외 매칭' },
|
||
{ name: 'twitter:description', content: '과외 비용·시세 투명 비교부터 무료 시범수업 신청까지. 검증된 전문 선생님 100% 매칭' },
|
||
{ name: 'twitter:image', content: 'https://soohyun.store/img/og-main.png' }
|
||
],
|
||
script: [
|
||
// 1. EducationalOrganization / LocalBusiness 스키마
|
||
{
|
||
type: 'application/ld+json',
|
||
children: JSON.stringify({
|
||
'@context': 'https://schema.org',
|
||
'@type': ['EducationalOrganization', 'LocalBusiness'],
|
||
name: '과외매칭센터',
|
||
telephone: '+82-10-5961-5807',
|
||
url: 'https://soohyun.store/',
|
||
image: 'https://soohyun.store/img/og-main.png',
|
||
address: {
|
||
'@type': 'PostalAddress',
|
||
streetAddress: '달구벌대로 2435 범어타워 4층',
|
||
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 과목별 갤러리 섹션 스키마
|
||
{
|
||
type: 'application/ld+json',
|
||
children: JSON.stringify({
|
||
'@context': 'https://schema.org',
|
||
'@type': 'ItemList',
|
||
name: '과목별 1:1 맞춤 과외 프로그램',
|
||
itemListElement: [
|
||
{
|
||
'@type': 'ListItem',
|
||
position: 1,
|
||
name: '수학과외',
|
||
description: '개념 구멍 추적 및 킬러 문항 1:1 완파',
|
||
image: 'https://soohyun.store/img/math-tutoring.png'
|
||
},
|
||
{
|
||
'@type': 'ListItem',
|
||
position: 2,
|
||
name: '영어과외',
|
||
description: '교과서·부교재 전 지문 변형 및 서술형 영작',
|
||
image: 'https://soohyun.store/img/english-tutoring.png'
|
||
},
|
||
{
|
||
'@type': 'ListItem',
|
||
position: 3,
|
||
name: '국어과외',
|
||
description: '비문학 독해 논리와 교과서 문학 1:1 정밀 분석',
|
||
image: 'https://soohyun.store/img/korean-tutoring.png'
|
||
},
|
||
{
|
||
'@type': 'ListItem',
|
||
position: 4,
|
||
name: '과학과외',
|
||
description: '통합과학 원리 이해 및 물화생지 킬러 단원 정복',
|
||
image: 'https://soohyun.store/img/science-tutoring.png'
|
||
},
|
||
{
|
||
'@type': 'ListItem',
|
||
position: 5,
|
||
name: '사회과외',
|
||
description: '통합사회·한국사 핵심 흐름 및 사탐 만점 전략',
|
||
image: 'https://soohyun.store/img/social-studies-tutoring.png'
|
||
}
|
||
]
|
||
})
|
||
}
|
||
]
|
||
})
|
||
</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>
|