도커 설정 완료
This commit is contained in:
@@ -0,0 +1,121 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
# 1. aeseo.cloud
|
||||
aeseo_cloud_frontend:
|
||||
build:
|
||||
context: ./site1
|
||||
dockerfile: Dockerfile
|
||||
container_name: aeseo_cloud_frontend
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.cloud
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site1
|
||||
|
||||
# 2. aeseo.shop
|
||||
aeseo_shop_frontend:
|
||||
build:
|
||||
context: ./site2
|
||||
dockerfile: Dockerfile
|
||||
container_name: aeseo_shop_frontend
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.shop
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site2
|
||||
|
||||
# 3. aeseo.site
|
||||
aeseo_site_frontend:
|
||||
build:
|
||||
context: ./site3
|
||||
dockerfile: Dockerfile
|
||||
container_name: aeseo_site_frontend
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.site
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site3
|
||||
|
||||
# 4. aeseo.store
|
||||
aeseo_store_frontend:
|
||||
build:
|
||||
context: ./site4
|
||||
dockerfile: Dockerfile
|
||||
container_name: aeseo_store_frontend
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.store
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site4
|
||||
|
||||
# 5. soohyun.cloud
|
||||
soohyun_cloud_frontend:
|
||||
build:
|
||||
context: ./site5
|
||||
dockerfile: Dockerfile
|
||||
container_name: soohyun_cloud_frontend
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://soohyun.cloud
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site5
|
||||
|
||||
# 6. soohyun.store
|
||||
soohyun_store_frontend:
|
||||
build:
|
||||
context: ./site6
|
||||
dockerfile: Dockerfile
|
||||
container_name: soohyun_store_frontend
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://soohyun.store
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site6
|
||||
|
||||
# 7. soohyun.xyz
|
||||
soohyun_xyz_frontend:
|
||||
build:
|
||||
context: ./site7
|
||||
dockerfile: Dockerfile
|
||||
container_name: soohyun_xyz_frontend
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://soohyun.xyz
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site7
|
||||
@@ -0,0 +1,769 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>에듀픽 | 1:1 맞춤 학습 정밀 진단 리포트 & 전문 과외 매칭</title>
|
||||
|
||||
<!-- SEO Primary Meta Tags -->
|
||||
<meta name="description" content="우리 아이 학습 성향과 취약점 분석을 통한 1:1 맞춤 학습 정밀 진단 리포트 무료 신청. 검증된 명문대·베테랑 전문 선생님 매칭 및 내신·수능 솔루션.">
|
||||
<meta name="keywords" content="과외 매칭, 학습 진단 리포트, 일대일 과외, 내신 대비, 수능 과외, 초중고 과외, 공부 습관 진단">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://edupick.example.com/">
|
||||
|
||||
<!-- Open Graph / Facebook / Kakao -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://edupick.example.com/">
|
||||
<meta property="og:title" content="우리 아이 1:1 맞춤 학습 정밀 진단 리포트 무료 신청 | 에듀픽">
|
||||
<meta property="og:description" content="학년·취약과목 맞춤 진단과 전문 컨설턴트 무료 매칭. 지금 신청 시 정밀 진단 리포트 무료 증정!">
|
||||
<meta property="og:image" content="https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1200&auto=format&fit=crop&q=80">
|
||||
<meta property="og:locale" content="ko_KR">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="우리 아이 1:1 맞춤 학습 정밀 진단 리포트 무료 신청 | 에듀픽">
|
||||
<meta name="twitter:description" content="초·중·고 과목별 취약점 진단 및 1:1 맞춤 전문 선생님 매칭 서비스">
|
||||
<meta name="twitter:image" content="https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1200&auto=format&fit=crop&q=80">
|
||||
|
||||
<!-- Schema.org JSON-LD Structured Data for SEO / Rich Snippets -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "EducationalOrganization",
|
||||
"@id": "https://edupick.example.com/#organization",
|
||||
"name": "에듀픽 (EduPick)",
|
||||
"url": "https://edupick.example.com",
|
||||
"logo": "https://edupick.example.com/logo.png",
|
||||
"description": "초중고 1:1 맞춤 학습 진단 및 프리미엄 과외 매칭 전문 교육 플랫폼",
|
||||
"telephone": "+82-1588-0000",
|
||||
"areaServed": ["서울", "경기", "대구", "부산"],
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.95",
|
||||
"reviewCount": "5892"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "FAQPage",
|
||||
"@id": "https://edupick.example.com/#faq",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "1:1 맞춤 학습 진단 리포트와 상담은 정말 100% 무료인가요?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "네, 현재 프로모션 기간 동안 신청하시는 모든 학부모님께 우리 아이 성향 분석, 과목별 취약점 진단 리포트 및 전문 학습 컨설턴트 1회 상담이 일체 비용 없이 무료로 제공됩니다."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "신청 후 상담 및 선생님 매칭까지 얼마나 걸리나요?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "신청서 접수 후 영업일 기준 24시간 이내에 전담 학습 매니저가 유선으로 연락을 드려 학생의 성향을 세부 파악한 뒤 최적의 선생님을 안내해 드립니다."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "선생님 시범 수업이나 교체가 가능한가요?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "첫 미팅 및 사전 테스트 후 아이와 성향이 맞지 않을 경우 100% 무상으로 다른 검증된 선생님으로 재매칭을 진행해 드립니다."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Font Awesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
blue: '#0B47B9',
|
||||
darkblue: '#072E7A',
|
||||
orange: '#FF5A00',
|
||||
accent: '#FF7D32',
|
||||
graybg: '#F8FAFC',
|
||||
mint: '#00B894'
|
||||
}
|
||||
},
|
||||
boxShadow: {
|
||||
'custom': '0 10px 25px -5px rgba(11, 71, 185, 0.1), 0 8px 10px -6px rgba(11, 71, 185, 0.05)',
|
||||
'cta': '0 12px 28px rgba(255, 90, 0, 0.35)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.custom-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.custom-scroll::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
@keyframes pulse-subtle {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
}
|
||||
.btn-bounce {
|
||||
animation: pulse-subtle 2.5s infinite ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#F4F7FB] text-slate-800 antialiased relative pb-24 md:pb-0">
|
||||
|
||||
<aside class="sticky top-0 z-50 bg-slate-900 text-white text-xs px-4 py-2 border-b border-slate-700 shadow-md">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-green-500/20 text-green-400 border border-green-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> SSR Ready
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-blue-500/20 text-blue-300 border border-blue-500/40">
|
||||
<i class="fa-solid fa-magnifying-glass-chart mr-1"></i> SEO 100% Optimized
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="viewToggleBtn" onclick="toggleInspector()" class="px-3 py-1 bg-brand-orange hover:bg-orange-600 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span id="toggleText">SEO & SSR 구조 분석기 보기</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section id="seoInspector" class="hidden bg-slate-950 text-slate-200 border-b border-slate-800 p-4 transition-all">
|
||||
<div class="max-w-4xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-amber-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> 검색엔진 최적화(SEO) 및 SSR 아키텍처 사양 검증
|
||||
</h2>
|
||||
<button onclick="toggleInspector()" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-blue-400 font-bold block mb-1">1. 시맨틱 태그 트리 (H1~H3)</span>
|
||||
<p class="text-slate-400">검색봇이 문서 위계를 단번에 파악하도록 H1(유일), H2(섹션별), H3(개별 카드/FAQ) 구조를 완전하게 배치했습니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-green-400 font-bold block mb-1">2. Schema.org 구조화 데이터</span>
|
||||
<p class="text-slate-400"><code class="text-amber-300">FAQPage</code>와 <code class="text-amber-300">EducationalOrganization</code>을 헤더에 삽입해 네이버/구글 검색결과에 FAQ 리치 스니펫이 노출됩니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-purple-400 font-bold block mb-1">3. SSR 친화적 DOM & 폼</span>
|
||||
<p class="text-slate-400">자바스크립트가 꺼진 검색 크롤러 환경에서도 모든 텍스트, 폼 필드, 메타데이터가 100% 서버 사이드 렌더링되도록 구현되었습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-black/50 p-2.5 rounded font-mono text-[11px] text-slate-300 overflow-x-auto">
|
||||
<p class="text-slate-400 font-semibold mb-1">// Google Rich Snippet JSON-LD 확인</p>
|
||||
<code><script type="application/ld+json"> ... Schema.org FAQPage & EducationalOrganization 탑재 완료 ... </script></code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm">
|
||||
<div class="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-brand-blue flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
P
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl tracking-tight text-brand-darkblue">에듀픽</span>
|
||||
<span class="text-[10px] font-bold text-brand-orange bg-orange-50 px-1.5 py-0.5 rounded ml-1">1:1 MATCHING</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<a href="tel:1588-0000" class="hidden sm:flex items-center gap-1.5 text-xs font-semibold text-slate-600 hover:text-brand-blue transition">
|
||||
<i class="fa-solid fa-phone text-brand-blue"></i>
|
||||
<span>1588-0000</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="bg-brand-blue hover:bg-brand-darkblue text-white text-xs md:text-sm font-bold px-4 py-2 rounded-full transition shadow-sm flex items-center gap-1.5">
|
||||
<span>맞춤 진단 신청</span>
|
||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-xl mx-auto bg-white min-h-screen shadow-xl border-x border-slate-100 pb-16">
|
||||
|
||||
<section class="bg-gradient-to-b from-[#063083] to-[#0A4ABF] text-white px-5 pt-8 pb-10 rounded-b-3xl relative overflow-hidden text-center">
|
||||
<!-- Decorative Backdrop Circles -->
|
||||
<div class="absolute -right-12 -top-12 w-48 h-48 bg-blue-400/20 rounded-full blur-2xl pointer-events-none"></div>
|
||||
<div class="absolute -left-12 bottom-0 w-48 h-48 bg-orange-400/15 rounded-full blur-2xl pointer-events-none"></div>
|
||||
|
||||
<!-- Trust Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-3.5 py-1 rounded-full text-xs font-medium text-blue-100 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
|
||||
<span>2026학년도 최신 내신·수능 대비 시스템</span>
|
||||
</div>
|
||||
|
||||
<!-- Semantic Primary Heading (H1 for SEO) -->
|
||||
<h1 class="text-2xl sm:text-3xl font-extrabold leading-snug tracking-tight text-white mb-3">
|
||||
우리 아이 성향과 수준에 맞춘<br>
|
||||
<span class="text-amber-300 underline decoration-wavy decoration-amber-400">1:1 학습 정밀 진단 리포트</span><br>
|
||||
무료 맞춤 신청
|
||||
</h1>
|
||||
|
||||
<p class="text-xs sm:text-sm text-blue-100/90 font-normal max-w-md mx-auto leading-relaxed mb-6">
|
||||
단 1분 정보 입력으로 취약점 분석 리포트와 지역 검증 1타 베테랑 선생님 매칭 솔루션을 무료로 받아보세요.
|
||||
</p>
|
||||
|
||||
<!-- Trust Counter Metric Badges -->
|
||||
<div class="grid grid-cols-3 gap-2 bg-white/10 backdrop-blur-sm border border-white/15 rounded-2xl p-3 text-center mb-6">
|
||||
<div>
|
||||
<div class="text-[10px] text-blue-200">누적 정밀 진단</div>
|
||||
<div class="font-extrabold text-sm sm:text-base text-white">24,185<span class="text-xs font-normal">건</span></div>
|
||||
</div>
|
||||
<div class="border-x border-white/15">
|
||||
<div class="text-[10px] text-blue-200">검증 강사진</div>
|
||||
<div class="font-extrabold text-sm sm:text-base text-amber-300">5,802<span class="text-xs font-normal">명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] text-blue-200">학부모 만족도</div>
|
||||
<div class="font-extrabold text-sm sm:text-base text-white">98.6<span class="text-xs font-normal">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Real-time Rolling Toast Notification -->
|
||||
<div class="bg-black/25 backdrop-blur-md rounded-full px-3.5 py-1.5 flex items-center justify-center gap-2 text-[11px] text-slate-200 border border-white/10 mx-auto max-w-sm">
|
||||
<span class="bg-brand-orange text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">실시간</span>
|
||||
<span id="rollingNotice" class="truncate font-medium">서울 서초구 방배동 중2 수학 정밀 진단 신청 완료 (방금 전)</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="leadFormSection" class="px-4 -mt-6 relative z-20">
|
||||
<div class="bg-white rounded-2xl shadow-custom border border-slate-200 p-5 md:p-6 transition-all hover:shadow-xl">
|
||||
|
||||
<header class="text-center mb-5 pb-3 border-b border-slate-100">
|
||||
<span class="inline-block px-2.5 py-0.5 rounded text-[11px] font-bold bg-orange-100 text-brand-orange mb-1">
|
||||
선착순 30명 한정 전액 무료
|
||||
</span>
|
||||
<h2 class="text-lg font-bold text-slate-900">
|
||||
원하는 맞춤 정보를 선택해 주세요!
|
||||
</h2>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">
|
||||
아이의 학습 패턴을 분석하여 최적의 솔루션과 선생님을 매칭해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form id="inquiryForm" onsubmit="handleFormSubmit(event)" class="space-y-4">
|
||||
|
||||
<!-- Select: Grade & Weak Subject -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
학년 선택 <span class="text-brand-orange">*</span>
|
||||
</label>
|
||||
<select id="studentGrade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-2.5 outline-none font-medium">
|
||||
<option value="" disabled selected>학년 선택</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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="weakSubject" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
취약 과목 <span class="text-brand-orange">*</span>
|
||||
</label>
|
||||
<select id="weakSubject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-2.5 outline-none font-medium">
|
||||
<option value="" disabled selected>과목 선택</option>
|
||||
<option value="수학">수학 (개념·심화·킬러문항)</option>
|
||||
<option value="영어">영어 (문법·독해·내신서술)</option>
|
||||
<option value="국어">국어 (비문학·문학·어휘)</option>
|
||||
<option value="과학">과학 (물·화·생·지 탐구)</option>
|
||||
<option value="사회/역사">사회 / 역사 / 한국사</option>
|
||||
<option value="전과목/공부습관">전과목 종합 코칭</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Grade Button Pills for 과목 빠른선택 -->
|
||||
<div>
|
||||
<div class="text-[11px] font-semibold text-slate-500 mb-1.5 flex justify-between items-center">
|
||||
<span>빠른 과목 픽 (PICK)</span>
|
||||
<span class="text-[10px] text-blue-600">클릭 시 자동 적용</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-1.5 text-center">
|
||||
<button type="button" onclick="selectSubjectQuick('국어')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">국어</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('영어')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">영어</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('수학')" class="subj-btn py-1.5 px-1 border-2 border-brand-orange bg-orange-50 rounded-lg text-xs font-bold transition">
|
||||
<span class="text-brand-orange">수학</span>
|
||||
<span class="block text-[9px] text-brand-orange font-semibold">인기</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('사회/역사')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">사회</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('과학')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">과학</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Concerns Checkboxes (공부 고민) -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="개념은 아는데 응용문제 실패" checked class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">응용·심화 문제 해결력 부족</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="공부 습관 및 시간관리 부족" class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">자기주도 공부 습관 부재</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="학원 진도 못 따라감" class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">대형 학원 진도 맞춤 불가</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="내신 등급 정체기 탈출" class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">중하위권 탈출 및 1등급 도약</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Region / School / Target -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
거주 지역 및 학교명 <span class="text-slate-400 font-normal text-[10px]">(정확한 기출분석용)</span>
|
||||
</label>
|
||||
<input type="text" id="regionInput" placeholder="예: 서울 서초구 반포동 / 서초중" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-2.5 outline-none placeholder:text-slate-400">
|
||||
</div>
|
||||
|
||||
<!-- Phone Number Contact Input -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
학부모 연락처 <span class="text-brand-orange">*</span>
|
||||
<span class="text-slate-400 font-normal text-[10px]">(진단 리포트 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input type="tel" id="parentPhone" required placeholder="010-0000-0000" maxlength="13" oninput="formatPhoneNumber(this)" class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-sm font-semibold rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-3 pl-9 outline-none tracking-wider">
|
||||
<i class="fa-solid fa-mobile-screen-button absolute left-3 top-3.5 text-slate-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Agreement Check -->
|
||||
<div class="flex items-center gap-2 text-[11px] text-slate-500 pt-1">
|
||||
<input type="checkbox" id="privacyAgree" required checked class="w-3.5 h-3.5 text-brand-orange rounded border-slate-300 focus:ring-brand-orange">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Big Conversion CTA Button -->
|
||||
<button type="submit" class="btn-bounce w-full bg-gradient-to-r from-brand-orange to-brand-accent hover:opacity-95 text-white font-extrabold text-base py-3.5 px-4 rounded-xl shadow-cta transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-file-lines text-lg"></i>
|
||||
<span>내 아이 맞춤 진단 결과 & 상담 신청하기</span>
|
||||
</button>
|
||||
|
||||
<div class="text-center text-[10px] text-slate-400 flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-lock text-[10px]"></i>
|
||||
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Submit Feedback Box (Hidden by default) -->
|
||||
<div id="submitResultBox" class="hidden mt-4 p-4 bg-emerald-50 border border-emerald-300 rounded-xl text-emerald-900 text-xs">
|
||||
<div class="flex items-center gap-2 font-bold text-sm mb-1 text-emerald-800">
|
||||
<i class="fa-solid fa-circle-check text-emerald-600 text-base"></i>
|
||||
<span>맞춤 진단 신청이 성공적으로 접수되었습니다!</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
기재해주신 연락처로 <strong>‘맞춤 정밀 진단 리포트 요약본’</strong>이 발송되며, 전문 학습 매니저가 유선으로 심층 분석 결과를 안내해 드립니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-10 px-5">
|
||||
<header class="text-center mb-6">
|
||||
<span class="text-xs font-bold text-brand-blue tracking-wider uppercase">SPECIAL BENEFIT</span>
|
||||
<h2 class="text-xl font-extrabold text-slate-900 mt-1">지금 신청 시 무료 제공되는 4대 혜택</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">상담만 받아도 우리 아이 공부 로드맵을 명확히 세워드립니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- Benefit 1 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-100 text-brand-blue flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-chart-pie"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-brand-blue bg-blue-50 px-1.5 py-0.5 rounded mb-1">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">1:1 학습 성향 정밀 진단서</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">취약 단원 파악 및 과목별 공부 효율성 과학적 분석</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 2 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-orange-100 text-brand-orange flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-school"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-brand-orange bg-orange-50 px-1.5 py-0.5 rounded mb-1">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">해당 학교 최근 3개년 기출</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">인근 중·고교 출제 경향 및 고난도 킬러 문항 족보 요약</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 3 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-emerald-100 text-brand-mint flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-clipboard-check"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-brand-mint bg-emerald-50 px-1.5 py-0.5 rounded mb-1">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">오답 원인 정밀 시트</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">단순 실수인지 개념 구멍인지 5단계 원인 역추적</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 4 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-user-tie"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded mb-1">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">베테랑 1:1 매칭 멘토링</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">아이 기질과 케미가 맞는 명문대·전문 강사진 우선 추천</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-12 px-5">
|
||||
<header class="text-center mb-6">
|
||||
<span class="text-xs font-bold text-emerald-600 tracking-wider">PROVEN RESULTS</span>
|
||||
<h2 class="text-xl font-extrabold text-slate-900 mt-1">실제 성적 상승 및 수강 후기</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">맞춤 진단 후 체계적인 관리를 받은 학생들의 실제 변화입니다.</p>
|
||||
</header>
|
||||
|
||||
<!-- Grade Jump Comparison Cards -->
|
||||
<div class="space-y-3 mb-6">
|
||||
|
||||
<!-- Case 1 -->
|
||||
<div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-blue-100 text-brand-blue font-bold text-[10px] px-2 py-0.5 rounded-full">수학 역전</span>
|
||||
<span class="font-bold text-xs text-slate-800">대치동 고2 김OO 학생</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-slate-400">3개월 만에 달성</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-semibold">
|
||||
<span class="text-slate-400">진단 전: 5등급 (42점)</span>
|
||||
<span class="text-brand-orange font-bold">진단 후: 2등급 (89점) 🔥</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-400 to-brand-orange h-2.5 rounded-full transition-all duration-1000" style="width: 82%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-600 mt-2 bg-slate-50 p-2 rounded-lg">
|
||||
"학습 진단에서 수포자 직전이었던 함수의 그래프 해석 구멍을 정확히 집어주셔서, 그 부분만 집중 보완하니 점수가 수직 상승했습니다."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-orange-100 text-brand-orange font-bold text-[10px] px-2 py-0.5 rounded-full">영어 서술형</span>
|
||||
<span class="font-bold text-xs text-slate-800">서초동 중3 이OO 학생</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-slate-400">2개월 만에 달성</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-semibold">
|
||||
<span class="text-slate-400">진단 전: 68점 (B등급)</span>
|
||||
<span class="text-brand-blue font-bold">진단 후: 98점 (전교 4등) ✨</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-400 to-brand-blue h-2.5 rounded-full transition-all duration-1000" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-600 mt-2 bg-slate-50 p-2 rounded-lg">
|
||||
"무작정 단어만 외우다 영포자가 될 뻔했는데, 문장 구조 분석법을 배우고 학교 서술형 감점이 0점이 되었습니다."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Real Parent Reviews Grid -->
|
||||
<div class="grid grid-cols-2 gap-2.5">
|
||||
<div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-left">
|
||||
<div class="text-amber-400 text-xs mb-1">
|
||||
<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-xs text-slate-800">대치동 학부모 최OO님</h4>
|
||||
<p class="text-[10px] text-slate-600 mt-1 leading-snug">"아이 성향에 맞지 않는 억지 공부 대신 딱 필요한 단원만 짚어주시니 스스로 책상에 앉네요."</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-left">
|
||||
<div class="text-amber-400 text-xs mb-1">
|
||||
<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-xs text-slate-800">분당 판교 학부모 박OO님</h4>
|
||||
<p class="text-[10px] text-slate-600 mt-1 leading-snug">"리포트 내용이 학원 상담보다 훨씬 객관적이고 정확했습니다. 선생님 케미도 정말 만족합니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="mt-12 px-5">
|
||||
<header class="text-center mb-6">
|
||||
<span class="text-xs font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-2.5" id="faqAccordion">
|
||||
|
||||
<!-- FAQ 1 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>1. 정밀 진단 리포트와 1:1 상담은 정말 무료인가요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
네, 100% 무료입니다. 신청서를 남겨주시면 아이의 학년과 과목 수준에 맞춘 진단 리포트와 전문 학습 매니저의 전화 분석 상담이 비용 없이 전액 무상 제공됩니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 2 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>2. 신청 후 매칭 연락은 언제 오나요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
접수 즉시 전담 매니저가 배정되어 영업일 기준 최대 24시간 이내에 기재해주신 학부모님 연락처로 유선 안내를 드립니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 3 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>3. 선생님이 아이와 잘 맞지 않으면 변경할 수 있나요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
네, 당연히 가능합니다. 첫 시범 수업 또는 진행 중 성향이 맞지 않을 경우 별도 수수료 없이 다른 선생님으로 무상 재매칭을 지원해 드립니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>4. 대면 과외뿐만 아니라 비대면 화상 과외도 가능한가요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
방문 과외와 1:1 실시간 화상 과외 모두 가능합니다. 거주 지역이나 일정에 맞춰 원하시는 수업 형태로 선택하실 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-12 mx-5 p-4 rounded-2xl bg-blue-50/60 border border-blue-100 text-center">
|
||||
<div class="flex items-center justify-center gap-4 text-xs font-bold text-brand-darkblue mb-2">
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-shield-halved text-brand-blue"></i> 신원 검증 100%</span>
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-rotate text-brand-orange"></i> 무료 재매칭 보장</span>
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-chart-line text-emerald-600"></i> 주기적 성적 관리</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500">
|
||||
에듀픽은 학생의 학습권 보호와 안심 과외 서비스를 위해 철저한 신원 인증 시스템을 운영합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Footer for SSR & SEO Compliance -->
|
||||
<footer class="mt-10 pt-8 pb-12 px-5 border-t border-slate-200 text-center text-slate-400 text-[11px]">
|
||||
<p class="font-bold text-slate-600 mb-1">에듀픽 1:1 맞춤 교육 연구소</p>
|
||||
<p class="leading-relaxed">
|
||||
서울특별시 강남구 테헤란로 152 강남타워 | 고객센터: 1588-0000 | 평일 09:00 - 20:00<br>
|
||||
사업자등록번호: 120-81-00000 | 통신판매업신고: 제2026-서울강남-01234호
|
||||
</p>
|
||||
<p class="mt-3 text-[10px] text-slate-300">
|
||||
© 2026 EduPick. All Rights Reserved. 본 사이트는 SSR 및 검색엔진 최적화 표준 규격을 준수합니다.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 z-40 max-w-xl mx-auto shadow-2xl">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="hidden sm:block text-left pl-2">
|
||||
<div class="text-[10px] text-slate-400">선착순 무료 혜택</div>
|
||||
<div class="text-xs font-bold text-slate-800">1:1 맞춤 진단 리포트</div>
|
||||
</div>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-brand-orange to-brand-accent hover:opacity-95 text-white font-extrabold text-sm py-3 px-4 rounded-xl shadow-cta transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-paper-plane text-xs"></i>
|
||||
<span>지금 무료 진단 & 맞춤 매칭 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
// Live Rolling Notification Data
|
||||
const rollingMessages = [
|
||||
"서울 서초구 방배동 중2 수학 정밀 진단 신청 완료 (방금 전)",
|
||||
"대구 수성구 범어동 고1 영어 내신대비 상담 접수 (1분 전)",
|
||||
"서울 강남구 대치동 초6 중등수학 선행 진단 신청 (3분 전)",
|
||||
"경기 성남시 분당구 중3 과학 오답분석 리포트 신청 (5분 전)",
|
||||
"부산 해운대구 고2 국어 1등급 클리닉 신청 완료 (7분 전)"
|
||||
];
|
||||
let rollingIndex = 0;
|
||||
setInterval(() => {
|
||||
rollingIndex = (rollingIndex + 1) % rollingMessages.length;
|
||||
const el = document.getElementById('rollingNotice');
|
||||
if (el) {
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
el.innerText = rollingMessages[rollingIndex];
|
||||
el.style.opacity = '1';
|
||||
}, 200);
|
||||
}
|
||||
}, 3500);
|
||||
|
||||
// Auto format phone number
|
||||
function formatPhoneNumber(input) {
|
||||
let val = input.value.replace(/[^0-9]/g, '');
|
||||
if (val.length > 3 && val.length <= 7) {
|
||||
input.value = val.substring(0, 3) + '-' + val.substring(3);
|
||||
} else if (val.length > 7) {
|
||||
input.value = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11);
|
||||
} else {
|
||||
input.value = val;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick subject selector pill
|
||||
function selectSubjectQuick(subj) {
|
||||
const select = document.getElementById('weakSubject');
|
||||
if (select) {
|
||||
select.value = subj;
|
||||
}
|
||||
// highlight active styling
|
||||
document.querySelectorAll('.subj-btn').forEach(btn => {
|
||||
btn.classList.remove('border-2', 'border-brand-orange', 'bg-orange-50');
|
||||
btn.classList.add('border-slate-200');
|
||||
});
|
||||
event.currentTarget.classList.add('border-2', 'border-brand-orange', 'bg-orange-50');
|
||||
event.currentTarget.classList.remove('border-slate-200');
|
||||
}
|
||||
|
||||
// FAQ Accordion Toggle
|
||||
function toggleFaq(button) {
|
||||
const content = button.nextElementSibling;
|
||||
const icon = button.querySelector('i');
|
||||
if (content.classList.contains('hidden')) {
|
||||
content.classList.remove('hidden');
|
||||
icon.classList.add('rotate-180');
|
||||
} else {
|
||||
content.classList.add('hidden');
|
||||
icon.classList.remove('rotate-180');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle SEO / SSR Inspector Drawer
|
||||
function toggleInspector() {
|
||||
const drawer = document.getElementById('seoInspector');
|
||||
const toggleText = document.getElementById('toggleText');
|
||||
if (drawer.classList.contains('hidden')) {
|
||||
drawer.classList.remove('hidden');
|
||||
toggleText.innerText = '실제 사용자 화면만 보기';
|
||||
} else {
|
||||
drawer.classList.add('hidden');
|
||||
toggleText.innerText = 'SEO & SSR 구조 분석기 보기';
|
||||
}
|
||||
}
|
||||
|
||||
// Form submission simulation
|
||||
function handleFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
const phone = document.getElementById('parentPhone').value;
|
||||
const grade = document.getElementById('studentGrade').value;
|
||||
const subject = document.getElementById('weakSubject').value;
|
||||
|
||||
if (!phone || phone.length < 12) {
|
||||
alertModal("올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Show Feedback Box smoothly
|
||||
const resultBox = document.getElementById('submitResultBox');
|
||||
resultBox.classList.remove('hidden');
|
||||
resultBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
|
||||
// Disable button briefly
|
||||
const btn = event.target.querySelector('button[type="submit"]');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = `<i class="fa-solid fa-check"></i> <span>신청 완료 (상담 매니저 배정 중)</span>`;
|
||||
btn.classList.remove('btn-bounce');
|
||||
btn.classList.add('opacity-75');
|
||||
}
|
||||
|
||||
// Safe inline modal alternative (Never use browser alert)
|
||||
function alertModal(msg) {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = "fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50";
|
||||
modal.innerHTML = `
|
||||
<div class="bg-white rounded-2xl p-5 max-w-xs w-full shadow-2xl text-center">
|
||||
<div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto mb-3 text-xl">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
</div>
|
||||
<p class="text-xs text-slate-800 font-bold mb-4 leading-relaxed">${msg}</p>
|
||||
<button onclick="this.closest('.fixed').remove()" class="w-full bg-brand-blue text-white text-xs font-bold py-2.5 rounded-xl">확인</button>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+2
-2
@@ -15,11 +15,11 @@ FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
ENV PORT=80
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
COPY --from=builder /app/.output ./.output
|
||||
|
||||
EXPOSE 3000
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="footer-meta">
|
||||
전국 초·중·고 1:1 맞춤 방문과외 및 실시간 화상코칭 서비스 | 대표번호: 010-5961-5807<br />
|
||||
사업자등록번호: 123-45-67890 | 통신판매업신고: 제2026-서울강남-0123호 | 개인정보관리책임자: 교육연구소<br />
|
||||
주소: 서울특별시 강남구 테헤란로 123 에듀빌딩 4층
|
||||
주소: 서울특별시 강남구 테헤란로 123 비전타워 4층
|
||||
</p>
|
||||
<p class="footer-copy">
|
||||
Copyright © 2026 {{ siteName }}. All rights reserved.
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '에듀로열 1:1 과외'
|
||||
const siteName = config.public.siteName || '새솔 1:1 맞춤과외'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -5,12 +5,12 @@ services:
|
||||
build: .
|
||||
container_name: aeseo_shop_frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "80:3000"
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.shop
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=3000
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site2
|
||||
|
||||
@@ -20,7 +20,7 @@ export default defineNuxtConfig({
|
||||
runtimeConfig: {
|
||||
discordWebhookUrl: process.env.DISCORD_WEBHOOK_URL || 'https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu',
|
||||
public: {
|
||||
siteName: '새솔에듀 1:1 과외',
|
||||
siteName: '새솔 1:1 맞춤과외',
|
||||
siteDomain: process.env.SITE_DOMAIN || 'https://aeseo.shop',
|
||||
naverVerificationKey: process.env.NAVER_VERIFICATION_KEY || 'naver_search_advisor_key_site2'
|
||||
}
|
||||
@@ -36,8 +36,12 @@ export default defineNuxtConfig({
|
||||
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
|
||||
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
|
||||
{ rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css' },
|
||||
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' },
|
||||
{ rel: 'stylesheet', href: '/css/theme.css' }
|
||||
],
|
||||
script: [
|
||||
{ src: 'https://cdn.tailwindcss.com' }
|
||||
],
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' },
|
||||
|
||||
+615
-63
@@ -1,91 +1,643 @@
|
||||
<template>
|
||||
<div class="landing-page-wrap">
|
||||
<!-- 상단 히어로 배너 (Header 제거) -->
|
||||
<HeroBanner
|
||||
:region="defaultRegion"
|
||||
grade="초·중·고"
|
||||
subjectName="국영수사과"
|
||||
/>
|
||||
<div class="landing-container bg-[#F0FDF4] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
|
||||
|
||||
<!-- SSR & SEO 상태 인스펙터 -->
|
||||
<aside class="sticky top-0 z-50 bg-slate-900 text-white text-xs px-4 py-2 border-b border-slate-700 shadow-md w-full">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-emerald-500/20 text-emerald-400 border border-emerald-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> Nuxt 3 SSR
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-teal-500/20 text-teal-300 border border-teal-500/40">
|
||||
<i class="fa-solid fa-magnifying-glass-chart mr-1"></i> 초·중등 공부습관 진단 특화
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="showInspector = !showInspector" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-700 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span>{{ showInspector ? '실제 화면만 보기' : 'SEO & SSR 사양 검증' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 실시간 성과 지표 4선 -->
|
||||
<QuickMetrics regionDong="전국" />
|
||||
<!-- 인스펙터 서랍 -->
|
||||
<section v-if="showInspector" class="bg-slate-950 text-slate-200 border-b border-slate-800 p-4 transition-all w-full">
|
||||
<div class="max-w-6xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-emerald-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> [{{ siteName }}] 초·중등 자기주도 학습 정밀 분석 엔진
|
||||
</h2>
|
||||
<button @click="showInspector = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-emerald-400 font-bold block mb-1">1. 자기주도 메타인지 구조</span>
|
||||
<p class="text-slate-400">초·중등 학생의 공부 흥미와 집중 패턴을 진단하여 H1~H3 트리로 최적화했습니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-teal-400 font-bold block mb-1">2. 구조화 데이터 & 리치스니펫</span>
|
||||
<p class="text-slate-400">네이버 Yeti 및 구글 봇의 FAQPage 구조화 데이터 색인을 통해 검색 주목도를 극대화합니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-amber-400 font-bold block mb-1">3. 실시간 매니저 알림</span>
|
||||
<p class="text-slate-400">신청서 접수 즉시 24시간 이내 학생 성향 맞춤 전문 멘토 배정을 위한 알림이 전송됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인근 학교별 내신 기출 분석 -->
|
||||
<NearbySchools regionDong="주요 학군" />
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm w-full">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-emerald-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
S
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-emerald-900">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full ml-1.5 border border-emerald-200">초·중등 습관코칭</span>
|
||||
</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-emerald-700 transition">
|
||||
<i class="fa-solid fa-phone text-emerald-700"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="bg-emerald-700 hover:bg-emerald-800 text-white text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition shadow-md flex items-center gap-1.5">
|
||||
<span>습관 진단 신청</span>
|
||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 과목별 커리큘럼 -->
|
||||
<SubjectMastery
|
||||
regionDong="전국"
|
||||
grade="중·고등"
|
||||
:curriculum="defaultCurriculum"
|
||||
/>
|
||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
||||
<main class="w-full bg-[#F0FDF4] min-h-screen pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (에메랄드/그린 그라데이션 풀와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#064E3B] via-[#056D4E] to-[#047857] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
|
||||
<div class="absolute -right-24 -top-24 w-96 h-96 bg-emerald-400/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
|
||||
<!-- 강사진 4단계 검증 프로세스 -->
|
||||
<TeacherVerification />
|
||||
<div class="max-w-4xl mx-auto relative z-10">
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-emerald-100 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-amber-400 animate-ping"></span>
|
||||
<span>우리 아이 평생 성적을 결정짓는 공부 습관</span>
|
||||
</div>
|
||||
|
||||
<!-- 메타인지 스터디 플래너 코칭 -->
|
||||
<CoachingSystem />
|
||||
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
|
||||
스스로 책상에 앉게 만드는<br class="hidden sm:inline">
|
||||
<span class="text-emerald-200 underline decoration-wavy decoration-emerald-300">초·중등 1:1 맞춤 학습 습관 진단</span> 무료 신청
|
||||
</h1>
|
||||
|
||||
<!-- 실제 성적 향상 수기 -->
|
||||
<SuccessStories regionDong="수강생" />
|
||||
<p class="text-xs sm:text-base text-emerald-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
기초 개념 부족과 공부 집중력 부재, 1:1 밀착 코칭으로 자신감과 성적을 동시에 올려드립니다.
|
||||
</p>
|
||||
|
||||
<!-- 수업 진행 절차 -->
|
||||
<ProcessGuide />
|
||||
<!-- 지표 카운터 -->
|
||||
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-emerald-200">누적 습관 코칭</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">18,920<span class="text-xs sm:text-sm font-normal">건</span></div>
|
||||
</div>
|
||||
<div class="border-x border-white/20">
|
||||
<div class="text-[11px] sm:text-xs text-emerald-200">자기주도 멘토</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-emerald-200 mt-0.5">4,120<span class="text-xs sm:text-sm font-normal">명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-emerald-200">학부모 만족도</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">99.1<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 자주 묻는 질문 -->
|
||||
<FaqAccordion regionDong="전국" />
|
||||
<!-- 실시간 롤링 알림 -->
|
||||
<div class="bg-black/30 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-200 border border-white/15 mx-auto max-w-md shadow-md">
|
||||
<span class="bg-emerald-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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||||
<FastConsultFocus regionDong="전국" grade="중·고등" subjectName="국영수" />
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800 mb-2">
|
||||
선착순 30명 한정 전액 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
우리 아이 공부 고민을 알려주세요!
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
공부 습관과 기초를 분석하여 다정하고 꼼꼼한 전담 멘토를 연결해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-5">
|
||||
|
||||
<!-- 학년 & 취약 과목 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학년 선택 <span class="text-emerald-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-emerald-600 focus:border-emerald-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~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-emerald-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-emerald-600 focus:border-emerald-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-emerald-700 font-semibold">터치 시 자동 선택</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-2 text-center">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-emerald-600 bg-emerald-50 text-emerald-800 ring-2 ring-emerald-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-emerald-400 bg-white'
|
||||
]"
|
||||
>
|
||||
<span>{{ subj.label }}</span>
|
||||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-emerald-700 font-semibold' : 'text-slate-400'">
|
||||
{{ subj.badge }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 공부 고민 체크박스 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-xl cursor-pointer hover:bg-emerald-50/50 transition">
|
||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-emerald-600 rounded border-slate-300 focus:ring-emerald-500">
|
||||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
거주 지역 및 학교명 <span class="text-slate-400 font-normal text-xs">(교과서 출판사 연계용)</span>
|
||||
</label>
|
||||
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 서울 송파구 잠실동 / 잠신중" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-emerald-600 focus:border-emerald-600 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-emerald-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(진단 결과 및 교재 추천 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-emerald-600 focus:border-emerald-600 p-3.5 pl-11 outline-none tracking-wider"
|
||||
>
|
||||
<i class="fa-solid fa-mobile-screen-button absolute left-4 top-4 text-slate-400 text-base"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 개인정보 동의 -->
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
|
||||
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-emerald-600 rounded border-slate-300 focus:ring-emerald-500">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isSubmitting"
|
||||
class="w-full bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-600 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<i class="fa-solid fa-seedling 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>
|
||||
</div>
|
||||
|
||||
<!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
|
||||
<div class="mt-3 p-3.5 bg-emerald-50/90 border border-emerald-200/90 rounded-xl flex items-start gap-2.5 text-xs text-emerald-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-emerald-600 mt-0.5 text-sm shrink-0"></i>
|
||||
<div>
|
||||
<strong class="font-bold text-emerald-950 block mb-0.5">📢 원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-emerald-900 underline hover:text-emerald-700">010-5961-5807</a>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- 완료 메시지 -->
|
||||
<div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-2xl text-emerald-900 text-xs sm:text-sm">
|
||||
<div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-emerald-800">
|
||||
<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
|
||||
<span>맞춤 진단 신청이 성공적으로 접수되었습니다!</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
기재해주신 연락처로 <strong>‘초·중등 자기주도 공부습관 정밀 진단서’</strong>가 발송되며, 전문 학습 코칭 매니저가 유선으로 심층 분석 결과를 안내해 드립니다.
|
||||
</p>
|
||||
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
|
||||
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
|
||||
<span><strong>💡 안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4대 혜택 섹션 (데스크톱 4열 그리드) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-emerald-700 tracking-wider uppercase bg-emerald-100 px-3 py-1 rounded-full">EXCLUSIVE BENEFITS</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">새솔 맞춤과외 4대 특별 혜택</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">공부 습관이 자리잡을 때까지 세심하게 관리합니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-emerald-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-brain"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">메타인지 공부습관 진단</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">아이의 집중 시간과 공부 방해 요인 정밀 분석</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-teal-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-teal-100 text-teal-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-book-open"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-teal-700 bg-teal-50 px-2 py-0.5 rounded mb-1.5">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">단원별 핵심 개념 마인드맵</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">초·중등 핵심 교과 개념을 한눈에 정리하는 워크시트</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-amber-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-amber-100 text-amber-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-arrows-rotate"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-amber-700 bg-amber-50 px-2 py-0.5 rounded mb-1.5">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">매일 15분 복습 플래너</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">당일 배운 내용을 완벽히 내 것으로 만드는 복습 루틴</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-hand-holding-heart"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-blue-700 bg-blue-50 px-2 py-0.5 rounded mb-1.5">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">공감형 전담 멘토 매칭</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">아이의 눈높이에 맞춰 동기부여를 북돋워주는 전문 선생님</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-emerald-700 tracking-wider bg-emerald-100 px-3 py-1 rounded-full">SUCCESS 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">새솔 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-emerald-100 text-emerald-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">잠실동 중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">코칭 전: 55점 (수포자 직전)</span>
|
||||
<span class="text-emerald-700 font-bold">코칭 후: 92점 (단원평가 만점) 🎉</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-emerald-600 h-3 rounded-full" style="width: 88%"></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>
|
||||
|
||||
<!-- 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-teal-100 text-teal-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">명일동 초6 최OO 학생</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">3개월 만에 달성</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">코칭 전: 스마트폰 중독 (공부 30분 미만)</span>
|
||||
<span class="text-teal-700 font-bold">코칭 후: 일일 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-teal-600 h-3 rounded-full" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"플래너 쓰는 법을 배우고 스티커를 채우면서 매일 해야 할 공부를 스스로 끝내는 습관이 생겼습니다."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">잠실 레이크팰리스 정OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"아이가 스스로 책상에 앉아 숙제를 끝내는 모습을 보고 정말 감동받았습니다. 선생님이 정말 친절하세요."</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-xs 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>
|
||||
</section>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>{{ faq.q }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 안심 보장 뱃지 -->
|
||||
<section class="mt-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-emerald-50/80 border border-emerald-100 text-center shadow-sm">
|
||||
<div class="flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-emerald-950 mb-3">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-emerald-700 text-base"></i> 학력·신원 철저 검증</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-heart text-rose-500 text-base"></i> 인성 & 공감 멘토링</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-rotate text-teal-600 text-base"></i> 안심 무료 재매칭</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto">
|
||||
{{ siteName }}은 아이의 학습 스트레스를 해소하고 성취감을 키워주는 따뜻한 교육을 지향합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 하단 직통 전화 문의 & 상담 안내 섹션 -->
|
||||
<section class="mt-8 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 sm:p-8 rounded-3xl bg-white border border-slate-200 text-center shadow-sm">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-emerald-50 text-emerald-700 font-bold text-xs rounded-full mb-3">
|
||||
<i class="fa-solid fa-headset"></i> 실시간 전화 상담 센터
|
||||
</div>
|
||||
<h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 mb-2">
|
||||
문의 번호 : <a href="tel:010-5961-5807" class="text-emerald-700 hover:underline">010-5961-5807</a>
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm font-medium text-slate-600 max-w-lg mx-auto leading-relaxed">
|
||||
📢 <strong>안내:</strong> 전화 상담 시 <strong>상담결과를 전달해 주시면</strong> 학생에게 가장 적합한 전담 선생님 배정과 맞춤 커리큘럼 조율이 훨씬 원활하고 신속하게 진행됩니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 모바일 고정 CTA 바 -->
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
|
||||
<i class="fa-solid fa-phone text-emerald-700 text-sm mb-0.5"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-600 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-seedling text-xs sm:text-sm"></i>
|
||||
<span>지금 무료 습관 진단 & 멘토 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 맨 하단 상담 신청 폼 -->
|
||||
<ConsultForm
|
||||
regionName="전국 전 지역"
|
||||
defaultSubject="영어"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurriculumBySubject, getRegionByDong } from '~/utils/dataHelper'
|
||||
import { generateSeoMeta } from '~/utils/seoHelper'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const defaultCurriculum = getCurriculumBySubject('english')
|
||||
const siteName = config.public.siteName || '새솔 1:1 맞춤과외'
|
||||
const siteDomain = config.public.siteDomain || 'https://aeseo.shop'
|
||||
|
||||
const defaultRegion = getRegionByDong('황금동') || {
|
||||
fullName: '대한민국 전국 전 지역',
|
||||
sido: '전국',
|
||||
sigungu: '전지역',
|
||||
dong: '전국'
|
||||
const showInspector = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const rollingMessages = [
|
||||
"서울 송파구 잠실동 중2 수학 개념 정밀 진단 접수 (방금 전)",
|
||||
"서울 강동구 명일동 초6 중등선행 영어 신청 완료 (2분 전)",
|
||||
"경기 하남시 미사동 중1 자기주도 공부습관 리포트 신청 (4분 전)",
|
||||
"경기 성남시 위례동 초5 문해력 진단 신청 (6분 전)",
|
||||
"서울 송파구 문정동 초4 기초연산 클리닉 접수 완료 (8분 전)"
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: 'PICK' },
|
||||
{ name: '전과목/공부습관', label: '전과목', badge: '추천' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'스스로 책상에 앉지 않는 공부습관',
|
||||
'교과서 기초 개념 및 연산 부족',
|
||||
'대형 학원 진도 스트레스',
|
||||
'중등 진학 대비 선행 불안'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '초등 4~6학년',
|
||||
subject: '수학',
|
||||
concerns: ['스스로 책상에 앉지 않는 공부습관'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
})
|
||||
|
||||
const faqs = reactive([
|
||||
{
|
||||
q: '1. 초등학생이나 기초가 부족한 아이도 수업이 가능한가요?',
|
||||
a: '네, 물론입니다. 새솔 맞춤과외는 기초가 약하거나 공부에 흥미를 잃은 아이들을 위해 칭찬과 성취감 중심의 1:1 맞춤 커리큘럼을 제공합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 진단 신청 후 상담 절차는 어떻게 되나요?',
|
||||
a: '신청 즉시 전담 학습 매니저가 유선으로 아이의 현재 학습 상태와 성향을 파악한 후, 가장 잘 맞는 공감형 선생님을 매칭해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 선생님 성향이 아이와 맞지 않으면 어떻게 하나요?',
|
||||
a: '수업 진행 중 아이와 성향이 맞지 않을 경우 별도의 추가 비용 없이 즉시 다른 전문 선생님으로 무상 재매칭을 진행해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 방문 수업 외에 화상 수업도 지원되나요?',
|
||||
a: '네, 대면 방문 과외뿐만 아니라 실시간 양방향 화상 과외도 가능하여 가정의 환경에 맞춰 선택하실 수 있습니다.',
|
||||
open: false
|
||||
}
|
||||
])
|
||||
|
||||
function formatPhone() {
|
||||
let val = formData.phone.replace(/[^0-9]/g, '')
|
||||
if (val.length > 3 && val.length <= 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3)
|
||||
} else if (val.length > 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11)
|
||||
} else {
|
||||
formData.phone = val
|
||||
}
|
||||
}
|
||||
|
||||
const seo = generateSeoMeta(
|
||||
{
|
||||
region: defaultRegion,
|
||||
sido: '전국',
|
||||
sigungu: '맞춤',
|
||||
dong: '1:1',
|
||||
grade: '초중고',
|
||||
subjectName: '전과목',
|
||||
targetTerm: '방문·화상과외',
|
||||
fullKeyword: '전국 초중고 1:1 방문 과외 및 실시간 화상과외'
|
||||
},
|
||||
config.public.siteName,
|
||||
config.public.siteDomain
|
||||
)
|
||||
async function handleSubmit() {
|
||||
if (!formData.phone || formData.phone.length < 12) {
|
||||
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const res = await $fetch('/api/consult', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: '학부모 (습관진단신청)',
|
||||
phone: formData.phone,
|
||||
grade: formData.grade,
|
||||
schoolName: formData.region || '지역 미기재',
|
||||
location: formData.region || '온라인 랜딩',
|
||||
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
|
||||
url: window.location.href
|
||||
}
|
||||
})
|
||||
|
||||
if (res && res.success) {
|
||||
submitSuccess.value = true
|
||||
setTimeout(() => {
|
||||
document.getElementById('submitResultBox')?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, 100)
|
||||
} else {
|
||||
alert('신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('접수 처리 중 문제가 발생했습니다.')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `${config.public.siteName} | 전국 초·중·고 1:1 맞춤 방문과외 & 화상코칭`,
|
||||
meta: seo.meta,
|
||||
link: seo.link,
|
||||
script: seo.script
|
||||
title: `${siteName} | 초·중등 자기주도 공부습관 & 1:1 맞춤과외`,
|
||||
meta: [
|
||||
{ name: 'description', content: `${siteName} - 초·중등 기초 개념 완성 및 올바른 공부 습관 정밀 진단 리포트 무료 신청.` },
|
||||
{ property: 'og:title', content: `${siteName} | 초·중등 1:1 맞춤 학습 습관 진단` },
|
||||
{ property: 'og:description', content: '스스로 공부하는 힘! 학년별 맞춤 진단과 공감형 전문 멘토 매칭.' },
|
||||
{ property: 'og:url', content: siteDomain }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
children: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'EducationalOrganization',
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '서울·경기 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.landing-page-wrap {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
.landing-container {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* site2: 새솔에듀 - 자연주의 포레스트 그린 & 프레시 민트 */
|
||||
/* site2: 새솔 - 자연주의 포레스트 그린 & 프레시 민트 */
|
||||
:root {
|
||||
--primary-color: #065f46;
|
||||
--primary-dark: #022c22;
|
||||
|
||||
@@ -2,7 +2,7 @@ import regionsData from '../../data/regions.json'
|
||||
|
||||
export default defineEventHandler((event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const baseUrl = config.public.siteDomain || 'https://site1.eduroyal.co.kr'
|
||||
const baseUrl = config.public.siteDomain || 'https://aeseo.shop'
|
||||
const list = regionsData.list as Array<{ sido: string, sigungu: string, dong: string }>
|
||||
|
||||
const subjects = ['영어', '수학', '국어', '통합과학', '통합사회']
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ParsedRouteParams } from './dataHelper'
|
||||
import { getShortRegionName } from './dataHelper'
|
||||
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '에듀로열 1:1 과외', siteDomain = 'https://site1.eduroyal.co.kr') {
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '새솔 1:1 맞춤과외', siteDomain = 'https://aeseo.shop') {
|
||||
const { sido, sigungu, dong, shortRegionName, grade, subjectName, targetTerm, fullKeyword } = parsed
|
||||
|
||||
const regionTitle = shortRegionName || getShortRegionName(sido, dong)
|
||||
|
||||
+2
-2
@@ -15,11 +15,11 @@ FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
ENV PORT=80
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
COPY --from=builder /app/.output ./.output
|
||||
|
||||
EXPOSE 3000
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="footer-meta">
|
||||
전국 초·중·고 1:1 맞춤 방문과외 및 실시간 화상코칭 서비스 | 대표번호: 010-5961-5807<br />
|
||||
사업자등록번호: 123-45-67890 | 통신판매업신고: 제2026-서울강남-0123호 | 개인정보관리책임자: 교육연구소<br />
|
||||
주소: 서울특별시 강남구 테헤란로 123 에듀빌딩 4층
|
||||
주소: 서울특별시 강남구 테헤란로 123 비전타워 4층
|
||||
</p>
|
||||
<p class="footer-copy">
|
||||
Copyright © 2026 {{ siteName }}. All rights reserved.
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '에듀로열 1:1 과외'
|
||||
const siteName = config.public.siteName || '테크노바 스마트러닝'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -5,12 +5,12 @@ services:
|
||||
build: .
|
||||
container_name: aeseo_site_frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "80:3000"
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.site
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=3000
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site3
|
||||
|
||||
@@ -20,7 +20,7 @@ export default defineNuxtConfig({
|
||||
runtimeConfig: {
|
||||
discordWebhookUrl: process.env.DISCORD_WEBHOOK_URL || 'https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu',
|
||||
public: {
|
||||
siteName: '테크노바 스마트에듀',
|
||||
siteName: '테크노바 스마트러닝',
|
||||
siteDomain: process.env.SITE_DOMAIN || 'https://aeseo.site',
|
||||
naverVerificationKey: process.env.NAVER_VERIFICATION_KEY || 'naver_search_advisor_key_site3'
|
||||
}
|
||||
@@ -36,8 +36,12 @@ export default defineNuxtConfig({
|
||||
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
|
||||
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
|
||||
{ rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css' },
|
||||
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' },
|
||||
{ rel: 'stylesheet', href: '/css/theme.css' }
|
||||
],
|
||||
script: [
|
||||
{ src: 'https://cdn.tailwindcss.com' }
|
||||
],
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' },
|
||||
|
||||
+615
-63
@@ -1,91 +1,643 @@
|
||||
<template>
|
||||
<div class="landing-page-wrap">
|
||||
<!-- 상단 히어로 배너 (Header 제거) -->
|
||||
<HeroBanner
|
||||
:region="defaultRegion"
|
||||
grade="초·중·고"
|
||||
subjectName="국영수사과"
|
||||
/>
|
||||
<div class="landing-container bg-[#F0F9FF] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
|
||||
|
||||
<!-- SSR & SEO 상태 인스펙터 -->
|
||||
<aside class="sticky top-0 z-50 bg-slate-900 text-white text-xs px-4 py-2 border-b border-slate-700 shadow-md w-full">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-cyan-500/20 text-cyan-400 border border-cyan-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> Nuxt 3 SSR
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-sky-500/20 text-sky-300 border border-sky-500/40">
|
||||
<i class="fa-solid fa-microchip mr-1"></i> AI 데이터 취약점 정밀 진단
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="showInspector = !showInspector" class="px-3 py-1 bg-sky-600 hover:bg-sky-700 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span>{{ showInspector ? '실제 화면만 보기' : 'SEO & SSR 사양 검증' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 실시간 성과 지표 4선 -->
|
||||
<QuickMetrics regionDong="전국" />
|
||||
<!-- 인스펙터 서랍 -->
|
||||
<section v-if="showInspector" class="bg-slate-950 text-slate-200 border-b border-slate-800 p-4 transition-all w-full">
|
||||
<div class="max-w-6xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-cyan-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> [{{ siteName }}] AI 빅데이터 진단 엔진 & SEO 아키텍처
|
||||
</h2>
|
||||
<button @click="showInspector = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-cyan-400 font-bold block mb-1">1. AI 핀포인트 시맨틱 트리</span>
|
||||
<p class="text-slate-400">오답 원인 역추적과 취약 단원 분석 키워드가 검색 봇에 100% 구조화되어 전달됩니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-sky-400 font-bold block mb-1">2. Schema.org 데이터 통합</span>
|
||||
<p class="text-slate-400">EducationalOrganization과 FAQPage 규격으로 구글 및 네이버 검색 리치 결과에 노출됩니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-emerald-400 font-bold block mb-1">3. 실시간 AI 매칭 알림</span>
|
||||
<p class="text-slate-400">데이터 입력 즉시 담당 전문 컨설턴트에게 실시간 디스코드 알림이 발송됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인근 학교별 내신 기출 분석 -->
|
||||
<NearbySchools regionDong="주요 학군" />
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm w-full">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-sky-600 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
T
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-sky-950">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-cyan-700 bg-cyan-50 px-2 py-0.5 rounded-full ml-1.5 border border-cyan-200">AI SMART 진단</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-sky-600 transition">
|
||||
<i class="fa-solid fa-phone text-sky-600"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="bg-sky-600 hover:bg-sky-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>AI 진단 신청</span>
|
||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 과목별 커리큘럼 -->
|
||||
<SubjectMastery
|
||||
regionDong="전국"
|
||||
grade="중·고등"
|
||||
:curriculum="defaultCurriculum"
|
||||
/>
|
||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
||||
<main class="w-full bg-[#F0F9FF] min-h-screen pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (테크 블루 & 사이언 풀와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#0369A1] via-[#0275B2] to-[#0284C7] 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-cyan-400/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-sky-300/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
|
||||
<!-- 강사진 4단계 검증 프로세스 -->
|
||||
<TeacherVerification />
|
||||
<div class="max-w-4xl mx-auto relative z-10">
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-sky-100 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-cyan-300 animate-ping"></span>
|
||||
<span>빅데이터 12만 건 학습 분석 알고리즘 탑재</span>
|
||||
</div>
|
||||
|
||||
<!-- 메타인지 스터디 플래너 코칭 -->
|
||||
<CoachingSystem />
|
||||
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
|
||||
빅데이터 AI 정밀 분석 기반<br class="hidden sm:inline">
|
||||
<span class="text-cyan-200 underline decoration-wavy decoration-cyan-300">취약 단원 핀포인트 1:1 클리닉</span> 무료 리포트 신청
|
||||
</h1>
|
||||
|
||||
<!-- 실제 성적 향상 수기 -->
|
||||
<SuccessStories regionDong="수강생" />
|
||||
<p class="text-xs sm:text-base text-sky-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
어디서 틀리는지 모르는 막연한 공부는 끝! 취약 개념을 역추적하여 가장 빠른 성적 향상 지름길을 찾아드립니다.
|
||||
</p>
|
||||
|
||||
<!-- 수업 진행 절차 -->
|
||||
<ProcessGuide />
|
||||
<!-- 지표 카운터 -->
|
||||
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-sky-200">AI 정밀 진단</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">31,450<span class="text-xs sm:text-sm font-normal">건</span></div>
|
||||
</div>
|
||||
<div class="border-x border-white/20">
|
||||
<div class="text-[11px] sm:text-xs text-sky-200">오답 패턴 데이터</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-cyan-200 mt-0.5">12만<span class="text-xs sm:text-sm font-normal">개</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-sky-200">성적 향상률</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">98.9<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 자주 묻는 질문 -->
|
||||
<FaqAccordion regionDong="전국" />
|
||||
<!-- 실시간 롤링 알림 -->
|
||||
<div class="bg-black/30 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-200 border border-white/15 mx-auto max-w-md shadow-md">
|
||||
<span class="bg-sky-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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||||
<FastConsultFocus regionDong="전국" grade="중·고등" subjectName="국영수" />
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-sky-100 text-sky-800 mb-2">
|
||||
선착순 30명 AI 정밀 분석 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
분석받고 싶은 과목과 학년을 선택하세요!
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
오답 패턴을 정밀 진단하여 최적의 단원 보완 플랜과 전문 선생님을 매칭합니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-5">
|
||||
|
||||
<!-- 학년 & 취약 과목 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학년 선택 <span class="text-sky-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-sky-600 focus:border-sky-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학년 (공통수학/영어)</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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
취약 과목 <span class="text-sky-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-sky-600 focus:border-sky-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-sky-600 font-semibold">터치 시 자동 선택</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-2 text-center">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-sky-600 bg-sky-50 text-sky-800 ring-2 ring-sky-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-sky-400 bg-white'
|
||||
]"
|
||||
>
|
||||
<span>{{ subj.label }}</span>
|
||||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-sky-700 font-semibold' : 'text-slate-400'">
|
||||
{{ subj.badge }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 공부 고민 체크박스 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-xl cursor-pointer hover:bg-sky-50/50 transition">
|
||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-sky-600 rounded border-slate-300 focus:ring-sky-500">
|
||||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
거주 지역 및 학교명 <span class="text-slate-400 font-normal text-xs">(지역 내신 기출 DB 매칭)</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-sky-600 focus:border-sky-600 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-sky-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(AI 정밀 진단표 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-sky-600 focus:border-sky-600 p-3.5 pl-11 outline-none tracking-wider"
|
||||
>
|
||||
<i class="fa-solid fa-mobile-screen-button absolute left-4 top-4 text-slate-400 text-base"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 개인정보 동의 -->
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
|
||||
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-sky-600 rounded border-slate-300 focus:ring-sky-500">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isSubmitting"
|
||||
class="w-full bg-gradient-to-r from-sky-600 via-cyan-600 to-sky-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"
|
||||
>
|
||||
<i class="fa-solid fa-chart-column text-lg"></i>
|
||||
<span>{{ isSubmitting ? 'AI 분석 중...' : 'AI 진단 리포트 & 1:1 클리닉 신청하기' }}</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-sky-50/90 border border-sky-200/90 rounded-xl flex items-start gap-2.5 text-xs text-sky-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-sky-600 mt-0.5 text-sm shrink-0"></i>
|
||||
<div>
|
||||
<strong class="font-bold text-sky-950 block mb-0.5">📢 원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-sky-900 underline hover:text-sky-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>AI 정밀 진단 신청이 성공적으로 접수되었습니다!</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
기재해주신 연락처로 <strong>‘AI 취약 단원 분석 리포트’</strong>가 발송되며, 전문 입시 분석관이 유선으로 심층 솔루션을 안내해 드립니다.
|
||||
</p>
|
||||
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
|
||||
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
|
||||
<span><strong>💡 안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4대 혜택 섹션 (데스크톱 4열 그리드) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-sky-700 tracking-wider uppercase bg-sky-100 px-3 py-1 rounded-full">TECHNOVA BENEFITS</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">테크노바 스마트러닝 4대 특화 혜택</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">데이터 분석으로 취약점만 콕 집어 최단기 성적 향상을 이끕니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-sky-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-sky-100 text-sky-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-brain"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-sky-700 bg-sky-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">취약 단원 역추적 시트</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">어느 단원에서 구멍이 생겼는지 5단계 오답 원인 분석</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-cyan-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-cyan-100 text-cyan-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-database"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-cyan-700 bg-cyan-50 px-2 py-0.5 rounded mb-1.5">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">학군별 3개년 킬러족보</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">분당·판교·강남 주요 학교별 고난도 변별력 문항 모음</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-chart-line"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-blue-700 bg-blue-50 px-2 py-0.5 rounded mb-1.5">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">1:1 약점 클리닉 워크북</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">틀린 유형과 유사한 변형 문제만 선별 제공</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-indigo-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-user-gear"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded mb-1.5">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">데이터 분석 전문 강사진</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">학생의 오답 성향에 최적화된 1:1 전담 매칭</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-sky-700 tracking-wider bg-sky-100 px-3 py-1 rounded-full">DATA-DRIVEN SUCCESS</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-sky-100 text-sky-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>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">3개월 만에 달성</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">진단 전: 4등급 (52점)</span>
|
||||
<span class="text-sky-700 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-sky-600 h-3 rounded-full" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"어디서 틀리는지 모른 채 무작정 문제집만 풀었는데, AI 리포트로 이차함수 판별식 연계 개념이 비어있다는 걸 알고 단기간에 메꿨습니다."
|
||||
</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-cyan-100 text-cyan-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>
|
||||
</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">진단 전: 62점 (C등급)</span>
|
||||
<span class="text-cyan-700 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-cyan-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">
|
||||
"물리 파트 공식 유도와 계산 실수 패턴을 정확히 잡아주셔서 내신 시험에서 만점에 가까운 점수를 받았습니다."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">분당 파크뷰 학부모 이OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"AI 진단표가 학원 상담보다 훨씬 객관적이고 정확했습니다. 어디에 집중해야 할지 명확해졌어요."</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">판교 백현마을 학부모 강OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"시간 낭비 없이 부족한 단원만 집중 공략하니 단 2개월 만에 성적이 수직 상승했습니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>{{ faq.q }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 안심 보장 뱃지 -->
|
||||
<section class="mt-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-sky-50/80 border border-sky-100 text-center shadow-sm">
|
||||
<div class="flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-sky-950 mb-3">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-sky-700 text-base"></i> AI 검증 매칭</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-chart-pie text-cyan-600 text-base"></i> 월간 분석 리포트</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-rotate text-indigo-600 text-base"></i> 무료 재매칭 지원</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto">
|
||||
{{ siteName }}은 과학적인 데이터 기반 매칭 시스템으로 학습 효과를 극대화합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 하단 직통 전화 문의 & 상담 안내 섹션 -->
|
||||
<section class="mt-8 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 sm:p-8 rounded-3xl bg-white border border-slate-200 text-center shadow-sm">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-sky-50 text-sky-700 font-bold text-xs rounded-full mb-3">
|
||||
<i class="fa-solid fa-headset"></i> 실시간 전화 상담 센터
|
||||
</div>
|
||||
<h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 mb-2">
|
||||
문의 번호 : <a href="tel:010-5961-5807" class="text-sky-700 hover:underline">010-5961-5807</a>
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm font-medium text-slate-600 max-w-lg mx-auto leading-relaxed">
|
||||
📢 <strong>안내:</strong> 전화 상담 시 <strong>상담결과를 전달해 주시면</strong> 학생에게 가장 적합한 전담 선생님 배정과 맞춤 커리큘럼 조율이 훨씬 원활하고 신속하게 진행됩니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 모바일 고정 CTA 바 -->
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
|
||||
<i class="fa-solid fa-phone text-sky-600 text-sm mb-0.5"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-sky-600 via-cyan-600 to-sky-600 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-microchip text-xs sm:text-sm"></i>
|
||||
<span>지금 무료 AI 정밀 진단 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 맨 하단 상담 신청 폼 -->
|
||||
<ConsultForm
|
||||
regionName="전국 전 지역"
|
||||
defaultSubject="영어"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurriculumBySubject, getRegionByDong } from '~/utils/dataHelper'
|
||||
import { generateSeoMeta } from '~/utils/seoHelper'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const defaultCurriculum = getCurriculumBySubject('english')
|
||||
const siteName = config.public.siteName || '테크노바 스마트러닝'
|
||||
const siteDomain = config.public.siteDomain || 'https://aeseo.site'
|
||||
|
||||
const defaultRegion = getRegionByDong('황금동') || {
|
||||
fullName: '대한민국 전국 전 지역',
|
||||
sido: '전국',
|
||||
sigungu: '전지역',
|
||||
dong: '전국'
|
||||
const showInspector = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const rollingMessages = [
|
||||
"경기 성남시 분당구 수내동 고1 수학 킬러문항 AI 분석 접수 (방금 전)",
|
||||
"경기 성남시 판교동 중3 과학 탐구 오답 클리닉 신청 완료 (1분 전)",
|
||||
"경기 수원시 영통구 고2 영어 빈칸추론 정밀 진단 신청 (3분 전)",
|
||||
"경기 용인시 수지구 중2 수학 개념 단원 역추적 접수 (5분 전)",
|
||||
"서울 강남구 역삼동 중1 국어 비문학 정밀 분석 신청 (7분 전)"
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: '추천' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '사회/역사', label: '사회', badge: 'PICK' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'개념은 아는데 심화·킬러 문제에서 실패',
|
||||
'어느 단원이 부족한지 모르는 막연한 공부',
|
||||
'학원 숙제만 많고 실제 성적은 정체',
|
||||
'시험 시간 관리 및 잦은 계산 실수'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '고등학교 1학년',
|
||||
subject: '수학',
|
||||
concerns: ['개념은 아는데 심화·킬러 문제에서 실패'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
})
|
||||
|
||||
const faqs = reactive([
|
||||
{
|
||||
q: '1. AI 정밀 진단은 어떻게 진행되나요?',
|
||||
a: '신청서를 남겨주시면 최근 학교 시험지 및 모의고사 성적을 바탕으로 AI 알고리즘이 학생의 취약 단원과 오답 패턴을 5단계로 역추적하여 리포트를 제공합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 진단 후 과외 매칭은 어떻게 이루어지나요?',
|
||||
a: '분석된 취약 단원을 가장 빠르고 정확하게 메꿔줄 수 있는 전문 베테랑 선생님을 데이터 기반으로 우선 매칭해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 정밀 진단 비용이 정말 무료인가요?',
|
||||
a: '네, 현재 프로모션 기간 동안 신청하시는 모든 분께 AI 진단 리포트와 전문 학습 매니저의 전화 분석이 전액 무료로 제공됩니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 온라인 화상 과외도 가능한가요?',
|
||||
a: '네, 실시간 전자칠판 시스템을 통한 비대면 화상 과외와 방문 과외 중 원하시는 형태를 자유롭게 선택하실 수 있습니다.',
|
||||
open: false
|
||||
}
|
||||
])
|
||||
|
||||
function formatPhone() {
|
||||
let val = formData.phone.replace(/[^0-9]/g, '')
|
||||
if (val.length > 3 && val.length <= 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3)
|
||||
} else if (val.length > 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11)
|
||||
} else {
|
||||
formData.phone = val
|
||||
}
|
||||
}
|
||||
|
||||
const seo = generateSeoMeta(
|
||||
{
|
||||
region: defaultRegion,
|
||||
sido: '전국',
|
||||
sigungu: '맞춤',
|
||||
dong: '1:1',
|
||||
grade: '초중고',
|
||||
subjectName: '전과목',
|
||||
targetTerm: '방문·화상과외',
|
||||
fullKeyword: '전국 초중고 1:1 방문 과외 및 실시간 화상과외'
|
||||
},
|
||||
config.public.siteName,
|
||||
config.public.siteDomain
|
||||
)
|
||||
async function handleSubmit() {
|
||||
if (!formData.phone || formData.phone.length < 12) {
|
||||
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const res = await $fetch('/api/consult', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: '학부모 (AI진단신청)',
|
||||
phone: formData.phone,
|
||||
grade: formData.grade,
|
||||
schoolName: formData.region || '지역 미기재',
|
||||
location: formData.region || '온라인 랜딩',
|
||||
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
|
||||
url: window.location.href
|
||||
}
|
||||
})
|
||||
|
||||
if (res && res.success) {
|
||||
submitSuccess.value = true
|
||||
setTimeout(() => {
|
||||
document.getElementById('submitResultBox')?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, 100)
|
||||
} else {
|
||||
alert('신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('접수 처리 중 문제가 발생했습니다.')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `${config.public.siteName} | 전국 초·중·고 1:1 맞춤 방문과외 & 화상코칭`,
|
||||
meta: seo.meta,
|
||||
link: seo.link,
|
||||
script: seo.script
|
||||
title: `${siteName} | AI 취약 단원 역추적 1:1 스마트 맞춤과외`,
|
||||
meta: [
|
||||
{ name: 'description', content: `${siteName} - 빅데이터 AI 정밀 분석을 통한 초중고 취약 단원 역추적 및 1:1 과외 매칭 무료 리포트 신청.` },
|
||||
{ property: 'og:title', content: `${siteName} | AI 빅데이터 1:1 학습 정밀 진단` },
|
||||
{ property: 'og:description', content: '데이터로 찾는 성적 향상의 지름길! 취약 단원 핀포인트 클리닉.' },
|
||||
{ property: 'og:url', content: siteDomain }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
children: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'EducationalOrganization',
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '경기·서울 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.landing-page-wrap {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
.landing-container {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@ import regionsData from '../../data/regions.json'
|
||||
|
||||
export default defineEventHandler((event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const baseUrl = config.public.siteDomain || 'https://site1.eduroyal.co.kr'
|
||||
const baseUrl = config.public.siteDomain || 'https://aeseo.site'
|
||||
const list = regionsData.list as Array<{ sido: string, sigungu: string, dong: string }>
|
||||
|
||||
const subjects = ['영어', '수학', '국어', '통합과학', '통합사회']
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ParsedRouteParams } from './dataHelper'
|
||||
import { getShortRegionName } from './dataHelper'
|
||||
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '에듀로열 1:1 과외', siteDomain = 'https://site1.eduroyal.co.kr') {
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '테크노바 스마트러닝', siteDomain = 'https://aeseo.site') {
|
||||
const { sido, sigungu, dong, shortRegionName, grade, subjectName, targetTerm, fullKeyword } = parsed
|
||||
|
||||
const regionTitle = shortRegionName || getShortRegionName(sido, dong)
|
||||
|
||||
+2
-2
@@ -15,11 +15,11 @@ FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
ENV PORT=80
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
COPY --from=builder /app/.output ./.output
|
||||
|
||||
EXPOSE 3000
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="footer-meta">
|
||||
전국 초·중·고 1:1 맞춤 방문과외 및 실시간 화상코칭 서비스 | 대표번호: 010-5961-5807<br />
|
||||
사업자등록번호: 123-45-67890 | 통신판매업신고: 제2026-서울강남-0123호 | 개인정보관리책임자: 교육연구소<br />
|
||||
주소: 서울특별시 강남구 테헤란로 123 에듀빌딩 4층
|
||||
주소: 서울특별시 강남구 테헤란로 123 비전타워 4층
|
||||
</p>
|
||||
<p class="footer-copy">
|
||||
Copyright © 2026 {{ siteName }}. All rights reserved.
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '에듀로열 1:1 과외'
|
||||
const siteName = config.public.siteName || '패스파인더 입시과외'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -5,12 +5,12 @@ services:
|
||||
build: .
|
||||
container_name: aeseo_store_frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "80:3000"
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.store
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=3000
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site4
|
||||
|
||||
@@ -36,8 +36,12 @@ export default defineNuxtConfig({
|
||||
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
|
||||
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
|
||||
{ rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css' },
|
||||
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' },
|
||||
{ rel: 'stylesheet', href: '/css/theme.css' }
|
||||
],
|
||||
script: [
|
||||
{ src: 'https://cdn.tailwindcss.com' }
|
||||
],
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' },
|
||||
|
||||
+615
-63
@@ -1,91 +1,643 @@
|
||||
<template>
|
||||
<div class="landing-page-wrap">
|
||||
<!-- 상단 히어로 배너 (Header 제거) -->
|
||||
<HeroBanner
|
||||
:region="defaultRegion"
|
||||
grade="초·중·고"
|
||||
subjectName="국영수사과"
|
||||
/>
|
||||
<div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
|
||||
|
||||
<!-- SSR & SEO 상태 인스펙터 -->
|
||||
<aside class="sticky top-0 z-50 bg-slate-900 text-white text-xs px-4 py-2 border-b border-slate-700 shadow-md w-full">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-indigo-500/20 text-indigo-300 border border-indigo-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> Nuxt 3 SSR
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-orange-500/20 text-orange-300 border border-orange-500/40">
|
||||
<i class="fa-solid fa-school mr-1"></i> 학교별 내신 기출 족보 최적화
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="showInspector = !showInspector" class="px-3 py-1 bg-orange-600 hover:bg-orange-700 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span>{{ showInspector ? '실제 화면만 보기' : 'SEO & SSR 사양 검증' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 실시간 성과 지표 4선 -->
|
||||
<QuickMetrics regionDong="전국" />
|
||||
<!-- 인스펙터 서랍 -->
|
||||
<section v-if="showInspector" class="bg-slate-950 text-slate-200 border-b border-slate-800 p-4 transition-all w-full">
|
||||
<div class="max-w-6xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-orange-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> [{{ siteName }}] 중·고등 내신 기출 분석 아키텍처
|
||||
</h2>
|
||||
<button @click="showInspector = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-indigo-400 font-bold block mb-1">1. 내신 기출 시맨틱 구조</span>
|
||||
<p class="text-slate-400">인근 학교별 출제 경향과 서술형 킬러 문항 키워드를 검색봇이 직관적으로 색인합니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-orange-400 font-bold block mb-1">2. 구조화 데이터 탑재</span>
|
||||
<p class="text-slate-400">FAQPage 리치 스니펫과 교육기관 스키마를 통해 검색 포털 노출 점수를 극대화합니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-emerald-400 font-bold block mb-1">3. 실시간 내신 전담 배정</span>
|
||||
<p class="text-slate-400">기재된 학교의 기출 분석 데이터를 보유한 내신 전문 강사진이 실시간 배정됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인근 학교별 내신 기출 분석 -->
|
||||
<NearbySchools regionDong="주요 학군" />
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm w-full">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-indigo-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
P
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 과목별 커리큘럼 -->
|
||||
<SubjectMastery
|
||||
regionDong="전국"
|
||||
grade="중·고등"
|
||||
:curriculum="defaultCurriculum"
|
||||
/>
|
||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
||||
<main class="w-full bg-[#F8FAFC] min-h-screen 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>
|
||||
|
||||
<!-- 강사진 4단계 검증 프로세스 -->
|
||||
<TeacherVerification />
|
||||
<div class="max-w-4xl mx-auto relative z-10">
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-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>
|
||||
|
||||
<!-- 메타인지 스터디 플래너 코칭 -->
|
||||
<CoachingSystem />
|
||||
<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>
|
||||
|
||||
<!-- 실제 성적 향상 수기 -->
|
||||
<SuccessStories regionDong="수강생" />
|
||||
<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>
|
||||
|
||||
<!-- 수업 진행 절차 -->
|
||||
<ProcessGuide />
|
||||
<!-- 지표 카운터 -->
|
||||
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 자주 묻는 질문 -->
|
||||
<FaqAccordion regionDong="전국" />
|
||||
<!-- 실시간 롤링 알림 -->
|
||||
<div class="bg-black/30 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-200 border border-white/15 mx-auto max-w-md shadow-md">
|
||||
<span class="bg-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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||||
<FastConsultFocus regionDong="전국" grade="중·고등" subjectName="국영수" />
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-800 mb-2">
|
||||
선착순 30명 학교 기출 족보 요약본 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
내신 목표 과목과 학교를 입력해 주세요!
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
해당 학교의 기출 경향과 서술형 채점 기준을 완벽 분석해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-5">
|
||||
|
||||
<!-- 학년 & 취약 과목 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학년 선택 <span class="text-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">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-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'
|
||||
]"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 공부 고민 체크박스 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-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>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
재학 학교명 및 지역 <span class="text-slate-400 font-normal text-xs">(정확한 기출 매칭용)</span>
|
||||
</label>
|
||||
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 서울 양천구 목동 / 목운중" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-indigo-600 focus:border-indigo-600 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-orange-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(내신 기출 분석표 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-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>
|
||||
</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">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</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"
|
||||
>
|
||||
<i class="fa-solid fa-file-pen text-lg"></i>
|
||||
<span>{{ isSubmitting ? '족보 분석 중...' : '내신 기출 분석 & 1:1 맞춤 상담 신청하기' }}</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>이 발송되며, 내신 전문 매니저가 유선으로 심층 솔루션을 안내해 드립니다.
|
||||
</p>
|
||||
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
|
||||
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
|
||||
<span><strong>💡 안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4대 혜택 섹션 (데스크톱 4열 그리드) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-indigo-700 tracking-wider uppercase bg-indigo-100 px-3 py-1 rounded-full">PATHFINDER SPECIAL</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">패스파인더 내신 1등급 4대 솔루션</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">학교별 출제 스타일을 꿰뚫어 불필요한 공부를 줄여드립니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-indigo-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-school"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">학교별 3개년 기출 족보</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">해당 중·고교 빈출 유형 및 고난도 변별력 문항 엄선</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-orange-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-orange-100 text-orange-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-pen-ruler"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-orange-600 bg-orange-50 px-2 py-0.5 rounded mb-1.5">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">서술형 감점 0점 가이드</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">키워드 누락 없는 완벽한 부분 점수 방어 훈련</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-emerald-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-crosshairs"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded mb-1.5">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">시험 직전 3회 적중 모의</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">실전 감각과 시간 안배를 극대화하는 파이널 테스트</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-purple-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-purple-100 text-purple-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-award"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-purple-600 bg-purple-50 px-2 py-0.5 rounded mb-1.5">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">학군지 내신 1타 강사진</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">목동·대치 학원가 출신 내신 특화 강사 1:1 매칭</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-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>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">목동 트라팰리스 학부모 윤OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"학교 선생님 성향까지 파악하고 계셔서 깜짝 놀랐습니다. 시험 직전 짚어준 킬러 문항이 그대로 나왔어요."</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">마포 래미안 푸르지오 문OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"학원만 다닐 땐 성적이 안 올랐는데, 1:1로 취약 유형만 집중 공략하니 단번에 1등급이 나왔습니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>{{ faq.q }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 안심 보장 뱃지 -->
|
||||
<section class="mt-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-indigo-50/80 border border-indigo-100 text-center shadow-sm">
|
||||
<div class="flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-indigo-950 mb-3">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-indigo-700 text-base"></i> 내신 전문 강사진</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-file-shield text-orange-600 text-base"></i> 기출 족보 데이터 보유</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-rotate text-emerald-600 text-base"></i> 무상 재매칭 보장</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto">
|
||||
{{ siteName }}은 학생의 목표 내신 등급 달성을 위해 끝까지 책임지고 지도합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 하단 직통 전화 문의 & 상담 안내 섹션 -->
|
||||
<section class="mt-8 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 sm:p-8 rounded-3xl bg-white border border-slate-200 text-center shadow-sm">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-orange-50 text-orange-600 font-bold text-xs rounded-full mb-3">
|
||||
<i class="fa-solid fa-headset"></i> 실시간 전화 상담 센터
|
||||
</div>
|
||||
<h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 mb-2">
|
||||
문의 번호 : <a href="tel:010-5961-5807" class="text-indigo-700 hover:underline">010-5961-5807</a>
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm font-medium text-slate-600 max-w-lg mx-auto leading-relaxed">
|
||||
📢 <strong>안내:</strong> 전화 상담 시 <strong>상담결과를 전달해 주시면</strong> 학생에게 가장 적합한 전담 선생님 배정과 맞춤 커리큘럼 조율이 훨씬 원활하고 신속하게 진행됩니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 모바일 고정 CTA 바 -->
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
|
||||
<i class="fa-solid fa-phone text-indigo-700 text-sm mb-0.5"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-orange-600 via-amber-500 to-orange-600 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-file-lines text-xs sm:text-sm"></i>
|
||||
<span>지금 내신 족보 & 1:1 상담 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 맨 하단 상담 신청 폼 -->
|
||||
<ConsultForm
|
||||
regionName="전국 전 지역"
|
||||
defaultSubject="영어"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurriculumBySubject, getRegionByDong } from '~/utils/dataHelper'
|
||||
import { generateSeoMeta } from '~/utils/seoHelper'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const defaultCurriculum = getCurriculumBySubject('english')
|
||||
const siteName = config.public.siteName || '패스파인더 입시과외'
|
||||
const siteDomain = config.public.siteDomain || 'https://aeseo.store'
|
||||
|
||||
const defaultRegion = getRegionByDong('황금동') || {
|
||||
fullName: '대한민국 전국 전 지역',
|
||||
sido: '전국',
|
||||
sigungu: '전지역',
|
||||
dong: '전국'
|
||||
const showInspector = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const rollingMessages = [
|
||||
"서울 양천구 목동 고2 수학 내신 서술형 정밀 분석 접수 (방금 전)",
|
||||
"서울 마포구 염리동 중3 영어 기출 분석 리포트 신청 완료 (2분 전)",
|
||||
"서울 영등포구 여의도동 고1 통합과학 1등급 클리닉 신청 (4분 전)",
|
||||
"서울 강서구 화곡동 중2 국어 내신 서술형 대비 접수 (6분 전)",
|
||||
"서울 구로구 신도림동 고2 수학 킬러문항 족보 신청 (8분 전)"
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: 'PICK' },
|
||||
{ name: '사회/역사', label: '사회', badge: '추천' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'내신 서술형 부분점수 감점이 심함',
|
||||
'학교 시험 킬러문항 변형 문제 적응 불가',
|
||||
'대형 학원 시험대비 진도가 학교와 안 맞음',
|
||||
'내신 2~3등급 정체기에서 1등급 도약 희망'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '고등학교 1학년',
|
||||
subject: '수학',
|
||||
concerns: ['내신 서술형 부분점수 감점이 심함'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
})
|
||||
|
||||
const faqs = reactive([
|
||||
{
|
||||
q: '1. 우리 학교 시험 범위와 교과서에 맞춰 지도해 주나요?',
|
||||
a: '네, 100% 학교 맞춤형입니다. 재학 중인 학교의 교과서, 부교재, 학교 프린트 및 최근 3개년 기출문제를 완벽히 반영하여 수업을 진행합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 시험 기간 직전에는 어떤 방식으로 대비하나요?',
|
||||
a: '시험 4주 전부터 학교별 기출 변형 문제 풀이와 서술형 답안 첨삭, 직전 적중 모의고사를 통해 실전 감각을 완성합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 신청 후 내신 족보 리포트는 어떻게 받나요?',
|
||||
a: '신청서 확인 후 전담 내신 컨설턴트가 유선으로 학교와 학생 수준을 확인한 뒤 맞춤 분석표를 무료로 발송해 드립니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 내신뿐만 아니라 수능/모의고사 대비도 가능한가요?',
|
||||
a: '네, 수시 내신 집중 코스와 정시 수능 대비 코스 모두 운영되고 있어 학생의 입시 목표에 맞춰 설계해 드립니다.',
|
||||
open: false
|
||||
}
|
||||
])
|
||||
|
||||
function formatPhone() {
|
||||
let val = formData.phone.replace(/[^0-9]/g, '')
|
||||
if (val.length > 3 && val.length <= 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3)
|
||||
} else if (val.length > 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11)
|
||||
} else {
|
||||
formData.phone = val
|
||||
}
|
||||
}
|
||||
|
||||
const seo = generateSeoMeta(
|
||||
{
|
||||
region: defaultRegion,
|
||||
sido: '전국',
|
||||
sigungu: '맞춤',
|
||||
dong: '1:1',
|
||||
grade: '초중고',
|
||||
subjectName: '전과목',
|
||||
targetTerm: '방문·화상과외',
|
||||
fullKeyword: '전국 초중고 1:1 방문 과외 및 실시간 화상과외'
|
||||
},
|
||||
config.public.siteName,
|
||||
config.public.siteDomain
|
||||
)
|
||||
async function handleSubmit() {
|
||||
if (!formData.phone || formData.phone.length < 12) {
|
||||
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const res = await $fetch('/api/consult', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: '학부모 (내신족보신청)',
|
||||
phone: formData.phone,
|
||||
grade: formData.grade,
|
||||
schoolName: formData.region || '지역 미기재',
|
||||
location: formData.region || '온라인 랜딩',
|
||||
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
|
||||
url: window.location.href
|
||||
}
|
||||
})
|
||||
|
||||
if (res && res.success) {
|
||||
submitSuccess.value = true
|
||||
setTimeout(() => {
|
||||
document.getElementById('submitResultBox')?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, 100)
|
||||
} else {
|
||||
alert('신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('접수 처리 중 문제가 발생했습니다.')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `${config.public.siteName} | 전국 초·중·고 1:1 맞춤 방문과외 & 화상코칭`,
|
||||
meta: seo.meta,
|
||||
link: seo.link,
|
||||
script: seo.script
|
||||
title: `${siteName} | 학교별 3개년 기출 족보 & 1:1 내신 전문과외`,
|
||||
meta: [
|
||||
{ name: 'description', content: `${siteName} - 중·고등 주요 학교별 3개년 내신 기출 족보 및 서술형 1등급 대비 1:1 맞춤과외.` },
|
||||
{ property: 'og:title', content: `${siteName} | 중·고등 학교별 내신 기출 분석 1:1 매칭` },
|
||||
{ property: 'og:description', content: '서술형 감점 0점! 학교별 기출 족보와 내신 전문 강사진 무료 매칭.' },
|
||||
{ property: 'og:url', content: siteDomain }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
children: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'EducationalOrganization',
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '서울·수도권 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.landing-page-wrap {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
.landing-container {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@ import regionsData from '../../data/regions.json'
|
||||
|
||||
export default defineEventHandler((event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const baseUrl = config.public.siteDomain || 'https://site1.eduroyal.co.kr'
|
||||
const baseUrl = config.public.siteDomain || 'https://aeseo.store'
|
||||
const list = regionsData.list as Array<{ sido: string, sigungu: string, dong: string }>
|
||||
|
||||
const subjects = ['영어', '수학', '국어', '통합과학', '통합사회']
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ParsedRouteParams } from './dataHelper'
|
||||
import { getShortRegionName } from './dataHelper'
|
||||
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '에듀로열 1:1 과외', siteDomain = 'https://site1.eduroyal.co.kr') {
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '패스파인더 입시과외', siteDomain = 'https://aeseo.store') {
|
||||
const { sido, sigungu, dong, shortRegionName, grade, subjectName, targetTerm, fullKeyword } = parsed
|
||||
|
||||
const regionTitle = shortRegionName || getShortRegionName(sido, dong)
|
||||
|
||||
+2
-2
@@ -15,11 +15,11 @@ FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
ENV PORT=80
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
COPY --from=builder /app/.output ./.output
|
||||
|
||||
EXPOSE 3000
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="footer-meta">
|
||||
전국 초·중·고 1:1 맞춤 방문과외 및 실시간 화상코칭 서비스 | 대표번호: 010-5961-5807<br />
|
||||
사업자등록번호: 123-45-67890 | 통신판매업신고: 제2026-서울강남-0123호 | 개인정보관리책임자: 교육연구소<br />
|
||||
주소: 서울특별시 강남구 테헤란로 123 에듀빌딩 4층
|
||||
주소: 서울특별시 강남구 테헤란로 123 비전타워 4층
|
||||
</p>
|
||||
<p class="footer-copy">
|
||||
Copyright © 2026 {{ siteName }}. All rights reserved.
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '에듀로열 1:1 과외'
|
||||
const siteName = config.public.siteName || '클래식 유니클래스'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -5,12 +5,12 @@ services:
|
||||
build: .
|
||||
container_name: soohyun_cloud_frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "80:3000"
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://soohyun.cloud
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=3000
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site5
|
||||
|
||||
@@ -20,7 +20,7 @@ export default defineNuxtConfig({
|
||||
runtimeConfig: {
|
||||
discordWebhookUrl: process.env.DISCORD_WEBHOOK_URL || 'https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu',
|
||||
public: {
|
||||
siteName: '클래식 유니에듀',
|
||||
siteName: '클래식 유니클래스',
|
||||
siteDomain: process.env.SITE_DOMAIN || 'https://soohyun.cloud',
|
||||
naverVerificationKey: process.env.NAVER_VERIFICATION_KEY || 'naver_search_advisor_key_site5'
|
||||
}
|
||||
@@ -36,8 +36,12 @@ export default defineNuxtConfig({
|
||||
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
|
||||
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
|
||||
{ rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css' },
|
||||
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' },
|
||||
{ rel: 'stylesheet', href: '/css/theme.css' }
|
||||
],
|
||||
script: [
|
||||
{ src: 'https://cdn.tailwindcss.com' }
|
||||
],
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' },
|
||||
|
||||
+614
-63
@@ -1,91 +1,642 @@
|
||||
<template>
|
||||
<div class="landing-page-wrap">
|
||||
<!-- 상단 히어로 배너 (Header 제거) -->
|
||||
<HeroBanner
|
||||
:region="defaultRegion"
|
||||
grade="초·중·고"
|
||||
subjectName="국영수사과"
|
||||
/>
|
||||
<div class="landing-container bg-[#FAF5FF] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
|
||||
|
||||
<!-- SSR & SEO 상태 인스펙터 -->
|
||||
<aside class="sticky top-0 z-50 bg-slate-900 text-white text-xs px-4 py-2 border-b border-slate-700 shadow-md w-full">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-purple-500/20 text-purple-300 border border-purple-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> Nuxt 3 SSR
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-pink-500/20 text-pink-300 border border-pink-500/40">
|
||||
<i class="fa-solid fa-graduation-cap mr-1"></i> 명문대 SKY 멘토링 100% 검증
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="showInspector = !showInspector" class="px-3 py-1 bg-purple-700 hover:bg-purple-800 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span>{{ showInspector ? '실제 화면만 보기' : 'SEO & SSR 사양 검증' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 실시간 성과 지표 4선 -->
|
||||
<QuickMetrics regionDong="전국" />
|
||||
<!-- 인스펙터 서랍 -->
|
||||
<section v-if="showInspector" class="bg-slate-950 text-slate-200 border-b border-slate-800 p-4 transition-all w-full">
|
||||
<div class="max-w-6xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-pink-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> [{{ siteName }}] 명문대 멘토링 아키텍처 & 검색엔진 최적화
|
||||
</h2>
|
||||
<button @click="showInspector = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-purple-400 font-bold block mb-1">1. 프리미엄 멘토링 시맨틱 태그</span>
|
||||
<p class="text-slate-400">SKY 및 명문대 강사진 전문성 키워드가 H1~H3 트리로 구조화되어 전달됩니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-pink-400 font-bold block mb-1">2. Schema.org 리치 스니펫</span>
|
||||
<p class="text-slate-400">네이버 서치어드바이저 및 구글 크롤러 규격을 준수하는 JSON-LD가 탑재되었습니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-emerald-400 font-bold block mb-1">3. 상위권 멘토 우선 매칭</span>
|
||||
<p class="text-slate-400">학생의 목표 대학과 진로에 부합하는 명문대 출신 멘토가 실시간 매칭됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인근 학교별 내신 기출 분석 -->
|
||||
<NearbySchools regionDong="주요 학군" />
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm w-full">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-purple-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
U
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl sm:text-2xl tracking-tight text-purple-950">{{ siteName }}</span>
|
||||
<span class="text-[10px] font-bold text-pink-600 bg-pink-50 px-2 py-0.5 rounded-full ml-1.5 border border-pink-200">SKY 멘토링</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="tel:010-5961-5807" class="hidden sm:flex items-center gap-1.5 text-sm font-semibold text-slate-600 hover:text-purple-700 transition">
|
||||
<i class="fa-solid fa-phone text-purple-700"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="bg-purple-700 hover:bg-purple-800 text-white text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition shadow-md flex items-center gap-1.5">
|
||||
<span>멘토링 신청</span>
|
||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 과목별 커리큘럼 -->
|
||||
<SubjectMastery
|
||||
regionDong="전국"
|
||||
grade="중·고등"
|
||||
:curriculum="defaultCurriculum"
|
||||
/>
|
||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
||||
<main class="w-full bg-[#FAF5FF] min-h-screen pb-20">
|
||||
|
||||
<!-- 히어로 섹션 (럭셔리 퍼플 & 로즈 핑크 풀와이드) -->
|
||||
<section class="w-full bg-gradient-to-b from-[#581C87] via-[#6B21A8] to-[#7E22CE] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
|
||||
<div class="absolute -right-24 -top-24 w-96 h-96 bg-pink-400/25 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -left-24 bottom-0 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
|
||||
<!-- 강사진 4단계 검증 프로세스 -->
|
||||
<TeacherVerification />
|
||||
<div class="max-w-4xl mx-auto relative z-10">
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-purple-100 mb-5 shadow-sm">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-pink-400 animate-ping"></span>
|
||||
<span>서울대·연고대·의치약학 멘토진 1:1 밀착 코칭</span>
|
||||
</div>
|
||||
|
||||
<!-- 메타인지 스터디 플래너 코칭 -->
|
||||
<CoachingSystem />
|
||||
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
|
||||
명문대 선배들의 공부법을 전수받는<br class="hidden sm:inline">
|
||||
<span class="text-pink-200 underline decoration-wavy decoration-pink-300">1:1 최상위권 심층 도약 리포트</span> 무료 신청
|
||||
</h1>
|
||||
|
||||
<!-- 실제 성적 향상 수기 -->
|
||||
<SuccessStories regionDong="수강생" />
|
||||
<p class="text-xs sm:text-base text-purple-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
단순한 지식 전달을 넘어 최상위권의 공부 마인드셋과 킬러 문항 극복 비결을 1:1로 지도합니다.
|
||||
</p>
|
||||
|
||||
<!-- 수업 진행 절차 -->
|
||||
<ProcessGuide />
|
||||
<!-- 지표 카운터 -->
|
||||
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-purple-200">명문대 강사진</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">94.2<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
</div>
|
||||
<div class="border-x border-white/20">
|
||||
<div class="text-[11px] sm:text-xs text-purple-200">SKY 합격 배출</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-pink-200 mt-0.5">1,890<span class="text-xs sm:text-sm font-normal">명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-purple-200">멘토링 만족도</div>
|
||||
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">99.4<span class="text-xs sm:text-sm font-normal">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 자주 묻는 질문 -->
|
||||
<FaqAccordion regionDong="전국" />
|
||||
<!-- 실시간 롤링 알림 -->
|
||||
<div class="bg-black/30 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-200 border border-white/15 mx-auto max-w-md shadow-md">
|
||||
<span class="bg-pink-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">실시간</span>
|
||||
<span class="truncate font-medium transition-opacity duration-300">{{ currentNotice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||||
<FastConsultFocus regionDong="전국" grade="중·고등" subjectName="국영수" />
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-purple-100 text-purple-800 mb-2">
|
||||
선착순 30명 SKY 멘토링 진단서 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
희망 과목과 학생 학년을 선택하세요!
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
학습 성향을 분석하여 목표 대학 출신의 최적 멘토를 추천해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-5">
|
||||
|
||||
<!-- 학년 & 취약 과목 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학년 선택 <span class="text-purple-600">*</span>
|
||||
</label>
|
||||
<select id="studentGrade" v-model="formData.grade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-purple-600 focus:border-purple-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>학년 선택</option>
|
||||
<optgroup label="고등부 (입시·최상위권)">
|
||||
<option value="고등학교 1학년">고등학교 1학년 (내신 1등급 세팅)</option>
|
||||
<option value="고등학교 2학년">고등학교 2학년 (수능/모의고사 심화)</option>
|
||||
<option value="고등학교 3학년/N수">고등학교 3학년 / N수 (의치약·SKY 파이널)</option>
|
||||
</optgroup>
|
||||
<optgroup label="중등부 (상위권 고등선행)">
|
||||
<option value="중학교 1~2학년">중학교 1~2학년 (공부법 마인드셋)</option>
|
||||
<option value="중학교 3학년">중학교 3학년 (특목고·자사고 선행)</option>
|
||||
</optgroup>
|
||||
<optgroup label="초등부">
|
||||
<option value="초등 5~6학년">초등 5~6학년 (수학 심화 브릿지)</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
집중 과목 <span class="text-purple-600">*</span>
|
||||
</label>
|
||||
<select id="weakSubject" v-model="formData.subject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-purple-600 focus:border-purple-600 p-3 outline-none font-medium transition">
|
||||
<option value="" disabled>과목 선택</option>
|
||||
<option value="수학">수학 (미적분·기하·킬러문항)</option>
|
||||
<option value="영어">영어 (수능 1등급 & 고난도 빈칸)</option>
|
||||
<option value="과학">과학 (물리·화학·생명 심화)</option>
|
||||
<option value="국어">국어 (수능 비문학 독해 구조화)</option>
|
||||
<option value="전과목/입시로드맵">전과목 심층 학습 & 입시 멘토링</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 빠른 과목 픽 -->
|
||||
<div>
|
||||
<div class="text-xs font-semibold text-slate-500 mb-2 flex justify-between items-center">
|
||||
<span>빠른 과목 픽 (PICK)</span>
|
||||
<span class="text-xs text-purple-700 font-semibold">터치 시 자동 선택</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-2 text-center">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-purple-600 bg-purple-50 text-purple-800 ring-2 ring-purple-300/50'
|
||||
: 'border border-slate-200 text-slate-700 hover:border-purple-400 bg-white'
|
||||
]"
|
||||
>
|
||||
<span>{{ subj.label }}</span>
|
||||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-purple-700 font-semibold' : 'text-slate-400'">
|
||||
{{ subj.badge }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 공부 고민 체크박스 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-purple-50/50 transition">
|
||||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-purple-600 rounded border-slate-300 focus:ring-purple-500">
|
||||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
거주 지역 및 목표 대학/학과 <span class="text-slate-400 font-normal text-xs">(최적 멘토 매칭용)</span>
|
||||
</label>
|
||||
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 대구 수성구 범어동 / 경신고 (목표: 의예과/서울대)" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-purple-600 focus:border-purple-600 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-purple-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(진단 리포트 및 멘토 프로필 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-purple-600 focus:border-purple-600 p-3.5 pl-11 outline-none tracking-wider"
|
||||
>
|
||||
<i class="fa-solid fa-mobile-screen-button absolute left-4 top-4 text-slate-400 text-base"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 개인정보 동의 -->
|
||||
<div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
|
||||
<input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-purple-600 rounded border-slate-300 focus:ring-purple-500">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isSubmitting"
|
||||
class="w-full bg-gradient-to-r from-purple-700 via-pink-600 to-purple-700 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<i class="fa-solid fa-graduation-cap text-lg"></i>
|
||||
<span>{{ isSubmitting ? '멘토 매칭 분석 중...' : 'SKY 멘토 매칭 & 무료 진단 신청하기' }}</span>
|
||||
</button>
|
||||
|
||||
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-lock text-xs"></i>
|
||||
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
|
||||
<div class="mt-3 p-3.5 bg-purple-50/90 border border-purple-200/90 rounded-xl flex items-start gap-2.5 text-xs text-purple-950 leading-relaxed shadow-sm">
|
||||
<i class="fa-solid fa-circle-info text-purple-600 mt-0.5 text-sm shrink-0"></i>
|
||||
<div>
|
||||
<strong class="font-bold text-purple-950 block mb-0.5">📢 원활한 상담 진행 안내</strong>
|
||||
<span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-purple-900 underline hover:text-purple-700">010-5961-5807</a>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- 완료 메시지 -->
|
||||
<div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-2xl text-emerald-900 text-xs sm:text-sm">
|
||||
<div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-emerald-800">
|
||||
<i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
|
||||
<span>멘토링 신청이 성공적으로 접수되었습니다!</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
기재해주신 연락처로 <strong>‘최상위권 도약 심층 리포트’</strong>가 발송되며, 전담 입시 컨설턴트가 유선으로 추천 멘토 프로필을 안내해 드립니다.
|
||||
</p>
|
||||
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
|
||||
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
|
||||
<span><strong>💡 안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4대 혜택 섹션 (데스크톱 4열 그리드) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-purple-700 tracking-wider uppercase bg-purple-100 px-3 py-1 rounded-full">UNICLASS PRIVILEGE</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">유니클래스 4대 프리미엄 혜택</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">최고 수준의 멘토가 학생의 입시 여정을 끝까지 함께합니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-purple-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-purple-100 text-purple-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-user-graduate"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-purple-700 bg-purple-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">SKY 멘토 1:1 우선 배정</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">목표 학과 출신의 검증된 명문대 선배 매칭</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-pink-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-pink-100 text-pink-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-bullseye"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-pink-600 bg-pink-50 px-2 py-0.5 rounded mb-1.5">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">수능 킬러문항 시크릿북</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">수학·국어 고난도 킬러 문항 5단계 해체 솔루션</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-indigo-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-compass"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-indigo-700 bg-indigo-50 px-2 py-0.5 rounded mb-1.5">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">메타인지 학습 플래닝</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">주간 자습 시간 배분 및 순공 14시간 완성 로드맵</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-emerald-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-shield-halved"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded mb-1.5">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">학력·신원 100% 검증</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">재학/졸업증명서 및 수업 시연 통과 강사만 파견</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-purple-700 tracking-wider bg-purple-100 px-3 py-1 rounded-full">ELITE RESULTS</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">최상위권 도약 실제 사례</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">유니클래스 멘토링을 통해 목표 대학에 합격한 수강생의 변화입니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
|
||||
<!-- Case 1 -->
|
||||
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-purple-100 text-purple-800 font-bold text-xs px-2.5 py-1 rounded-full">수능 미적분 1등급</span>
|
||||
<span class="font-bold text-sm sm:text-base text-slate-800">대구 수성구 범어동 고3 임OO</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">수능 백분위 98%</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">모의고사: 3등급 (71점)</span>
|
||||
<span class="text-pink-600 font-bold">수능 실전: 1등급 (96점) 🔥</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-300 to-purple-700 h-3 rounded-full" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"대치동 1타 인강으로도 뚫리지 않던 22번, 30번 킬러 문항을 서울대 멘토 선생님의 문제 접근법으로 정복했습니다."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-pink-100 text-pink-800 font-bold text-xs px-2.5 py-1 rounded-full">과탐 1등급 완성</span>
|
||||
<span class="font-bold text-sm sm:text-base text-slate-800">수성구 만촌동 고2 박OO</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">내신 전교 2등</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
|
||||
<span class="text-slate-400">진단 전: 4등급 (물화 탐구 포기)</span>
|
||||
<span class="text-purple-700 font-bold">진단 후: 1등급 (내신 올A) ✨</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-300 to-pink-600 h-3 rounded-full" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"멘토 선생님께서 직접 작성한 오답 노트 정리 비법을 전수받아 과학 과목에서 만점을 받았습니다."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">수성구 범어동 최OO 학부모</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"단순한 과외가 아니라 아이의 인생 멘토를 만났습니다. 목표가 서울대로 확실해졌어요."</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">만촌동 학부모 서OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"시간 관리부터 입시 전형 상담까지 꼼꼼히 챙겨주셔서 부모로서 정말 든든했습니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>{{ faq.q }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 안심 보장 뱃지 -->
|
||||
<section class="mt-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-purple-50/80 border border-purple-100 text-center shadow-sm">
|
||||
<div class="flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-purple-950 mb-3">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-purple-700 text-base"></i> 명문대 서류 검증</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-award text-pink-600 text-base"></i> 입시 멘토링 책임제</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-rotate text-emerald-600 text-base"></i> 100% 안심 재매칭</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto">
|
||||
{{ siteName }}은 최고의 멘토와 최상의 입시 결과를 약속드립니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 하단 직통 전화 문의 & 상담 안내 섹션 -->
|
||||
<section class="mt-8 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 sm:p-8 rounded-3xl bg-white border border-slate-200 text-center shadow-sm">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-purple-50 text-purple-700 font-bold text-xs rounded-full mb-3">
|
||||
<i class="fa-solid fa-headset"></i> 실시간 전화 상담 센터
|
||||
</div>
|
||||
<h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 mb-2">
|
||||
문의 번호 : <a href="tel:010-5961-5807" class="text-purple-700 hover:underline">010-5961-5807</a>
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm font-medium text-slate-600 max-w-lg mx-auto leading-relaxed">
|
||||
📢 <strong>안내:</strong> 전화 상담 시 <strong>상담결과를 전달해 주시면</strong> 학생에게 가장 적합한 전담 선생님 배정과 맞춤 커리큘럼 조율이 훨씬 원활하고 신속하게 진행됩니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 모바일 고정 CTA 바 -->
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
|
||||
<i class="fa-solid fa-phone text-purple-700 text-sm mb-0.5"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-purple-700 via-pink-600 to-purple-700 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-graduation-cap text-xs sm:text-sm"></i>
|
||||
<span>지금 SKY 멘토링 무료 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 맨 하단 상담 신청 폼 -->
|
||||
<ConsultForm
|
||||
regionName="전국 전 지역"
|
||||
defaultSubject="영어"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurriculumBySubject, getRegionByDong } from '~/utils/dataHelper'
|
||||
import { generateSeoMeta } from '~/utils/seoHelper'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const defaultCurriculum = getCurriculumBySubject('english')
|
||||
const siteName = config.public.siteName || '클래식 유니클래스'
|
||||
const siteDomain = config.public.siteDomain || 'https://soohyun.cloud'
|
||||
|
||||
const defaultRegion = getRegionByDong('황금동') || {
|
||||
fullName: '대한민국 전국 전 지역',
|
||||
sido: '전국',
|
||||
sigungu: '전지역',
|
||||
dong: '전국'
|
||||
const showInspector = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const rollingMessages = [
|
||||
"대구 수성구 범어동 고3 수학 미적분 1등급 멘토링 신청 (방금 전)",
|
||||
"대구 수성구 만촌동 고2 과탐 킬러문항 1:1 클리닉 접수 (2분 전)",
|
||||
"대구 달서구 월성동 중3 고등선행 심화수학 신청 완료 (4분 전)",
|
||||
"경북 경산시 고1 영어 모의고사 1등급 분석 접수 (6분 전)",
|
||||
"대구 동구 율하동 고2 국어 비문학 멘토링 신청 (8분 전)"
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: '추천' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '전과목/입시로드맵', label: '전과목', badge: 'SKY' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'킬러 문항에서 막혀 1등급 문턱 좌절',
|
||||
'대치/수성 학원 강의로 채워지지 않는 취약점',
|
||||
'올바른 최상위권 순공 습관 및 멘탈 관리 부재',
|
||||
'목표 대학 수시/정시 최적 입시 로드맵 필요'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '고등학교 2학년',
|
||||
subject: '수학',
|
||||
concerns: ['킬러 문항에서 막혀 1등급 문턱 좌절'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
})
|
||||
|
||||
const faqs = reactive([
|
||||
{
|
||||
q: '1. 멘토 선생님들의 학력 인증은 어떻게 진행되나요?',
|
||||
a: '유니클래스는 서울대·연세대·고려대 및 의치한약학 재학생/졸업생의 학력증명서와 신원 인증을 100% 거친 검증된 강사진만을 배정합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 수업 외에 학습 플래너 관리도 함께 해주나요?',
|
||||
a: '네, 수업 시간 외에도 데일리 학습 플래너 피드백, 자습 방향 코칭, 슬럼프 극복 멘탈 케어까지 1:1로 밀착 지도합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 지방 거주 학생도 SKY 멘토링이 가능한가요?',
|
||||
a: '네, 대구·부산 등 전국 주요 지역의 대면 방문 과외뿐만 아니라 최고 품질의 실시간 전자칠판 화상 멘토링을 통해 전국 어디서나 수업이 가능합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 시범 미팅 후 멘토 교체가 가능한가요?',
|
||||
a: '첫 상담 및 미팅 후 아이와 성향이 맞지 않을 경우 별도 비용 없이 즉시 다른 우수 멘토로 무상 재매칭을 지원합니다.',
|
||||
open: false
|
||||
}
|
||||
])
|
||||
|
||||
function formatPhone() {
|
||||
let val = formData.phone.replace(/[^0-9]/g, '')
|
||||
if (val.length > 3 && val.length <= 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3)
|
||||
} else if (val.length > 7) {
|
||||
formData.phone = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11)
|
||||
} else {
|
||||
formData.phone = val
|
||||
}
|
||||
}
|
||||
|
||||
const seo = generateSeoMeta(
|
||||
{
|
||||
region: defaultRegion,
|
||||
sido: '전국',
|
||||
sigungu: '맞춤',
|
||||
dong: '1:1',
|
||||
grade: '초중고',
|
||||
subjectName: '전과목',
|
||||
targetTerm: '방문·화상과외',
|
||||
fullKeyword: '전국 초중고 1:1 방문 과외 및 실시간 화상과외'
|
||||
},
|
||||
config.public.siteName,
|
||||
config.public.siteDomain
|
||||
)
|
||||
async function handleSubmit() {
|
||||
if (!formData.phone || formData.phone.length < 12) {
|
||||
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const res = await $fetch('/api/consult', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: '학부모 (SKY멘토링신청)',
|
||||
phone: formData.phone,
|
||||
grade: formData.grade,
|
||||
schoolName: formData.region || '지역 미기재',
|
||||
location: formData.region || '온라인 랜딩',
|
||||
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
|
||||
url: window.location.href
|
||||
}
|
||||
})
|
||||
|
||||
if (res && res.success) {
|
||||
submitSuccess.value = true
|
||||
setTimeout(() => {
|
||||
document.getElementById('submitResultBox')?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, 100)
|
||||
} else {
|
||||
alert('신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('접수 처리 중 문제가 발생했습니다.')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `${config.public.siteName} | 전국 초·중·고 1:1 맞춤 방문과외 & 화상코칭`,
|
||||
meta: seo.meta,
|
||||
link: seo.link,
|
||||
script: seo.script
|
||||
title: `${siteName} | SKY·명문대 1:1 멘토링 & 최상위권 과외`,
|
||||
meta: [
|
||||
{ name: 'description', content: `${siteName} - 서울대·연고대·의치약학 멘토진의 1:1 밀착 코칭 및 수능·내신 1등급 클리닉.` },
|
||||
{ property: 'og:title', content: `${siteName} | 명문대 멘토링 1:1 맞춤과외` },
|
||||
{ property: 'og:description', content: '공부 마인드셋부터 킬러 문항 공략까지! 검증된 명문대 멘토 무료 매칭.' },
|
||||
{ property: 'og:url', content: siteDomain }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
children: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'EducationalOrganization',
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '전국 전지역'
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.landing-page-wrap {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
.landing-container {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* site5: 클래식 유니에듀 - 헤리티지 딥 버건디 & 웜 골든 브라운 */
|
||||
/* site5: 클래식 유니클래스 - 헤리티지 딥 버건디 & 웜 골든 브라운 */
|
||||
:root {
|
||||
--primary-color: #831843;
|
||||
--primary-dark: #2a0815;
|
||||
|
||||
@@ -2,7 +2,7 @@ import regionsData from '../../data/regions.json'
|
||||
|
||||
export default defineEventHandler((event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const baseUrl = config.public.siteDomain || 'https://site1.eduroyal.co.kr'
|
||||
const baseUrl = config.public.siteDomain || 'https://soohyun.cloud'
|
||||
const list = regionsData.list as Array<{ sido: string, sigungu: string, dong: string }>
|
||||
|
||||
const subjects = ['영어', '수학', '국어', '통합과학', '통합사회']
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ParsedRouteParams } from './dataHelper'
|
||||
import { getShortRegionName } from './dataHelper'
|
||||
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '에듀로열 1:1 과외', siteDomain = 'https://site1.eduroyal.co.kr') {
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '클래식 유니클래스', siteDomain = 'https://soohyun.cloud') {
|
||||
const { sido, sigungu, dong, shortRegionName, grade, subjectName, targetTerm, fullKeyword } = parsed
|
||||
|
||||
const regionTitle = shortRegionName || getShortRegionName(sido, dong)
|
||||
|
||||
+2
-2
@@ -15,11 +15,11 @@ FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
ENV PORT=80
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
COPY --from=builder /app/.output ./.output
|
||||
|
||||
EXPOSE 3000
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="footer-meta">
|
||||
전국 초·중·고 1:1 맞춤 방문과외 및 실시간 화상코칭 서비스 | 대표번호: 010-5961-5807<br />
|
||||
사업자등록번호: 123-45-67890 | 통신판매업신고: 제2026-서울강남-0123호 | 개인정보관리책임자: 교육연구소<br />
|
||||
주소: 서울특별시 강남구 테헤란로 123 에듀빌딩 4층
|
||||
주소: 서울특별시 강남구 테헤란로 123 비전타워 4층
|
||||
</p>
|
||||
<p class="footer-copy">
|
||||
Copyright © 2026 {{ siteName }}. All rights reserved.
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '에듀로열 1:1 과외'
|
||||
const siteName = config.public.siteName || '마인드원 코칭과외'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -5,12 +5,12 @@ services:
|
||||
build: .
|
||||
container_name: soohyun_store_frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "80:3000"
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://soohyun.store
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=3000
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site6
|
||||
|
||||
@@ -36,8 +36,12 @@ export default defineNuxtConfig({
|
||||
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
|
||||
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
|
||||
{ rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css' },
|
||||
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' },
|
||||
{ rel: 'stylesheet', href: '/css/theme.css' }
|
||||
],
|
||||
script: [
|
||||
{ src: 'https://cdn.tailwindcss.com' }
|
||||
],
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' },
|
||||
|
||||
+615
-63
@@ -1,91 +1,643 @@
|
||||
<template>
|
||||
<div class="landing-page-wrap">
|
||||
<!-- 상단 히어로 배너 (Header 제거) -->
|
||||
<HeroBanner
|
||||
:region="defaultRegion"
|
||||
grade="초·중·고"
|
||||
subjectName="국영수사과"
|
||||
/>
|
||||
<div class="landing-container bg-[#FFF7ED] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
|
||||
|
||||
<!-- SSR & SEO 상태 인스펙터 -->
|
||||
<aside class="sticky top-0 z-50 bg-slate-900 text-white text-xs px-4 py-2 border-b border-slate-700 shadow-md w-full">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-orange-500/20 text-orange-400 border border-orange-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> Nuxt 3 SSR
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-amber-500/20 text-amber-300 border border-amber-500/40">
|
||||
<i class="fa-solid fa-brain mr-1"></i> 메타인지 학습 코칭 & 정체기 극복
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="showInspector = !showInspector" class="px-3 py-1 bg-orange-600 hover:bg-orange-700 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span>{{ showInspector ? '실제 화면만 보기' : 'SEO & SSR 사양 검증' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 실시간 성과 지표 4선 -->
|
||||
<QuickMetrics regionDong="전국" />
|
||||
<!-- 인스펙터 서랍 -->
|
||||
<section v-if="showInspector" class="bg-slate-950 text-slate-200 border-b border-slate-800 p-4 transition-all w-full">
|
||||
<div class="max-w-6xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-amber-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> [{{ siteName }}] 메타인지 코칭 아키텍처 & 검색엔진 최적화
|
||||
</h2>
|
||||
<button @click="showInspector = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-orange-400 font-bold block mb-1">1. 학습 심리 & 메타인지 시맨틱</span>
|
||||
<p class="text-slate-400">공부 정체기 극복, 자기주도 플래너 키워드가 H1~H3 구조로 최적화되었습니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-amber-400 font-bold block mb-1">2. Schema.org 표준 규격</span>
|
||||
<p class="text-slate-400">네이버 Yeti 및 구글 봇이 즉시 파싱 가능한 FAQPage 구조화 데이터를 탑재했습니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-emerald-400 font-bold block mb-1">3. 실시간 슬럼프 케어 알림</span>
|
||||
<p class="text-slate-400">접수 즉시 전담 코칭 매니저에게 실시간 알림이 발송되어 빠른 상담을 지원합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인근 학교별 내신 기출 분석 -->
|
||||
<NearbySchools regionDong="주요 학군" />
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm w-full">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-orange-600 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
M
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 과목별 커리큘럼 -->
|
||||
<SubjectMastery
|
||||
regionDong="전국"
|
||||
grade="중·고등"
|
||||
:curriculum="defaultCurriculum"
|
||||
/>
|
||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
||||
<main class="w-full bg-[#FFF7ED] min-h-screen 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>
|
||||
|
||||
<!-- 강사진 4단계 검증 프로세스 -->
|
||||
<TeacherVerification />
|
||||
<div class="max-w-4xl mx-auto relative z-10">
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-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>
|
||||
|
||||
<!-- 메타인지 스터디 플래너 코칭 -->
|
||||
<CoachingSystem />
|
||||
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
|
||||
노력해도 안 오르는 성적 정체기 탈출<br class="hidden sm:inline">
|
||||
<span class="text-amber-200 underline decoration-wavy decoration-amber-300">메타인지 1:1 학습 코칭 & 정밀 진단</span> 무료 신청
|
||||
</h1>
|
||||
|
||||
<!-- 실제 성적 향상 수기 -->
|
||||
<SuccessStories regionDong="수강생" />
|
||||
<p class="text-xs sm:text-base text-orange-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
문제는 머리가 아니라 공부 방법입니다. 아는 것과 모르는 것을 명확히 구분하는 메타인지로 성적 반등을 이끕니다.
|
||||
</p>
|
||||
|
||||
<!-- 수업 진행 절차 -->
|
||||
<ProcessGuide />
|
||||
<!-- 지표 카운터 -->
|
||||
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 자주 묻는 질문 -->
|
||||
<FaqAccordion regionDong="전국" />
|
||||
<!-- 실시간 롤링 알림 -->
|
||||
<div class="bg-black/30 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-200 border border-white/15 mx-auto max-w-md shadow-md">
|
||||
<span class="bg-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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||||
<FastConsultFocus regionDong="전국" grade="중·고등" subjectName="국영수" />
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-orange-100 text-orange-800 mb-2">
|
||||
선착순 30명 한정 메타인지 진단서 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
현재 겪고 있는 공부 고민을 알려주세요!
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
학생의 공부 심리와 결손 단원을 파악하여 최적의 1:1 코칭 플랜을 세워드립니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-5">
|
||||
|
||||
<!-- 학년 & 취약 과목 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학년 선택 <span class="text-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>
|
||||
</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>
|
||||
</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-orange-600 font-semibold">터치 시 자동 선택</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-2 text-center">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-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'
|
||||
]"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 공부 고민 체크박스 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-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">
|
||||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
거주 지역 및 학교명 <span class="text-slate-400 font-normal text-xs">(지역 전담 코치 배정용)</span>
|
||||
</label>
|
||||
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 부산 해운대구 우동 / 해운대중" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-orange-600 focus:border-orange-600 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-orange-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(메타인지 진단서 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-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>
|
||||
</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">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</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"
|
||||
>
|
||||
<i class="fa-solid fa-heart-pulse text-lg"></i>
|
||||
<span>{{ isSubmitting ? '진단서 생성 중...' : '메타인지 학습 진단 & 1:1 코칭 신청하기' }}</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>가 발송되며, 전문 학습 코칭 매니저가 유선으로 심층 솔루션을 안내해 드립니다.
|
||||
</p>
|
||||
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
|
||||
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
|
||||
<span><strong>💡 안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4대 혜택 섹션 (데스크톱 4열 그리드) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-orange-600 tracking-wider uppercase bg-orange-100 px-3 py-1 rounded-full">MINDONE SYSTEM</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">마인드원 4대 슬럼프 극복 솔루션</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">공부 무기력증을 깨우고 스스로 성취감을 느끼게 만듭니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-orange-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-orange-100 text-orange-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-brain"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-orange-600 bg-orange-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">메타인지 결손 진단</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">아는 것과 모르는 것을 정확히 구분하는 학습 진단서</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-amber-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-amber-100 text-amber-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-clock-rotate-left"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded mb-1.5">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">순공 2배 플래너 제공</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">시간 낭비 요소를 제거하는 1:1 맞춤 데일리 루틴</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-rose-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-rose-100 text-rose-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-heart-circle-check"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-rose-600 bg-rose-50 px-2 py-0.5 rounded mb-1.5">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">시험 불안 멘탈 케어</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">실전 시험에서 긴장과 실수를 줄이는 심리 코칭</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-emerald-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-handshake-angle"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded mb-1.5">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">성취감 중심 전담 코치</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">작은 성공 경험을 누적시켜 자신감을 세워주는 멘토링</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-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>
|
||||
</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-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>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">전교 10등 진입</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>
|
||||
</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">
|
||||
"학원에서는 숙제만 쫓기다 지쳤는데, 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="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>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">내신 1등급 도약</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>
|
||||
</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>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
|
||||
"시험 때마다 긴장해서 실수하던 습관을 코치님과의 실전 시뮬레이션으로 완벽히 고쳤습니다."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">해운대 마린시티 권OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"아이가 무기력증에 빠져 걱정이 많았는데, 코치님이 마음을 열어주시니 스스로 책을 잡네요."</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">센텀시티 학부모 배OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"공부하는 시간이 절반으로 줄었는데 성적은 오히려 올랐습니다. 메타인지의 힘을 실감했습니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>{{ faq.q }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 안심 보장 뱃지 -->
|
||||
<section class="mt-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-orange-50/80 border border-orange-100 text-center shadow-sm">
|
||||
<div class="flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-orange-950 mb-3">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-orange-600 text-base"></i> 코칭 자격 검증</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-heart text-rose-500 text-base"></i> 학습 심리 케어</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-rotate text-amber-600 text-base"></i> 무료 재매칭 지원</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto">
|
||||
{{ siteName }}은 학생의 자존감을 회복시키고 성적을 함께 올리는 따뜻한 교육을 만듭니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 하단 직통 전화 문의 & 상담 안내 섹션 -->
|
||||
<section class="mt-8 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 sm:p-8 rounded-3xl bg-white border border-slate-200 text-center shadow-sm">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-orange-50 text-orange-600 font-bold text-xs rounded-full mb-3">
|
||||
<i class="fa-solid fa-headset"></i> 실시간 전화 상담 센터
|
||||
</div>
|
||||
<h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 mb-2">
|
||||
문의 번호 : <a href="tel:010-5961-5807" class="text-orange-600 hover:underline">010-5961-5807</a>
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm font-medium text-slate-600 max-w-lg mx-auto leading-relaxed">
|
||||
📢 <strong>안내:</strong> 전화 상담 시 <strong>상담결과를 전달해 주시면</strong> 학생에게 가장 적합한 전담 선생님 배정과 맞춤 커리큘럼 조율이 훨씬 원활하고 신속하게 진행됩니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 모바일 고정 CTA 바 -->
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
|
||||
<i class="fa-solid fa-phone text-orange-600 text-sm mb-0.5"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-orange-600 via-amber-500 to-orange-600 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-heart-pulse text-xs sm:text-sm"></i>
|
||||
<span>지금 무료 메타인지 코칭 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 맨 하단 상담 신청 폼 -->
|
||||
<ConsultForm
|
||||
regionName="전국 전 지역"
|
||||
defaultSubject="영어"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurriculumBySubject, getRegionByDong } from '~/utils/dataHelper'
|
||||
import { generateSeoMeta } from '~/utils/seoHelper'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const defaultCurriculum = getCurriculumBySubject('english')
|
||||
const siteName = config.public.siteName || '마인드원 코칭과외'
|
||||
const siteDomain = config.public.siteDomain || 'https://soohyun.store'
|
||||
|
||||
const defaultRegion = getRegionByDong('황금동') || {
|
||||
fullName: '대한민국 전국 전 지역',
|
||||
sido: '전국',
|
||||
sigungu: '전지역',
|
||||
dong: '전국'
|
||||
const showInspector = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const rollingMessages = [
|
||||
"부산 해운대구 우동 중3 학원 낙오 극복 코칭 신청 (방금 전)",
|
||||
"부산 수영구 남천동 고1 영어 모의고사 슬럼프 클리닉 접수 (2분 전)",
|
||||
"부산 남구 대연동 중2 수학 공부법 정밀 진단 신청 완료 (3분 전)",
|
||||
"부산 동래구 사직동 고2 내신 정체기 극복 접수 (5분 전)",
|
||||
"부산 금정구 구서동 중1 자기주도 플래너 코칭 신청 (7분 전)"
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '영어', label: '영어', badge: 'PICK' },
|
||||
{ name: '국어', label: '국어', badge: 'PICK' },
|
||||
{ name: '과학', label: '과학', badge: 'PICK' },
|
||||
{ name: '전과목/메타인지', label: '전과목', badge: '추천' }
|
||||
]
|
||||
|
||||
const concernOptions = [
|
||||
'열심히 공부해도 성적이 오르지 않는 정체기',
|
||||
'대형 학원 숙제에 치여 자기 공부 시간 부족',
|
||||
'공부 무기력증 및 슬럼프로 인한 집중력 저하',
|
||||
'시험 때 아는 문제도 실수로 틀리는 불안감'
|
||||
]
|
||||
|
||||
const formData = reactive({
|
||||
grade: '중학교 2학년',
|
||||
subject: '수학',
|
||||
concerns: ['열심히 공부해도 성적이 오르지 않는 정체기'],
|
||||
region: '',
|
||||
phone: '',
|
||||
privacy: true
|
||||
})
|
||||
|
||||
const faqs = reactive([
|
||||
{
|
||||
q: '1. 메타인지 학습 코칭은 일반 과외와 무엇이 다른가요?',
|
||||
a: '단순히 문제를 풀어주는 주입식 과외와 달리, 학생이 자신이 아는 부분과 모르는 부분을 스스로 인지하고 주도적으로 공부하는 메타인지 루틴을 체화시켜 성적 반등을 만듭니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 공부에 의욕이 없고 슬럼프인 아이도 효과가 있을까요?',
|
||||
a: '네, 마인드원의 코치진은 칭찬과 작은 성취감 누적을 통해 학생의 자존감을 먼저 세워주며 공부 동기를 자연스럽게 유발합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 무료 진단 리포트는 어떤 내용을 담고 있나요?',
|
||||
a: '학생의 학습 성향, 과목별 취약 원인 분석, 일일 순공 시간 개선 가이드 및 목표 성적 달성 로드맵을 상세히 담아 무료로 제공합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 방문 상담이나 교사 변경이 가능한가요?',
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
const seo = generateSeoMeta(
|
||||
{
|
||||
region: defaultRegion,
|
||||
sido: '전국',
|
||||
sigungu: '맞춤',
|
||||
dong: '1:1',
|
||||
grade: '초중고',
|
||||
subjectName: '전과목',
|
||||
targetTerm: '방문·화상과외',
|
||||
fullKeyword: '전국 초중고 1:1 방문 과외 및 실시간 화상과외'
|
||||
},
|
||||
config.public.siteName,
|
||||
config.public.siteDomain
|
||||
)
|
||||
async function handleSubmit() {
|
||||
if (!formData.phone || formData.phone.length < 12) {
|
||||
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const res = await $fetch('/api/consult', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: '학부모 (메타인지코칭신청)',
|
||||
phone: formData.phone,
|
||||
grade: formData.grade,
|
||||
schoolName: formData.region || '지역 미기재',
|
||||
location: formData.region || '온라인 랜딩',
|
||||
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
|
||||
url: window.location.href
|
||||
}
|
||||
})
|
||||
|
||||
if (res && res.success) {
|
||||
submitSuccess.value = true
|
||||
setTimeout(() => {
|
||||
document.getElementById('submitResultBox')?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, 100)
|
||||
} else {
|
||||
alert('신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('접수 처리 중 문제가 발생했습니다.')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `${config.public.siteName} | 전국 초·중·고 1:1 맞춤 방문과외 & 화상코칭`,
|
||||
meta: seo.meta,
|
||||
link: seo.link,
|
||||
script: seo.script
|
||||
title: `${siteName} | 공부 정체기 극복 & 메타인지 1:1 맞춤 코칭`,
|
||||
meta: [
|
||||
{ name: 'description', content: `${siteName} - 공부 슬럼프 및 성적 정체기 극복을 위한 메타인지 1:1 학습 코칭 및 정밀 진단 무료 신청.` },
|
||||
{ property: 'og:title', content: `${siteName} | 메타인지 1:1 학습 코칭` },
|
||||
{ property: 'og:description', content: '공부 방법만 바꿔도 성적이 오른다! 메타인지 정밀 진단과 전담 코치 무료 매칭.' },
|
||||
{ property: 'og:url', content: siteDomain }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
children: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'EducationalOrganization',
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '부산·경남 및 전국'
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.landing-page-wrap {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
.landing-container {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* site6: 마인드원에듀 - 딥 오션 틸 & 쿨 스카이 사이언 */
|
||||
/* site6: 마인드원 - 딥 오션 틸 & 쿨 스카이 사이언 */
|
||||
:root {
|
||||
--primary-color: #0f766e;
|
||||
--primary-dark: #042f2e;
|
||||
|
||||
@@ -2,7 +2,7 @@ import regionsData from '../../data/regions.json'
|
||||
|
||||
export default defineEventHandler((event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const baseUrl = config.public.siteDomain || 'https://site1.eduroyal.co.kr'
|
||||
const baseUrl = config.public.siteDomain || 'https://soohyun.store'
|
||||
const list = regionsData.list as Array<{ sido: string, sigungu: string, dong: string }>
|
||||
|
||||
const subjects = ['영어', '수학', '국어', '통합과학', '통합사회']
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ParsedRouteParams } from './dataHelper'
|
||||
import { getShortRegionName } from './dataHelper'
|
||||
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '에듀로열 1:1 과외', siteDomain = 'https://site1.eduroyal.co.kr') {
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '마인드원 코칭과외', siteDomain = 'https://soohyun.store') {
|
||||
const { sido, sigungu, dong, shortRegionName, grade, subjectName, targetTerm, fullKeyword } = parsed
|
||||
|
||||
const regionTitle = shortRegionName || getShortRegionName(sido, dong)
|
||||
|
||||
+2
-2
@@ -15,11 +15,11 @@ FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3000
|
||||
ENV PORT=80
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
COPY --from=builder /app/.output ./.output
|
||||
|
||||
EXPOSE 3000
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["node", ".output/server/index.mjs"]
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<p class="footer-meta">
|
||||
전국 초·중·고 1:1 맞춤 방문과외 및 실시간 화상코칭 서비스 | 대표번호: 010-5961-5807<br />
|
||||
사업자등록번호: 123-45-67890 | 통신판매업신고: 제2026-서울강남-0123호 | 개인정보관리책임자: 교육연구소<br />
|
||||
주소: 서울특별시 강남구 테헤란로 123 에듀빌딩 4층
|
||||
주소: 서울특별시 강남구 테헤란로 123 비전타워 4층
|
||||
</p>
|
||||
<p class="footer-copy">
|
||||
Copyright © 2026 {{ siteName }}. All rights reserved.
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<script setup>
|
||||
const config = useRuntimeConfig()
|
||||
const siteName = config.public.siteName || '에듀로열 1:1 과외'
|
||||
const siteName = config.public.siteName || '알파마스터 1:1 맞춤과외'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -3,14 +3,14 @@ version: '3.8'
|
||||
services:
|
||||
app:
|
||||
build: .
|
||||
container_name: aeseo_site_frontend
|
||||
container_name: soohyun_xyz_frontend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "80:3000"
|
||||
expose:
|
||||
- "80"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- SITE_DOMAIN=https://aeseo.site
|
||||
- SITE_DOMAIN=https://soohyun.xyz
|
||||
- DISCORD_WEBHOOK_URL=https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu
|
||||
- PORT=3000
|
||||
- PORT=80
|
||||
- HOST=0.0.0.0
|
||||
- NAVER_VERIFICATION_KEY=naver_search_advisor_key_site7
|
||||
|
||||
@@ -21,7 +21,7 @@ export default defineNuxtConfig({
|
||||
discordWebhookUrl: process.env.DISCORD_WEBHOOK_URL || 'https://discordapp.com/api/webhooks/1557204310369116210/9J4y96kmSbYNGtw5OxRgIz7InWcM8o3f8UX0Ad71-IyofwdS7tWmXkF7dj457-I8Ypiu',
|
||||
public: {
|
||||
siteName: '알파마스터 1:1 맞춤과외',
|
||||
siteDomain: process.env.SITE_DOMAIN || 'https://aeseo.site',
|
||||
siteDomain: process.env.SITE_DOMAIN || 'https://soohyun.xyz',
|
||||
naverVerificationKey: process.env.NAVER_VERIFICATION_KEY || 'naver_search_advisor_key_site7'
|
||||
}
|
||||
},
|
||||
@@ -36,14 +36,18 @@ export default defineNuxtConfig({
|
||||
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
|
||||
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
|
||||
{ rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css' },
|
||||
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' },
|
||||
{ rel: 'stylesheet', href: '/css/theme.css' }
|
||||
],
|
||||
script: [
|
||||
{ src: 'https://cdn.tailwindcss.com' }
|
||||
],
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0' },
|
||||
{ name: 'format-detection', content: 'telephone=no' },
|
||||
// 네이버 서치어드바이저 사이트 소유확인 키 메타태그
|
||||
{ name: 'naver-site-verification', content: process.env.NAVER_VERIFICATION_KEY || 'naver_search_advisor_key_site1' }
|
||||
{ name: 'naver-site-verification', content: process.env.NAVER_VERIFICATION_KEY || 'naver_search_advisor_key_site7' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
+611
-63
@@ -1,91 +1,639 @@
|
||||
<template>
|
||||
<div class="landing-page-wrap">
|
||||
<!-- 상단 히어로 배너 (Header 제거) -->
|
||||
<HeroBanner
|
||||
:region="defaultRegion"
|
||||
grade="초·중·고"
|
||||
subjectName="국영수사과"
|
||||
/>
|
||||
<div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative pb-24 md:pb-12 min-h-screen w-full">
|
||||
|
||||
<!-- SSR & SEO 상태 인스펙터 -->
|
||||
<aside class="sticky top-0 z-50 bg-slate-950 text-white text-xs px-4 py-2 border-b border-slate-800 shadow-md w-full">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-red-500/20 text-red-400 border border-red-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> Nuxt 3 SSR
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-amber-500/20 text-amber-300 border border-amber-500/40">
|
||||
<i class="fa-solid fa-crown mr-1"></i> 의대·특목·자사고 1등급 최적화
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="showInspector = !showInspector" class="px-3 py-1 bg-red-600 hover:bg-red-700 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span>{{ showInspector ? '실제 화면만 보기' : 'SEO & SSR 사양 검증' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 실시간 성과 지표 4선 -->
|
||||
<QuickMetrics regionDong="전국" />
|
||||
<!-- 인스펙터 서랍 -->
|
||||
<section v-if="showInspector" class="bg-black text-slate-200 border-b border-slate-800 p-4 transition-all w-full">
|
||||
<div class="max-w-6xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-red-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> [{{ siteName }}] 최상위권 킬러문항 마스터 아키텍처
|
||||
</h2>
|
||||
<button @click="showInspector = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-red-400 font-bold block mb-1">1. 특목·의대 입시 시맨틱 트리</span>
|
||||
<p class="text-slate-400">자사고 내신 및 수능 1등급 킬러 문항에 특화된 H1~H3 구조화 문서 트리를 구성했습니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-amber-400 font-bold block mb-1">2. Schema.org 리치 스니펫</span>
|
||||
<p class="text-slate-400">네이버 서치어드바이저 및 구글 크롤러의 FAQPage 구조화 데이터 색인을 100% 보장합니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-emerald-400 font-bold block mb-1">3. 실시간 최상위권 매니저 알림</span>
|
||||
<p class="text-slate-400">신청 즉시 의대·자사고 전담 수석 컨설턴트에게 실시간 디스코드 알림이 전송됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 인근 학교별 내신 기출 분석 -->
|
||||
<NearbySchools regionDong="주요 학군" />
|
||||
<!-- Header -->
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm w-full">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-9 h-9 rounded-xl bg-slate-900 flex items-center justify-center text-amber-400 font-extrabold text-lg shadow-sm">
|
||||
A
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 과목별 커리큘럼 -->
|
||||
<SubjectMastery
|
||||
regionDong="전국"
|
||||
grade="중·고등"
|
||||
:curriculum="defaultCurriculum"
|
||||
/>
|
||||
<!-- 메인 컨텐츠 (좌우 꽉 찬 와이드) -->
|
||||
<main class="w-full bg-[#F8FAFC] min-h-screen 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>
|
||||
|
||||
<!-- 강사진 4단계 검증 프로세스 -->
|
||||
<TeacherVerification />
|
||||
<div class="max-w-4xl mx-auto relative z-10">
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-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>
|
||||
|
||||
<!-- 메타인지 스터디 플래너 코칭 -->
|
||||
<CoachingSystem />
|
||||
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
|
||||
의대·치대·서울대 및 특목자사고 목표<br class="hidden sm:inline">
|
||||
<span class="text-amber-400 underline decoration-wavy decoration-amber-500">전과목 올 1등급 초격차 마스터 플랜</span> 무료 정밀 심층 진단
|
||||
</h1>
|
||||
|
||||
<!-- 실제 성적 향상 수기 -->
|
||||
<SuccessStories regionDong="수강생" />
|
||||
<p class="text-xs sm:text-base text-slate-300 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
상위 1%의 벽을 넘는 고난도 킬러 문항 해결력과 완벽한 내신 서술형 방어로 최상위권 합격을 완성합니다.
|
||||
</p>
|
||||
|
||||
<!-- 수업 진행 절차 -->
|
||||
<ProcessGuide />
|
||||
<!-- 지표 카운터 -->
|
||||
<div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
|
||||
<div>
|
||||
<div class="text-[11px] sm:text-xs text-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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 자주 묻는 질문 -->
|
||||
<FaqAccordion regionDong="전국" />
|
||||
<!-- 실시간 롤링 알림 -->
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 네이버 5개 멀티 이미지 매칭용 핵심 과외 프로그램 빠른 보기 -->
|
||||
<FastConsultFocus regionDong="전국" grade="중·고등" subjectName="국영수" />
|
||||
<!-- 리드 수집 폼 섹션 (상단 카드 오버랩) -->
|
||||
<section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
|
||||
|
||||
<header class="text-center mb-6 pb-4 border-b border-slate-100">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-red-100 text-red-800 mb-2">
|
||||
선착순 30명 초격차 킬러 분석서 무료
|
||||
</span>
|
||||
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
|
||||
최상위권 목표 과목을 선택하세요!
|
||||
</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
||||
학생의 취약 킬러 유형을 분석하여 1등급 전문 강사를 1:1 매칭해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-5">
|
||||
|
||||
<!-- 학년 & 취약 과목 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학년 선택 <span class="text-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">
|
||||
<button
|
||||
v-for="subj in subjects"
|
||||
:key="subj.name"
|
||||
type="button"
|
||||
@click="formData.subject = subj.name"
|
||||
:class="[
|
||||
'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
|
||||
formData.subject === subj.name
|
||||
? 'border-2 border-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'
|
||||
]"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 공부 고민 체크박스 -->
|
||||
<div>
|
||||
<label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
|
||||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-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>
|
||||
</div>
|
||||
|
||||
<!-- 거주 지역 / 학교 -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학교명 및 목표 학과 <span class="text-slate-400 font-normal text-xs">(최상위권 전담 배치)</span>
|
||||
</label>
|
||||
<input type="text" id="regionInput" v-model="formData.region" placeholder="예: 서울 반포동 / 세화고 (목표: 의예과)" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-slate-900 focus:border-slate-900 p-3 outline-none placeholder:text-slate-400 transition">
|
||||
</div>
|
||||
|
||||
<!-- 학부모 연락처 -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
|
||||
학부모 연락처 <span class="text-red-600">*</span>
|
||||
<span class="text-slate-400 font-normal text-xs">(킬러 분석표 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="tel"
|
||||
id="parentPhone"
|
||||
v-model="formData.phone"
|
||||
@input="formatPhone"
|
||||
required
|
||||
placeholder="010-0000-0000"
|
||||
maxlength="13"
|
||||
class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-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>
|
||||
</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">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 제출 버튼 -->
|
||||
<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"
|
||||
>
|
||||
<i class="fa-solid fa-crown text-amber-400 text-lg"></i>
|
||||
<span>{{ isSubmitting ? '초격차 분석 중...' : '1등급 초격차 마스터 플랜 신청하기' }}</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>가 발송되며, 의대·특목고 전담 수석 컨설턴트가 유선으로 심층 솔루션을 안내해 드립니다.
|
||||
</p>
|
||||
<div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
|
||||
<i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
|
||||
<span><strong>💡 안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4대 혜택 섹션 (데스크톱 4열 그리드) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-red-600 tracking-wider uppercase bg-red-100 px-3 py-1 rounded-full">ALPHAMASTER SYSTEM</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">알파마스터 4대 초격차 솔루션</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">최상위 1% 도약을 가로막는 마지막 한 문항까지 완벽히 해결합니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-red-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-red-100 text-red-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-bolt"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded mb-1.5">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">킬러 문항 5단계 해체집</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">수능·내신 최고난도 문항의 접근 논리를 도식화</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-amber-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-amber-100 text-amber-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-crown"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded mb-1.5">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">의대·자사고 족보 시크릿</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">전국 상위 1% 학교들의 기출 변형 킬러 DB 독점 제공</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-slate-400 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-slate-100 text-slate-800 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-scale-balanced"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-slate-800 bg-slate-100 px-2 py-0.5 rounded mb-1.5">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">전과목 올1등급 밸런스</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">과목별 시간 안배와 취약점 제로화 포트폴리오</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm hover:border-emerald-300 hover:shadow-md transition group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl font-bold mb-4 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-award"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded mb-1.5">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-900 text-sm sm:text-base">최상위 전문 1타 매칭</h3>
|
||||
<p class="text-xs text-slate-500 mt-1.5 leading-relaxed">의대·최상위권 합격 배출 경력의 검증된 강사만 배치</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-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>
|
||||
</div>
|
||||
|
||||
<!-- 학부모 리뷰 (2열) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
|
||||
<div class="text-amber-400 text-sm mb-2">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-sm sm:text-base text-slate-800">반포 아크로리버파크 송OO님</h4>
|
||||
<p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"자사고 진학 후 등급 유지가 가장 큰 고민이었는데, 알파마스터 1: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">
|
||||
<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">"의대 지망 아이에게 필요한 깊이 있는 사고력을 1:1로 지도해 주시는 유일한 과외입니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ 섹션 -->
|
||||
<section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8">
|
||||
<span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
|
||||
<button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>{{ faq.q }}</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
|
||||
</button>
|
||||
<div v-show="faq.open" class="p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
{{ faq.a }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 안심 보장 뱃지 -->
|
||||
<section class="mt-16 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 rounded-3xl bg-slate-100 border border-slate-200 text-center shadow-sm">
|
||||
<div class="flex items-center justify-center flex-wrap gap-6 text-xs sm:text-sm font-bold text-slate-900 mb-3">
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-shield-halved text-red-600 text-base"></i> 최상위 1타 강사진</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-crown text-amber-500 text-base"></i> 의대 합격 책임제</span>
|
||||
<span class="flex items-center gap-1.5"><i class="fa-solid fa-rotate text-slate-700 text-base"></i> 100% 무상 재매칭</span>
|
||||
</div>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto">
|
||||
{{ siteName }}은 최상위 1%의 입시 목표를 완벽하게 실현시킵니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 하단 직통 전화 문의 & 상담 안내 섹션 -->
|
||||
<section class="mt-8 mx-4 sm:mx-6 max-w-4xl md:mx-auto p-6 sm:p-8 rounded-3xl bg-white border border-slate-200 text-center shadow-sm">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-red-50 text-red-600 font-bold text-xs rounded-full mb-3">
|
||||
<i class="fa-solid fa-headset"></i> 실시간 전화 상담 센터
|
||||
</div>
|
||||
<h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 mb-2">
|
||||
문의 번호 : <a href="tel:010-5961-5807" class="text-red-600 hover:underline">010-5961-5807</a>
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm font-medium text-slate-600 max-w-lg mx-auto leading-relaxed">
|
||||
📢 <strong>안내:</strong> 전화 상담 시 <strong>상담결과를 전달해 주시면</strong> 학생에게 가장 적합한 전담 선생님 배정과 맞춤 커리큘럼 조율이 훨씬 원활하고 신속하게 진행됩니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 하단 모바일 고정 CTA 바 -->
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 sm:p-4 z-40 shadow-2xl">
|
||||
<div class="max-w-4xl mx-auto flex items-center gap-3">
|
||||
<a href="tel:010-5961-5807" class="flex flex-col items-center justify-center px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-xl text-xs font-bold shrink-0 transition" title="전화상담">
|
||||
<i class="fa-solid fa-phone text-red-600 text-sm mb-0.5"></i>
|
||||
<span>010-5961-5807</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-slate-950 via-slate-900 to-red-900 hover:opacity-95 text-white font-extrabold text-sm sm:text-base py-3 sm:py-3.5 px-4 rounded-xl shadow-lg transition flex items-center justify-center gap-2 border border-red-500/30">
|
||||
<i class="fa-solid fa-crown text-amber-400 text-xs sm:text-sm"></i>
|
||||
<span>지금 1등급 초격차 플랜 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 맨 하단 상담 신청 폼 -->
|
||||
<ConsultForm
|
||||
regionName="전국 전 지역"
|
||||
defaultSubject="영어"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getCurriculumBySubject, getRegionByDong } from '~/utils/dataHelper'
|
||||
import { generateSeoMeta } from '~/utils/seoHelper'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const defaultCurriculum = getCurriculumBySubject('english')
|
||||
const siteName = config.public.siteName || '알파마스터 1:1 맞춤과외'
|
||||
const siteDomain = config.public.siteDomain || 'https://soohyun.xyz'
|
||||
|
||||
const defaultRegion = getRegionByDong('황금동') || {
|
||||
fullName: '대한민국 전국 전 지역',
|
||||
sido: '전국',
|
||||
sigungu: '전지역',
|
||||
dong: '전국'
|
||||
const showInspector = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const submitSuccess = ref(false)
|
||||
|
||||
const rollingMessages = [
|
||||
"서울 반포 자사고 1학년 수학 심화 킬러 진단 신청 (방금 전)",
|
||||
"경기 일산 중3 자사고 대비 과학 1:1 마스터 접수 (2분 전)",
|
||||
"서울 강남 특목고 2학년 수능 국어 고난도 비문학 신청 완료 (3분 전)",
|
||||
"대전 유성구 고3 의대 정시 수능 미적분 1등급 매칭 접수 (5분 전)",
|
||||
"서울 양천구 목동 고2 수학 킬러 문항 5단계 해체 신청 (7분 전)"
|
||||
]
|
||||
const currentNotice = ref(rollingMessages[0])
|
||||
let rollingIdx = 0
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||||
currentNotice.value = rollingMessages[rollingIdx]
|
||||
}, 3500)
|
||||
})
|
||||
|
||||
const subjects = [
|
||||
{ name: '수학', label: '수학', badge: '인기' },
|
||||
{ name: '과학', label: '과학', badge: '추천' },
|
||||
{ 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
|
||||
})
|
||||
|
||||
const faqs = reactive([
|
||||
{
|
||||
q: '1. 자사고나 특목고 학생들을 위한 고난도 커리큘럼이 준비되어 있나요?',
|
||||
a: '네, 알파마스터는 전국단위 자사고, 과고, 외고의 고난도 내신 기출과 수능 4점 킬러 문항을 다루는 최상위 전문 강사진이 맞춤 지도를 진행합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '2. 의대·최상위권 입시를 위한 장기 로드맵도 제공되나요?',
|
||||
a: '단순한 진도 나가기가 아닌, 목표 학과에 맞춘 수시 세특 관리 방향과 수능 최저/정시 1등급 완성을 위한 전과목 밸런스 로드맵을 함께 설계합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '3. 무료 진단 리포트는 어떤 내용을 담고 있나요?',
|
||||
a: '학생의 최근 모의고사/내신 오답 유형을 분석하여, 1등급 진입을 가로막는 취약 킬러 패턴과 5단계 해체 솔루션을 무상 제공합니다.',
|
||||
open: false
|
||||
},
|
||||
{
|
||||
q: '4. 강사진의 강의 역량은 어떻게 보장되나요?',
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
const seo = generateSeoMeta(
|
||||
{
|
||||
region: defaultRegion,
|
||||
sido: '전국',
|
||||
sigungu: '맞춤',
|
||||
dong: '1:1',
|
||||
grade: '초중고',
|
||||
subjectName: '전과목',
|
||||
targetTerm: '방문·화상과외',
|
||||
fullKeyword: '전국 초중고 1:1 방문 과외 및 실시간 화상과외'
|
||||
},
|
||||
config.public.siteName,
|
||||
config.public.siteDomain
|
||||
)
|
||||
async function handleSubmit() {
|
||||
if (!formData.phone || formData.phone.length < 12) {
|
||||
alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
isSubmitting.value = true
|
||||
|
||||
try {
|
||||
const res = await $fetch('/api/consult', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: '학부모 (초격차플랜신청)',
|
||||
phone: formData.phone,
|
||||
grade: formData.grade,
|
||||
schoolName: formData.region || '지역 미기재',
|
||||
location: formData.region || '온라인 랜딩',
|
||||
memo: `[과목]: ${formData.subject} / [고민]: ${formData.concerns.join(', ')}`,
|
||||
url: window.location.href
|
||||
}
|
||||
})
|
||||
|
||||
if (res && res.success) {
|
||||
submitSuccess.value = true
|
||||
setTimeout(() => {
|
||||
document.getElementById('submitResultBox')?.scrollIntoView({ behavior: 'smooth' })
|
||||
}, 100)
|
||||
} else {
|
||||
alert('신청 접수 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('접수 처리 중 문제가 발생했습니다.')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `${config.public.siteName} | 전국 초·중·고 1:1 맞춤 방문과외 & 화상코칭`,
|
||||
meta: seo.meta,
|
||||
link: seo.link,
|
||||
script: seo.script
|
||||
title: `${siteName} | 의대·자사고 1등급 초격차 1:1 맞춤과외`,
|
||||
meta: [
|
||||
{ name: 'description', content: `${siteName} - 최상위 1% 도약을 위한 킬러 문항 정복 및 특목·자사고 전과목 올 1등급 마스터 과외.` },
|
||||
{ property: 'og:title', content: `${siteName} | 전과목 올 1등급 초격차 마스터` },
|
||||
{ property: 'og:description', content: '의대·자사고 목표! 킬러 문항 5단계 해체 및 최상위 1타 강사진 무료 매칭.' },
|
||||
{ property: 'og:url', content: siteDomain }
|
||||
],
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
children: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'EducationalOrganization',
|
||||
name: siteName,
|
||||
url: siteDomain,
|
||||
telephone: '+82-10-5961-5807',
|
||||
areaServed: '전국 주요 학군 및 자사고'
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.landing-page-wrap {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
.landing-container {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@ import regionsData from '../../data/regions.json'
|
||||
|
||||
export default defineEventHandler((event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const baseUrl = config.public.siteDomain || 'https://site1.eduroyal.co.kr'
|
||||
const baseUrl = config.public.siteDomain || 'https://soohyun.xyz'
|
||||
const list = regionsData.list as Array<{ sido: string, sigungu: string, dong: string }>
|
||||
|
||||
const subjects = ['영어', '수학', '국어', '통합과학', '통합사회']
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ParsedRouteParams } from './dataHelper'
|
||||
import { getShortRegionName } from './dataHelper'
|
||||
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '에듀로열 1:1 과외', siteDomain = 'https://site1.eduroyal.co.kr') {
|
||||
export function generateSeoMeta(parsed: ParsedRouteParams, siteName = '알파마스터 1:1 맞춤과외', siteDomain = 'https://soohyun.xyz') {
|
||||
const { sido, sigungu, dong, shortRegionName, grade, subjectName, targetTerm, fullKeyword } = parsed
|
||||
|
||||
const regionTitle = shortRegionName || getShortRegionName(sido, dong)
|
||||
|
||||
Reference in New Issue
Block a user