586 lines
34 KiB
Vue
586 lines
34 KiB
Vue
<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>
|
||
|
||
|
||
<!-- 하단 직통 전화 문의 & 상담 안내 섹션 -->
|
||
<section class="mt-8 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 sm:p-8 rounded-3xl bg-white border border-slate-200 text-center shadow-sm">
|
||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-orange-50 text-orange-600 font-bold text-xs rounded-full mb-3">
|
||
<i class="fa-solid fa-headset"></i> 실시간 전화 상담 센터
|
||
</div>
|
||
<h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 mb-2">
|
||
문의 번호 : <a href="tel:010-5961-5807" class="text-orange-600 hover:underline">010-5961-5807</a>
|
||
</h3>
|
||
<p class="text-xs sm:text-sm font-medium text-slate-600 max-w-lg mx-auto leading-relaxed">
|
||
📢 <strong>안내:</strong> 전화 상담 시 <strong>상담결과를 전달해 주시면</strong> 학생에게 가장 적합한 전담 선생님 배정과 맞춤 커리큘럼 조율이 훨씬 원활하고 신속하게 진행됩니다.
|
||
</p>
|
||
</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: '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>
|