educo/web_6ea_educo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 대전(daejeon)을 울산(ulsan)으로 개편 및 전체 7개 광역 지역(seoul, gyeonggi, incheon, gwangju, busan, daegu, ulsan) 세팅 완료

Browse Source
This commit is contained in:
kyounggu
2026-10-15 12:41:19 +09:00
parent 2dcb2ae8e8
commit 655a0f8177
318 changed files with 107890 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
daegu/pages/[...slug].vue
+141
View File
@@ -0,0 +1,141 @@
<template>
<div class="landing-page-wrap">
<!-- 1. 광고 랜딩 전용 지역 식별 바 (외부 이탈 링크 없음) -->
<div class="ad-location-bar">
<span class="loc-badge-tag">[지역센터]</span>
<span class="loc-text">{{ parsed.shortRegionName }} ({{ parsed.sigungu }}) 관내 초·중·고 전담</span>
<span class="loc-tag">1:1 맞춤 배정 센터</span>
</div>
<!-- 2. 상단 히어로 배너 (Header 제거, H1 태그 포함) -->
<HeroBanner
:region="parsed.region"
:shortRegionName="parsed.shortRegionName"
:grade="parsed.grade"
:subjectName="parsed.subjectName"
/>
<!-- 3. 실시간 성과 지표 4선 -->
<QuickMetrics :regionDong="parsed.dong" />
<!-- 4. 인근 학교별 내신 기출 정밀 분석 -->
<NearbySchools
:regionDong="parsed.dong"
:grade="parsed.grade"
:subjectName="parsed.subjectName"
/>
<!-- 5. 과목별 상세 커리큘럼 & 1등급 도약 솔루션 -->
<SubjectMastery
:regionDong="parsed.dong"
:grade="parsed.grade"
:curriculum="curriculum"
/>
<!-- 6. 1:1 강사진 4단계 검증 프로세스 -->
<TeacherVerification />
<!-- 7. 메타인지 스터디 플래너 & 밀착 코칭 시스템 -->
<CoachingSystem />
<!-- 8. 실제 성적 향상 수기 (해당 학년/과목 100% 매칭) -->
<SuccessStories
:regionDong="parsed.dong"
:grade="parsed.grade"
:subjectName="parsed.subjectName"
/>
<!-- 9. 수업 진행 4단계 절차 안내 -->
<ProcessGuide />
<!-- 10. 자주 묻는 질문 (FAQ) -->
<FaqAccordion
:regionDong="parsed.dong"
:grade="parsed.grade"
:subjectName="parsed.subjectName"
/>
<!-- 11. 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
<FastConsultFocus
:regionDong="parsed.dong"
:grade="parsed.grade"
:subjectName="parsed.subjectName"
/>
<!-- 웹 광고 단일 목적: 해당 학년과 과목이 기본 선택된 무료 상담 신청 폼 -->
<ConsultForm
:regionName="parsed.shortRegionName"
:defaultGrade="parsed.grade"
:defaultSubject="parsed.subjectName"
/>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { parseRouteSlug, getCurriculumBySubject, getAllSubjectsList, getPopularRegions } from '~/utils/dataHelper'
import { generateSeoMeta } from '~/utils/seoHelper'
const route = useRoute()
const config = useRuntimeConfig()
// URL 파라미터 파싱
const slug = route.params.slug
const parsed = parseRouteSlug(slug)
// 커리큘럼 데이터 로드
const curriculum = getCurriculumBySubject(parsed.subjectKey)
const allSubjects = getAllSubjectsList()
const popularRegions = getPopularRegions(12)
// 네이버 Yeti 봇 100% 대응 SEO 메타태그 설정
const seo = generateSeoMeta(
parsed,
config.public.siteName,
config.public.siteDomain
)
useHead({
title: seo.title,
meta: seo.meta,
link: seo.link,
script: seo.script
})
</script>
<style scoped>
.landing-page-wrap {
width: 100%;
overflow-x: hidden;
}
.ad-location-bar {
max-width: 1080px;
margin: 10px auto;
padding: 8px 16px;
font-size: clamp(0.78rem, 2vw, 0.88rem);
color: #334155;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.loc-pin {
font-size: 1rem;
}
.loc-text {
font-weight: 700;
color: var(--primary-color, #1e3a8a);
}
.loc-tag {
font-size: 0.75rem;
font-weight: 800;
background: var(--badge-bg, rgba(30, 58, 138, 0.08));
color: var(--primary-color, #1e3a8a);
padding: 2px 8px;
border-radius: 4px;
}
</style>
daegu/pages/index.vue
+572
View File
@@ -0,0 +1,572 @@
<template>
<div class="landing-container bg-[#FFF7ED] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
<!-- Header -->
<header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm w-full">
<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 space-x-2">
<div class="w-9 h-9 rounded-xl bg-orange-600 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
M
</div>
<div>
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-orange-950">{{ siteName }}</span>
<span class="text-[10px] font-bold text-orange-600 bg-orange-50 px-2 py-0.5 rounded-full ml-1.5 border border-orange-200">메타인지 코칭</span>
</div>
</div>
<div class="flex items-center space-x-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-orange-600 transition">
<i class="fa-solid fa-phone text-orange-600"></i>
<span>010-5961-5807</span>
</a>
<a href="#leadFormSection" class="bg-orange-600 hover:bg-orange-700 text-white text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition shadow-md flex items-center gap-1.5">
<span>코칭 신청</span>
<i class="fa-solid fa-arrow-right text-[11px]"></i>
</a>
</div>
</div>
</header>
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
<main class="w-full bg-[#FFF7ED] min-h-screen pb-20">
<!-- 히어로 섹션 (웜 코랄 & 오렌지 풀와이드) -->
<section class="w-full bg-gradient-to-b from-[#C2410C] via-[#D94F0C] to-[#EA580C] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
<div class="absolute -right-24 -top-24 w-96 h-96 bg-amber-400/25 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-orange-300/20 rounded-full blur-3xl pointer-events-none"></div>
<div class="max-w-4xl mx-auto relative z-10">
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-orange-100 mb-5 shadow-sm">
<span class="w-2.5 h-2.5 rounded-full bg-amber-300 animate-ping"></span>
<span>공부 정체기 극복 & 메타인지 1:1 맞춤 솔루션</span>
</div>
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
노력해도 안 오르는 성적 정체기 탈출<br class="hidden sm:inline">
<span class="text-amber-200 underline decoration-wavy decoration-amber-300">메타인지 1:1 학습 코칭 & 정밀 진단</span> 무료 신청
</h1>
<p class="text-xs sm:text-base text-orange-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
문제는 머리가 아니라 공부 방법입니다. 아는 것과 모르는 것을 명확히 구분하는 메타인지로 성적 반등을 이끕니다.
</p>
<!-- 지표 카운터 -->
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
<div>
<div class="text-[11px] sm:text-xs text-orange-200">정체기 극복률</div>
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">96.7<span class="text-xs sm:text-sm font-normal">%</span></div>
</div>
<div class="border-x border-white/20">
<div class="text-[11px] sm:text-xs text-orange-200">슬럼프 케어</div>
<div class="font-extrabold text-base sm:text-2xl text-amber-300 mt-0.5">15,300<span class="text-xs sm:text-sm font-normal">건</span></div>
</div>
<div>
<div class="text-[11px] sm:text-xs text-orange-200">자기주도 지속률</div>
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">98.4<span class="text-xs sm:text-sm font-normal">%</span></div>
</div>
</div>
<!-- 실시간 롤링 알림 -->
<div class="bg-black/30 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-200 border border-white/15 mx-auto max-w-md shadow-md">
<span class="bg-amber-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">실시간</span>
<span class="truncate font-medium transition-opacity duration-300">{{ currentNotice }}</span>
</div>
</div>
</section>
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
<header class="text-center mb-6 pb-4 border-b border-slate-100">
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-800 mb-2">
선착순 30명 한정 메타인지 진단서 무료
</span>
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
현재 겪고 있는 공부 고민을 알려주세요!
</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">
학생의 공부 심리와 결손 단원을 파악하여 최적의 1:1 코칭 플랜을 세워드립니다.
</p>
</header>
<form @submit.prevent="handleSubmit" class="space-y-5">
<!-- 학년 & 취약 과목 -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
학년 선택 <span class="text-orange-600">*</span>
</label>
<select id="studentGrade" v-model="formData.grade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-orange-600 focus:border-orange-600 p-3 outline-none font-medium transition">
<option value="" disabled>학년 선택</option>
<optgroup label="중등부 (공부법 교정)">
<option value="중학교 1학년">중학교 1학년 (자유학기 공부습관 세팅)</option>
<option value="중학교 2학년">중학교 2학년 (내신 시험불안 극복)</option>
<option value="중학교 3학년">중학교 3학년 (고교 진학 슬럼프 예방)</option>
</optgroup>
<optgroup label="고등부 (정체기 탈출)">
<option value="고등학교 1학년">고등학교 1학년 (내신 충격 극복 & 1등급 도약)</option>
<option value="고등학교 2학년">고등학교 2학년 (수시/정시 슬럼프 탈출)</option>
<option value="고등학교 3학년/N수">고등학교 3학년 / N수 (멘탈 케어 & 수능 실전)</option>
</optgroup>
<optgroup label="초등부">
<option value="초등 5~6학년">초등 5~6학년 (문해력 & 자기주도 형성)</option>
</optgroup>
</select>
</div>
<div>
<label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
극복 희망 과목 <span class="text-orange-600">*</span>
</label>
<select id="weakSubject" v-model="formData.subject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-orange-600 focus:border-orange-600 p-3 outline-none font-medium transition">
<option value="" disabled>과목 선택</option>
<option value="수학">수학 (개념 망각 & 오답 패턴 교정)</option>
<option value="영어">영어 (단어 암기 한계 & 문장 구조화)</option>
<option value="국어">국어 (지문 독해력 & 서술형 감점)</option>
<option value="과학">과학 (개념 혼동 & 탐구 문제 적용)</option>
<option value="전과목/메타인지">전과목 메타인지 학습 플래닝</option>
</select>
</div>
</div>
<!-- 빠른 과목 픽 -->
<div>
<div class="text-xs font-semibold text-slate-500 mb-2 flex justify-between items-center">
<span>빠른 과목 픽 (PICK)</span>
<span class="text-xs text-orange-600 font-semibold">터치 시 자동 선택</span>
</div>
<div class="grid grid-cols-5 gap-2 text-center">
<button
v-for="subj in subjects"
:key="subj.name"
type="button"
@click="formData.subject = subj.name"
:class="[
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
formData.subject === subj.name
? 'border-2 border-orange-500 bg-orange-50 text-orange-800 ring-2 ring-orange-300/50'
: 'border border-slate-200 text-slate-700 hover:border-orange-400 bg-white'
]"
>
<span>{{ subj.label }}</span>
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-orange-700 font-semibold' : 'text-slate-400'">
{{ subj.badge }}
</span>
</button>
</div>
</div>
<!-- 공부 고민 체크박스 -->
<div>
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
</label>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 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 rounded-xl cursor-pointer hover:bg-orange-50/50 transition">
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-orange-600 rounded border-slate-300 focus:ring-orange-500">
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
</label>
</div>
</div>
<!-- 거주 지역 / 학교 -->
<div>
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.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-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-orange-600 focus:border-orange-600 p-3 outline-none placeholder:text-slate-400 transition">
</div>
<!-- 학부모 연락처 -->
<div>
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
학부모 연락처 <span class="text-orange-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-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-orange-600 focus:border-orange-600 p-3.5 pl-11 outline-none tracking-wider"
>
<i class="fa-solid fa-mobile-screen-button 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-orange-600 rounded border-slate-300 focus:ring-orange-500">
<label for="privacyAgree" class="cursor-pointer">
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
</label>
</div>
<!-- 제출 버튼 -->
<button
type="submit"
:disabled="isSubmitting"
class="w-full bg-gradient-to-r from-orange-600 via-amber-500 to-orange-600 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
>
<i class="fa-solid fa-heart-pulse text-lg"></i>
<span>{{ isSubmitting ? '진단서 생성 중...' : '메타인지 학습 진단 & 1:1 코칭 신청하기' }}</span>
</button>
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
<i class="fa-solid fa-lock text-xs"></i>
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
</div>
<!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
<div class="mt-3 p-3.5 bg-orange-50/90 border border-orange-200/90 rounded-xl flex items-start gap-2.5 text-xs text-orange-950 leading-relaxed shadow-sm">
<i class="fa-solid fa-circle-info text-orange-600 mt-0.5 text-sm shrink-0"></i>
<div>
<strong class="font-bold text-orange-950 block mb-0.5">📢 원활한 상담 진행 안내</strong>
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-orange-900 underline hover:text-orange-700">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-2xl text-emerald-900 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">
기재해주신 연락처로 <strong>‘메타인지 학습 성향 정밀 진단표’</strong>가 발송되며, 전문 학습 코칭 매니저가 유선으로 심층 솔루션을 안내해 드립니다.
</p>
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
<span><strong>💡 안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
</div>
</div>
</div>
</section>
<!-- 4대 혜택 섹션 (데스크톱 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-orange-600 tracking-wider uppercase bg-orange-100 px-3 py-1 rounded-full">TEACHER BRIDGE</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">티처브릿지 4대 슬럼프 극복 솔루션</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">공부 무기력증을 깨우고 스스로 성취감을 느끼게 만듭니다.</p>
</header>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-orange-300 hover:shadow-md transition group">
<div class="w-12 h-12 rounded-2xl bg-orange-100 text-orange-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-brain"></i>
</div>
<span class="inline-block text-[11px] font-bold text-orange-600 bg-orange-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
<h3 class="font-bold text-slate-900 text-sm sm:text-base">메타인지 결손 진단</h3>
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">아는 것과 모르는 것을 정확히 구분하는 학습 진단서</p>
</div>
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-amber-300 hover:shadow-md transition group">
<div class="w-12 h-12 rounded-2xl bg-amber-100 text-amber-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-clock-rotate-left"></i>
</div>
<span class="inline-block text-[11px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded mb-1.5">혜택 02</span>
<h3 class="font-bold text-slate-900 text-sm sm:text-base">순공 2배 플래너 제공</h3>
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">시간 낭비 요소를 제거하는 1:1 맞춤 데일리 루틴</p>
</div>
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-rose-300 hover:shadow-md transition group">
<div class="w-12 h-12 rounded-2xl bg-rose-100 text-rose-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-heart-circle-check"></i>
</div>
<span class="inline-block text-[11px] font-bold text-rose-600 bg-rose-50 px-2 py-0.5 rounded mb-1.5">혜택 03</span>
<h3 class="font-bold text-slate-900 text-sm sm:text-base">시험 불안 멘탈 케어</h3>
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">실전 시험에서 긴장과 실수를 줄이는 심리 코칭</p>
</div>
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-emerald-300 hover:shadow-md transition group">
<div class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-handshake-angle"></i>
</div>
<span class="inline-block text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded mb-1.5">혜택 04</span>
<h3 class="font-bold text-slate-900 text-sm sm:text-base">성취감 중심 전담 코치</h3>
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">작은 성공 경험을 누적시켜 자신감을 세워주는 멘토링</p>
</div>
</div>
</section>
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
<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-orange-600 tracking-wider bg-orange-100 px-3 py-1 rounded-full">BREAKTHROUGH STORIES</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">실제 슬럼프 극복 & 성적 반등</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-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-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<span class="bg-orange-100 text-orange-800 font-bold text-xs px-2.5 py-1 rounded-full">정체기 극복</span>
<span class="font-bold text-sm sm:text-base text-slate-800">해운대 우동 중3 신OO</span>
</div>
<span class="text-xs text-slate-400">전교 10등 진입</span>
</div>
<div>
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
<span class="text-slate-400">코칭 전: 58점 (학원 진도 낙오)</span>
<span class="text-orange-600 font-bold">코칭 후: 95점 (전교권 도약) 🔥</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
<div class="bg-gradient-to-r from-slate-300 to-orange-500 h-3 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 코칭으로 내가 뭘 모르고 있는지 짚고 넘어가니 공부가 술술 풀렸습니다."
</p>
</div>
<!-- Case 2 -->
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<span class="bg-amber-100 text-amber-800 font-bold text-xs px-2.5 py-1 rounded-full">영어 1등급 달성</span>
<span class="font-bold text-sm sm:text-base text-slate-800">부산 센텀 고1 조OO</span>
</div>
<span class="text-xs text-slate-400">내신 1등급 도약</span>
</div>
<div>
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
<span class="text-slate-400">코칭 전: 70점대 정체 (빈칸 불안)</span>
<span class="text-amber-600 font-bold">코칭 후: 98점 (내신 1등급) ✨</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
<div class="bg-gradient-to-r from-slate-300 to-amber-500 h-3 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">
"시험 때마다 긴장해서 실수하던 습관을 코치님과의 실전 시뮬레이션으로 완벽히 고쳤습니다."
</p>
</div>
</div>
<!-- 학부모 리뷰 (2열) -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
<div class="text-amber-400 text-sm 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-2xl border border-slate-200 shadow-sm text-left">
<div class="text-amber-400 text-sm 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>
<!-- 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">자주 묻는 질문</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-2xl overflow-hidden bg-white shadow-sm">
<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>
<!-- 하단 모바일 고정 CTA 바 -->
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
<div class="max-w-4xl mx-auto flex items-center gap-3">
<a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
<i class="fa-solid fa-phone text-orange-600 text-sm mb-0.5"></i>
<span>010-5961-5807</span>
</a>
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-orange-600 via-amber-500 to-orange-600 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2">
<i class="fa-solid fa-heart-pulse text-xs sm:text-sm"></i>
<span>지금 무료 메타인지 코칭 신청하기</span>
</a>
</div>
</aside>
</div>
</template>
<script setup>
import { ref, reactive, 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 rollingMessages = [
"부산 해운대구 우동 중3 학원 낙오 극복 코칭 신청 (방금 전)",
"부산 수영구 남천동 고1 영어 모의고사 슬럼프 클리닉 접수 (2분 전)",
"부산 남구 대연동 중2 수학 공부법 정밀 진단 신청 완료 (3분 전)",
"부산 동래구 사직동 고2 내신 정체기 극복 접수 (5분 전)",
"부산 금정구 구서동 중1 자기주도 플래너 코칭 신청 (7분 전)"
]
const currentNotice = ref(rollingMessages[0])
let rollingIdx = 0
onMounted(() => {
setInterval(() => {
rollingIdx = (rollingIdx + 1) % rollingMessages.length
currentNotice.value = rollingMessages[rollingIdx]
}, 3500)
})
const subjects = [
{ name: '수학', label: '수학', badge: '인기' },
{ name: '영어', label: '영어', badge: 'PICK' },
{ name: '국어', label: '국어', badge: 'PICK' },
{ name: '과학', label: '과학', badge: 'PICK' },
{ name: '전과목/메타인지', label: '전과목', badge: '추천' }
]
const concernOptions = [
'열심히 공부해도 성적이 오르지 않는 정체기',
'대형 학원 숙제에 치여 자기 공부 시간 부족',
'공부 무기력증 및 슬럼프로 인한 집중력 저하',
'시험 때 아는 문제도 실수로 틀리는 불안감'
]
const formData = reactive({
grade: '중학교 2학년',
subject: '수학',
concerns: ['열심히 공부해도 성적이 오르지 않는 정체기'],
region: '',
phone: '',
privacy: true
})
const faqs = reactive([
{
q: '1. 메타인지 학습 코칭은 일반 과외와 무엇이 다른가요?',
a: '단순히 문제를 풀어주는 주입식 과외와 달리, 학생이 자신이 아는 부분과 모르는 부분을 스스로 인지하고 주도적으로 공부하는 메타인지 루틴을 체화시켜 성적 반등을 만듭니다.',
open: false
},
{
q: '2. 공부에 의욕이 없고 슬럼프인 아이도 효과가 있을까요?',
a: '네, 티처브릿지의 코치진은 칭찬과 작은 성취감 누적을 통해 학생의 자존감을 먼저 세워주며 공부 동기를 자연스럽게 유발합니다.',
open: false
},
{
q: '3. 무료 진단 리포트는 어떤 내용을 담고 있나요?',
a: '학생의 학습 성향, 과목별 취약 원인 분석, 일일 순공 시간 개선 가이드 및 목표 성적 달성 로드맵을 상세히 담아 무료로 제공합니다.',
open: false
},
{
q: '4. 방문 상담이나 교사 변경이 가능한가요?',
a: '네, 사전 미팅을 통해 아이와 케미를 확인하실 수 있으며, 성향이 맞지 않을 경우 수수료 없이 100% 무상 재매칭을 지원합니다.',
open: false
}
])
function formatPhone() {
let val = formData.phone.replace(/[^0-9]/g, '')
if (val.length > 3 && val.length <= 7) {
formData.phone = val.substring(0, 3) + '-' + val.substring(3)
} else if (val.length > 7) {
formData.phone = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11)
} else {
formData.phone = val
}
}
async function handleSubmit() {
if (!formData.phone || formData.phone.length < 12) {
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
return
}
isSubmitting.value = true
try {
const res = await $fetch('/api/consult', {
method: 'POST',
body: {
name: '학부모 (메타인지코칭신청)',
phone: formData.phone,
grade: formData.grade,
schoolName: formData.region || '지역 미기재',
location: formData.region || '온라인 랜딩',
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
url: window.location.href
}
})
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
}
}
useHead({
title: `${siteName} | 공부 정체기 극복 & 메타인지 1:1 맞춤 코칭`,
meta: [
{ name: 'naver-site-verification', content: 'dfb36e971115b72176e1c1e37c6ca27a95e855e3' },
{ name: 'description', content: `${siteName} - 공부 슬럼프 및 성적 정체기 극복을 위한 메타인지 1:1 학습 코칭 및 정밀 진단 무료 신청.` },
{ property: 'og:title', content: `${siteName} | 메타인지 1:1 학습 코칭` },
{ property: 'og:description', content: '공부 방법만 바꿔도 성적이 오른다! 메타인지 정밀 진단과 전담 코치 무료 매칭.' },
{ property: 'og:url', content: siteDomain }
],
script: [
{
type: 'application/ld+json',
children: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'EducationalOrganization',
name: siteName,
url: siteDomain,
telephone: '+82-10-5961-5807',
areaServed: '부산·경남 및 전국'
})
}
]
})
</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>