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
gwangju/pages/index.vue
+572
View File
@@ -0,0 +1,572 @@
<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-indigo-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
P
</div>
<div>
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-indigo-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">내신 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-indigo-700 transition">
<i class="fa-solid fa-phone text-indigo-700"></i>
<span>010-5961-5807</span>
</a>
<a href="#leadFormSection" class="bg-indigo-700 hover:bg-indigo-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">
<span>내신 족보 신청</span>
<i class="fa-solid fa-arrow-right text-[11px]"></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-[#312E81] via-[#3B34A3] to-[#4338CA] 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-orange-400/20 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-indigo-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-indigo-100 mb-5 shadow-sm">
<span class="w-2.5 h-2.5 rounded-full bg-orange-400 animate-ping"></span>
<span>주요 중·고교 최근 3개년 내신 기출 족보 데이터 보유</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">
인근 학교별 3개년 내신 기출 분석<br class="hidden sm:inline">
<span class="text-amber-300 underline decoration-wavy decoration-amber-400">1:1 내신 1등급 & 서술형 족보 솔루션</span> 무료 신청
</h1>
<p class="text-xs sm:text-base text-indigo-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
내신 시험 범위와 학교 선생님의 출제 스타일을 꿰뚫는 1:1 맞춤 과외로 다음 시험 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-indigo-200">기출 분석 학교</div>
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">1,480<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-indigo-200">서술형 만점자</div>
<div class="font-extrabold text-base sm:text-2xl text-amber-300 mt-0.5">3,240<span class="text-xs sm:text-sm font-normal">명</span></div>
</div>
<div>
<div class="text-[11px] sm:text-xs text-indigo-200">내신 향상률</div>
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">97.8<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-orange-500 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">
해당 학교의 기출 경향과 서술형 채점 기준을 완벽 분석해 드립니다.
</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-indigo-600 focus:border-indigo-600 p-3 outline-none font-medium transition">
<option value="" disabled>학년 선택</option>
<optgroup label="중등부 (내신 올A)">
<option value="중학교 1학년">중학교 1학년 (자유학기 기초)</option>
<option value="중학교 2학년">중학교 2학년 (중간·기말 본격)</option>
<option value="중학교 3학년">중학교 3학년 (고교진학 선행)</option>
</optgroup>
<optgroup label="고등부 (내신 1등급)">
<option value="고등학교 1학년">고등학교 1학년 (내신 1등급 진입)</option>
<option value="고등학교 2학년">고등학교 2학년 (수시/정시 판가름)</option>
<option value="고등학교 3학년">고등학교 3학년 (수능 & 수시 파이널)</option>
</optgroup>
<optgroup label="초등부">
<option value="초등 6학년">초등 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-indigo-600 focus:border-indigo-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-indigo-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-indigo-600 rounded border-slate-300 focus:ring-indigo-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-indigo-600 focus:border-indigo-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-indigo-600 focus:border-indigo-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-file-pen 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-indigo-700 tracking-wider uppercase bg-indigo-100 px-3 py-1 rounded-full">CLASS PICK SPECIAL</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">클래스픽 내신 1등급 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-indigo-300 hover:shadow-md transition group">
<div class="w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-school"></i>
</div>
<span class="inline-block text-[11px] font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
<h3 class="font-bold text-slate-900 text-sm sm:text-base">학교별 3개년 기출 족보</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-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-pen-ruler"></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">혜택 02</span>
<h3 class="font-bold text-slate-900 text-sm sm:text-base">서술형 감점 0점 가이드</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-crosshairs"></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">혜택 03</span>
<h3 class="font-bold text-slate-900 text-sm sm:text-base">시험 직전 3회 적중 모의</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-purple-300 hover:shadow-md transition group">
<div class="w-12 h-12 rounded-2xl bg-purple-100 text-purple-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-purple-600 bg-purple-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">목동·대치 학원가 출신 내신 특화 강사 1:1 매칭</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-indigo-700 tracking-wider bg-indigo-100 px-3 py-1 rounded-full">GRADE ACCELERATION</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-indigo-100 text-indigo-800 font-bold text-xs px-2.5 py-1 rounded-full">내신 전교 3등</span>
<span class="font-bold text-sm sm:text-base text-slate-800">목동 고2 한OO 학생</span>
</div>
<span class="text-xs text-slate-400">한 학기 만에 달성</span>
</div>
<div>
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
<span class="text-slate-400">이전 내신: 3.4등급 (서술형 대량 감점)</span>
<span class="text-orange-600 font-bold">도약 내신: 1.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-indigo-600 h-3 rounded-full" style="width: 94%"></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">
"항상 아는 문제인데도 서술형에서 점수가 깎여 3등급이었는데, 부분점수 방어 훈련을 받고 감점이 0점이 되었습니다."
</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-orange-100 text-orange-800 font-bold text-xs px-2.5 py-1 rounded-full">국어 내신 94점</span>
<span class="font-bold text-sm sm:text-base text-slate-800">마포구 중2 강OO 학생</span>
</div>
<span class="text-xs text-slate-400">2개월 만에 달성</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">시험 결과: 94점 (A등급 달성) ✨</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">
"중학교 국어 문법이 너무 어려웠는데, 기출 족보를 유형별로 풀고 나니 시험 문제가 그대로 눈에 보였습니다."
</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">"학원만 다닐 땐 성적이 안 올랐는데, 1: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-indigo-700 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-file-lines text-xs sm:text-sm"></i>
<span>지금 내신 족보 & 1: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://aeseo.store'
const isSubmitting = ref(false)
const submitSuccess = ref(false)
const rollingMessages = [
"서울 양천구 목동 고2 수학 내신 서술형 정밀 분석 접수 (방금 전)",
"서울 마포구 염리동 중3 영어 기출 분석 리포트 신청 완료 (2분 전)",
"서울 영등포구 여의도동 고1 통합과학 1등급 클리닉 신청 (4분 전)",
"서울 강서구 화곡동 중2 국어 내신 서술형 대비 접수 (6분 전)",
"서울 구로구 신도림동 고2 수학 킬러문항 족보 신청 (8분 전)"
]
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 = [
'내신 서술형 부분점수 감점이 심함',
'학교 시험 킬러문항 변형 문제 적응 불가',
'대형 학원 시험대비 진도가 학교와 안 맞음',
'내신 2~3등급 정체기에서 1등급 도약 희망'
]
const formData = reactive({
grade: '고등학교 1학년',
subject: '수학',
concerns: ['내신 서술형 부분점수 감점이 심함'],
region: '',
phone: '',
privacy: true
})
const faqs = reactive([
{
q: '1. 우리 학교 시험 범위와 교과서에 맞춰 지도해 주나요?',
a: '네, 100% 학교 맞춤형입니다. 재학 중인 학교의 교과서, 부교재, 학교 프린트 및 최근 3개년 기출문제를 완벽히 반영하여 수업을 진행합니다.',
open: false
},
{
q: '2. 시험 기간 직전에는 어떤 방식으로 대비하나요?',
a: '시험 4주 전부터 학교별 기출 변형 문제 풀이와 서술형 답안 첨삭, 직전 적중 모의고사를 통해 실전 감각을 완성합니다.',
open: false
},
{
q: '3. 신청 후 내신 족보 리포트는 어떻게 받나요?',
a: '신청서 확인 후 전담 내신 컨설턴트가 유선으로 학교와 학생 수준을 확인한 뒤 맞춤 분석표를 무료로 발송해 드립니다.',
open: false
},
{
q: '4. 내신뿐만 아니라 수능/모의고사 대비도 가능한가요?',
a: '네, 수시 내신 집중 코스와 정시 수능 대비 코스 모두 운영되고 있어 학생의 입시 목표에 맞춰 설계해 드립니다.',
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} | 학교별 3개년 기출 족보 & 1:1 내신 전문과외`,
meta: [
{ name: 'naver-site-verification', content: '48cf582068341a6e4bebde6900b3e0a0e198f4b6' },
{ name: 'description', content: `${siteName} - 중·고등 주요 학교별 3개년 내신 기출 족보 및 서술형 1등급 대비 1:1 맞춤과외.` },
{ property: 'og:title', content: `${siteName} | 중·고등 학교별 내신 기출 분석 1:1 매칭` },
{ property: 'og:description', content: '서술형 감점 0점! 학교별 기출 족보와 내신 전문 강사진 무료 매칭.' },
{ 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>