도커 설정 완료
This commit is contained in:
+614
-63
@@ -1,91 +1,642 @@
|
||||
<template>
|
||||
<div class="landing-page-wrap">
|
||||
<!-- 상단 히어로 배너 (Header 제거) -->
|
||||
<HeroBanner
|
||||
:region="defaultRegion"
|
||||
grade="초·중·고"
|
||||
subjectName="국영수사과"
|
||||
/>
|
||||
<div class="landing-container bg-[#FAF5FF] 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-900 text-white text-xs px-4 py-2 border-b border-slate-700 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-purple-500/20 text-purple-300 border border-purple-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-pink-500/20 text-pink-300 border border-pink-500/40">
|
||||
<i class="fa-solid fa-graduation-cap mr-1"></i> 명문대 SKY 멘토링 100% 검증
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="showInspector = !showInspector" class="px-3 py-1 bg-purple-700 hover:bg-purple-800 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-slate-950 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-pink-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-purple-400 font-bold block mb-1">1. 프리미엄 멘토링 시맨틱 태그</span>
|
||||
<p class="text-slate-400">SKY 및 명문대 강사진 전문성 키워드가 H1~H3 트리로 구조화되어 전달됩니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-pink-400 font-bold block mb-1">2. Schema.org 리치 스니펫</span>
|
||||
<p class="text-slate-400">네이버 서치어드바이저 및 구글 크롤러 규격을 준수하는 JSON-LD가 탑재되었습니다.</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-purple-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
U
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-purple-950">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-pink-600 bg-pink-50 px-2 py-0.5 rounded-full ml-1.5 border border-pink-200">SKY 멘토링</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-purple-700 transition">
|
||||
<i class="fa-solid fa-phone text-purple-700"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="bg-purple-700 hover:bg-purple-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>
|
||||
|
||||
<!-- 과목별 커리큘럼 -->
|
||||
<SubjectMastery
|
||||
regionDong="전국"
|
||||
grade="중·고등"
|
||||
:curriculum="defaultCurriculum"
|
||||
/>
|
||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
||||
<main class="w-full bg-[#FAF5FF] min-h-screen pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (럭셔리 퍼플 & 로즈 핑크 풀와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#581C87] via-[#6B21A8] to-[#7E22CE] 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-pink-400/25 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-purple-300/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-purple-100 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-pink-400 animate-ping"></span>
|
||||
<span>서울대·연고대·의치약학 멘토진 1: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-pink-200 underline decoration-wavy decoration-pink-300">1:1 최상위권 심층 도약 리포트</span> 무료 신청
|
||||
</h1>
|
||||
|
||||
<!-- 실제 성적 향상 수기 -->
|
||||
<SuccessStories regionDong="수강생" />
|
||||
<p class="text-xs sm:text-base text-purple-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
단순한 지식 전달을 넘어 최상위권의 공부 마인드셋과 킬러 문항 극복 비결을 1: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-purple-200">명문대 강사진</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">94.2<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-purple-200">SKY 합격 배출</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-pink-200 mt-0.5">1,890<span class="text-xs sm:text-sm font-normal">명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-purple-200">멘토링 만족도</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">99.4<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 자주 묻는 질문 -->
|
||||
<FaqAccordion regionDong="전국" />
|
||||
<!-- 실시간 롤링 알림 -->
|
||||
<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-pink-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-purple-100 text-purple-800 mb-2">
|
||||
선착순 30명 SKY 멘토링 진단서 무료
|
||||
</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-purple-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-purple-600 focus:border-purple-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>학년 선택</option>
|
||||
<optgroup label="고등부 (입시·최상위권)">
|
||||
<option value="고등학교 1학년">고등학교 1학년 (내신 1등급 세팅)</option>
|
||||
<option value="고등학교 2학년">고등학교 2학년 (수능/모의고사 심화)</option>
|
||||
<option value="고등학교 3학년/N수">고등학교 3학년 / N수 (의치약·SKY 파이널)</option>
|
||||
</optgroup>
|
||||
<optgroup label="중등부 (상위권 고등선행)">
|
||||
<option value="중학교 1~2학년">중학교 1~2학년 (공부법 마인드셋)</option>
|
||||
<option value="중학교 3학년">중학교 3학년 (특목고·자사고 선행)</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-purple-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-purple-600 focus:border-purple-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>과목 선택</option>
|
||||
<option value="수학">수학 (미적분·기하·킬러문항)</option>
|
||||
<option value="영어">영어 (수능 1등급 & 고난도 빈칸)</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-purple-700 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-purple-600 bg-purple-50 text-purple-800 ring-2 ring-purple-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-purple-400 bg-white'
|
||||
]"
|
||||
>
|
||||
<span>{{ subj.label }}</span>
|
||||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-purple-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-purple-50/50 transition">
|
||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-purple-600 rounded border-slate-300 focus:ring-purple-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-purple-600 focus:border-purple-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-purple-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-purple-600 focus:border-purple-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-purple-600 rounded border-slate-300 focus:ring-purple-500">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isSubmitting"
|
||||
class="w-full bg-gradient-to-r from-purple-700 via-pink-600 to-purple-700 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-graduation-cap text-lg"></i>
|
||||
<span>{{ isSubmitting ? '멘토 매칭 분석 중...' : 'SKY 멘토 매칭 & 무료 진단 신청하기' }}</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-purple-50/90 border border-purple-200/90 rounded-xl flex items-start gap-2.5 text-xs text-purple-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-purple-600 mt-0.5 text-sm shrink-0"></i>
|
||||
<div>
|
||||
<strong class="font-bold text-purple-950 block mb-0.5">📢 원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-purple-900 underline hover:text-purple-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-purple-700 tracking-wider uppercase bg-purple-100 px-3 py-1 rounded-full">UNICLASS PRIVILEGE</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-purple-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-purple-100 text-purple-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-user-graduate"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-purple-700 bg-purple-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">SKY 멘토 1: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-pink-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-pink-100 text-pink-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-bullseye"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-pink-600 bg-pink-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">수학·국어 고난도 킬러 문항 5단계 해체 솔루션</p>
|
||||
</div>
|
||||
|
||||
<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-compass"></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">혜택 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">주간 자습 시간 배분 및 순공 14시간 완성 로드맵</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-shield-halved"></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">학력·신원 100% 검증</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-purple-700 tracking-wider bg-purple-100 px-3 py-1 rounded-full">ELITE 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">유니클래스 멘토링을 통해 목표 대학에 합격한 수강생의 변화입니다.</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-purple-100 text-purple-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">대구 수성구 범어동 고3 임OO</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">수능 백분위 98%</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">모의고사: 3등급 (71점)</span>
|
||||
<span class="text-pink-600 font-bold">수능 실전: 1등급 (96점) 🔥</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-purple-700 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">
|
||||
"대치동 1타 인강으로도 뚫리지 않던 22번, 30번 킬러 문항을 서울대 멘토 선생님의 문제 접근법으로 정복했습니다."
|
||||
</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-pink-100 text-pink-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">수성구 만촌동 고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">진단 전: 4등급 (물화 탐구 포기)</span>
|
||||
<span class="text-purple-700 font-bold">진단 후: 1등급 (내신 올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-pink-600 h-3 rounded-full" style="width: 92%"></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-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-purple-50/80 border border-purple-100 text-center shadow-sm">
|
||||
<div class="flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-purple-950 mb-3">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-purple-700 text-base"></i> 명문대 서류 검증</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-award text-pink-600 text-base"></i> 입시 멘토링 책임제</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-rotate text-emerald-600 text-base"></i> 100% 안심 재매칭</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto">
|
||||
{{ siteName }}은 최고의 멘토와 최상의 입시 결과를 약속드립니다.
|
||||
</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-purple-50 text-purple-700 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-purple-700 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-purple-700 text-sm mb-0.5"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-purple-700 via-pink-600 to-purple-700 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-graduation-cap text-xs sm:text-sm"></i>
|
||||
<span>지금 SKY 멘토링 무료 신청하기</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 || '클래식 유니클래스'
|
||||
const siteDomain = config.public.siteDomain || 'https://soohyun.cloud'
|
||||
|
||||
const defaultRegion = getRegionByDong('황금동') || {
|
||||
fullName: '대한민국 전국 전 지역',
|
||||
sido: '전국',
|
||||
sigungu: '전지역',
|
||||
dong: '전국'
|
||||
const showInspector = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const rollingMessages = [
|
||||
"대구 수성구 범어동 고3 수학 미적분 1등급 멘토링 신청 (방금 전)",
|
||||
"대구 수성구 만촌동 고2 과탐 킬러문항 1:1 클리닉 접수 (2분 전)",
|
||||
"대구 달서구 월성동 중3 고등선행 심화수학 신청 완료 (4분 전)",
|
||||
"경북 경산시 고1 영어 모의고사 1등급 분석 접수 (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: '추천' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '전과목/입시로드맵', label: '전과목', badge: 'SKY' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'킬러 문항에서 막혀 1등급 문턱 좌절',
|
||||
'대치/수성 학원 강의로 채워지지 않는 취약점',
|
||||
'올바른 최상위권 순공 습관 및 멘탈 관리 부재',
|
||||
'목표 대학 수시/정시 최적 입시 로드맵 필요'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '고등학교 2학년',
|
||||
subject: '수학',
|
||||
concerns: ['킬러 문항에서 막혀 1등급 문턱 좌절'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
})
|
||||
|
||||
const faqs = reactive([
|
||||
{
|
||||
q: '1. 멘토 선생님들의 학력 인증은 어떻게 진행되나요?',
|
||||
a: '유니클래스는 서울대·연세대·고려대 및 의치한약학 재학생/졸업생의 학력증명서와 신원 인증을 100% 거친 검증된 강사진만을 배정합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 수업 외에 학습 플래너 관리도 함께 해주나요?',
|
||||
a: '네, 수업 시간 외에도 데일리 학습 플래너 피드백, 자습 방향 코칭, 슬럼프 극복 멘탈 케어까지 1:1로 밀착 지도합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 지방 거주 학생도 SKY 멘토링이 가능한가요?',
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
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: '학부모 (SKY멘토링신청)',
|
||||
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} | SKY·명문대 1:1 멘토링 & 최상위권 과외`,
|
||||
meta: [
|
||||
{ name: 'description', content: `${siteName} - 서울대·연고대·의치약학 멘토진의 1: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>
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user