709 lines
33 KiB
Vue
709 lines
33 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">
|
|
S
|
|
</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>옥동·신정·매곡·무거 등 울산 전지역 전담 | 서울대·UNIST 및 베테랑 강사진 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="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">
|
|
"옥동 학원가 다녀도 70점대에 머물던 수학이 선생님 1:1 오답 클리닉 3개월 만에 96점 전교권으로 올랐습니다."
|
|
</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">
|
|
"신정동 고1 영어 내신 서술형 외부지문 때문에 스트레스가 심했는데, 꼼꼼한 어법 분석 지도 덕분에 1등급 찍었습니다."
|
|
</p>
|
|
<div class="text-[11px] text-slate-500 font-medium">울산 남구 신정동 고1 학부모님 (영어 과외)</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">
|
|
"스스로 계획 세우고 공부하는 법을 몰랐는데 매일 학습 플래너 피드백과 동기부여 코칭으로 공부 태도가 완전히 바뀌었어요."
|
|
</p>
|
|
<div class="text-[11px] text-slate-500 font-medium">울산 북구 매곡동 중3 학부모님 (전과목 코칭)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. 자주 묻는 질문 (FAQ) -->
|
|
<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">
|
|
<div
|
|
v-for="(faq, idx) in faqs"
|
|
:key="idx"
|
|
class="bg-white border border-slate-200 rounded-xl overflow-hidden"
|
|
>
|
|
<button
|
|
@click="faq.open = !faq.open"
|
|
class="w-full text-left px-5 py-4 font-bold text-sm sm:text-base text-slate-900 flex justify-between items-center hover:bg-slate-50 transition"
|
|
>
|
|
<span>{{ faq.q }}</span>
|
|
<i :class="faq.open ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'" class="text-slate-400 text-xs"></i>
|
|
</button>
|
|
<div v-show="faq.open" class="px-5 pb-4 text-xs sm:text-sm text-slate-600 border-t border-slate-100 pt-3 leading-relaxed">
|
|
{{ faq.a }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- 7. Footer -->
|
|
<footer class="bg-slate-900 text-slate-400 text-xs py-10 px-4 sm:px-6">
|
|
<div class="max-w-5xl mx-auto space-y-4">
|
|
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-800 pb-4">
|
|
<span class="text-white font-extrabold text-base">{{ siteName }}</span>
|
|
<div class="flex gap-4 text-slate-400">
|
|
<span>이용약관</span>
|
|
<span>개인정보처리방침</span>
|
|
<span>과외교습자 등록현황</span>
|
|
</div>
|
|
</div>
|
|
<p class="leading-relaxed">
|
|
{{ siteName }} | 대표번호: 010-5961-5807 | 울산광역시 관내 전문 1:1 맞춤 과외 매칭 및 학습 관리 센터<br />
|
|
통신판매업 신고 및 개인과외교습자 적법 등록 완료 | 이메일 문의: contact@{{ siteDomain.replace('https://', '') }}
|
|
</p>
|
|
<p class="text-slate-500">
|
|
© 2026 {{ siteName }}. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
const siteName = '쌤인증'
|
|
const siteDomain = 'https://soohyun.xyz'
|
|
|
|
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: '쌤인증 | 울산 초·중·고 검증된 맞춤 과외 매칭',
|
|
link: [
|
|
{ rel: 'canonical', href: 'https://soohyun.xyz/' }
|
|
],
|
|
meta: [
|
|
{ name: 'naver-site-verification', content: 'd40ee8cd61dab827dcbd7080e54b095339c44222' },
|
|
{ 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.xyz/' },
|
|
{ property: 'og:image', content: 'https://soohyun.xyz/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.xyz/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.xyz/',
|
|
image: 'https://soohyun.xyz/img/og-main.png',
|
|
address: {
|
|
'@type': 'PostalAddress',
|
|
streetAddress: '문수로 345 옥동에듀빌딩 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.xyz/img/math-tutoring.png'
|
|
},
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 2,
|
|
name: '영어과외',
|
|
description: '교과서·부교재 전 지문 변형 및 서술형 영작',
|
|
image: 'https://soohyun.xyz/img/english-tutoring.png'
|
|
},
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 3,
|
|
name: '국어과외',
|
|
description: '비문학 독해 논리와 교과서 문학 1:1 정밀 분석',
|
|
image: 'https://soohyun.xyz/img/korean-tutoring.png'
|
|
},
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 4,
|
|
name: '과학과외',
|
|
description: '통합과학 원리 이해 및 물화생지 킬러 단원 정복',
|
|
image: 'https://soohyun.xyz/img/science-tutoring.png'
|
|
},
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 5,
|
|
name: '사회과외',
|
|
description: '통합사회·한국사 핵심 흐름 및 사탐 만점 전략',
|
|
image: 'https://soohyun.xyz/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>
|