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

-

Browse Source
This commit is contained in:
kyounggu
2026-10-20 11:59:57 +09:00
parent 8d9c72f655
commit 97655851fb
11 changed files with 2193 additions and 2206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
daegu/components/HeroBanner.vue
+80 -179
View File
@@ -1,38 +1,88 @@
<template>
<header class="hero-banner">
<div class="hero-container">
<div class="hero-badge-wrap">
<span class="hero-badge royal-badge">{{ region.dong }} 학군 맞춤 1:1 전문 지도</span>
<span class="hero-subbadge">2026 개정 교육과정 완벽 반영</span>
<header class="hero-banner-clean bg-white border-b border-slate-200/80 pt-10 sm:pt-14 pb-14 sm:pb-18 px-4 sm:px-6 relative overflow-hidden text-center">
<!-- 은은한 상단 엠비언트 라이트 -->
<div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
<div class="max-w-4xl mx-auto relative z-10">
<!-- 신뢰 보증 뱃지 -->
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-5">
<span class="w-2 h-2 rounded-full bg-blue-600"></span>
<span>{{ region.dong }} 학군 전담 | 서울대·경북대 및 베테랑 강사진 100% 신원 보증</span>
</div>
<h1 class="hero-title">
<span class="region-highlight">{{ displayRegionName }}</span><br />
<span class="subject-highlight">{{ grade }} {{ subjectName }}</span> 1:1 맞춤 과외
<!-- SEO 메인 H1 (사용자 지정 롱테일 조합형: [지역] + [학년] + [과목]과외 + 검증된 전문 선생님 100% 매칭) -->
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.22] sm:leading-[1.18] mb-4">
<span>{{ displayRegionName }} {{ grade }} {{ subjectName }}과외</span><br />
<span class="text-blue-600">우리 아이 맞춤 검증된 전문 선생님 100% 매칭</span>
</h1>
<p class="hero-desc">
{{ region.dong }} 인근 학교별 기출 분석부터 서술형 조건 감점 0점화까지!<br />
우리 아이의 취약점을 1:1로 진단하고 <strong>성적 1등급 역전</strong>을 이끌어냅니다.
<!-- 서브 카피 (비용 시세 비교 + 학교 기출 분석 + 무료 시범수업 신뢰 트리거) -->
<p class="text-xs sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
{{ region.dong }} 인근 학교별 기출 분석부터 과외 비용·시세 비교, 취약 개념 클리닉까지.<br class="hidden sm:inline" />
직접 수업받아보고 결정하는 <strong>1:1 무료 방문·화상 시범수업</strong>을 신청하세요.
</p>
<div class="hero-cta-group">
<a href="#consult-section" class="btn-hero-primary">
<span>{{ region.dong }} 1:1 무료 방문·진단 모의수업 신청</span>
</a>
<div class="hero-call-info">
<span class="call-icon"></span>
<span class="call-text">실시간 학습상담 <strong>010-5961-5807</strong></span>
<!-- 4대 핵심 신뢰 지표 바 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-7 text-left">
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
<span class="text-[11px] text-slate-500 leading-tight">학력·경력 증명서 인증</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
<span class="text-[11px] text-slate-500 leading-tight">직접 받아보고 선택</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 투명 시세</strong>
<span class="text-[11px] text-slate-500 leading-tight">대구 표준 시세 가이드</span>
</div>
</div>
<div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
<i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
<div>
<strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
<span class="text-[11px] text-slate-500 leading-tight">{{ region.dong }} 3개년 족보 완파</span>
</div>
</div>
</div>
<div class="hero-tags">
<span class="tag-item">#{{ region.dong }}과외</span>
<span class="tag-item">#{{ region.dong }}{{ subjectName }}</span>
<span class="tag-item">#{{ grade }}내신대비</span>
<span class="tag-item">#서술형감점방지</span>
<span class="tag-item">#1대1밀착코칭</span>
<!-- CTA 그룹 -->
<div class="flex flex-col items-center gap-3.5 mb-6">
<a
href="#consult-section"
class="inline-flex items-center justify-center gap-2 w-full max-w-md py-4 px-6 bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-sm sm:text-base rounded-xl shadow-md hover:shadow-lg transition-all"
>
<i class="fa-solid fa-file-signature text-base"></i>
<span>{{ region.dong }} 과외 시세 확인 & 무료 시범수업 신청</span>
</a>
<div class="flex items-center gap-2 text-xs sm:text-sm text-slate-500">
<i class="fa-solid fa-phone text-blue-600 text-xs"></i>
<span>실시간 학습상담 직통: <strong class="text-slate-800 font-bold">010-5961-5807</strong></span>
</div>
</div>
<!-- 태그 목록 -->
<div class="flex justify-center flex-wrap gap-1.5">
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}과외</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}{{ subjectName }}과외</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ grade }}내신대비</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#대구수성구과외</span>
<span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#1대1무료시범수업</span>
</div>
</div>
</header>
</template>
@@ -55,11 +105,10 @@ const props = defineProps({
},
subjectName: {
type: String,
default: '영어'
default: '수학'
}
})
// '대구광역시 수성구 황금동' -> '대구 황금동' 등 축약 지역명 산출
const displayRegionName = computed(() => {
if (props.shortRegionName) return props.shortRegionName
if (props.region) {
@@ -67,172 +116,24 @@ const displayRegionName = computed(() => {
const dong = props.region.dong || ''
if (sido && dong) {
let shortSido = sido.slice(0, 2)
if (sido.includes('서울')) shortSido = '서울'
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>
daegu/pages/index.vue
+329 -224
View File
@@ -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: '대구광역시 전지역'
})
}
]