educo/web_6ea_educo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-

Browse Source
This commit is contained in:
kyounggu
2026-10-20 11:59:57 +09:00
parent 8d9c72f655
commit 97655851fb
11 changed files with 2193 additions and 2206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
busan/components/HeroBanner.vue
+80 -179
View File
@@ -1,38 +1,88 @@
<template>
<header class="hero-banner">
<div class="hero-container">
<div class="hero-badge-wrap">
<span class="hero-badge royal-badge">{{ region.dong }} 학군 맞춤 1:1 전문 지도</span>
<span class="hero-subbadge">2026 개정 교육과정 완벽 반영</span>
<header class="hero-banner-clean bg-white border-b border-slate-200/80 pt-10 sm:pt-14 pb-14 sm:pb-18 px-4 sm:px-6 relative overflow-hidden text-center">
<!-- 은은한 상단 엠비언트 라이트 -->
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
<div class="max-w-4xl mx-auto relative z-10">
<!-- 신뢰 보증 뱃지 -->
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-5">
<span class="w-2 h-2 rounded-full bg-blue-600"></span>
<span>{{ region.dong }} 학군 전담 | 서울대·부산대 및 베테랑 강사진 100% 신원 보증</span>
</div>
<h1 class="hero-title">
<span class="region-highlight">{{ displayRegionName }}</span><br />
<span class="subject-highlight">{{ grade }} {{ subjectName }}</span> 1:1 맞춤 과외
<!-- SEO 메인 H1 (사용자 지정 롱테일 조합형: [지역] + [학년] + [과목]과외 + 검증된 전문 선생님 100% 매칭) -->
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.22] sm:leading-[1.18] mb-4">
<span>{{ displayRegionName }} {{ grade }} {{ subjectName }}과외</span><br />
<span class="text-blue-600">우리 아이 맞춤 검증된 전문 선생님 100% 매칭</span>
</h1>
<p class="hero-desc">
{{ region.dong }} 인근 학교별 기출 분석부터 서술형 조건 감점 0점화까지!<br />
우리 아이의 취약점을 1:1로 진단하고 <strong>성적 1등급 역전</strong>을 이끌어냅니다.
<!-- 서브 카피 (비용 시세 비교 + 학교 기출 분석 + 무료 시범수업 신뢰 트리거) -->
<p class="text-xs sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
{{ region.dong }} 인근 학교별 기출 분석부터 과외 비용·시세 비교, 취약 개념 클리닉까지.<br class="hidden sm:inline" />
직접 수업받아보고 결정하는 <strong>1:1 무료 방문·화상 시범수업</strong>을 신청하세요.
</p>
<div class="hero-cta-group">
<a href="#consult-section" class="btn-hero-primary">
<span>{{ region.dong }} 1:1 무료 방문·진단 모의수업 신청</span>
</a>
<div class="hero-call-info">
<span class="call-icon"></span>
<span class="call-text">실시간 학습상담 <strong>010-5961-5807</strong></span>
<!-- 4대 핵심 신뢰 지표 바 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-7 text-left">
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
<span class="text-[11px] text-slate-500 leading-tight">학력·경력 증명서 인증</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
<span class="text-[11px] text-slate-500 leading-tight">직접 받아보고 선택</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 투명 시세</strong>
<span class="text-[11px] text-slate-500 leading-tight">부산 표준 시세 가이드</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
<span class="text-[11px] text-slate-500 leading-tight">{{ region.dong }} 3개년 족보 완파</span>
</div>
</div>
</div>
<div class="hero-tags">
<span class="tag-item">#{{ region.dong }}과외</span>
<span class="tag-item">#{{ region.dong }}{{ subjectName }}</span>
<span class="tag-item">#{{ grade }}내신대비</span>
<span class="tag-item">#서술형감점방지</span>
<span class="tag-item">#1대1밀착코칭</span>
<!-- CTA 그룹 -->
<div class="flex flex-col items-center gap-3.5 mb-6">
<a
href="#consult-section"
class="inline-flex items-center justify-center gap-2 w-full max-w-md py-4 px-6 bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-sm sm:text-base rounded-xl shadow-md hover:shadow-lg transition-all"
>
<i class="fa-solid fa-file-signature text-base"></i>
<span>{{ region.dong }} 과외 시세 확인 & 무료 시범수업 신청</span>
</a>
<div class="flex items-center gap-2 text-xs sm:text-sm text-slate-500">
<i class="fa-solid fa-phone text-blue-600 text-xs"></i>
<span>실시간 학습상담 직통: <strong class="text-slate-800 font-bold">010-5961-5807</strong></span>
</div>
</div>
<!-- 태그 목록 -->
<div class="flex justify-center flex-wrap gap-1.5">
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}과외</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}{{ subjectName }}과외</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ grade }}내신대비</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#부산해운대과외</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#1대1무료시범수업</span>
</div>
</div>
</header>
</template>
@@ -55,11 +105,10 @@ const props = defineProps({
},
subjectName: {
type: String,
default: '영어'
default: '수학'
}
})
// '대구광역시 수성구 황금동' -> '대구 황금동' 등 축약 지역명 산출
const displayRegionName = computed(() => {
if (props.shortRegionName) return props.shortRegionName
if (props.region) {
@@ -67,172 +116,24 @@ const displayRegionName = computed(() => {
const dong = props.region.dong || ''
if (sido && dong) {
let shortSido = sido.slice(0, 2)
if (sido.includes('서울')) shortSido = '서울'
if (sido.includes('부산')) shortSido = '부산'
else if (sido.includes('서울')) shortSido = '서울'
else if (sido.includes('대구')) shortSido = '대구'
else if (sido.includes('부산')) shortSido = '부산'
else if (sido.includes('인천')) shortSido = '인천'
else if (sido.includes('광주')) shortSido = '광주'
else if (sido.includes('대전')) shortSido = '대전'
else if (sido.includes('울산')) shortSido = '울산'
else if (sido.includes('세종')) shortSido = '세종'
else if (sido.includes('경기')) shortSido = '경기'
else if (sido.includes('강원')) shortSido = '강원'
else if (sido.includes('충북') || sido.includes('충청북')) shortSido = '충북'
else if (sido.includes('충남') || sido.includes('충청남')) shortSido = '충남'
else if (sido.includes('전북') || sido.includes('전라북')) shortSido = '전북'
else if (sido.includes('전남') || sido.includes('전라남')) shortSido = '전남'
else if (sido.includes('경북') || sido.includes('경상북')) shortSido = '경북'
else if (sido.includes('경남') || sido.includes('경상남')) shortSido = '경남'
else if (sido.includes('제주')) shortSido = '제주'
return `${shortSido} ${dong}`.trim()
return `${shortSido} ${dong}`
}
return props.region.fullName || ''
return dong || sido
}
return ''
})
</script>
<style scoped>
.hero-banner {
background: var(--hero-gradient, linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%));
color: #ffffff;
padding: clamp(40px, 8vw, 80px) 16px clamp(35px, 6vw, 60px);
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.hero-banner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 50% 20%, rgba(217, 119, 6, 0.15) 0%, transparent 60%);
pointer-events: none;
}
.hero-container {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero-badge-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.hero-badge {
display: inline-block;
padding: 6px 14px;
font-size: clamp(0.78rem, 2.2vw, 0.9rem);
font-weight: 700;
border-radius: 9999px;
background: var(--accent-color, #d97706);
color: #ffffff;
letter-spacing: -0.3px;
}
.hero-subbadge {
display: inline-block;
padding: 6px 12px;
font-size: clamp(0.75rem, 2vw, 0.85rem);
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px);
border-radius: 9999px;
color: #e2e8f0;
}
.hero-title {
font-size: clamp(1.65rem, 5vw, 2.85rem);
font-weight: 900;
line-height: 1.3;
margin-bottom: 18px;
.hero-banner-clean {
word-break: keep-all;
letter-spacing: -0.8px;
}
.region-highlight {
color: var(--hero-region-color, #cbd5e1);
font-size: 0.85em;
font-weight: 700;
}
.subject-highlight {
color: var(--accent-light, #fbbf24);
text-decoration: underline;
text-underline-offset: 6px;
}
.hero-desc {
font-size: clamp(0.92rem, 2.6vw, 1.15rem);
line-height: 1.65;
color: #e2e8f0;
margin-bottom: 30px;
word-break: keep-all;
}
.hero-cta-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.btn-hero-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: clamp(14px, 3.5vw, 18px) clamp(20px, 5vw, 36px);
font-size: clamp(0.95rem, 2.8vw, 1.2rem);
font-weight: 800;
color: #ffffff;
background: var(--hero-btn-bg, linear-gradient(135deg, #d97706 0%, #b45309 100%));
border-radius: var(--card-radius, 12px);
box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease;
width: 100%;
max-width: 480px;
min-height: 48px;
}
.btn-hero-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(217, 119, 6, 0.45);
}
.hero-call-info {
display: flex;
align-items: center;
gap: 6px;
font-size: clamp(0.85rem, 2.2vw, 0.95rem);
color: #cbd5e1;
}
.hero-call-info strong {
color: #ffffff;
font-size: 1.1em;
}
.hero-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.tag-item {
font-size: clamp(0.72rem, 1.8vw, 0.82rem);
padding: 4px 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: #cbd5e1;
}
</style>
busan/pages/index.vue
+329 -224
View File
@@ -1,188 +1,261 @@
<template>
<div class="landing-container bg-[#FAF5FF] text-slate-800 antialiased relative pb-8 min-h-screen w-full">
<template>
<div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative min-h-screen w-full">
<!-- Header -->
<header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm w-full">
<!-- 1. Header (클린 미니멀 프리미엄 네비게이션) -->
<header class="bg-white/95 backdrop-blur-md border-b border-slate-200/80 sticky top-0 z-40 w-full transition-all">
<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 class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center text-white font-extrabold text-base shadow-sm">
G
</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 class="flex items-center gap-2">
<span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ siteName }}</span>
<span class="hidden sm:inline-flex items-center text-[11px] font-semibold text-blue-700 bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-100">
교육청 등록 협력
</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>
<div class="flex items-center gap-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-blue-600 transition">
<i class="fa-solid fa-phone text-blue-600 text-xs"></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>
<a href="#leadFormSection" class="bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-bold px-4 sm:px-5 py-2.5 rounded-xl transition shadow-sm hover:shadow 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-[#FAF5FF] min-h-screen pb-20">
<!-- 2. Main Body -->
<main class="w-full 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>
<!-- 히어로 섹션 (AI 스타일 형광/물결 제거, 정제된 모던 에듀테크 캔버스) -->
<section class="w-full bg-white border-b border-slate-200/80 pt-12 sm:pt-16 pb-20 px-4 sm:px-6 text-center relative overflow-hidden">
<!-- 은은한 상단 엠비언트 라이트 (절제된 디자이너 톤) -->
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent 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-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 class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-6">
<span class="w-2 h-2 rounded-full bg-blue-600"></span>
<span>해운대·수영·동래 등 부산 전지역 전담 | 서울대·부산대 및 베테랑 강사진 100% 신원 보증</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-pink-200 underline decoration-wavy decoration-pink-300">1:1 최상위권 심층 도약 리포트</span> 무료 신청
<!-- 메인 H1 (지역 기반 검색 상위 노출 30자 규격 및 학부모 고의도 롱테일 키워드) -->
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.2] sm:leading-[1.18] mb-4">
부산 초·중·고 1:1 맞춤 과외 매칭<br class="hidden sm:inline" />
<span class="text-blue-600">검증된 전문 선생님 100% 매칭</span>
</h1>
<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 class="text-sm sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
과외 비용·시세 투명 비교부터 무료 시범수업 신청까지.<br class="hidden sm:inline" />
해운대·수영·동래 등 부산 관내 학교별 기출 족보를 완벽 분석하여 <strong>내신 1등급 역전 솔루션</strong>을 제공합니다.
</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-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>
<!-- 4대 핵심 신뢰 보증 지표 (Trust Bar) -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-8">
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
<span class="text-[11px] text-slate-500 leading-tight">학력·경력·신원 전수 인증</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 class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
<span class="text-[11px] text-slate-500 leading-tight">직접 수업받아보고 결정</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 class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 시세 비교</strong>
<span class="text-[11px] text-slate-500 leading-tight">부산 표준 시세 투명 안내</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
<span class="text-[11px] text-slate-500 leading-tight">부산 관내 중·고교 족보</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-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 class="inline-flex items-center gap-2.5 bg-slate-100/90 border border-slate-200/80 rounded-full px-4 py-1.5 text-xs text-slate-600 shadow-xs">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="font-bold text-slate-700">실시간 접수</span>
<span class="text-slate-300">|</span>
<span class="truncate max-w-[260px] sm:max-w-md font-medium text-slate-600">{{ currentNotice }}</span>
</div>
</div>
</section>
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
<!-- 3. 리드 수집 폼 섹션 (상급자 에듀테크 플랫폼 스타일 모듈) -->
<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">
<div class="bg-white rounded-2xl shadow-xl border border-slate-200/90 p-6 sm:p-9 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">
희망 과목과 학생 학년을 선택하세요!
<header class="text-center mb-7 pb-5 border-b border-slate-100">
<div class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-blue-50 text-blue-700 border border-blue-100 mb-2">
선착순 30명 한정 전액 무료
</div>
<h2 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight">
부산 과외 시세 확인 & 무료 시범수업 신청
</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">
<form @submit.prevent="handleSubmit" class="space-y-6">
<!-- 학년 & 취약 과목 -->
<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>
<!-- 1) 학년 선택 (초등 / 중등 / 고등 분기 탭 & 세부 선택) -->
<div>
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
1. 학생 학년 선택 <span class="text-blue-600">*</span>
</label>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-2">
<button
type="button"
@click="selectGradeStage('초등')"
:class="[
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
gradeStage === '초등'
? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs'
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
]"
>
초등부 (1~6학년)
</button>
<button
type="button"
@click="selectGradeStage('중등')"
:class="[
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
gradeStage === '중등'
? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs'
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
]"
>
중등부 (1~3학년)
</button>
<button
type="button"
@click="selectGradeStage('고등')"
:class="[
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
gradeStage === '고등'
? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs'
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
]"
>
고등부 / N수
</button>
</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>
<select
id="studentGrade"
v-model="formData.grade"
required
class="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3 outline-none font-medium transition"
>
<option value="" disabled>세부 학년을 선택해 주세요</option>
<option v-for="opt in currentGradeOptions" :key="opt" :value="opt">{{ opt }}</option>
</select>
</div>
<!-- 빠른 과목 픽 -->
<!-- 2) 취약 과목 빠른 선택 (Chip 버튼) -->
<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 class="flex justify-between items-center mb-2">
<label class="block text-xs sm:text-sm font-bold text-slate-800">
2. 집중 지도가 필요한 과목 <span class="text-blue-600">*</span>
</label>
<span class="text-[11px] text-slate-400 font-normal">복수/단일 클릭</span>
</div>
<div class="grid grid-cols-5 gap-2 text-center">
<div class="grid grid-cols-3 sm:grid-cols-6 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',
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-bold transition border',
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'
? 'bg-blue-600 border-blue-600 text-white shadow-sm'
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
]"
>
<span>{{ subj.label }}</span>
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-purple-700 font-semibold' : 'text-slate-400'">
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-blue-100' : 'text-slate-400'">
{{ subj.badge }}
</span>
</button>
</div>
</div>
<!-- 공부 고민 체크박스 -->
<!-- 3) 희망 수업 형태 (방문 / 화상) -->
<div>
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
3. 희망 수업 형태
</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">
<div class="grid grid-cols-3 gap-2">
<label
v-for="type in lessonTypes"
:key="type"
class="flex items-center justify-center p-3 rounded-xl border text-xs sm:text-sm font-semibold cursor-pointer transition text-center"
:class="formData.lessonType === type ? 'bg-blue-50 border-blue-600 text-blue-700 font-bold' : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'"
>
<input type="radio" :value="type" v-model="formData.lessonType" class="hidden" />
<span>{{ type }}</span>
</label>
</div>
</div>
<!-- 4) 현재 가장 큰 고민 (체크박스) -->
<div>
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
4. 현재 가장 큰 학습 고민 (복수 선택 가능)
</label>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 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/90 rounded-xl cursor-pointer hover:bg-slate-100/70 transition">
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500">
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
</label>
</div>
</div>
<!-- 거주 지역 / 학교 -->
<!-- 5) 거주 지역 / 학교명 입력 -->
<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 for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
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">
<input
type="text"
id="regionInput"
v-model="formData.region"
placeholder="예: 부산 해운대구 우동 / 해운대고"
class="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3.5 outline-none placeholder:text-slate-400 transition"
/>
</div>
<!-- 학부모 연락처 -->
<!-- 6) 학부모 연락처 -->
<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 for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
6. 학부모 연락처 <span class="text-blue-600">*</span>
<span class="text-slate-400 font-normal text-xs">(과외 시세 안내 및 시범수업 조율용)</span>
</label>
<div class="relative">
<input
@@ -193,152 +266,151 @@
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>
class="w-full bg-slate-50 border border-slate-200 text-slate-900 text-base font-bold rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3.5 pl-11 outline-none tracking-wider"
/>
<i class="fa-solid fa-mobile-screen 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">
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-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"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-xl shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50"
>
<i class="fa-solid fa-graduation-cap text-lg"></i>
<span>{{ isSubmitting ? '멘토 매칭 분석 중...' : 'SKY 멘토 매칭 & 무료 진단 신청하기' }}</span>
<i class="fa-solid fa-circle-check text-lg"></i>
<span>{{ isSubmitting ? '신청서 접수 중...' : '부산 과외 시세 확인 & 무료 시범수업 신청하기' }}</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>
<i class="fa-solid fa-shield-halved 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 class="mt-3 p-3.5 bg-blue-50/60 border border-blue-100 rounded-xl flex items-start gap-2.5 text-xs text-slate-700 leading-relaxed">
<i class="fa-solid fa-circle-info text-blue-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>
<strong class="font-bold text-slate-900 block mb-0.5">신속 상담 안내</strong>
<span>접수 즉시 부산 해운대 등 지역 전담 매니저가 학교별 출제 경향과 최적의 선생님 매칭 일정을 유선으로 안내해 드립니다. (직통 상담: <a href="tel:010-5961-5807" class="font-bold text-blue-600 underline">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 v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-xl text-emerald-950 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>
<span>맞춤 과외 시세 및 무료 시범수업 신청이 완료되었습니다!</span>
</div>
<p class="leading-relaxed">
기재해주신 연락처로 <strong>‘최상위권 도약 심층 리포트’</strong>가 발송되며, 전담 입시 컨설턴트가 유선으로 추천 멘토 프로필을 안내해 드립니다.
<p class="leading-relaxed text-slate-700">
기재해주신 연락처로 <strong>‘부산 관내 학교별 내신 분석 요약표’</strong>가 발송되며, 전문 학습 매니저가 1:1 맞춤 선생님 추천 및 무료 모의수업 일정을 조율해 드립니다.
</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>
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
<!-- 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 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>
<span class="text-xs sm:text-sm font-bold text-blue-600 tracking-wider bg-blue-50 px-3 py-1 rounded-full border border-blue-100">
PROVEN RESULTS
</span>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2 tracking-tight">실제 성적 상승 및 수강 후기</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-1">1: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="bg-white p-6 rounded-2xl border border-slate-200/90 shadow-xs 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>
<span class="bg-blue-50 text-blue-700 font-bold text-xs px-2.5 py-1 rounded-md border border-blue-100">수학 역전</span>
<span class="font-bold text-sm sm:text-base text-slate-800">해운대구 우동 고2 박OO 학생</span>
</div>
<span class="text-xs text-slate-400">수능 백분위 98%</span>
<span class="text-xs text-slate-400 font-medium">3개월 만에 달성</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>
<span class="text-slate-400">진단 전: 4등급 (54점)</span>
<span class="text-blue-600 font-bold">진단 후: 1등급 (95점)</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
<div class="bg-gradient-to-r from-slate-300 to-purple-700 h-3 rounded-full" style="width: 95%"></div>
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 89%"></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번 킬러 문항을 서울대 멘토 선생님의 문제 접근법으로 정복했습니다."
"킬러 문항에 대한 막연한 두려움이 있었는데, 풀이 접근 로직을 1:1로 지도받은 후 모의고사와 내신 모두 1등급을 찍었습니다."
</p>
</div>
<!-- Case 2 -->
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
<div class="bg-white p-6 rounded-2xl border border-slate-200/90 shadow-xs 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>
<span class="bg-emerald-50 text-emerald-700 font-bold text-xs px-2.5 py-1 rounded-md border border-emerald-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">내신 전교 2등</span>
<span class="text-xs text-slate-400 font-medium">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>
<span class="text-slate-400">진단 전: 72점 (B등급)</span>
<span class="text-emerald-600 font-bold">진단 후: 98점 (전교 2등)</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 class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
<div class="bg-emerald-600 h-2.5 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">
"멘토 선생님께서 직접 작성한 오답 노트 정리 비법을 전수받아 과학 과목에서 만점을 받았습니다."
"내신 서술형 감점이 심했는데, 학교 기출 족보를 1:1로 집중 분석해 주셔서 이번 시험에서 완벽하게 만점을 받았습니다."
</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">
<div class="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
<div class="text-amber-400 text-xs 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>
<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 class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
<div class="text-amber-400 text-sm mb-2">
<div class="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
<div class="text-amber-400 text-xs 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>
<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 섹션 -->
<!-- 5. 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
<SubjectCarousel grade="초·중·고" />
<!-- 6. 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>
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1 tracking-tight">자주 묻는 질문</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">
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-xs">
<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>
@@ -356,7 +428,7 @@
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, computed, onMounted } from 'vue'
const config = useRuntimeConfig()
const siteName = config.public.siteName || '공부짝꿍'
@@ -365,17 +437,48 @@ const siteDomain = config.public.siteDomain || 'https://soohyun.cloud'
const isSubmitting = ref(false)
const submitSuccess = ref(false)
const gradeStage = ref('중등')
const gradeOptionsByStage = {
'초등': [
'초등 1~3학년 (기초 연산·한글 습관)',
'초등 4학년 (개념 이해·응용)',
'초등 5학년 (분수·도형 심화)',
'초등 6학년 (중등 선행 대비)'
],
'중등': [
'중학교 1학년 (자유학기제·자기주도학습)',
'중학교 2학년 (내신 지필평가 본격 대비)',
'중학교 3학년 (고등 진학·심화 선행)'
],
'고등': [
'고등학교 1학년 (공통과목 1등급 집중)',
'고등학교 2학년 (내신 수시 + 수능 정시)',
'고등학교 3학년 / N수 (수능 최저·실전 파이널)'
]
}
const currentGradeOptions = computed(() => {
return gradeOptionsByStage[gradeStage.value] || []
})
function selectGradeStage(stage) {
gradeStage.value = stage
formData.grade = currentGradeOptions.value[0] || ''
}
const rollingMessages = [
"대구 수성구 범어동 고3 수학 미적분 1등급 멘토링 신청 (방금 전)",
"대구 수성구 만촌동 고2 과탐 킬러문항 1:1 클리닉 접수 (2분 전)",
"대구 달서구 월성동 중3 고등선행 심화수학 신청 완료 (4분 전)",
"경북 경산시 고1 영어 모의고사 1등급 분석 접수 (6분 전)",
"대구 동구 율하동 고2 국어 비문학 멘토링 신청 (8분 전)"
"부산 해운대구 우동 고2 수학 무료 시범수업 신청 완료 (방금 전)",
"부산 수영구 남천동 중3 영어 내신대비 과외 매칭 접수 (1분 전)",
"부산 동래구 사직동 중2 과학 오답분석 리포트 신청 (3분 전)",
"부산 남구 대연동 초6 중등수학 선행 시범수업 신청 (5분 전)",
"부산 금정구 구서동 고1 국어 비문학 클리닉 신청 (7분 전)"
]
const currentNotice = ref(rollingMessages[0])
let rollingIdx = 0
onMounted(() => {
formData.grade = currentGradeOptions.value[1] || currentGradeOptions.value[0]
setInterval(() => {
rollingIdx = (rollingIdx + 1) % rollingMessages.length
currentNotice.value = rollingMessages[rollingIdx]
@@ -383,82 +486,84 @@ onMounted(() => {
})
const subjects = [
{ name: '수학', label: '수학', badge: '인기' },
{ name: '영어', label: '영어', badge: 'PICK' },
{ name: '과학', label: '과학', badge: '추천' },
{ name: '국어', label: '국어', badge: 'PICK' },
{ name: '전과목/입시로드맵', label: '전과목', badge: 'SKY' }
{ name: '수학', label: '수학', badge: '인기 1위' },
{ name: '영어', label: '영어', badge: '내신필수' },
{ name: '국어', label: '국어', badge: '비문학' },
{ name: '과학', label: '과학', badge: '탐구영역' },
{ name: '사회', label: '사회', badge: '한국사' },
{ name: '전과목', label: '전과목', badge: '학습습관' }
]
const lessonTypes = ['1:1 방문 과외', '1:1 실시간 화상', '상담 후 추천']
const concernOptions = [
'킬러 문항에서 막혀 1등급 문턱 좌절',
'대치/수성 학원 강의로 채워지지 않는 취약점',
'올바른 최상위권 순공 습관 및 멘탈 관리 부재',
'목표 대학 수시/정시 최적 입시 로드맵 필요'
'응용·심화 및 킬러 문항 해결력 부족',
'서술형 주관식 감점 방지 및 시간 부족',
'개념 이해 부족 및 기초 연산 흔들림',
'스스로 공부하는 자기주도 학습 습관 부재'
]
const formData = reactive({
grade: '고등학교 2학년',
grade: '중학교 2학년 (내신 지필평가 본격 대비)',
subject: '수학',
concerns: ['킬러 문항에서 막혀 1등급 문턱 좌절'],
lessonType: '1:1 방문 과외',
concerns: ['응용·심화 및 킬러 문항 해결력 부족'],
region: '',
phone: '',
privacy: true
})
function formatPhone(e) {
let val = e.target.value.replace(/[^0-9]/g, '')
if (val.length > 11) val = val.slice(0, 11)
if (val.length >= 7) {
val = val.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
} else if (val.length >= 4) {
val = val.replace(/(\d{3})(\d{3,4})/, '$1-$2')
}
formData.phone = val
}
const faqs = reactive([
{
q: '1. 멘토 선생님들의 학력 인증은 어떻게 진행되나요?',
a: '공부짝꿍은 서울대·연세대·고려대 및 의치한약학 재학생/졸업생의 학력증명서와 신원 인증을 100% 거친 검증된 강사진만을 배정합니다.',
q: '무료 시범수업은 어떻게 진행되나요?',
a: '신청서 접수 후 부산 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
open: true
},
{
q: '과외 비용 및 시세는 어떻게 되나요?',
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 부산 우리 동네 과외 비용을 안내해 드립니다.',
open: false
},
{
q: '2. 수업 외에 학습 플래너 관리도 함께 해주나요?',
a: '네, 수업 시간 외에도 데일리 학습 플래너 피드백, 자습 방향 코칭, 슬럼프 극복 멘탈 케어까지 1:1로 밀착 지도합니다.',
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
open: false
},
{
q: '3. 지방 거주 학생도 SKY 멘토링이 가능한가요?',
a: '네, 대구·부산 등 전국 주요 지역의 대면 방문 과외뿐만 아니라 최고 품질의 실시간 전자칠판 화상 멘토링을 통해 전국 어디서나 수업이 가능합니다.',
open: false
},
{
q: '4. 시범 미팅 후 멘토 교체가 가능한가요?',
a: '첫 상담 및 미팅 후 아이와 성향이 맞지 않을 경우 별도 비용 없이 즉시 다른 우수 멘토로 무상 재매칭을 지원합니다.',
q: '선생님이 아이와 맞지 않으면 어떻게 하나요?',
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('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
if (!formData.grade || !formData.subject || !formData.phone) {
alert('필수 항목을 모두 입력해 주세요.')
return
}
isSubmitting.value = true
try {
const res = await $fetch('/api/consult', {
method: 'POST',
body: {
name: '학부모 (SKY멘토링신청)',
name: '학부모 상담 신청',
phone: formData.phone,
grade: formData.grade,
schoolName: formData.region || '지역 미기재',
location: formData.region || '온라인 랜딩',
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
url: window.location.href
subject: `${formData.subject} (${formData.lessonType})`,
region: formData.region || '부산 전지역',
message: `[학습고민] ${formData.concerns.join(', ')}`
}
})
@@ -478,13 +583,13 @@ async function handleSubmit() {
}
}
// SEO 태그 설정 (지역 기반 + 고의도 롱테일 키워드 30~35자 내외 글자 수 준수)
useHead({
title: `${siteName} | SKY·명문대 1:1 멘토링 & 최상위권 과외`,
title: '부산 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
meta: [
{ name: 'naver-site-verification', content: 'ec58dcc43a4785d3358d9e2b603fea6bea4d89a3' },
{ name: 'description', content: `${siteName} - 서울대·연고대·의치약학 멘토진의 1:1 밀착 코칭 및 수능·내신 1등급 클리닉.` },
{ property: 'og:title', content: `${siteName} | 명문대 멘토링 1:1 맞춤과외` },
{ property: 'og:description', content: '공부 마인드셋부터 킬러 문항 공략까지! 검증된 명문대 멘토 무료 매칭.' },
{ name: 'description', content: '부산 초중고 1:1 맞춤 과외 매칭 전문. 해운대 등 부산 전지역 과외 비용 및 시세 비교부터 무료 시범수업 신청까지. 검증된 명문대·베테랑 전문 선생님 100% 매칭.' },
{ property: 'og:title', content: '부산 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지' },
{ property: 'og:description', content: '부산 초중고 1:1 맞춤 과외 매칭. 학력·신원 100% 검증 강사진 배정 및 무료 시범수업 신청.' },
{ property: 'og:url', content: siteDomain }
],
script: [
@@ -496,7 +601,7 @@ useHead({
name: siteName,
url: siteDomain,
telephone: '+82-10-5961-5807',
areaServed: '전국 전지역'
areaServed: '부산광역시 전지역'
})
}
]