-
This commit is contained in:
+80
-179
@@ -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>
|
||||
|
||||
+329
-224
@@ -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: '부산광역시 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
+80
-179
@@ -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 = '서울'
|
||||
else 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('충북') || 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>
|
||||
|
||||
+329
-224
@@ -1,189 +1,261 @@
|
||||
<template>
|
||||
<div class="landing-container bg-[#FFF7ED] 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-orange-600 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
M
|
||||
<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">
|
||||
T
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-orange-950">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-orange-600 bg-orange-50 px-2 py-0.5 rounded-full ml-1.5 border border-orange-200">메타인지 코칭</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-orange-600 transition">
|
||||
<i class="fa-solid fa-phone text-orange-600"></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-orange-600 hover:bg-orange-700 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-[#FFF7ED] min-h-screen pb-20">
|
||||
<!-- 2. Main Body -->
|
||||
<main class="w-full pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (웜 코랄 & 오렌지 풀와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#C2410C] via-[#D94F0C] to-[#EA580C] 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-amber-400/25 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-orange-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-orange-100 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-amber-300 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-amber-200 underline decoration-wavy decoration-amber-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-orange-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
문제는 머리가 아니라 공부 방법입니다. 아는 것과 모르는 것을 명확히 구분하는 메타인지로 성적 반등을 이끕니다.
|
||||
<!-- 서브 헤드라인 (비용 시세 비교 + 수성구 등 학교 기출 분석 + 무료 시범수업) -->
|
||||
<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-orange-200">정체기 극복률</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">96.7<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-orange-200">슬럼프 케어</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-amber-300 mt-0.5">15,300<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-orange-200">자기주도 지속률</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">98.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-amber-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-orange-100 text-orange-800 mb-2">
|
||||
선착순 30명 한정 메타인지 진단서 무료
|
||||
</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분 간단 입력으로 아이에게 가장 적합한 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-orange-600">*</span>
|
||||
</label>
|
||||
<select id="studentGrade" v-model="formData.grade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-orange-600 focus:border-orange-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>학년 선택</option>
|
||||
<optgroup label="중등부 (공부법 교정)">
|
||||
<option value="중학교 1학년">중학교 1학년 (자유학기 공부습관 세팅)</option>
|
||||
<option value="중학교 2학년">중학교 2학년 (내신 시험불안 극복)</option>
|
||||
<option value="중학교 3학년">중학교 3학년 (고교 진학 슬럼프 예방)</option>
|
||||
</optgroup>
|
||||
<optgroup label="고등부 (정체기 탈출)">
|
||||
<option value="고등학교 1학년">고등학교 1학년 (내신 충격 극복 & 1등급 도약)</option>
|
||||
<option value="고등학교 2학년">고등학교 2학년 (수시/정시 슬럼프 탈출)</option>
|
||||
<option value="고등학교 3학년/N수">고등학교 3학년 / N수 (멘탈 케어 & 수능 실전)</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-orange-600">*</span>
|
||||
</label>
|
||||
<select id="weakSubject" v-model="formData.subject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-orange-600 focus:border-orange-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>과목 선택</option>
|
||||
<option value="수학">수학 (개념 망각 & 오답 패턴 교정)</option>
|
||||
<option value="영어">영어 (단어 암기 한계 & 문장 구조화)</option>
|
||||
<option value="국어">국어 (지문 독해력 & 서술형 감점)</option>
|
||||
<option value="과학">과학 (개념 혼동 & 탐구 문제 적용)</option>
|
||||
<option value="전과목/메타인지">전과목 메타인지 학습 플래닝</option>
|
||||
</select>
|
||||
</div>
|
||||
<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-orange-600 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-orange-500 bg-orange-50 text-orange-800 ring-2 ring-orange-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-orange-400 bg-white'
|
||||
? '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-orange-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-xl cursor-pointer hover:bg-orange-50/50 transition">
|
||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-orange-600 rounded border-slate-300 focus:ring-orange-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-orange-600 focus:border-orange-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-orange-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
|
||||
@@ -194,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-orange-600 focus:border-orange-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-orange-600 rounded border-slate-300 focus:ring-orange-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-orange-600 via-amber-500 to-orange-600 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
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-heart-pulse text-lg"></i>
|
||||
<span>{{ isSubmitting ? '진단서 생성 중...' : '메타인지 학습 진단 & 1:1 코칭 신청하기' }}</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-orange-50/90 border border-orange-200/90 rounded-xl flex items-start gap-2.5 text-xs text-orange-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-orange-600 mt-0.5 text-sm shrink-0"></i>
|
||||
<!-- 안내 박스 -->
|
||||
<div 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-orange-950 block mb-0.5">원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-orange-900 underline hover:text-orange-700">010-5961-5807</a>)</span>
|
||||
<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-orange-600 tracking-wider bg-orange-100 px-3 py-1 rounded-full">BREAKTHROUGH STORIES</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-orange-100 text-orange-800 font-bold text-xs px-2.5 py-1 rounded-full">정체기 극복</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">전교 10등 진입</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">코칭 전: 58점 (학원 진도 낙오)</span>
|
||||
<span class="text-orange-600 font-bold">코칭 후: 95점 (전교권 도약)</span>
|
||||
<span class="text-slate-400">진단 전: 4등급 (55점)</span>
|
||||
<span class="text-blue-600 font-bold">진단 후: 1등급 (96점)</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-300 to-orange-500 h-3 rounded-full" style="width: 90%"></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: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"학원에서는 숙제만 쫓기다 지쳤는데, 1:1 코칭으로 내가 뭘 모르고 있는지 짚고 넘어가니 공부가 술술 풀렸습니다."
|
||||
"수성구 내신 킬러 문제에서 항상 시간 부족으로 무너졌는데, 문제 유형별 접근법을 1:1로 훈련받고 전교 3등을 했습니다."
|
||||
</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-amber-100 text-amber-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">부산 센텀 고1 조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">내신 1등급 도약</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">코칭 전: 70점대 정체 (빈칸 불안)</span>
|
||||
<span class="text-amber-600 font-bold">코칭 후: 98점 (내신 1등급)</span>
|
||||
<span class="text-slate-400">진단 전: 73점 (B등급)</span>
|
||||
<span class="text-emerald-600 font-bold">진단 후: 99점 (A등급 전교권)</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-300 to-amber-500 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-emerald-600 h-2.5 rounded-full" style="width: 97%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"시험 때마다 긴장해서 실수하던 습관을 코치님과의 실전 시뮬레이션으로 완벽히 고쳤습니다."
|
||||
"외우기만 하던 영어 공부에서 벗어나 서술형 영작 규칙과 학교 기출 변형을 완벽히 마스터했습니다."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<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>
|
||||
@@ -357,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 || '티처브릿지'
|
||||
@@ -366,17 +437,48 @@ const siteDomain = config.public.siteDomain || 'https://soohyun.store'
|
||||
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분 전)",
|
||||
"부산 남구 대연동 중2 수학 공부법 정밀 진단 신청 완료 (3분 전)",
|
||||
"부산 동래구 사직동 고2 내신 정체기 극복 접수 (5분 전)",
|
||||
"부산 금정구 구서동 중1 자기주도 플래너 코칭 신청 (7분 전)"
|
||||
"대구 수성구 범어동 고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]
|
||||
@@ -384,82 +486,84 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: 'PICK' },
|
||||
{ name: '전과목/메타인지', label: '전과목', badge: '추천' }
|
||||
{ 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 = [
|
||||
'열심히 공부해도 성적이 오르지 않는 정체기',
|
||||
'대형 학원 숙제에 치여 자기 공부 시간 부족',
|
||||
'공부 무기력증 및 슬럼프로 인한 집중력 저하',
|
||||
'시험 때 아는 문제도 실수로 틀리는 불안감'
|
||||
'응용·심화 및 킬러 문항 해결력 부족',
|
||||
'서술형 주관식 감점 방지 및 시간 부족',
|
||||
'개념 이해 부족 및 기초 연산 흔들림',
|
||||
'스스로 공부하는 자기주도 학습 습관 부재'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '중학교 2학년',
|
||||
grade: '중학교 2학년 (내신 지필평가 본격 대비)',
|
||||
subject: '수학',
|
||||
concerns: ['열심히 공부해도 성적이 오르지 않는 정체기'],
|
||||
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: '단순히 문제를 풀어주는 주입식 과외와 달리, 학생이 자신이 아는 부분과 모르는 부분을 스스로 인지하고 주도적으로 공부하는 메타인지 루틴을 체화시켜 성적 반등을 만듭니다.',
|
||||
q: '무료 시범수업은 어떻게 진행되나요?',
|
||||
a: '신청서 접수 후 대구 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
|
||||
open: true
|
||||
},
|
||||
{
|
||||
q: '과외 비용 및 시세는 어떻게 되나요?',
|
||||
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 대구 우리 동네 과외 비용을 안내해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 공부에 의욕이 없고 슬럼프인 아이도 효과가 있을까요?',
|
||||
a: '네, 티처브릿지의 코치진은 칭찬과 작은 성취감 누적을 통해 학생의 자존감을 먼저 세워주며 공부 동기를 자연스럽게 유발합니다.',
|
||||
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
||||
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 무료 진단 리포트는 어떤 내용을 담고 있나요?',
|
||||
a: '학생의 학습 성향, 과목별 취약 원인 분석, 일일 순공 시간 개선 가이드 및 목표 성적 달성 로드맵을 상세히 담아 무료로 제공합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 방문 상담이나 교사 변경이 가능한가요?',
|
||||
a: '네, 사전 미팅을 통해 아이와 케미를 확인하실 수 있으며, 성향이 맞지 않을 경우 수수료 없이 100% 무상 재매칭을 지원합니다.',
|
||||
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: '학부모 (메타인지코칭신청)',
|
||||
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(', ')}`
|
||||
}
|
||||
})
|
||||
|
||||
@@ -479,13 +583,14 @@ async function handleSubmit() {
|
||||
}
|
||||
}
|
||||
|
||||
// SEO 태그 설정 (지역 기반 + 고의도 롱테일 키워드 30~35자 내외 글자 수 준수)
|
||||
useHead({
|
||||
title: `${siteName} | 공부 정체기 극복 & 메타인지 1:1 맞춤 코칭`,
|
||||
title: '대구 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
|
||||
meta: [
|
||||
{ name: 'naver-site-verification', content: 'dfb36e971115b72176e1c1e37c6ca27a95e855e3' },
|
||||
{ name: 'description', content: `${siteName} - 공부 슬럼프 및 성적 정체기 극복을 위한 메타인지 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: [
|
||||
@@ -497,7 +602,7 @@ useHead({
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '부산·경남 및 전국'
|
||||
areaServed: '대구광역시 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
+410
-326
@@ -1,353 +1,406 @@
|
||||
<template>
|
||||
<div class="landing-container bg-[#F8FAFC] 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-indigo-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
P
|
||||
<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">
|
||||
C
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-indigo-950">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-orange-600 bg-orange-50 px-2 py-0.5 rounded-full ml-1.5 border border-orange-200">내신 1등급 족보</span>
|
||||
<div 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-indigo-700 transition">
|
||||
<i class="fa-solid fa-phone text-indigo-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-indigo-700 hover:bg-indigo-800 text-white text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition shadow-md flex items-center gap-1.5">
|
||||
<span>내신 족보 신청</span>
|
||||
<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-[#F8FAFC] min-h-screen pb-20">
|
||||
<!-- 2. Main Body -->
|
||||
<main class="w-full pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (딥 인디고 & 선셋 오렌지 풀와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#312E81] via-[#3B34A3] to-[#4338CA] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
|
||||
<div class="absolute -right-24 -top-24 w-96 h-96 bg-orange-400/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-indigo-300/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<!-- 히어로 섹션 (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-indigo-100 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-orange-400 animate-ping"></span>
|
||||
<span>주요 중·고교 최근 3개년 내신 기출 족보 데이터 보유</span>
|
||||
|
||||
<!-- 신뢰 인증 뱃지 -->
|
||||
<div 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">
|
||||
인근 학교별 3개년 내신 기출 분석<br class="hidden sm:inline">
|
||||
<span class="text-amber-300 underline decoration-wavy decoration-amber-400">1: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-indigo-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
내신 시험 범위와 학교 선생님의 출제 스타일을 꿰뚫는 1: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-indigo-200">기출 분석 학교</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">1,480<span class="text-xs sm:text-sm font-normal">개교</span></div>
|
||||
<!-- 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-indigo-200">서술형 만점자</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-amber-300 mt-0.5">3,240<span class="text-xs sm:text-sm font-normal">명</span></div>
|
||||
|
||||
<div 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-indigo-200">내신 향상률</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">97.8<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
|
||||
<div 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-orange-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">실시간</span>
|
||||
<span class="truncate font-medium transition-opacity duration-300">{{ currentNotice }}</span>
|
||||
<!-- 실시간 매칭 알림 롤링 바 (세련된 미니멀 디자인) -->
|
||||
<div 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="text-slate-600 font-medium animate-pulse">{{ currentRollingMsg }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
<!-- 3. 고전환 퀵 간편 신청 폼 섹션 (토스/숨고 스타일 직관적 세그먼트 칩 선택형) -->
|
||||
<section id="leadFormSection" class="max-w-3xl mx-auto px-4 sm:px-6 -mt-10 relative z-20">
|
||||
<div class="bg-white rounded-2xl border border-slate-200/90 shadow-xl shadow-slate-200/50 p-6 sm:p-9">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-800 mb-2">
|
||||
선착순 30명 학교 기출 족보 요약본 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
내신 목표 과목과 학교를 입력해 주세요!
|
||||
<div class="text-center mb-7">
|
||||
<span class="inline-block text-xs font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full mb-2">30초 빠른 간편 신청</span>
|
||||
<h2 class="text-xl sm:text-2xl font-extrabold text-slate-900">
|
||||
광주 우리 동네 과외 시세 확인 & 무료 시범수업 신청
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
해당 학교의 기출 경향과 서술형 채점 기준을 완벽 분석해 드립니다.
|
||||
신청 즉시 전담 학습 매니저가 1:1 맞춤 상담 및 최적의 선생님을 배정해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<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-orange-600">*</span>
|
||||
</label>
|
||||
<select id="studentGrade" v-model="formData.grade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>학년 선택</option>
|
||||
<optgroup label="중등부 (내신 올A)">
|
||||
<option value="중학교 1학년">중학교 1학년 (자유학기 기초)</option>
|
||||
<option value="중학교 2학년">중학교 2학년 (중간·기말 본격)</option>
|
||||
<option value="중학교 3학년">중학교 3학년 (고교진학 선행)</option>
|
||||
</optgroup>
|
||||
<optgroup label="고등부 (내신 1등급)">
|
||||
<option value="고등학교 1학년">고등학교 1학년 (내신 1등급 진입)</option>
|
||||
<option value="고등학교 2학년">고등학교 2학년 (수시/정시 판가름)</option>
|
||||
<option value="고등학교 3학년">고등학교 3학년 (수능 & 수시 파이널)</option>
|
||||
</optgroup>
|
||||
<optgroup label="초등부">
|
||||
<option value="초등 6학년">초등 6학년 (중등 내신 대비)</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
대비 과목 <span class="text-orange-600">*</span>
|
||||
</label>
|
||||
<select id="weakSubject" v-model="formData.subject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>과목 선택</option>
|
||||
<option value="수학">수학 (내신 킬러문항 & 서술형)</option>
|
||||
<option value="영어">영어 (교과서 본문변형 & 영작)</option>
|
||||
<option value="국어">국어 (교과서 문학/문법 서술형)</option>
|
||||
<option value="과학">과학 (실험 보고서 & 탐구 서술형)</option>
|
||||
<option value="사회/역사">사회/역사 (서술형 암기 족보)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 빠른 과목 픽 -->
|
||||
<!-- 대상 학년 선택 -->
|
||||
<div>
|
||||
<div class="text-xs font-semibold text-slate-500 mb-2 flex justify-between items-center">
|
||||
<span>빠른 과목 픽 (PICK)</span>
|
||||
<span class="text-xs text-indigo-600 font-semibold">터치 시 자동 선택</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-2 text-center">
|
||||
<label 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-3 sm:grid-cols-6 gap-2">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
v-for="grade in gradeOptions"
|
||||
:key="grade"
|
||||
@click="formData.grade = grade"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-orange-500 bg-orange-50 text-orange-800 ring-2 ring-orange-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-orange-400 bg-white'
|
||||
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
|
||||
formData.grade === grade
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
|
||||
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
|
||||
]"
|
||||
>
|
||||
<span>{{ subj.label }}</span>
|
||||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-orange-700 font-semibold' : 'text-slate-400'">
|
||||
{{ subj.badge }}
|
||||
</span>
|
||||
{{ grade }}
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
2. 희망 과목 <span class="text-blue-600">*</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-xl cursor-pointer hover:bg-orange-50/50 transition">
|
||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
|
||||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
v-for="sub in subjectOptions"
|
||||
:key="sub"
|
||||
@click="formData.subject = sub"
|
||||
:class="[
|
||||
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
|
||||
formData.subject === sub
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
|
||||
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
|
||||
]"
|
||||
>
|
||||
{{ sub }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<!-- 수업 형태 선택 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
재학 학교명 및 지역 <span class="text-slate-400 font-normal text-xs">(정확한 기출 매칭용)</span>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
||||
3. 희망 수업 형태
|
||||
</label>
|
||||
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 서울 양천구 목동 / 목운중" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
v-for="mode in lessonModes"
|
||||
:key="mode.id"
|
||||
@click="formData.lessonType = mode.id"
|
||||
:class="[
|
||||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center flex items-center justify-center gap-1.5',
|
||||
formData.lessonType === mode.id
|
||||
? 'bg-slate-900 text-white border-slate-900 shadow-sm'
|
||||
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100'
|
||||
]"
|
||||
>
|
||||
<i :class="mode.icon" class="text-xs"></i>
|
||||
<span>{{ mode.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<!-- 거주 지역 (동/구 단위 입력) -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-orange-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(내신 기출 분석표 발송용)</span>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||||
4. 거주 지역 (동 이름)
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-location-dot absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 p-3.5 pl-11 outline-none tracking-wider"
|
||||
>
|
||||
<i class="fa-solid fa-mobile-screen-button absolute left-4 top-4 text-slate-400 text-base"></i>
|
||||
type="text"
|
||||
v-model="formData.region"
|
||||
placeholder="예: 광주 남구 봉선동, 광산구 수완동 등"
|
||||
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 개인정보 동의 -->
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
|
||||
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-orange-600 rounded border-slate-300 focus:ring-orange-500">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
<!-- 학습 고민 다중 선택 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
||||
5. 현재 가장 큰 학습 고민 (중복 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
v-for="concern in concernOptions"
|
||||
:key="concern"
|
||||
@click="toggleConcern(concern)"
|
||||
:class="[
|
||||
'py-2 px-2.5 rounded-xl text-xs font-medium border transition-all text-center',
|
||||
formData.concerns.includes(concern)
|
||||
? 'bg-blue-50 text-blue-700 border-blue-300 font-bold'
|
||||
: 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'
|
||||
]"
|
||||
>
|
||||
{{ concern }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 입력 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||||
6. 상담 받으실 학부모님 연락처 <span class="text-blue-600">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-phone absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
|
||||
<input
|
||||
type="tel"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhoneNumber"
|
||||
maxlength="13"
|
||||
placeholder="010-0000-0000"
|
||||
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm font-semibold tracking-wide transition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 mt-1 pl-1">
|
||||
* 과외 비용 및 시범수업 안내를 위해 안심번호로 안전하게 연결됩니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 개인정보 수집 동의 -->
|
||||
<div class="flex items-center gap-2 pt-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="agreeTerms"
|
||||
v-model="formData.agree"
|
||||
class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
<label for="agreeTerms" class="text-xs text-slate-500 cursor-pointer">
|
||||
개인정보 수집 및 학습 상담 안내를 위한 연락에 동의합니다. (필수)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<!-- 제출 CTA 버튼 -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isSubmitting"
|
||||
class="w-full bg-gradient-to-r from-orange-600 via-amber-500 to-orange-600 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
class="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 text-white font-extrabold text-base rounded-xl shadow-lg shadow-blue-500/25 transition-all flex items-center justify-center gap-2 cursor-pointer"
|
||||
>
|
||||
<i class="fa-solid fa-file-pen text-lg"></i>
|
||||
<span>{{ isSubmitting ? '족보 분석 중...' : '내신 기출 분석 & 1:1 맞춤 상담 신청하기' }}</span>
|
||||
<span v-if="!isSubmitting">광주 과외 시세 확인 & 무료 시범수업 신청하기</span>
|
||||
<span v-else class="flex items-center gap-2">
|
||||
<i class="fa-solid fa-spinner animate-spin"></i>
|
||||
접수 처리 중입니다...
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-lock text-xs"></i>
|
||||
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
|
||||
<div class="mt-3 p-3.5 bg-orange-50/90 border border-orange-200/90 rounded-xl flex items-start gap-2.5 text-xs text-orange-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-orange-600 mt-0.5 text-sm shrink-0"></i>
|
||||
<div>
|
||||
<strong class="font-bold text-orange-950 block mb-0.5">원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-orange-900 underline hover:text-orange-700">010-5961-5807</a>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- 완료 메시지 -->
|
||||
<div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-2xl text-emerald-900 text-xs sm:text-sm">
|
||||
<div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-emerald-800">
|
||||
<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
|
||||
<span>내신 진단 신청이 성공적으로 접수되었습니다!</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
기재해주신 연락처로 <strong>‘해당 학교 내신 기출 분석 요약본’</strong>이 발송되며, 내신 전문 매니저가 유선으로 심층 솔루션을 안내해 드립니다.
|
||||
<!-- 신청 완료 메시지 팝업 모달/카드 -->
|
||||
<div v-if="submitSuccess" id="submitResultBox" class="mt-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-center">
|
||||
<i class="fa-solid fa-circle-check text-2xl text-emerald-600 mb-1"></i>
|
||||
<h4 class="font-bold text-sm">상담 신청이 정상적으로 완료되었습니다!</h4>
|
||||
<p class="text-xs text-emerald-700 mt-1">
|
||||
광주 전문 교육 매니저가 남겨주신 연락처로 10분 내 순차 연락을 드립니다.
|
||||
</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열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-indigo-700 tracking-wider bg-indigo-100 px-3 py-1 rounded-full">GRADE ACCELERATION</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">실제 내신 등급 향상 사례</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">클래스픽 기출 족보로 내신을 역전시킨 학생들의 후기입니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
|
||||
<!-- Case 1 -->
|
||||
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-indigo-100 text-indigo-800 font-bold text-xs px-2.5 py-1 rounded-full">내신 전교 3등</span>
|
||||
<span class="font-bold text-sm sm:text-base text-slate-800">목동 고2 한OO 학생</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">한 학기 만에 달성</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">이전 내신: 3.4등급 (서술형 대량 감점)</span>
|
||||
<span class="text-orange-600 font-bold">도약 내신: 1.1등급 (서술형 만점)</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-300 to-indigo-600 h-3 rounded-full" style="width: 94%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"항상 아는 문제인데도 서술형에서 점수가 깎여 3등급이었는데, 부분점수 방어 훈련을 받고 감점이 0점이 되었습니다."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-orange-100 text-orange-800 font-bold text-xs px-2.5 py-1 rounded-full">국어 내신 94점</span>
|
||||
<span class="font-bold text-sm sm:text-base text-slate-800">마포구 중2 강OO 학생</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">2개월 만에 달성</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">이전 성적: 58점 (문법 포기)</span>
|
||||
<span class="text-orange-600 font-bold">시험 결과: 94점 (A등급 달성)</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-300 to-orange-500 h-3 rounded-full" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"중학교 국어 문법이 너무 어려웠는데, 기출 족보를 유형별로 풀고 나니 시험 문제가 그대로 눈에 보였습니다."
|
||||
</p>
|
||||
</div>
|
||||
<!-- 4. 왜 '클래스픽' 과외인가? (차별화 3대 핵심 포인트) -->
|
||||
<section class="max-w-5xl mx-auto px-4 sm:px-6 pt-20 pb-16">
|
||||
<div class="text-center mb-12">
|
||||
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">WHY CHOOSE US</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
|
||||
실패 없는 1:1 과외 매칭 시스템
|
||||
</h2>
|
||||
<p class="text-slate-500 text-xs sm:text-sm mt-2 max-w-xl mx-auto">
|
||||
학습 성향 진단부터 과외 비용 투명 비교, 100% 신원 보증까지 빈틈없이 관리합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
||||
01
|
||||
</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>
|
||||
<h3 class="text-base font-bold text-slate-900 mb-2">엄격한 4단계 강사 검증 시스템</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
||||
대학 및 전공 증명서, 신원 조회, 교수법 테스트, 인성 면접을 통과한 상위 10% 베테랑 강사만을 배정합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
||||
02
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">마포 래미안 푸르지오 문OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"학원만 다닐 땐 성적이 안 올랐는데, 1:1로 취약 유형만 집중 공략하니 단번에 1등급이 나왔습니다."</p>
|
||||
<h3 class="text-base font-bold text-slate-900 mb-2">광주 관내 학교별 기출 족보 분석</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
||||
봉선동·수완동 등 광주 주요 중·고등학교의 최근 3개년 시험 출제 경향과 서술형 채점 기준을 철저히 분석합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
||||
03
|
||||
</div>
|
||||
<h3 class="text-base font-bold text-slate-900 mb-2">100% 무료 시범수업 안심 보장제</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
||||
수업을 직접 경험해본 후 최종 진행 여부를 결정하세요. 선생님과 성향이 맞지 않을 시 100% 무료 재매칭을 지원합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
|
||||
<SubjectCarousel grade="초·중·고" />
|
||||
<!-- 5. 학부모 실제 리얼 후기 & 성적 향상 사례 -->
|
||||
<section class="bg-white border-y border-slate-200/80 py-16 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-10">
|
||||
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">SUCCESS STORIES</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
|
||||
광주 학부모님들의 생생한 성적 역전 후기
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
||||
<div class="flex items-center gap-1 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>
|
||||
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
||||
"봉선동 일반고 2학년 수학 4등급에서 허덕였는데, 기출 킬러문항 집중 클리닉 덕분에 이번 기말 94점 1등급 달성했습니다."
|
||||
</p>
|
||||
<div class="text-[11px] text-slate-500 font-medium">광주 남구 봉선동 고2 학부모님 (수학 과외)</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
||||
<div class="flex items-center gap-1 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>
|
||||
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
||||
"수완동 중3 영어 서술형에서 늘 감점당했는데 선생님의 문법 구조화 독해법 덕분에 첫 시험에서 100점 맞았어요."
|
||||
</p>
|
||||
<div class="text-[11px] text-slate-500 font-medium">광주 광산구 수완동 중3 학부모님 (영어 과외)</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
||||
<div class="flex items-center gap-1 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>
|
||||
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
||||
"학원에서는 늘 멍하니 앉아만 있던 아이가 1:1 과외를 시작한 뒤로 자기주도학습 습관이 잡히고 공부에 자신감이 붙었습니다."
|
||||
</p>
|
||||
<div class="text-[11px] text-slate-500 font-medium">광주 북구 일곡동 중1 학부모님 (전과목 코칭)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. 자주 묻는 질문 (FAQ) -->
|
||||
<section class="max-w-4xl mx-auto px-4 sm:px-6 py-16">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl font-extrabold text-slate-900">과외 상담 전 자주 묻는 질문</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<div
|
||||
v-for="(faq, idx) in faqs"
|
||||
:key="idx"
|
||||
class="bg-white border border-slate-200 rounded-xl overflow-hidden"
|
||||
>
|
||||
<button
|
||||
@click="faq.open = !faq.open"
|
||||
class="w-full text-left px-5 py-4 font-bold text-sm sm:text-base text-slate-900 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>
|
||||
<i :class="faq.open ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'" class="text-slate-400 text-xs"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
<div v-show="faq.open" class="px-5 pb-4 text-xs sm:text-sm text-slate-600 border-t border-slate-100 pt-3 leading-relaxed">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -356,113 +409,144 @@
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 7. Footer -->
|
||||
<footer class="bg-slate-900 text-slate-400 text-xs py-10 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-800 pb-4">
|
||||
<span class="text-white font-extrabold text-base">{{ siteName }}</span>
|
||||
<div class="flex gap-4 text-slate-400">
|
||||
<span>이용약관</span>
|
||||
<span>개인정보처리방침</span>
|
||||
<span>과외교습자 등록현황</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
{{ siteName }} | 대표번호: 010-5961-5807 | 광주광역시 관내 전문 1:1 맞춤 과외 매칭 및 학습 관리 센터<br />
|
||||
통신판매업 신고 및 개인과외교습자 적법 등록 완료 | 이메일 문의: contact@{{ siteDomain.replace('https://', '') }}
|
||||
</p>
|
||||
<p class="text-slate-500">
|
||||
© 2026 {{ siteName }}. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { reactive, ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '클래스픽'
|
||||
const siteDomain = config.public.siteDomain || 'https://aeseo.store'
|
||||
const siteName = '클래스픽'
|
||||
const siteDomain = 'https://aeseo.store'
|
||||
|
||||
const gradeOptions = ['초등학생', '중1', '중2', '중3', '고1', '고2·고3']
|
||||
const subjectOptions = ['수학', '영어', '국어', '과학', '사회/한국사', '전과목 코칭']
|
||||
|
||||
const lessonModes = [
|
||||
{ id: '방문과외', label: '1:1 방문수업', icon: 'fa-solid fa-house' },
|
||||
{ id: '화상과외', label: '1:1 실시간 화상', icon: 'fa-solid fa-laptop' },
|
||||
{ id: '방문+화상혼합', label: '방문+화상 혼합', icon: 'fa-solid fa-layer-group' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'시험 서술형 감점', '개념 이해 부족', '응용/킬러문항 취약',
|
||||
'학습 집중력 부족', '공부법/습관 부재', '진로/입시 상담 필요'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '중2',
|
||||
subject: '수학',
|
||||
lessonType: '방문과외',
|
||||
region: '',
|
||||
concerns: ['개념 이해 부족', '응용/킬러문항 취약'],
|
||||
phone: '',
|
||||
agree: true
|
||||
})
|
||||
|
||||
function toggleConcern(concern) {
|
||||
const idx = formData.concerns.indexOf(concern)
|
||||
if (idx > -1) {
|
||||
formData.concerns.splice(idx, 1)
|
||||
} else {
|
||||
formData.concerns.push(concern)
|
||||
}
|
||||
}
|
||||
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
// 실시간 롤링 메시지
|
||||
const rollingMessages = [
|
||||
"서울 양천구 목동 고2 수학 내신 서술형 정밀 분석 접수 (방금 전)",
|
||||
"서울 마포구 염리동 중3 영어 기출 분석 리포트 신청 완료 (2분 전)",
|
||||
"서울 영등포구 여의도동 고1 통합과학 1등급 클리닉 신청 (4분 전)",
|
||||
"서울 강서구 화곡동 중2 국어 내신 서술형 대비 접수 (6분 전)",
|
||||
"서울 구로구 신도림동 고2 수학 킬러문항 족보 신청 (8분 전)"
|
||||
'광주 남구 봉선동 중2 수학 방문과외 시범수업 신청 완료 (1분 전)',
|
||||
'광주 광산구 수완동 고1 영어 내신대비 상담 접수 (3분 전)',
|
||||
'광주 북구 일곡동 중3 국어·수학 종합 패키지 문의 (5분 전)',
|
||||
'광주 서구 치평동 초6 수학 선행학습 매칭 진행 중 (7분 전)'
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
const currentRollingMsg = ref(rollingMessages[0])
|
||||
let rollingTimer = null
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
let idx = 0
|
||||
rollingTimer = setInterval(() => {
|
||||
idx = (idx + 1) % rollingMessages.length
|
||||
currentRollingMsg.value = rollingMessages[idx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: 'PICK' },
|
||||
{ name: '사회/역사', label: '사회', badge: '추천' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'내신 서술형 부분점수 감점이 심함',
|
||||
'학교 시험 킬러문항 변형 문제 적응 불가',
|
||||
'대형 학원 시험대비 진도가 학교와 안 맞음',
|
||||
'내신 2~3등급 정체기에서 1등급 도약 희망'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '고등학교 1학년',
|
||||
subject: '수학',
|
||||
concerns: ['내신 서술형 부분점수 감점이 심함'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
onUnmounted(() => {
|
||||
if (rollingTimer) clearInterval(rollingTimer)
|
||||
})
|
||||
|
||||
function formatPhoneNumber() {
|
||||
let val = formData.phone.replace(/\D/g, '')
|
||||
if (val.length >= 11) {
|
||||
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% 학교 맞춤형입니다. 재학 중인 학교의 교과서, 부교재, 학교 프린트 및 최근 3개년 기출문제를 완벽히 반영하여 수업을 진행합니다.',
|
||||
q: '무료 시범수업은 어떻게 진행되나요?',
|
||||
a: '신청서 접수 후 광주 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
|
||||
open: true
|
||||
},
|
||||
{
|
||||
q: '과외 비용 및 시세는 어떻게 되나요?',
|
||||
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 광주 우리 동네 과외 비용을 안내해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 시험 기간 직전에는 어떤 방식으로 대비하나요?',
|
||||
a: '시험 4주 전부터 학교별 기출 변형 문제 풀이와 서술형 답안 첨삭, 직전 적중 모의고사를 통해 실전 감각을 완성합니다.',
|
||||
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
||||
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 신청 후 내신 족보 리포트는 어떻게 받나요?',
|
||||
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: '학부모 (내신족보신청)',
|
||||
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(', ')}`
|
||||
}
|
||||
})
|
||||
|
||||
@@ -482,13 +566,13 @@ async function handleSubmit() {
|
||||
}
|
||||
}
|
||||
|
||||
// SEO 태그 설정 (지역 기반 + 고의도 롱테일 키워드 30~35자 내외 글자 수 준수)
|
||||
useHead({
|
||||
title: `${siteName} | 학교별 3개년 기출 족보 & 1:1 내신 전문과외`,
|
||||
title: '광주 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
|
||||
meta: [
|
||||
{ name: 'naver-site-verification', content: '48cf582068341a6e4bebde6900b3e0a0e198f4b6' },
|
||||
{ name: 'description', content: `${siteName} - 중·고등 주요 학교별 3개년 내신 기출 족보 및 서술형 1등급 대비 1:1 맞춤과외.` },
|
||||
{ property: 'og:title', content: `${siteName} | 중·고등 학교별 내신 기출 분석 1:1 매칭` },
|
||||
{ property: 'og:description', content: '서술형 감점 0점! 학교별 기출 족보와 내신 전문 강사진 무료 매칭.' },
|
||||
{ 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: [
|
||||
@@ -500,7 +584,7 @@ useHead({
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '서울·수도권 전지역'
|
||||
areaServed: '광주광역시 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
+78
-177
@@ -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) {
|
||||
@@ -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('충북') || 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>
|
||||
|
||||
+315
-212
@@ -1,191 +1,261 @@
|
||||
<template>
|
||||
<div class="landing-container bg-[#F4F7FB] 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-blue-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
<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">
|
||||
R
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-blue-900">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full ml-1.5 border border-amber-200">1:1 MATCHING</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-blue-700 transition">
|
||||
<i class="fa-solid fa-phone text-blue-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-blue-700 hover:bg-blue-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-[#F4F7FB] min-h-screen pb-20">
|
||||
<!-- 2. Main Body -->
|
||||
<main class="w-full pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (화면 좌우 꽉 찬 풀 와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#072E7A] via-[#093B9C] to-[#0B47B9] 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-blue-400/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-amber-400/15 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-blue-100 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping"></span>
|
||||
<span>2026학년도 내신 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-amber-300 underline decoration-wavy decoration-amber-400">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-blue-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-blue-200">누적 정밀 진단</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">24,185<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-blue-200">검증 강사진</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-amber-300 mt-0.5">5,802<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-blue-200">학부모 만족도</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">98.6<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">인근 중·고교 3개년 족보</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-amber-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-amber-100 text-amber-800 mb-2">
|
||||
<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명 한정 전액 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
원하는 맞춤 정보를 선택해 주세요!
|
||||
</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-amber-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-blue-600 focus:border-blue-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>학년 선택</option>
|
||||
<optgroup label="초등부">
|
||||
<option value="초등 1~3학년">초등 1~3학년 (기초형성)</option>
|
||||
<option value="초등 4~6학년">초등 4~6학년 (심화단원)</option>
|
||||
</optgroup>
|
||||
<optgroup label="중등부">
|
||||
<option value="중학교 1학년">중학교 1학년 (자유학기제)</option>
|
||||
<option value="중학교 2학년">중학교 2학년 (내신본격)</option>
|
||||
<option value="중학교 3학년">중학교 3학년 (고등선행)</option>
|
||||
</optgroup>
|
||||
<optgroup label="고등부">
|
||||
<option value="고등학교 1학년">고등학교 1학년 (공통과목)</option>
|
||||
<option value="고등학교 2학년">고등학교 2학년 (수능/내신)</option>
|
||||
<option value="고등학교 3학년/N수">고등학교 3학년 / N수</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-amber-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-blue-600 focus:border-blue-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>과목 선택</option>
|
||||
<option value="수학">수학 (개념·심화·킬러문항)</option>
|
||||
<option value="영어">영어 (문법·독해·내신서술)</option>
|
||||
<option value="국어">국어 (비문학·문학·어휘)</option>
|
||||
<option value="과학">과학 (물·화·생·지 탐구)</option>
|
||||
<option value="사회/역사">사회 / 역사 / 한국사</option>
|
||||
<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-blue-600 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-amber-500 bg-amber-50 text-amber-700 ring-2 ring-amber-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-amber-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-amber-600 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-xl cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<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-blue-600 focus:border-blue-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-amber-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
|
||||
@@ -196,91 +266,87 @@
|
||||
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-blue-600 focus:border-blue-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-amber-600 rounded border-slate-300 focus:ring-amber-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-amber-600 via-amber-500 to-amber-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-file-lines text-lg"></i>
|
||||
<span>{{ isSubmitting ? '신청서 접수 중...' : '내 아이 맞춤 진단 결과 & 상담 신청하기' }}</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-amber-50/90 border border-amber-200/90 rounded-xl flex items-start gap-2.5 text-xs text-amber-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-amber-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-amber-950 block mb-0.5">원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-amber-900 underline hover:text-amber-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-emerald-600 tracking-wider bg-emerald-50 px-3 py-1 rounded-full">PROVEN 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-blue-100 text-blue-700 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>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">3개월 만에 달성</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">진단 전: 5등급 (42점)</span>
|
||||
<span class="text-amber-600 font-bold">진단 후: 2등급 (89점)</span>
|
||||
<span class="text-blue-600 font-bold">진단 후: 2등급 (89점)</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-400 to-amber-500 h-3 rounded-full" style="width: 82%"></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: 82%"></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">
|
||||
@@ -289,21 +355,21 @@
|
||||
</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-amber-100 text-amber-700 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">서초동 중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">진단 전: 68점 (B등급)</span>
|
||||
<span class="text-blue-700 font-bold">진단 후: 98점 (전교 4등)</span>
|
||||
<span class="text-emerald-600 font-bold">진단 후: 98점 (전교 4등)</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-400 to-blue-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-emerald-600 h-2.5 rounded-full" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
@@ -314,16 +380,16 @@
|
||||
|
||||
<!-- 학부모 리뷰 (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>
|
||||
</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>
|
||||
@@ -332,16 +398,19 @@
|
||||
</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>
|
||||
@@ -359,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 || '로열클래스 1:1 과외'
|
||||
@@ -368,17 +437,48 @@ const siteDomain = config.public.siteDomain || 'https://aeseo.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 = [
|
||||
"서울 서초구 방배동 중2 수학 정밀 진단 신청 완료 (방금 전)",
|
||||
"서울 강남구 대치동 고1 영어 내신대비 상담 접수 (1분 전)",
|
||||
"서울 강남구 대치동 중2 수학 무료 시범수업 신청 완료 (방금 전)",
|
||||
"서울 서초구 반포동 고1 영어 내신대비 과외 매칭 접수 (1분 전)",
|
||||
"서울 송파구 잠실동 중3 과학 오답분석 리포트 신청 (3분 전)",
|
||||
"경기 성남시 분당구 고2 국어 1등급 클리닉 신청 (5분 전)",
|
||||
"서울 서초구 반포동 초6 중등수학 선행 진단 신청 (7분 전)"
|
||||
"서울 노원구 중계동 초6 중등수학 선행 시범수업 신청 (5분 전)",
|
||||
"서울 양천구 목동 고2 국어 비문학 클리닉 신청 (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]
|
||||
@@ -386,82 +486,84 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '사회/역사', label: '사회', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: 'PICK' }
|
||||
{ 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: ['응용·심화 문제 해결력 부족'],
|
||||
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. 정밀 진단 리포트와 1:1 상담은 정말 무료인가요?',
|
||||
a: '네, 100% 무료입니다. 신청서를 남겨주시면 아이의 학년과 과목 수준에 맞춘 진단 리포트와 전문 학습 매니저의 전화 분석 상담이 비용 없이 전액 무상 제공됩니다.',
|
||||
q: '무료 시범수업은 어떻게 진행되나요?',
|
||||
a: '신청서 접수 후 지역 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
|
||||
open: true
|
||||
},
|
||||
{
|
||||
q: '과외 비용 및 시세는 어떻게 되나요?',
|
||||
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 우리 동네 과외 비용을 안내해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 신청 후 매칭 연락은 언제 오나요?',
|
||||
a: '접수 즉시 전담 매니저가 배정되어 영업일 기준 최대 24시간 이내에 기재해주신 학부모님 연락처로 유선 안내를 드립니다.',
|
||||
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
||||
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 선생님이 아이와 잘 맞지 않으면 변경할 수 있나요?',
|
||||
a: '네, 당연히 가능합니다. 첫 시범 수업 또는 진행 중 성향이 맞지 않을 경우 별도 수수료 없이 다른 선생님으로 무상 재매칭을 지원해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 대면 과외뿐만 아니라 비대면 화상 과외도 가능한가요?',
|
||||
a: '방문 과외와 1:1 실시간 화상 과외 모두 가능합니다. 거주 지역이나 일정에 맞춰 원하시는 수업 형태로 선택하실 수 있습니다.',
|
||||
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: '학부모 (진단신청)',
|
||||
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(', ')}`
|
||||
}
|
||||
})
|
||||
|
||||
@@ -481,13 +583,14 @@ async function handleSubmit() {
|
||||
}
|
||||
}
|
||||
|
||||
// SEO 태그 설정 (사용자 가이드 30~35자 내외 글자 수 및 고의도 롱테일 키워드 100% 준수)
|
||||
useHead({
|
||||
title: `${siteName} | 1:1 맞춤 학습 정밀 진단 리포트 & 과외 매칭`,
|
||||
title: '서울 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
|
||||
meta: [
|
||||
{ name: 'naver-site-verification', content: '299523ed34c7419d7fb724426e14b5def8badac7' },
|
||||
{ name: 'description', content: `${siteName} - 우리 아이 학습 성향과 취약점 분석을 통한 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: [
|
||||
@@ -499,7 +602,7 @@ useHead({
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '대한민국 전지역'
|
||||
areaServed: '서울특별시 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
+80
-186
@@ -1,38 +1,88 @@
|
||||
<template>
|
||||
<header class="hero-banner">
|
||||
<div class="hero-container">
|
||||
<div class="hero-badge-wrap">
|
||||
<span class="hero-badge alpha-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 }} 학군 전담 | 서울대·UNIST 및 베테랑 강사진 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,179 +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, #e11d48);
|
||||
color: #ffffff;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.alpha-badge {
|
||||
background: linear-gradient(135deg, #e11d48 0%, #f59e0b 100%);
|
||||
box-shadow: 0 0 15px rgba(225, 29, 72, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.hero-subbadge {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
font-size: clamp(0.75rem, 2vw, 0.85rem);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 9999px;
|
||||
color: #fce7f3;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
+412
-320
@@ -1,346 +1,406 @@
|
||||
<template>
|
||||
<div class="landing-container bg-[#F8FAFC] 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-slate-900 flex items-center justify-center text-amber-400 font-extrabold text-lg shadow-sm">
|
||||
A
|
||||
<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">
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-slate-950">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded-full ml-1.5 border border-red-200">초격차 1등급</span>
|
||||
<div 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-red-600 transition">
|
||||
<i class="fa-solid fa-phone text-red-600"></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-slate-950 hover:bg-slate-800 text-white text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition shadow-md flex items-center gap-1.5 border border-slate-800">
|
||||
<span>마스터 플랜 신청</span>
|
||||
<i class="fa-solid fa-arrow-right text-[11px] text-amber-400"></i>
|
||||
<a 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-[#F8FAFC] min-h-screen pb-20">
|
||||
<!-- 2. Main Body -->
|
||||
<main class="w-full pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (매트 다크 차콜 & 크림슨 레드/골드 풀와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#0F172A] via-[#162033] to-[#1E293B] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
|
||||
<div class="absolute -right-24 -top-24 w-96 h-96 bg-red-500/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-amber-500/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<!-- 히어로 섹션 (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-slate-200 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-red-500 animate-ping"></span>
|
||||
<span>의치한약수 & 자사·특목고 1등급 마스터 시스템</span>
|
||||
|
||||
<!-- 신뢰 인증 뱃지 -->
|
||||
<div 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>옥동·신정·매곡·무거 등 울산 전지역 전담 | 서울대·UNIST 및 베테랑 강사진 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-amber-400 underline decoration-wavy decoration-amber-500">전과목 올 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-slate-300 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
상위 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-slate-400">자사·특목 학생비율</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">88.5<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
<!-- 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-slate-400">1등급 유지율</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-amber-400 mt-0.5">97.4<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
|
||||
<div 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-slate-400">킬러 정답률</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">92.1<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
|
||||
<div 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/40 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-300 border border-white/15 mx-auto max-w-md shadow-md">
|
||||
<span class="bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">실시간</span>
|
||||
<span class="truncate font-medium transition-opacity duration-300">{{ currentNotice }}</span>
|
||||
<!-- 실시간 매칭 알림 롤링 바 (세련된 미니멀 디자인) -->
|
||||
<div 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="text-slate-600 font-medium animate-pulse">{{ currentRollingMsg }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
<!-- 3. 고전환 퀵 간편 신청 폼 섹션 (토스/숨고 스타일 직관적 세그먼트 칩 선택형) -->
|
||||
<section id="leadFormSection" class="max-w-3xl mx-auto px-4 sm:px-6 -mt-10 relative z-20">
|
||||
<div class="bg-white rounded-2xl border border-slate-200/90 shadow-xl shadow-slate-200/50 p-6 sm:p-9">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-800 mb-2">
|
||||
선착순 30명 초격차 킬러 분석서 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
최상위권 목표 과목을 선택하세요!
|
||||
<div class="text-center mb-7">
|
||||
<span class="inline-block text-xs font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-full mb-2">30초 빠른 간편 신청</span>
|
||||
<h2 class="text-xl sm:text-2xl font-extrabold text-slate-900">
|
||||
울산 우리 동네 과외 시세 확인 & 무료 시범수업 신청
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
학생의 취약 킬러 유형을 분석하여 1등급 전문 강사를 1:1 매칭해 드립니다.
|
||||
신청 즉시 전담 학습 매니저가 1:1 맞춤 상담 및 최적의 선생님을 배정해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<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-red-600">*</span>
|
||||
</label>
|
||||
<select id="studentGrade" v-model="formData.grade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>학년 선택</option>
|
||||
<optgroup label="고등부 (의대·수능·자사고 1등급)">
|
||||
<option value="고등학교 1학년">고등학교 1학년 (자사고 내신 1등급 셋업)</option>
|
||||
<option value="고등학교 2학년">고등학교 2학년 (과탐·수학 킬러 완벽 정복)</option>
|
||||
<option value="고등학교 3학년/N수">고등학교 3학년 / N수 (의치약대 수능 파이널)</option>
|
||||
</optgroup>
|
||||
<optgroup label="중등부 (특목·자사고 대비)">
|
||||
<option value="중학교 1~2학년">중학교 1~2학년 (수학·과학 심화 선행)</option>
|
||||
<option value="중학교 3학년">중학교 3학년 (특목고·영재고 실전 대비)</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
집중 과목 <span class="text-red-600">*</span>
|
||||
</label>
|
||||
<select id="weakSubject" v-model="formData.subject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>과목 선택</option>
|
||||
<option value="수학">수학 (미적분/기하 킬러 문항)</option>
|
||||
<option value="과학">과학 (물리·화학·생명 킬러 도표)</option>
|
||||
<option value="영어">영어 (고난도 빈칸·순서배열 1등급)</option>
|
||||
<option value="국어">국어 (수능 고난도 비문학 기술·경제)</option>
|
||||
<option value="전과목/초격차">전과목 올 1등급 입시 마스터</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 빠른 과목 픽 -->
|
||||
<!-- 대상 학년 선택 -->
|
||||
<div>
|
||||
<div class="text-xs font-semibold text-slate-500 mb-2 flex justify-between items-center">
|
||||
<span>빠른 과목 픽 (PICK)</span>
|
||||
<span class="text-xs text-red-600 font-semibold">터치 시 자동 선택</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-2 text-center">
|
||||
<label 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-3 sm:grid-cols-6 gap-2">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
v-for="grade in gradeOptions"
|
||||
:key="grade"
|
||||
@click="formData.grade = grade"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-red-600 bg-red-50 text-red-800 ring-2 ring-red-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-red-400 bg-white'
|
||||
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
|
||||
formData.grade === grade
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
|
||||
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
|
||||
]"
|
||||
>
|
||||
<span>{{ subj.label }}</span>
|
||||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-red-700 font-semibold' : 'text-slate-400'">
|
||||
{{ subj.badge }}
|
||||
</span>
|
||||
{{ grade }}
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
2. 희망 과목 <span class="text-blue-600">*</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-red-50/50 transition">
|
||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-red-600 rounded border-slate-300 focus:ring-red-500">
|
||||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
v-for="sub in subjectOptions"
|
||||
:key="sub"
|
||||
@click="formData.subject = sub"
|
||||
:class="[
|
||||
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center',
|
||||
formData.subject === sub
|
||||
? 'bg-blue-600 text-white border-blue-600 shadow-sm'
|
||||
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100 hover:border-slate-300'
|
||||
]"
|
||||
>
|
||||
{{ sub }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<!-- 수업 형태 선택 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학교명 및 목표 학과 <span class="text-slate-400 font-normal text-xs">(최상위권 전담 배치)</span>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
||||
3. 희망 수업 형태
|
||||
</label>
|
||||
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 서울 반포동 / 세화고 (목표: 의예과)" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
v-for="mode in lessonModes"
|
||||
:key="mode.id"
|
||||
@click="formData.lessonType = mode.id"
|
||||
:class="[
|
||||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-semibold border transition-all text-center flex items-center justify-center gap-1.5',
|
||||
formData.lessonType === mode.id
|
||||
? 'bg-slate-900 text-white border-slate-900 shadow-sm'
|
||||
: 'bg-slate-50 text-slate-700 border-slate-200 hover:bg-slate-100'
|
||||
]"
|
||||
>
|
||||
<i :class="mode.icon" class="text-xs"></i>
|
||||
<span>{{ mode.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<!-- 거주 지역 (동/구 단위 입력) -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-red-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(킬러 분석표 발송용)</span>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||||
4. 거주 지역 (동 이름)
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-location-dot absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3.5 pl-11 outline-none tracking-wider"
|
||||
>
|
||||
<i class="fa-solid fa-mobile-screen-button absolute left-4 top-4 text-slate-400 text-base"></i>
|
||||
type="text"
|
||||
v-model="formData.region"
|
||||
placeholder="예: 울산 남구 옥동, 중구 유곡동 등"
|
||||
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 개인정보 동의 -->
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
|
||||
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-red-600 rounded border-slate-300 focus:ring-red-500">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
<!-- 학습 고민 다중 선택 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
|
||||
5. 현재 가장 큰 학습 고민 (중복 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
v-for="concern in concernOptions"
|
||||
:key="concern"
|
||||
@click="toggleConcern(concern)"
|
||||
:class="[
|
||||
'py-2 px-2.5 rounded-xl text-xs font-medium border transition-all text-center',
|
||||
formData.concerns.includes(concern)
|
||||
? 'bg-blue-50 text-blue-700 border-blue-300 font-bold'
|
||||
: 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'
|
||||
]"
|
||||
>
|
||||
{{ concern }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 입력 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
|
||||
6. 상담 받으실 학부모님 연락처 <span class="text-blue-600">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-phone absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
|
||||
<input
|
||||
type="tel"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhoneNumber"
|
||||
maxlength="13"
|
||||
placeholder="010-0000-0000"
|
||||
class="w-full pl-10 pr-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-blue-600 focus:ring-2 focus:ring-blue-100 outline-none text-xs sm:text-sm font-semibold tracking-wide transition"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 mt-1 pl-1">
|
||||
* 과외 비용 및 시범수업 안내를 위해 안심번호로 안전하게 연결됩니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 개인정보 수집 동의 -->
|
||||
<div class="flex items-center gap-2 pt-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="agreeTerms"
|
||||
v-model="formData.agree"
|
||||
class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
<label for="agreeTerms" class="text-xs text-slate-500 cursor-pointer">
|
||||
개인정보 수집 및 학습 상담 안내를 위한 연락에 동의합니다. (필수)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<!-- 제출 CTA 버튼 -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isSubmitting"
|
||||
class="w-full bg-gradient-to-r from-slate-950 via-slate-900 to-red-900 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50 border border-red-500/30"
|
||||
class="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 text-white font-extrabold text-base rounded-xl shadow-lg shadow-blue-500/25 transition-all flex items-center justify-center gap-2 cursor-pointer"
|
||||
>
|
||||
<i class="fa-solid fa-crown text-amber-400 text-lg"></i>
|
||||
<span>{{ isSubmitting ? '초격차 분석 중...' : '1등급 초격차 마스터 플랜 신청하기' }}</span>
|
||||
<span v-if="!isSubmitting">울산 과외 시세 확인 & 무료 시범수업 신청하기</span>
|
||||
<span v-else class="flex items-center gap-2">
|
||||
<i class="fa-solid fa-spinner animate-spin"></i>
|
||||
접수 처리 중입니다...
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-lock text-xs"></i>
|
||||
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
|
||||
<div class="mt-3 p-3.5 bg-red-50/90 border border-red-200/90 rounded-xl flex items-start gap-2.5 text-xs text-red-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-red-600 mt-0.5 text-sm shrink-0"></i>
|
||||
<div>
|
||||
<strong class="font-bold text-red-950 block mb-0.5">원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-red-900 underline hover:text-red-700">010-5961-5807</a>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- 완료 메시지 -->
|
||||
<div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-2xl text-emerald-900 text-xs sm:text-sm">
|
||||
<div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-emerald-800">
|
||||
<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
|
||||
<span>마스터 플랜 신청이 성공적으로 접수되었습니다!</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
기재해주신 연락처로 <strong>‘최상위권 킬러 문항 심층 분석서’</strong>가 발송되며, 의대·특목고 전담 수석 컨설턴트가 유선으로 심층 솔루션을 안내해 드립니다.
|
||||
<!-- 신청 완료 메시지 팝업 모달/카드 -->
|
||||
<div v-if="submitSuccess" id="submitResultBox" class="mt-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-center">
|
||||
<i class="fa-solid fa-circle-check text-2xl text-emerald-600 mb-1"></i>
|
||||
<h4 class="font-bold text-sm">상담 신청이 정상적으로 완료되었습니다!</h4>
|
||||
<p class="text-xs text-emerald-700 mt-1">
|
||||
울산 전문 교육 매니저가 남겨주신 연락처로 10분 내 순차 연락을 드립니다.
|
||||
</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열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-red-600 tracking-wider bg-red-100 px-3 py-1 rounded-full">TOP 1% RESULTS</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">실제 자사고·의대 합격 성과</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">쌤인증의 초격차 지도로 1등급을 굳힌 학생들의 실제 결과입니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
|
||||
<!-- Case 1 -->
|
||||
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-red-100 text-red-800 font-bold text-xs px-2.5 py-1 rounded-full">자사고 내신 1.4등급</span>
|
||||
<span class="font-bold text-sm sm:text-base text-slate-800">반포 자사고 1학년 송OO</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">전교 5등 도약</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">진단 전: 4.2등급 (킬러 문항 전멸)</span>
|
||||
<span class="text-red-600 font-bold">결과: 1.4등급 (전과목 1등급 진입)</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-400 to-red-600 h-3 rounded-full" style="width: 96%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"자사고는 한 문제로 등급이 갈리는데, 킬러 문항 5단계 해체 훈련을 받고 난 후 시험에서 단 한 문제도 틀리지 않았습니다."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-amber-100 text-amber-800 font-bold text-xs px-2.5 py-1 rounded-full">수능 수학 100점</span>
|
||||
<span class="font-bold text-sm sm:text-base text-slate-800">일산 고3 배OO (의예과 합격)</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">수능 백분위 100</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">모의고사: 84점 (2등급 문턱)</span>
|
||||
<span class="text-amber-600 font-bold">수능 실전: 100점 만점 달성</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-400 to-amber-500 h-3 rounded-full" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"어떤 신유형 킬러가 나와도 당황하지 않는 조건 해석 메커니즘을 훈련시켜 주신 덕분에 만점을 받았습니다."
|
||||
</p>
|
||||
</div>
|
||||
<!-- 4. 왜 '쌤인증' 과외인가? (차별화 3대 핵심 포인트) -->
|
||||
<section class="max-w-5xl mx-auto px-4 sm:px-6 pt-20 pb-16">
|
||||
<div class="text-center mb-12">
|
||||
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">WHY CHOOSE US</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
|
||||
실패 없는 1:1 과외 매칭 시스템
|
||||
</h2>
|
||||
<p class="text-slate-500 text-xs sm:text-sm mt-2 max-w-xl mx-auto">
|
||||
학습 성향 진단부터 과외 비용 투명 비교, 100% 신원 보증까지 빈틈없이 관리합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
||||
01
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">반포 아크로리버파크 송OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"자사고 진학 후 등급 유지가 가장 큰 고민이었는데, 쌤인증 1:1 과외로 확실한 1등급을 굳혔습니다."</p>
|
||||
<h3 class="text-base font-bold text-slate-900 mb-2">엄격한 4단계 강사 검증 시스템</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
||||
대학 및 전공 증명서, 신원 조회, 교수법 테스트, 인성 면접을 통과한 상위 10% 베테랑 강사만을 배정합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
||||
02
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">대치 래미안대치팰리스 노OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"의대 지망 아이에게 필요한 깊이 있는 사고력을 1:1로 지도해 주시는 유일한 과외입니다."</p>
|
||||
<h3 class="text-base font-bold text-slate-900 mb-2">울산 관내 학교별 기출 족보 분석</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
||||
옥동·신정동 등 울산 주요 중·고등학교의 최근 3개년 시험 출제 경향과 서술형 채점 기준을 철저히 분석합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl mb-4 font-bold">
|
||||
03
|
||||
</div>
|
||||
<h3 class="text-base font-bold text-slate-900 mb-2">100% 무료 시범수업 안심 보장제</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
||||
수업을 직접 경험해본 후 최종 진행 여부를 결정하세요. 선생님과 성향이 맞지 않을 시 100% 무료 재매칭을 지원합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
<!-- 5. 학부모 실제 리얼 후기 & 성적 향상 사례 -->
|
||||
<section class="bg-white border-y border-slate-200/80 py-16 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-10">
|
||||
<span class="text-xs font-bold text-blue-600 uppercase tracking-wider">SUCCESS STORIES</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">
|
||||
울산 학부모님들의 생생한 성적 역전 후기
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
||||
<div class="flex items-center gap-1 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>
|
||||
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
||||
"옥동 학원가 다녀도 70점대에 머물던 수학이 선생님 1:1 오답 클리닉 3개월 만에 96점 전교권으로 올랐습니다."
|
||||
</p>
|
||||
<div class="text-[11px] text-slate-500 font-medium">울산 남구 옥동 중2 학부모님 (수학 과외)</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
||||
<div class="flex items-center gap-1 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>
|
||||
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
||||
"신정동 고1 영어 내신 서술형 외부지문 때문에 스트레스가 심했는데, 꼼꼼한 어법 분석 지도 덕분에 1등급 찍었습니다."
|
||||
</p>
|
||||
<div class="text-[11px] text-slate-500 font-medium">울산 남구 신정동 고1 학부모님 (영어 과외)</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 rounded-xl p-5 border border-slate-200">
|
||||
<div class="flex items-center gap-1 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>
|
||||
<p class="text-xs sm:text-sm text-slate-700 leading-relaxed mb-3">
|
||||
"스스로 계획 세우고 공부하는 법을 몰랐는데 매일 학습 플래너 피드백과 동기부여 코칭으로 공부 태도가 완전히 바뀌었어요."
|
||||
</p>
|
||||
<div class="text-[11px] text-slate-500 font-medium">울산 북구 매곡동 중3 학부모님 (전과목 코칭)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. 자주 묻는 질문 (FAQ) -->
|
||||
<section class="max-w-4xl mx-auto px-4 sm:px-6 py-16">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-2xl font-extrabold text-slate-900">과외 상담 전 자주 묻는 질문</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<div
|
||||
v-for="(faq, idx) in faqs"
|
||||
:key="idx"
|
||||
class="bg-white border border-slate-200 rounded-xl overflow-hidden"
|
||||
>
|
||||
<button
|
||||
@click="faq.open = !faq.open"
|
||||
class="w-full text-left px-5 py-4 font-bold text-sm sm:text-base text-slate-900 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>
|
||||
<i :class="faq.open ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'" class="text-slate-400 text-xs"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
<div v-show="faq.open" class="px-5 pb-4 text-xs sm:text-sm text-slate-600 border-t border-slate-100 pt-3 leading-relaxed">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -349,113 +409,144 @@
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 7. Footer -->
|
||||
<footer class="bg-slate-900 text-slate-400 text-xs py-10 px-4 sm:px-6">
|
||||
<div class="max-w-5xl mx-auto space-y-4">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-800 pb-4">
|
||||
<span class="text-white font-extrabold text-base">{{ siteName }}</span>
|
||||
<div class="flex gap-4 text-slate-400">
|
||||
<span>이용약관</span>
|
||||
<span>개인정보처리방침</span>
|
||||
<span>과외교습자 등록현황</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
{{ siteName }} | 대표번호: 010-5961-5807 | 울산광역시 관내 전문 1:1 맞춤 과외 매칭 및 학습 관리 센터<br />
|
||||
통신판매업 신고 및 개인과외교습자 적법 등록 완료 | 이메일 문의: contact@{{ siteDomain.replace('https://', '') }}
|
||||
</p>
|
||||
<p class="text-slate-500">
|
||||
© 2026 {{ siteName }}. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { reactive, ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '쌤인증'
|
||||
const siteDomain = config.public.siteDomain || 'https://soohyun.xyz'
|
||||
const siteName = '쌤인증'
|
||||
const siteDomain = 'https://soohyun.xyz'
|
||||
|
||||
const gradeOptions = ['초등학생', '중1', '중2', '중3', '고1', '고2·고3']
|
||||
const subjectOptions = ['수학', '영어', '국어', '과학', '사회/한국사', '전과목 코칭']
|
||||
|
||||
const lessonModes = [
|
||||
{ id: '방문과외', label: '1:1 방문수업', icon: 'fa-solid fa-house' },
|
||||
{ id: '화상과외', label: '1:1 실시간 화상', icon: 'fa-solid fa-laptop' },
|
||||
{ id: '방문+화상혼합', label: '방문+화상 혼합', icon: 'fa-solid fa-layer-group' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'시험 서술형 감점', '개념 이해 부족', '응용/킬러문항 취약',
|
||||
'학습 집중력 부족', '공부법/습관 부재', '진로/입시 상담 필요'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '중2',
|
||||
subject: '수학',
|
||||
lessonType: '방문과외',
|
||||
region: '',
|
||||
concerns: ['개념 이해 부족', '응용/킬러문항 취약'],
|
||||
phone: '',
|
||||
agree: true
|
||||
})
|
||||
|
||||
function toggleConcern(concern) {
|
||||
const idx = formData.concerns.indexOf(concern)
|
||||
if (idx > -1) {
|
||||
formData.concerns.splice(idx, 1)
|
||||
} else {
|
||||
formData.concerns.push(concern)
|
||||
}
|
||||
}
|
||||
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
// 실시간 롤링 메시지
|
||||
const rollingMessages = [
|
||||
"울산 남구 옥동 고3 의대 정시 수능 미적분 1등급 매칭 접수 (방금 전)",
|
||||
"울산 중구 유곡동 고2 수능 국어 킬러 문항 대비 신청 완료 (2분 전)",
|
||||
"울산 남구 삼산동 중3 자사고·과고 대비 수학 1:1 마스터 (3분 전)",
|
||||
"울산 북구 송정동 고1 내신 1등급 취약점 집중 클리닉 (5분 전)",
|
||||
"울산 울주군 구영리 고2 과학탐구 심화 개념 마스터 신청 (7분 전)"
|
||||
'울산 남구 옥동 중2 수학 방문과외 시범수업 신청 완료 (1분 전)',
|
||||
'울산 남구 신정동 고1 영어 내신대비 상담 접수 (3분 전)',
|
||||
'울산 북구 매곡동 중3 국어·수학 종합 패키지 문의 (5분 전)',
|
||||
'울산 중구 유곡동 초6 수학 선행학습 매칭 진행 중 (7분 전)'
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
const currentRollingMsg = ref(rollingMessages[0])
|
||||
let rollingTimer = null
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
let idx = 0
|
||||
rollingTimer = setInterval(() => {
|
||||
idx = (idx + 1) % rollingMessages.length
|
||||
currentRollingMsg.value = rollingMessages[idx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '과학', label: '과학', badge: '추천' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '전과목/초격차', label: '전과목', badge: '의대' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'킬러 문항 변형 문제에서 1등급 문턱 좌절',
|
||||
'특목·자사고 내신 경쟁 속 1~2등급 방어 절실',
|
||||
'의치한약수 정시 수능 백분위 99% 달성 필요',
|
||||
'전과목 올 1등급을 위한 초격차 학습 밸런스'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '고등학교 1학년',
|
||||
subject: '수학',
|
||||
concerns: ['킬러 문항 변형 문제에서 1등급 문턱 좌절'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
onUnmounted(() => {
|
||||
if (rollingTimer) clearInterval(rollingTimer)
|
||||
})
|
||||
|
||||
function formatPhoneNumber() {
|
||||
let val = formData.phone.replace(/\D/g, '')
|
||||
if (val.length >= 11) {
|
||||
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: '네, 쌤인증은 전국단위 자사고, 과고, 외고의 고난도 내신 기출과 수능 4점 킬러 문항을 다루는 최상위 전문 강사진이 맞춤 지도를 진행합니다.',
|
||||
q: '무료 시범수업은 어떻게 진행되나요?',
|
||||
a: '신청서 접수 후 울산 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
|
||||
open: true
|
||||
},
|
||||
{
|
||||
q: '과외 비용 및 시세는 어떻게 되나요?',
|
||||
a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 울산 우리 동네 과외 비용을 안내해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 의대·최상위권 입시를 위한 장기 로드맵도 제공되나요?',
|
||||
a: '단순한 진도 나가기가 아닌, 목표 학과에 맞춘 수시 세특 관리 방향과 수능 최저/정시 1등급 완성을 위한 전과목 밸런스 로드맵을 함께 설계합니다.',
|
||||
q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
||||
a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 무료 진단 리포트는 어떤 내용을 담고 있나요?',
|
||||
a: '학생의 최근 모의고사/내신 오답 유형을 분석하여, 1등급 진입을 가로막는 취약 킬러 패턴과 5단계 해체 솔루션을 무상 제공합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 강사진의 강의 역량은 어떻게 보장되나요?',
|
||||
a: '최상위권 전문 강사진은 까다로운 자체 고난도 문항 풀이 테스트 및 수업 시연 평가를 100% 통과한 검증된 강사만 선별 배치됩니다.',
|
||||
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: '학부모 (초격차플랜신청)',
|
||||
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(', ')}`
|
||||
}
|
||||
})
|
||||
|
||||
@@ -475,13 +566,14 @@ async function handleSubmit() {
|
||||
}
|
||||
}
|
||||
|
||||
// SEO 태그 설정 (네이버 서치어드바이저 등록 태그 포함 및 30~35자 글자 수 규격 준수)
|
||||
useHead({
|
||||
title: `${siteName} | 의대·자사고 1등급 초격차 1:1 맞춤과외`,
|
||||
title: '울산 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
|
||||
meta: [
|
||||
{ name: 'naver-site-verification', content: 'd40ee8cd61dab827dcbd7080e54b095339c44222' },
|
||||
{ name: 'description', content: `${siteName} - 최상위 1% 도약을 위한 킬러 문항 정복 및 특목·자사고 전과목 올 1등급 마스터 과외.` },
|
||||
{ property: 'og:title', content: `${siteName} | 전과목 올 1등급 초격차 마스터` },
|
||||
{ property: 'og:description', content: '의대·자사고 목표! 킬러 문항 5단계 해체 및 최상위 1타 강사진 무료 매칭.' },
|
||||
{ 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: [
|
||||
@@ -493,7 +585,7 @@ useHead({
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '울산광역시 및 전국'
|
||||
areaServed: '울산광역시 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user