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
ulsan/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>
ulsan/pages/index.vue
+568
View File
@@ -0,0 +1,568 @@
<template>
<div class="landing-container bg-[#F8FAFC] 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-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>
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
<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>
<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>
<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>
<p class="text-xs sm:text-base text-slate-300 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
상위 1%의 벽을 넘는 고난도 킬러 문항 해결력과 완벽한 내신 서술형 방어로 최상위권 합격을 완성합니다.
</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-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>
<!-- 실시간 롤링 알림 -->
<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>
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
<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">SSAM INJEUNG 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>
</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>
</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.xyz'
const isSubmitting = ref(false)
const submitSuccess = ref(false)
const rollingMessages = [
"울산 남구 옥동 고3 의대 정시 수능 미적분 1등급 매칭 접수 (방금 전)",
"울산 중구 유곡동 고2 수능 국어 킬러 문항 대비 신청 완료 (2분 전)",
"울산 남구 삼산동 중3 자사고·과고 대비 수학 1:1 마스터 (3분 전)",
"울산 북구 송정동 고1 내신 1등급 취약점 집중 클리닉 (5분 전)",
"울산 울주군 구영리 고2 과학탐구 심화 개념 마스터 신청 (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
}
}
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:1 맞춤과외`,
meta: [
{ name: 'naver-site-verification', content: 'd40ee8cd61dab827dcbd7080e54b095339c44222' },
{ 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>
@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>