Files
web_6ea_educo/html.text
T
2026-10-13 01:03:47 +09:00

769 lines
44 KiB
Plaintext

<!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>&lt;script type="application/ld+json"&gt; ... Schema.org FAQPage & EducationalOrganization 탑재 완료 ... &lt;/script&gt;</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>