@@ -1,91 +1,639 @@
< template >
< div class = "landing-page-wrap " >
<!-- 상단 히어로 배너 ( Header 제거 ) -- >
< HeroBanner
:region = "defaultRegion"
grade = "초·중·고"
subjectName = "국영수사과"
/ >
< div class = "landing-container bg-[#F8FAFC] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full " >
<!-- SSR & SEO 상태 인스펙터 -- >
< aside class = "sticky top-0 z-50 bg-slate-950 text-white text-xs px-4 py-2 border-b border-slate-800 shadow-md w-full" >
< div class = "max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-2" >
< div class = "flex items-center space-x-2" >
< span class = "inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-red-500/20 text-red-400 border border-red-500/40" >
< i class = "fa-solid fa-bolt mr-1" > < / i > Nuxt 3 SSR
< / span >
< span class = "inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-amber-500/20 text-amber-300 border border-amber-500/40" >
< i class = "fa-solid fa-crown mr-1" > < / i > 의대 · 특목 · 자사고 1 등급 최적화
< / span >
< / div >
< div class = "flex items-center gap-2" >
< button @click ="showInspector = !showInspector" class = "px-3 py-1 bg-red-600 hover:bg-red-700 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow" >
< i class = "fa-solid fa-code text-xs" > < / i >
< span > { { showInspector ? '실제 화면만 보기' : 'SEO & SSR 사양 검증' } } < / span >
< / button >
< / div >
< / div >
< / aside >
<!-- 실시간 성과 지표 4 선 -- >
< QuickMetrics regionDong = "전국" / >
<!-- 인스펙터 서랍 -- >
< section v-if = "showInspector" class="bg-black text-slate-200 border-b border-slate-800 p-4 transition-all w-full" >
< div class = "max-w-6xl mx-auto text-xs space-y-4" >
< div class = "flex justify-between items-center pb-2 border-b border-slate-800" >
< h2 class = "text-sm font-bold text-red-400 flex items-center gap-2" >
< i class = "fa-solid fa-microchip" > < / i > [ { { siteName } } ] 최상위권 킬러문항 마스터 아키텍처
< / h2 >
< button @click ="showInspector = false" class = "text-slate-400 hover:text-white" > < i class = "fa-solid fa-xmark text-sm" > < / i > < / button >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-3 gap-3" >
< div class = "bg-slate-900 p-3 rounded border border-slate-800" >
< span class = "text-red-400 font-bold block mb-1" > 1. 특목 · 의대 입시 시맨틱 트리 < / span >
< p class = "text-slate-400" > 자사고 내신 및 수능 1 등급 킬러 문항에 특화된 H1 ~ H3 구조화 문서 트리를 구성했습니다 . < / p >
< / div >
< div class = "bg-slate-900 p-3 rounded border border-slate-800" >
< span class = "text-amber-400 font-bold block mb-1" > 2. Schema . org 리치 스니펫 < / span >
< p class = "text-slate-400" > 네이버 서치어드바이저 및 구글 크롤러의 FAQPage 구조화 데이터 색인을 100 % 보장합니다 . < / p >
< / div >
< div class = "bg-slate-900 p-3 rounded border border-slate-800" >
< span class = "text-emerald-400 font-bold block mb-1" > 3. 실시간 최상위권 매니저 알림 < / span >
< p class = "text-slate-400" > 신청 즉시 의대 · 자사고 전담 수석 컨설턴트에게 실시간 디스코드 알림이 전송됩니다 . < / p >
< / div >
< / div >
< / div >
< / section >
<!-- 인근 학교별 내신 기출 분석 -- >
< NearbySchools regionDong = "주요 학군" / >
<!-- Header -- >
< header class = "bg-white border-b border-slate-200 sticky top-9 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-slate-900 flex items-center justify-center text-amber-400 font-extrabold text-lg shadow-sm" >
A
< / div >
< div >
< span class = "font-extrabold text-xl sm:text-2xl tracking-tight text-slate-950" > { { siteName } } < / span >
< span class = "text-[10px] font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded-full ml-1.5 border border-red-200" > 초격차 1 등급 < / 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-red-600 transition" >
< i class = "fa-solid fa-phone text-red-600" > < / i >
< span > 010 - 5961 - 5807 < / span >
< / a >
< a href = "#leadFormSection" class = "bg-slate-950 hover:bg-slate-800 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 border border-slate-800" >
< span > 마스터 플랜 신청 < / span >
< i class = "fa-solid fa-arrow-right text-[11px] text-amber-400" > < / i >
< / a >
< / div >
< / div >
< / header >
<!-- 과목별 커리큘럼 -- >
< SubjectMastery
regionDong = "전국"
grade = "중·고등"
:curriculum = "defaultCurriculum"
/ >
<!-- 메인 컨텐츠 ( 좌우 꽉 찬 와이드 ) -- >
< main class = "w-full bg-[#F8FAFC] min-h-screen pb-20" >
<!-- 히어로 섹션 ( 매트 다크 차콜 & 크림슨 레드 / 골드 풀와이드 ) -- >
< section class = "w-full bg-gradient-to-b from-[#0F172A] via-[#162033] to-[#1E293B] 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-red-500/20 rounded-full blur-3xl pointer-events-none" > < / div >
< div class = "absolute -left-24 bottom-0 w-96 h-96 bg-amber-500/20 rounded-full blur-3xl pointer-events-none" > < / div >
<!-- 강사진 4 단계 검증 프로세스 -- >
< TeacherVerification / >
< 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-slate-200 mb-5 shadow-sm" >
< span class = "w-2.5 h-2.5 rounded-full bg-red-500 animate-ping" > < / span >
< span > 의치한약수 & 자사 · 특목고 1 등급 마스터 시스템 < / span >
< / div >
<!-- 메타인지 스터디 플래너 코칭 -- >
< CoachingSystem / >
< 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-400 underline decoration-wavy decoration-amber-500" > 전과목 올 1 등급 초격차 마스터 플랜 < / span > 무료 정밀 심층 진단
< / h1 >
<!-- 실제 성적 향상 수기 -- >
< SuccessStories regionDong = "수강생" / >
< p class = "text-xs sm:text-base text-slate-300 font-normal max-w-2xl mx-auto leading-relaxed mb-8" >
상위 1 % 의 벽을 넘는 고난도 킬러 문항 해결력과 완벽한 내신 서술형 방어로 최상위권 합격을 완성합니다 .
< / p >
<!-- 수업 진행 절차 -- >
< ProcessGuide / >
<!-- 지표 카운터 -- >
< 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-slate-400" > 자사 · 특목 학생비율 < / div >
< div class = "font-extrabold text-base sm:text-2xl text-white mt-0.5" > 88.5 < 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-slate-400" > 1 등급 유지율 < / div >
< div class = "font-extrabold text-base sm:text-2xl text-amber-400 mt-0.5" > 97.4 < span class = "text-xs sm:text-sm font-normal" > % < / span > < / div >
< / div >
< div >
< div class = "text-[11px] sm:text-xs text-slate-400" > 킬러 정답률 < / div >
< div class = "font-extrabold text-base sm:text-2xl text-white mt-0.5" > 92.1 < span class = "text-xs sm:text-sm font-normal" > % < / span > < / div >
< / div >
< / div >
<!-- 자주 묻는 질문 -- >
< FaqAccordion regionDong = "전국" / >
<!-- 실시간 롤링 알림 -- >
< div class = "bg-black/40 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-300 border border-white/15 mx-auto max-w-md shadow-md" >
< span class = "bg-red-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 >
<!-- 네이버 5 개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -- >
< FastConsultFocus regionDong = "전국 " grade = "중·고등" subjectName = "국영수" / >
<!-- 리드 수집 폼 섹션 ( 상단 카드 오버랩 ) -- >
< 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-red-100 text-red-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 : 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-red-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-slate-900 focus:border-slate-900 p-3 outline-none font-medium transition" >
< option value = "" disabled > 학년 선택 < / option >
< optgroup label = "고등부 (의대·수능·자사고 1등급)" >
< option value = "고등학교 1학년" > 고등학교 1 학년 ( 자사고 내신 1 등급 셋업 ) < / option >
< option value = "고등학교 2학년" > 고등학교 2 학년 ( 과탐 · 수학 킬러 완벽 정복 ) < / option >
< option value = "고등학교 3학년/N수" > 고등학교 3 학년 / N수 ( 의치약대 수능 파이널 ) < / option >
< / optgroup >
< optgroup label = "중등부 (특목·자사고 대비)" >
< option value = "중학교 1~2학년" > 중학교 1 ~ 2 학년 ( 수학 · 과학 심화 선행 ) < / option >
< option value = "중학교 3학년" > 중학교 3 학년 ( 특목고 · 영재고 실전 대비 ) < / 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-red-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-slate-900 focus:border-slate-900 p-3 outline-none font-medium transition" >
< option value = "" disabled > 과목 선택 < / option >
< option value = "수학" > 수학 ( 미적분 / 기하 킬러 문항 ) < / option >
< option value = "과학" > 과학 ( 물리 · 화학 · 생명 킬러 도표 ) < / option >
< option value = "영어" > 영어 ( 고난도 빈칸 · 순서배열 1 등급 ) < / option >
< option value = "국어" > 국어 ( 수능 고난도 비문학 기술 · 경제 ) < / option >
< option value = "전과목/초격차" > 전과목 올 1 등급 입시 마스터 < / 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-red-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-red-600 bg-red-50 text-red-800 ring-2 ring-red-300/50'
: 'border border-slate-200 text-slate-700 hover:border-red-400 bg-white'
]"
>
< span > { { subj . label } } < / span >
< span class = "block text-[10px] font-normal" : class = "formData.subject === subj.name ? 'text-red-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-lg cursor-pointer hover:bg-red-50/50 transition" >
< input type = "checkbox" :value = "c" v-model = "formData.concerns" class="w-4 h-4 text-red-600 rounded border-slate-300 focus:ring-red-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-slate-900 focus:border-slate-900 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-red-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-slate-900 focus:border-slate-900 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-red-600 rounded border-slate-300 focus:ring-red-500" >
< label for = "privacyAgree" class = "cursor-pointer" >
[ 필수 ] 개인정보 수집 및 상담 안내 제공에 동의합니다 .
< / label >
< / div >
<!-- 제출 버튼 -- >
< button
type = "submit"
:disabled = "isSubmitting"
class = "w-full bg-gradient-to-r from-slate-950 via-slate-900 to-red-900 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 border border-red-500/30"
>
< i class = "fa-solid fa-crown text-amber-400 text-lg" > < / i >
< span > { { isSubmitting ? '초격차 분석 중...' : '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-red-50/90 border border-red-200/90 rounded-xl flex items-start gap-2.5 text-xs text-red-950 leading-relaxed shadow-sm" >
< i class = "fa-solid fa-circle-info text-red-600 mt-0.5 text-sm shrink-0" > < / i >
< div >
< strong class = "font-bold text-red-950 block mb-0.5" > 📢 원활한 상담 진행 안내 < / strong >
< span > 상담 신청 후 안내받으신 < strong > 상담결과를 매니저에게 전달해 주시면 < / strong > 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다 . ( 직통 문의 : < a href = "tel:010-5961-5807" class = "font-extrabold text-red-900 underline hover:text-red-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-red-600 tracking-wider uppercase bg-red-100 px-3 py-1 rounded-full" > ALPHAMASTER SYSTEM < / 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" > 최상위 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-red-300 hover:shadow-md transition group" >
< div class = "w-12 h-12 rounded-2xl bg-red-100 text-red-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform" >
< i class = "fa-solid fa-bolt" > < / i >
< / div >
< span class = "inline-block text-[11px] font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded mb-1.5" > 혜택 01 < / span >
< h3 class = "font-bold text-slate-900 text-sm sm:text-base" > 킬러 문항 5 단계 해체집 < / 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-crown" > < / 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" > 의대 · 자사고 족보 시크릿 < / h3 >
< p class = "text-xs text-slate-500 mt-1.5 leading-relaxed" > 전국 상위 1 % 학교들의 기출 변형 킬러 DB 독점 제공 < / p >
< / div >
< div class = "bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-slate-400 hover:shadow-md transition group" >
< div class = "w-12 h-12 rounded-2xl bg-slate-100 text-slate-800 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform" >
< i class = "fa-solid fa-scale-balanced" > < / i >
< / div >
< span class = "inline-block text-[10px] font-bold text-slate-800 bg-slate-100 px-2 py-0.5 rounded mb-1.5" > 혜택 03 < / span >
< h3 class = "font-bold text-slate-900 text-sm sm:text-base" > 전과목 올1등급 밸런스 < / 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-award" > < / 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" > 최상위 전문 1 타 매칭 < / 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-red-600 tracking-wider bg-red-100 px-3 py-1 rounded-full" > TOP 1 % RESULTS < / 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" > 알파마스터의 초격차 지도로 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-red-100 text-red-800 font-bold text-xs px-2.5 py-1 rounded-full" > 자사고 내신 1.4 등급 < / span >
< span class = "font-bold text-sm sm:text-base text-slate-800" > 반포 자사고 1 학년 송OO < / span >
< / div >
< span class = "text-xs text-slate-400" > 전교 5 등 도약 < / span >
< / div >
< div >
< div class = "flex justify-between text-xs sm:text-sm mb-1.5 font-semibold" >
< span class = "text-slate-400" > 진단 전 : 4.2 등급 ( 킬러 문항 전멸 ) < / span >
< span class = "text-red-600 font-bold" > 결과 : 1.4 등급 ( 전과목 1 등급 진입 ) 🔥 < / span >
< / div >
< div class = "w-full bg-slate-100 rounded-full h-3 overflow-hidden" >
< div class = "bg-gradient-to-r from-slate-400 to-red-600 h-3 rounded-full" style = "width: 96%" > < / 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" >
"자사고는 한 문제로 등급이 갈리는데, 킬러 문항 5단계 해체 훈련을 받고 난 후 시험에서 단 한 문제도 틀리지 않았습니다."
< / 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" > 수능 수학 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" > 수능 백분위 100 < / span >
< / div >
< div >
< div class = "flex justify-between text-xs sm:text-sm mb-1.5 font-semibold" >
< span class = "text-slate-400" > 모의고사 : 84 점 ( 2 등급 문턱 ) < / span >
< span class = "text-amber-600 font-bold" > 수능 실전 : 100 점 만점 달성 ✨ < / span >
< / div >
< div class = "w-full bg-slate-100 rounded-full h-3 overflow-hidden" >
< div class = "bg-gradient-to-r from-slate-400 to-amber-500 h-3 rounded-full" style = "width: 100%" > < / 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" > "자사고 진학 후 등급 유지가 가장 큰 고민이었는데, 알파마스터 1:1 과외로 확실한 1등급을 굳혔습니다." < / 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" > "의대 지망 아이에게 필요한 깊이 있는 사고력을 1:1로 지도해 주시는 유일한 과외입니다." < / 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-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-slate-100 border border-slate-200 text-center shadow-sm" >
< div class = "flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-slate-900 mb-3" >
< span class = "flex items-center gap-1.5" > < i class = "fa-solid fa-shield-halved text-red-600 text-base" > < / i > 최상위 1 타 강사진 < / span >
< span class = "flex items-center gap-1.5" > < i class = "fa-solid fa-crown text-amber-500 text-base" > < / i > 의대 합격 책임제 < / span >
< span class = "flex items-center gap-1.5" > < i class = "fa-solid fa-rotate text-slate-700 text-base" > < / i > 100 % 무상 재매칭 < / span >
< / div >
< p class = "text-xs sm:text-sm text-slate-500 max-w-xl mx-auto" >
{ { siteName } } 은 최상위 1 % 의 입시 목표를 완벽하게 실현시킵니다 .
< / p >
< / 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-red-50 text-red-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-red-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-red-600 text-sm mb-0.5" > < / i >
< span > 010 - 5961 - 5807 < / span >
< / a >
< a href = "#leadFormSection" class = "flex-1 bg-gradient-to-r from-slate-950 via-slate-900 to-red-900 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 border border-red-500/30" >
< i class = "fa-solid fa-crown text-amber-400 text-xs sm:text-sm" > < / i >
< span > 지금 1 등급 초격차 플랜 신청하기 < / span >
< / a >
< / div >
< / aside >
<!-- 맨 하단 상담 신청 폼 -- >
< ConsultForm
regionName = "전국 전 지역"
defaultSubject = "영어"
/ >
< / div >
< / template >
< script setup >
import { getCurriculumBySubject , getRegionByDong } from '~/utils/dataHelper '
import { generateSeoMeta } from '~/utils/seoHelper'
import { ref , reactive , onMounted } from 'vue '
const config = useRuntimeConfig ( )
const defaultCurriculum = getCurriculumBySubject ( 'english' )
const siteName = config . public . siteName || '알파마스터 1:1 맞춤과외'
const siteDomain = config . public . siteDomain || 'https://soohyun.xyz'
const defaultRegion = getRegionByDong ( '황금동' ) || {
fullName : '대한민국 전국 전 지역' ,
sido : '전국' ,
sigungu : '전지역' ,
dong : '전국'
const showInspector = ref ( false )
const isSubmitting = ref ( false )
const submitSuccess = ref ( false )
const rollingMessages = [
"서울 반포 자사고 1학년 수학 심화 킬러 진단 신청 (방금 전)" ,
"경기 일산 중3 자사고 대비 과학 1:1 마스터 접수 (2분 전)" ,
"서울 강남 특목고 2학년 수능 국어 고난도 비문학 신청 완료 (3분 전)" ,
"대전 유성구 고3 의대 정시 수능 미적분 1등급 매칭 접수 (5분 전)" ,
"서울 양천구 목동 고2 수학 킬러 문항 5단계 해체 신청 (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 : '추천' } ,
{ name : '영어' , label : '영어' , badge : 'PICK' } ,
{ name : '국어' , label : '국어' , badge : 'PICK' } ,
{ name : '전과목/초격차' , label : '전과목' , badge : '의대' }
]
const concernOptions = [
'킬러 문항 변형 문제에서 1등급 문턱 좌절' ,
'특목·자사고 내신 경쟁 속 1~2등급 방어 절실' ,
'의치한약수 정시 수능 백분위 99% 달성 필요' ,
'전과목 올 1등급을 위한 초격차 학습 밸런스'
]
const formData = reactive ( {
grade : '고등학교 1학년' ,
subject : '수학' ,
concerns : [ '킬러 문항 변형 문제에서 1등급 문턱 좌절' ] ,
region : '' ,
phone : '' ,
privacy : true
} )
const faqs = reactive ( [
{
q : '1. 자사고나 특목고 학생들을 위한 고난도 커리큘럼이 준비되어 있나요?' ,
a : '네, 알파마스터는 전국단위 자사고, 과고, 외고의 고난도 내신 기출과 수능 4점 킬러 문항을 다루는 최상위 전문 강사진이 맞춤 지도를 진행합니다.' ,
open : false
} ,
{
q : '2. 의대·최상위권 입시를 위한 장기 로드맵도 제공되나요?' ,
a : '단순한 진도 나가기가 아닌, 목표 학과에 맞춘 수시 세특 관리 방향과 수능 최저/정시 1등급 완성을 위한 전과목 밸런스 로드맵을 함께 설계합니다.' ,
open : false
} ,
{
q : '3. 무료 진단 리포트는 어떤 내용을 담고 있나요?' ,
a : '학생의 최근 모의고사/내신 오답 유형을 분석하여, 1등급 진입을 가로막는 취약 킬러 패턴과 5단계 해체 솔루션을 무상 제공합니다.' ,
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
}
}
const seo = generateSeoMeta (
{
region : defaultRegion ,
sido : '전국' ,
sigungu : '맞춤' ,
dong : '1:1' ,
grade : '초중고' ,
subjectName : '전과목' ,
targetTerm : '방문·화상과외' ,
fullKeyword : '전국 초중고 1:1 방문 과외 및 실시간 화상과외'
} ,
config . public . siteName ,
config . public . siteDomain
)
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 : ` ${ config . public . siteName } | 전국 초·중·고 1:1 맞춤 방문과외 & 화상코칭 ` ,
meta : seo . meta ,
link : seo . link ,
script : seo . script
title : ` ${ siteName } | 의대·자사고 1등급 초격차 1:1 맞춤과외 ` ,
meta : [
{ name : 'description' , content : ` ${ siteName } - 최상위 1% 도약을 위한 킬러 문항 정복 및 특목·자사고 전과목 올 1등급 마스터 과외. ` } ,
{ property : 'og:title' , content : ` ${ siteName } | 전과목 올 1등급 초격차 마스터 ` } ,
{ property : 'og:description' , content : '의대·자사고 목표! 킬러 문항 5단계 해체 및 최상위 1타 강사진 무료 매칭.' } ,
{ 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 >
. landing - page - wrap {
width : 100 % ;
overflow - x : hidden ;
@ 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 >
