-
This commit is contained in:
@@ -1,38 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="hero-banner">
|
<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="hero-container">
|
|
||||||
<div class="hero-badge-wrap">
|
<!-- 은은한 상단 엠비언트 라이트 -->
|
||||||
<span class="hero-badge royal-badge">{{ region.dong }} 학군 맞춤 1:1 전문 지도</span>
|
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
|
||||||
<span class="hero-subbadge">2026 개정 교육과정 완벽 반영</span>
|
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<h1 class="hero-title">
|
<!-- SEO 메인 H1 (사용자 지정 롱테일 조합형: [지역] + [학년] + [과목]과외 + 검증된 전문 선생님 100% 매칭) -->
|
||||||
<span class="region-highlight">{{ displayRegionName }}</span><br />
|
<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 class="subject-highlight">{{ grade }} {{ subjectName }}</span> 1:1 맞춤 과외
|
<span>{{ displayRegionName }} {{ grade }} {{ subjectName }}과외</span><br />
|
||||||
|
<span class="text-blue-600">우리 아이 맞춤 검증된 전문 선생님 100% 매칭</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p class="hero-desc">
|
<!-- 서브 카피 (비용 시세 비교 + 학교 기출 분석 + 무료 시범수업 신뢰 트리거) -->
|
||||||
{{ region.dong }} 인근 학교별 기출 분석부터 서술형 조건 감점 0점화까지!<br />
|
<p class="text-xs sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
|
||||||
우리 아이의 취약점을 1:1로 진단하고 <strong>성적 1등급 역전</strong>을 이끌어냅니다.
|
{{ region.dong }} 인근 학교별 기출 분석부터 과외 비용·시세 비교, 취약 개념 클리닉까지.<br class="hidden sm:inline" />
|
||||||
|
직접 수업받아보고 결정하는 <strong>1:1 무료 방문·화상 시범수업</strong>을 신청하세요.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="hero-cta-group">
|
<!-- 4대 핵심 신뢰 지표 바 -->
|
||||||
<a href="#consult-section" class="btn-hero-primary">
|
<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">
|
||||||
<span>{{ region.dong }} 1:1 무료 방문·진단 모의수업 신청</span>
|
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
|
||||||
</a>
|
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
|
||||||
<div class="hero-call-info">
|
<div>
|
||||||
<span class="call-icon"></span>
|
<strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
|
||||||
<span class="call-text">실시간 학습상담 <strong>010-5961-5807</strong></span>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="hero-tags">
|
<!-- CTA 그룹 -->
|
||||||
<span class="tag-item">#{{ region.dong }}과외</span>
|
<div class="flex flex-col items-center gap-3.5 mb-6">
|
||||||
<span class="tag-item">#{{ region.dong }}{{ subjectName }}</span>
|
<a
|
||||||
<span class="tag-item">#{{ grade }}내신대비</span>
|
href="#consult-section"
|
||||||
<span class="tag-item">#서술형감점방지</span>
|
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"
|
||||||
<span class="tag-item">#1대1밀착코칭</span>
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 태그 목록 -->
|
||||||
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
@@ -55,11 +105,10 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
subjectName: {
|
subjectName: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '영어'
|
default: '수학'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// '대구광역시 수성구 황금동' -> '대구 황금동' 등 축약 지역명 산출
|
|
||||||
const displayRegionName = computed(() => {
|
const displayRegionName = computed(() => {
|
||||||
if (props.shortRegionName) return props.shortRegionName
|
if (props.shortRegionName) return props.shortRegionName
|
||||||
if (props.region) {
|
if (props.region) {
|
||||||
@@ -74,165 +123,17 @@ const displayRegionName = computed(() => {
|
|||||||
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 = '강원'
|
return `${shortSido} ${dong}`
|
||||||
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 props.region.fullName || ''
|
return dong || sido
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.hero-banner {
|
.hero-banner-clean {
|
||||||
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;
|
|
||||||
word-break: keep-all;
|
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>
|
</style>
|
||||||
|
|||||||
+324
-222
@@ -1,189 +1,261 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="landing-container bg-[#F0FDF4] text-slate-800 antialiased relative pb-8 min-h-screen w-full">
|
<div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative min-h-screen w-full">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- 1. Header (클린 미니멀 프리미엄 네비게이션) -->
|
||||||
<header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm w-full">
|
<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="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="flex items-center gap-3">
|
||||||
<div class="w-9 h-9 rounded-xl bg-emerald-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
<div class="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center text-white font-extrabold text-base shadow-sm">
|
||||||
S
|
S
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="flex items-center gap-2">
|
||||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-emerald-900">{{ siteName }}</span>
|
<span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ siteName }}</span>
|
||||||
<span class="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full ml-1.5 border border-emerald-200">초·중등 습관코칭</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>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center space-x-4">
|
<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-emerald-700 transition">
|
<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-emerald-700"></i>
|
<i class="fa-solid fa-phone text-blue-600 text-xs"></i>
|
||||||
<span>010-5961-5807</span>
|
<span>010-5961-5807</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#leadFormSection" class="bg-emerald-700 hover:bg-emerald-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">
|
<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>
|
<span>무료 시범수업 신청</span>
|
||||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
<!-- 2. Main Body -->
|
||||||
<main class="w-full bg-[#F0FDF4] min-h-screen pb-20">
|
<main class="w-full pb-20">
|
||||||
|
|
||||||
<!-- 히어로 섹션 (에메랄드/그린 그라데이션 풀와이드) -->
|
<!-- 히어로 섹션 (AI 스타일 형광/물결 제거, 정제된 모던 에듀테크 캔버스) -->
|
||||||
<section class="w-full bg-gradient-to-b from-[#064E3B] via-[#056D4E] to-[#047857] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
|
<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 -right-24 -top-24 w-96 h-96 bg-emerald-400/20 rounded-full blur-3xl pointer-events-none"></div>
|
|
||||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl pointer-events-none"></div>
|
<!-- 은은한 상단 엠비언트 라이트 (절제된 디자이너 톤) -->
|
||||||
|
<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="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-emerald-100 mb-5 shadow-sm">
|
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-amber-400 animate-ping"></span>
|
<!-- 신뢰 인증 뱃지 -->
|
||||||
<span>우리 아이 평생 성적을 결정짓는 공부 습관</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>경기 31개 시·군 전담 | 서울대·명문대 및 베테랑 전문 강사진 100% 신원 보증</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
|
<!-- 메인 H1 (검색 상위 노출 30자 규격 및 학부모 고의도 롱테일 키워드) -->
|
||||||
스스로 책상에 앉게 만드는<br class="hidden sm:inline">
|
<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">
|
||||||
<span class="text-emerald-200 underline decoration-wavy decoration-emerald-300">초·중등 1:1 맞춤 학습 습관 진단</span> 무료 신청
|
경기 초·중·고 1:1 맞춤 과외 매칭<br class="hidden sm:inline" />
|
||||||
|
<span class="text-blue-600">검증된 전문 선생님 100% 매칭</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p class="text-xs sm:text-base text-emerald-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>
|
</p>
|
||||||
|
|
||||||
<!-- 지표 카운터 -->
|
<!-- 4대 핵심 신뢰 보증 지표 (Trust Bar) -->
|
||||||
<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 class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-8">
|
||||||
<div>
|
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
|
||||||
<div class="text-[11px] sm:text-xs text-emerald-200">누적 습관 코칭</div>
|
<i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
|
||||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">18,920<span class="text-xs sm:text-sm font-normal">건</span></div>
|
<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>
|
||||||
<div class="border-x border-white/20">
|
|
||||||
<div class="text-[11px] sm:text-xs text-emerald-200">자기주도 멘토</div>
|
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
|
||||||
<div class="font-extrabold text-base sm:text-2xl text-emerald-200 mt-0.5">4,120<span class="text-xs sm:text-sm font-normal">명</span></div>
|
<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>
|
|
||||||
<div class="text-[11px] sm:text-xs text-emerald-200">학부모 만족도</div>
|
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
|
||||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">99.1<span class="text-xs sm:text-sm font-normal">%</span></div>
|
<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>
|
</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">
|
<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="bg-emerald-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">실시간</span>
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||||
<span class="truncate font-medium transition-opacity duration-300">{{ currentNotice }}</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
<!-- 3. 리드 수집 폼 섹션 (상급자 에듀테크 플랫폼 스타일 모듈) -->
|
||||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
<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">
|
<header class="text-center mb-7 pb-5 border-b border-slate-100">
|
||||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800 mb-2">
|
<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명 한정 전액 무료
|
선착순 30명 한정 전액 무료
|
||||||
</span>
|
</div>
|
||||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
<h2 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight">
|
||||||
우리 아이 공부 고민을 알려주세요!
|
우리 동네 과외 시세 확인 & 무료 시범수업 신청
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||||
공부 습관과 기초를 분석하여 다정하고 꼼꼼한 전담 멘토를 연결해 드립니다.
|
단 1분 간단 입력으로 아이에게 가장 적합한 1:1 맞춤 선생님과 진단 리포트를 배정해 드립니다.
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<form @submit.prevent="handleSubmit" class="space-y-5">
|
<form @submit.prevent="handleSubmit" class="space-y-6">
|
||||||
|
|
||||||
<!-- 학년 & 취약 과목 -->
|
<!-- 1) 학년 선택 (초등 / 중등 / 고등 분기 탭 & 세부 선택) -->
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div>
|
||||||
<div>
|
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
||||||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
1. 학생 학년 선택 <span class="text-blue-600">*</span>
|
||||||
학년 선택 <span class="text-emerald-600">*</span>
|
</label>
|
||||||
</label>
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-2">
|
||||||
<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-emerald-600 focus:border-emerald-600 p-3 outline-none font-medium transition">
|
<button
|
||||||
<option value="" disabled>학년 선택</option>
|
type="button"
|
||||||
<optgroup label="초등부 (기초 완성)">
|
@click="selectGradeStage('초등')"
|
||||||
<option value="초등 1~3학년">초등 1~3학년 (한글·연산·흥미)</option>
|
:class="[
|
||||||
<option value="초등 4~6학년">초등 4~6학년 (초등심화·중등대비)</option>
|
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||||||
</optgroup>
|
gradeStage === '초등'
|
||||||
<optgroup label="중등부 (내신·습관)">
|
? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs'
|
||||||
<option value="중학교 1학년">중학교 1학년 (자유학기제·자기주도)</option>
|
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||||||
<option value="중학교 2학년">중학교 2학년 (내신대비·과목별개념)</option>
|
]"
|
||||||
<option value="중학교 3학년">중학교 3학년 (고교진학·선행연계)</option>
|
>
|
||||||
</optgroup>
|
초등부 (1~6학년)
|
||||||
<optgroup label="고등부 (내신·수능)">
|
</button>
|
||||||
<option value="고등학교 1~2학년">고등학교 1~2학년 (공통과목·내신)</option>
|
<button
|
||||||
<option value="고등학교 3학년">고등학교 3학년 (수능 실전)</option>
|
type="button"
|
||||||
</optgroup>
|
@click="selectGradeStage('중등')"
|
||||||
</select>
|
: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>
|
||||||
|
|
||||||
<div>
|
<select
|
||||||
<label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
id="studentGrade"
|
||||||
취약 과목 <span class="text-emerald-600">*</span>
|
v-model="formData.grade"
|
||||||
</label>
|
required
|
||||||
<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-emerald-600 focus:border-emerald-600 p-3 outline-none font-medium transition">
|
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 value="수학">수학 (연산·서술형·개념원리)</option>
|
<option value="" disabled>세부 학년을 선택해 주세요</option>
|
||||||
<option value="영어">영어 (파닉스·문법기초·독해)</option>
|
<option v-for="opt in currentGradeOptions" :key="opt" :value="opt">{{ opt }}</option>
|
||||||
<option value="국어">국어 (어휘력·독해·교과서 읽기)</option>
|
</select>
|
||||||
<option value="과학">과학 (실험·원리·용어정리)</option>
|
|
||||||
<option value="전과목/공부습관">전과목 매일 공부 습관 완성</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 빠른 과목 픽 -->
|
<!-- 2) 취약 과목 빠른 선택 (Chip 버튼) -->
|
||||||
<div>
|
<div>
|
||||||
<div class="text-xs font-semibold text-slate-500 mb-2 flex justify-between items-center">
|
<div class="flex justify-between items-center mb-2">
|
||||||
<span>빠른 과목 픽 (PICK)</span>
|
<label class="block text-xs sm:text-sm font-bold text-slate-800">
|
||||||
<span class="text-xs text-emerald-700 font-semibold">터치 시 자동 선택</span>
|
2. 집중 지도가 필요한 과목 <span class="text-blue-600">*</span>
|
||||||
|
</label>
|
||||||
|
<span class="text-[11px] text-slate-400 font-normal">복수/단일 클릭</span>
|
||||||
</div>
|
</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
|
<button
|
||||||
v-for="subj in subjects"
|
v-for="subj in subjects"
|
||||||
:key="subj.name"
|
:key="subj.name"
|
||||||
type="button"
|
type="button"
|
||||||
@click="formData.subject = subj.name"
|
@click="formData.subject = subj.name"
|
||||||
:class="[
|
: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
|
formData.subject === subj.name
|
||||||
? 'border-2 border-emerald-600 bg-emerald-50 text-emerald-800 ring-2 ring-emerald-300/50'
|
? 'bg-blue-600 border-blue-600 text-white shadow-sm'
|
||||||
: 'border border-slate-200 text-slate-700 hover:border-emerald-400 bg-white'
|
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<span>{{ subj.label }}</span>
|
<span>{{ subj.label }}</span>
|
||||||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-emerald-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 }}
|
{{ subj.badge }}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 공부 고민 체크박스 -->
|
<!-- 3) 희망 수업 형태 (방문 / 화상) -->
|
||||||
<div>
|
<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>
|
</label>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
<div class="grid grid-cols-3 gap-2">
|
||||||
<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-emerald-50/50 transition">
|
<label
|
||||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-emerald-600 rounded border-slate-300 focus:ring-emerald-500">
|
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>
|
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 거주 지역 / 학교 -->
|
<!-- 5) 거주 지역 / 학교명 입력 -->
|
||||||
<div>
|
<div>
|
||||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||||||
거주 지역 및 학교명 <span class="text-slate-400 font-normal text-xs">(교과서 출판사 연계용)</span>
|
5. 거주 지역 및 재학 학교명 <span class="text-slate-400 font-normal text-xs">(인근 학교 기출 족보 매칭용)</span>
|
||||||
</label>
|
</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-emerald-600 focus:border-emerald-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>
|
</div>
|
||||||
|
|
||||||
<!-- 학부모 연락처 -->
|
<!-- 6) 학부모 연락처 -->
|
||||||
<div>
|
<div>
|
||||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||||||
학부모 연락처 <span class="text-emerald-600">*</span>
|
6. 학부모 연락처 <span class="text-blue-600">*</span>
|
||||||
<span class="text-slate-400 font-normal text-xs">(진단 결과 및 교재 추천 발송용)</span>
|
<span class="text-slate-400 font-normal text-xs">(과외 시세 안내 및 시범수업 조율용)</span>
|
||||||
</label>
|
</label>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input
|
<input
|
||||||
@@ -194,155 +266,151 @@
|
|||||||
required
|
required
|
||||||
placeholder="010-0000-0000"
|
placeholder="010-0000-0000"
|
||||||
maxlength="13"
|
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-emerald-600 focus:border-emerald-600 p-3.5 pl-11 outline-none tracking-wider"
|
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-button absolute left-4 top-4 text-slate-400 text-base"></i>
|
<i class="fa-solid fa-mobile-screen absolute left-4 top-4 text-slate-400 text-base"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 개인정보 동의 -->
|
<!-- 개인정보 동의 -->
|
||||||
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
|
<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-emerald-600 rounded border-slate-300 focus:ring-emerald-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 for="privacyAgree" class="cursor-pointer">
|
||||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
[필수] 과외 상담 및 무료 시범수업 안내를 위한 개인정보 수집에 동의합니다.
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 제출 버튼 -->
|
<!-- 제출 버튼 (고급스러운 솔리드 로열 블루) -->
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
:disabled="isSubmitting"
|
:disabled="isSubmitting"
|
||||||
class="w-full bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-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"
|
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-seedling text-lg"></i>
|
<i class="fa-solid fa-circle-check text-lg"></i>
|
||||||
<span>{{ isSubmitting ? '진단서 작성 중...' : '아이 맞춤 습관 진단 & 무료 상담 신청하기' }}</span>
|
<span>{{ isSubmitting ? '신청서 접수 중...' : '우리 동네 과외 시세 확인 & 무료 시범수업 신청하기' }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
|
<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>
|
<i class="fa-solid fa-shield-halved text-xs"></i>
|
||||||
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
|
<span>입력하신 개인정보는 암호화되어 안전하게 보호되며, 무분별한 광고 전화를 드리지 않습니다.</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
|
<!-- 안내 박스 -->
|
||||||
<div class="mt-3 p-3.5 bg-emerald-50/90 border border-emerald-200/90 rounded-xl flex items-start gap-2.5 text-xs text-emerald-950 leading-relaxed shadow-sm">
|
<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-emerald-600 mt-0.5 text-sm shrink-0"></i>
|
<i class="fa-solid fa-circle-info text-blue-600 mt-0.5 text-sm shrink-0"></i>
|
||||||
<div>
|
<div>
|
||||||
<strong class="font-bold text-emerald-950 block mb-0.5">원활한 상담 진행 안내</strong>
|
<strong class="font-bold text-slate-900 block mb-0.5">신속 상담 안내</strong>
|
||||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-emerald-900 underline hover:text-emerald-700">010-5961-5807</a>)</span>
|
<span>접수 즉시 경기 지역 전담 매니저가 학교별 출제 경향과 최적의 선생님 매칭 일정을 유선으로 안내해 드립니다. (직통 상담: <a href="tel:010-5961-5807" class="font-bold text-blue-600 underline">010-5961-5807</a>)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</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">
|
<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>
|
<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
|
||||||
<span>맞춤 진단 신청이 성공적으로 접수되었습니다!</span>
|
<span>맞춤 과외 시세 및 무료 시범수업 신청이 완료되었습니다!</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="leading-relaxed">
|
<p class="leading-relaxed text-slate-700">
|
||||||
기재해주신 연락처로 <strong>‘초·중등 자기주도 공부습관 정밀 진단서’</strong>가 발송되며, 전문 학습 코칭 매니저가 유선으로 심층 분석 결과를 안내해 드립니다.
|
기재해주신 연락처로 <strong>‘경기 관내 학교별 내신 분석 요약표’</strong>가 발송되며, 전문 학습 매니저가 1:1 맞춤 선생님 추천 및 무료 모의수업 일정을 조율해 드립니다.
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- 4. 성적 향상 사례 (깔끔하고 신뢰도 높은 후기 그리드) -->
|
||||||
|
|
||||||
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
|
|
||||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||||
<header class="text-center mb-8">
|
<header class="text-center mb-8">
|
||||||
<span class="text-xs sm:text-sm font-bold text-emerald-700 tracking-wider bg-emerald-100 px-3 py-1 rounded-full">SUCCESS STORIES</span>
|
<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">
|
||||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">실제 학생 성적 & 습관 변화</h2>
|
PROVEN RESULTS
|
||||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">새솔 1:1 코칭을 통해 공부의 재미를 찾은 학생들의 이야기입니다.</p>
|
</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>
|
</header>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
|
||||||
<!-- Case 1 -->
|
<!-- 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 justify-between mb-3">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<span class="bg-emerald-100 text-emerald-800 font-bold text-xs px-2.5 py-1 rounded-full">수학 기초 완성</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>
|
<span class="font-bold text-sm sm:text-base text-slate-800">분당구 수내동 고2 최OO 학생</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xs text-slate-400">2개월 만에 달성</span>
|
<span class="text-xs text-slate-400 font-medium">3개월 만에 달성</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||||
<span class="text-slate-400">코칭 전: 55점 (수포자 직전)</span>
|
<span class="text-slate-400">진단 전: 4등급 (52점)</span>
|
||||||
<span class="text-emerald-700 font-bold">코칭 후: 92점 (단원평가 만점)</span>
|
<span class="text-blue-600 font-bold">진단 후: 1등급 (94점)</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||||||
<div class="bg-gradient-to-r from-slate-300 to-emerald-600 h-3 rounded-full" style="width: 88%"></div>
|
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 88%"></div>
|
||||||
</div>
|
</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 class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||||
"학원에서는 부끄러워서 질문을 못 했는데, 선생님이 하나하나 차근차근 설명해주셔서 수학이 제일 재미있어졌어요."
|
"내신 고난도 킬러 문제만 만나면 막혔는데, 문제 접근 로직을 1:1로 교정받으니 시험 시간이 15분 남았습니다."
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Case 2 -->
|
<!-- 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 justify-between mb-3">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<span class="bg-teal-100 text-teal-800 font-bold text-xs px-2.5 py-1 rounded-full">자기주도 습관</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">명일동 초6 최OO 학생</span>
|
<span class="font-bold text-sm sm:text-base text-slate-800">일산동구 마두동 중3 박OO 학생</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-xs text-slate-400">3개월 만에 달성</span>
|
<span class="text-xs text-slate-400 font-medium">2개월 만에 달성</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||||
<span class="text-slate-400">코칭 전: 스마트폰 중독 (공부 30분 미만)</span>
|
<span class="text-slate-400">진단 전: 65점 (C등급)</span>
|
||||||
<span class="text-teal-700 font-bold">코칭 후: 일일 2시간 자기주도 습관 완성</span>
|
<span class="text-emerald-600 font-bold">진단 후: 96점 (A등급)</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||||||
<div class="bg-gradient-to-r from-slate-300 to-teal-600 h-3 rounded-full" style="width: 95%"></div>
|
<div class="bg-emerald-600 h-2.5 rounded-full" style="width: 96%"></div>
|
||||||
</div>
|
</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 class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||||
"플래너 쓰는 법을 배우고 스티커를 채우면서 매일 해야 할 공부를 스스로 끝내는 습관이 생겼습니다."
|
"문법 기본기가 약해서 늘 서술형에서 깎였는데, 기출 조건에 딱 맞춘 문장 작성 훈련으로 만점을 받았습니다."
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 학부모 리뷰 (2열) -->
|
<!-- 학부모 리뷰 (2열) -->
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<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="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
|
||||||
<div class="text-amber-400 text-sm mb-2">
|
<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>
|
<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>
|
</div>
|
||||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">잠실 레이크팰리스 정OO님</h4>
|
<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>
|
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"분당 학원가를 전전하다 1:1 과외로 바꿨는데 아이 취약점만 골라서 집중 수업해 주시니 성적이 단번에 올랐습니다."</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
<div class="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
|
||||||
<div class="text-amber-400 text-sm mb-2">
|
<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>
|
<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>
|
</div>
|
||||||
<h4 class="font-bold text-xs text-slate-800">위례신도시 학부모 한OO님</h4>
|
<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>
|
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"시범수업 받아보고 아이가 선생님과 공부하겠다고 먼저 말하더군요. 과외비도 합리적이고 신뢰가 갑니다."</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
|
<!-- 5. 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
|
||||||
<SubjectCarousel grade="초·중·고" />
|
<SubjectCarousel grade="초·중·고" />
|
||||||
|
|
||||||
<!-- FAQ 섹션 -->
|
<!-- 6. FAQ 섹션 (정돈된 아코디언) -->
|
||||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||||
<header class="text-center mb-8">
|
<header class="text-center mb-8">
|
||||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
<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>
|
<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>
|
<p class="text-xs sm:text-sm text-slate-500 mt-1">경기 학부모님들께서 가장 많이 문의하시는 과외 진행 절차입니다.</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="space-y-3">
|
<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">
|
<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>
|
<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>
|
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
|
||||||
@@ -360,7 +428,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue'
|
import { ref, reactive, computed, onMounted } from 'vue'
|
||||||
|
|
||||||
const config = useRuntimeConfig()
|
const config = useRuntimeConfig()
|
||||||
const siteName = config.public.siteName || '새솔 1:1 맞춤과외'
|
const siteName = config.public.siteName || '새솔 1:1 맞춤과외'
|
||||||
@@ -369,17 +437,48 @@ const siteDomain = config.public.siteDomain || 'https://aeseo.shop'
|
|||||||
const isSubmitting = ref(false)
|
const isSubmitting = ref(false)
|
||||||
const submitSuccess = 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 = [
|
const rollingMessages = [
|
||||||
"서울 송파구 잠실동 중2 수학 개념 정밀 진단 접수 (방금 전)",
|
"경기 성남시 분당구 수내동 중2 수학 무료 시범수업 신청 완료 (방금 전)",
|
||||||
"서울 강동구 명일동 초6 중등선행 영어 신청 완료 (2분 전)",
|
"경기 고양시 일산동구 마두동 고1 영어 내신대비 과외 매칭 접수 (1분 전)",
|
||||||
"경기 하남시 미사동 중1 자기주도 공부습관 리포트 신청 (4분 전)",
|
"경기 수원시 영통구 이의동 중3 과학 오답분석 리포트 신청 (3분 전)",
|
||||||
"경기 성남시 위례동 초5 문해력 진단 신청 (6분 전)",
|
"경기 용인시 수지구 풍덕천동 초6 중등수학 선행 시범수업 신청 (5분 전)",
|
||||||
"서울 송파구 문정동 초4 기초연산 클리닉 접수 완료 (8분 전)"
|
"경기 안양시 동안구 평촌동 고2 국어 비문학 클리닉 신청 (7분 전)"
|
||||||
]
|
]
|
||||||
const currentNotice = ref(rollingMessages[0])
|
const currentNotice = ref(rollingMessages[0])
|
||||||
let rollingIdx = 0
|
let rollingIdx = 0
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
formData.grade = currentGradeOptions.value[1] || currentGradeOptions.value[0]
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||||
currentNotice.value = rollingMessages[rollingIdx]
|
currentNotice.value = rollingMessages[rollingIdx]
|
||||||
@@ -387,82 +486,84 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const subjects = [
|
const subjects = [
|
||||||
{ name: '수학', label: '수학', badge: '인기' },
|
{ name: '수학', label: '수학', badge: '인기 1위' },
|
||||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
{ name: '영어', label: '영어', badge: '내신필수' },
|
||||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
{ name: '국어', label: '국어', badge: '비문학' },
|
||||||
{ name: '과학', label: '과학', badge: 'PICK' },
|
{ name: '과학', label: '과학', badge: '탐구영역' },
|
||||||
{ name: '전과목/공부습관', label: '전과목', badge: '추천' }
|
{ name: '사회', label: '사회', badge: '한국사' },
|
||||||
|
{ name: '전과목', label: '전과목', badge: '학습습관' }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const lessonTypes = ['1:1 방문 과외', '1:1 실시간 화상', '상담 후 추천']
|
||||||
|
|
||||||
const concernOptions = [
|
const concernOptions = [
|
||||||
'스스로 책상에 앉지 않는 공부습관',
|
'응용·심화 및 킬러 문항 해결력 부족',
|
||||||
'교과서 기초 개념 및 연산 부족',
|
'서술형 주관식 감점 방지 및 시간 부족',
|
||||||
'대형 학원 진도 스트레스',
|
'개념 이해 부족 및 기초 연산 흔들림',
|
||||||
'중등 진학 대비 선행 불안'
|
'스스로 공부하는 자기주도 학습 습관 부재'
|
||||||
]
|
]
|
||||||
|
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
grade: '초등 4~6학년',
|
grade: '중학교 2학년 (내신 지필평가 본격 대비)',
|
||||||
subject: '수학',
|
subject: '수학',
|
||||||
concerns: ['스스로 책상에 앉지 않는 공부습관'],
|
lessonType: '1:1 방문 과외',
|
||||||
|
concerns: ['응용·심화 및 킬러 문항 해결력 부족'],
|
||||||
region: '',
|
region: '',
|
||||||
phone: '',
|
phone: '',
|
||||||
privacy: true
|
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([
|
const faqs = reactive([
|
||||||
{
|
{
|
||||||
q: '1. 초등학생이나 기초가 부족한 아이도 수업이 가능한가요?',
|
q: '무료 시범수업은 어떻게 진행되나요?',
|
||||||
a: '네, 물론입니다. 새솔 맞춤과외는 기초가 약하거나 공부에 흥미를 잃은 아이들을 위해 칭찬과 성취감 중심의 1:1 맞춤 커리큘럼을 제공합니다.',
|
a: '신청서 접수 후 경기 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
|
||||||
|
open: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: '과외 비용 및 시세는 어떻게 되나요?',
|
||||||
|
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 우리 동네 과외 비용을 안내해 드립니다.',
|
||||||
open: false
|
open: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: '2. 진단 신청 후 상담 절차는 어떻게 되나요?',
|
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
||||||
a: '신청 즉시 전담 학습 매니저가 유선으로 아이의 현재 학습 상태와 성향을 파악한 후, 가장 잘 맞는 공감형 선생님을 매칭해 드립니다.',
|
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
|
||||||
open: false
|
open: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: '3. 선생님 성향이 아이와 맞지 않으면 어떻게 하나요?',
|
q: '선생님이 아이와 맞지 않으면 어떻게 하나요?',
|
||||||
a: '수업 진행 중 아이와 성향이 맞지 않을 경우 별도의 추가 비용 없이 즉시 다른 전문 선생님으로 무상 재매칭을 진행해 드립니다.',
|
a: '무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.',
|
||||||
open: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
q: '4. 방문 수업 외에 화상 수업도 지원되나요?',
|
|
||||||
a: '네, 대면 방문 과외뿐만 아니라 실시간 양방향 화상 과외도 가능하여 가정의 환경에 맞춰 선택하실 수 있습니다.',
|
|
||||||
open: false
|
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() {
|
async function handleSubmit() {
|
||||||
if (!formData.phone || formData.phone.length < 12) {
|
if (!formData.grade || !formData.subject || !formData.phone) {
|
||||||
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
|
alert('필수 항목을 모두 입력해 주세요.')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
isSubmitting.value = true
|
isSubmitting.value = true
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await $fetch('/api/consult', {
|
const res = await $fetch('/api/consult', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: {
|
body: {
|
||||||
name: '학부모 (습관진단신청)',
|
name: '학부모 상담 신청',
|
||||||
phone: formData.phone,
|
phone: formData.phone,
|
||||||
grade: formData.grade,
|
grade: formData.grade,
|
||||||
schoolName: formData.region || '지역 미기재',
|
subject: `${formData.subject} (${formData.lessonType})`,
|
||||||
location: formData.region || '온라인 랜딩',
|
region: formData.region || '경기 전지역',
|
||||||
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
|
message: `[학습고민] ${formData.concerns.join(', ')}`
|
||||||
url: window.location.href
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -482,13 +583,14 @@ async function handleSubmit() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// SEO 태그 설정 (사용자 가이드 30~35자 내외 글자 수 및 고의도 롱테일 키워드 100% 준수)
|
||||||
useHead({
|
useHead({
|
||||||
title: `${siteName} | 초·중등 자기주도 공부습관 & 1:1 맞춤과외`,
|
title: '경기 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
|
||||||
meta: [
|
meta: [
|
||||||
{ name: 'naver-site-verification', content: 'bfbfcb6ed8c107d05503feed914769a29b07cf06' },
|
{ name: 'naver-site-verification', content: 'bfbfcb6ed8c107d05503feed914769a29b07cf06' },
|
||||||
{ name: 'description', content: `${siteName} - 초·중등 기초 개념 완성 및 올바른 공부 습관 정밀 진단 리포트 무료 신청.` },
|
{ name: 'description', content: '경기 초중고 1:1 맞춤 과외 매칭 전문. 과외 비용 및 시세 비교부터 무료 시범수업 신청까지. 검증된 명문대·베테랑 전문 선생님 100% 매칭.' },
|
||||||
{ property: 'og:title', content: `${siteName} | 초·중등 1:1 맞춤 학습 습관 진단` },
|
{ property: 'og:title', content: '경기 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지' },
|
||||||
{ property: 'og:description', content: '스스로 공부하는 힘! 학년별 맞춤 진단과 공감형 전문 멘토 매칭.' },
|
{ property: 'og:description', content: '경기 초중고 1:1 맞춤 과외 매칭. 학력·신원 100% 검증 강사진 배정 및 무료 시범수업 신청.' },
|
||||||
{ property: 'og:url', content: siteDomain }
|
{ property: 'og:url', content: siteDomain }
|
||||||
],
|
],
|
||||||
script: [
|
script: [
|
||||||
@@ -500,7 +602,7 @@ useHead({
|
|||||||
name: siteName,
|
name: siteName,
|
||||||
url: siteDomain,
|
url: siteDomain,
|
||||||
telephone: '+82-10-5961-5807',
|
telephone: '+82-10-5961-5807',
|
||||||
areaServed: '서울·경기 전지역'
|
areaServed: '경기도 전지역'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user