1285 lines
56 KiB
Vue
1285 lines
56 KiB
Vue
<template>
|
||
<div class="landing-container bg-[#fbf8f3] text-[#151c28] antialiased relative min-h-screen w-full">
|
||
|
||
<!-- 1. Royal Dark Navy & Gold Emblem Header (참고 시안 동기화) -->
|
||
<AppHeader :siteName="siteName" consultHref="#leadFormSection" />
|
||
|
||
<!-- 2. Main Body -->
|
||
<main class="w-full pb-20">
|
||
|
||
<!-- 히어로 섹션: 서울 통창 스카이라인 라운지 + 골드 타이포그래피 (네이버 상위 노출 DOM 순서: H1 ➔ meta ➔ H2 ➔ P) -->
|
||
<section
|
||
class="royal-hero-section w-full relative overflow-hidden text-center"
|
||
itemscope
|
||
itemtype="https://schema.org/EducationalOrganization"
|
||
>
|
||
<!-- 배경: 서울 남산타워·고궁 파노라마 통창 라운지 이미지 & 다크 네이비 비네팅 오버레이 -->
|
||
<div class="hero-bg-wrap">
|
||
<img
|
||
src="/img/hero-seoul-bg.jpg"
|
||
alt="서울 중등 수학 과외 · 로열클래스 1:1 과외 프리미엄 스터디 라운지"
|
||
class="hero-bg-img"
|
||
width="1920"
|
||
height="1080"
|
||
decoding="async"
|
||
fetchpriority="high"
|
||
/>
|
||
<div class="hero-bg-overlay"></div>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto relative z-10 px-4 sm:px-6 pt-16 sm:pt-24 pb-20 sm:pb-28">
|
||
|
||
<!-- 상단 크라운 서브 카피 -->
|
||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs sm:text-sm font-bold bg-[#10192b]/85 border border-[#c9a55c]/50 text-[#e2c687] shadow-md mb-5 backdrop-blur-xs">
|
||
<i class="fa-solid fa-crown text-[#d4b068] text-xs"></i>
|
||
<span>서울 1%를 위한 프리미엄 맞춤 과외</span>
|
||
</div>
|
||
|
||
<!-- 1. H1 (SEO 핵심 타겟 키워드 + 시안의 '로열클래스 1:1 과외' 골드 타이틀) -->
|
||
<h1 itemprop="headline" class="royal-hero-h1 mb-4">
|
||
<span class="block text-base sm:text-xl md:text-2xl font-bold text-white/95 tracking-tight mb-2">
|
||
서울 중등 수학 과외 · 초·중·고 1:1 맞춤 과외
|
||
</span>
|
||
<span class="gold-gradient-text font-royal-serif text-3xl sm:text-5xl md:text-6xl font-black tracking-tight leading-tight">
|
||
{{ siteName }}
|
||
</span>
|
||
</h1>
|
||
|
||
<!-- 2. meta (마이크로데이터 - H1 바로 다음 줄 유지) -->
|
||
<meta itemprop="name" :content="`${siteName} - 서울 중등 수학 과외 · 서울 중등 과외 1:1 매칭`" />
|
||
<meta itemprop="description" content="서울 중등 수학 과외, 서울 중등 과외부터 초등·고등 국영수사과 1:1 방문·화상 맞춤 과외 매칭 및 과외비 투명 비교" />
|
||
<meta itemprop="keywords" content="서울 중등 수학 과외, 서울 중등 과외, 서울 고등 수학 과외, 서울 고등 과외, 서울 초등 수학 과외, 서울 초등 과외, 서울 중등 영어 과외, 서울 과외, 대치동 과외" />
|
||
<meta itemprop="image" :content="`${siteDomain}/img/math-tutoring.png`" />
|
||
<link itemprop="url" :href="`${siteDomain}/`" />
|
||
|
||
<!-- 3. H2 (meta 바로 다음 줄 유지) -->
|
||
<h2 class="text-sm sm:text-lg font-bold text-[#ebd5a4] mb-3 tracking-wide">
|
||
서울 중등 과외 · 초등·고등 국영수사과 검증된 명문대·베테랑 선생님 100% 1:1 매칭
|
||
</h2>
|
||
|
||
<!-- 4. 일반글 P (H2 바로 다음 줄 유지) -->
|
||
<p class="text-xs sm:text-base text-slate-200/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
|
||
서울 중등 수학 과외 및 서울 중등 과외, 초등·고등 전 과목 과외 비용·시세 투명 비교부터 검증된 전문 선생님 무료 시범수업까지 학생에게 꼭 맞는 1:1 맞춤 수업을 제공합니다.
|
||
</p>
|
||
|
||
<!-- 시안의 듀얼 CTA 버튼 ('시작하기' 솔리드 골드 버튼 + '상담신청' 다크 글래스 골드 보더 버튼) -->
|
||
<div class="flex items-center justify-center gap-3.5 sm:gap-4 mb-8 flex-wrap">
|
||
<a
|
||
href="#leadFormSection"
|
||
class="btn-hero-gold px-7 sm:px-9 py-3.5 rounded-lg font-extrabold text-sm sm:text-base transition shadow-lg no-underline"
|
||
>
|
||
시작하기
|
||
</a>
|
||
<a
|
||
href="#leadFormSection"
|
||
class="btn-hero-outline px-7 sm:px-9 py-3.5 rounded-lg font-bold text-sm sm:text-base transition no-underline"
|
||
>
|
||
상담신청
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 실시간 매칭 알림 롤링 바 (다크 글래스 & 골드 포인트) -->
|
||
<div class="inline-flex items-center gap-2.5 bg-[#0a101d]/80 border border-[#c9a55c]/40 rounded-full px-4 py-1.5 text-xs text-slate-200 shadow-md backdrop-blur-xs">
|
||
<span class="w-2 h-2 rounded-full bg-[#e2c687] animate-pulse"></span>
|
||
<span class="font-bold text-[#e2c687]">실시간 매칭</span>
|
||
<span class="text-slate-500">|</span>
|
||
<span class="truncate max-w-[240px] sm:max-w-md font-medium text-slate-200">{{ currentNotice }}</span>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. PREMIUM Service USP 섹션 (시안 2번째 섹션: 화이트/아이보리 배경 + 3열 프레임 카드, 중앙 다크 네이비 강조 카드) -->
|
||
<section id="usp-section" class="usp-section py-16 sm:py-20 px-4 sm:px-6 bg-white relative">
|
||
<div class="max-w-5xl mx-auto">
|
||
<header class="text-center mb-10 sm:mb-12">
|
||
<span class="block text-xs font-extrabold tracking-[0.25em] text-[#b58e43] uppercase mb-1.5">
|
||
PREMIUM
|
||
</span>
|
||
<h2 class="text-2xl sm:text-3xl font-extrabold text-[#10192b] tracking-tight">
|
||
Service USP 핵심 특장점
|
||
</h2>
|
||
</header>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
|
||
<!-- 좌측 화이트+골드 보더 카드 -->
|
||
<div class="usp-card usp-card-light">
|
||
<div class="usp-card-inner">
|
||
<div class="usp-icon-wrap">
|
||
<i class="fa-solid fa-map-location-dot text-2xl text-[#b58e43]"></i>
|
||
</div>
|
||
<h3 class="usp-card-title text-[#10192b]">
|
||
서울 전 지역<br />밀착 방문
|
||
</h3>
|
||
<p class="usp-card-desc text-slate-600">
|
||
강남·서초·송파·목동·중계 등 서울 25개 자치구 전 지역 자택 방문 및 실시간 화상 밀착 수업
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 중앙 다크 네이비+골드 프레임 강조 카드 (시안 센터 하이라이트 카드) -->
|
||
<div class="usp-card usp-card-navy">
|
||
<div class="usp-card-inner">
|
||
<div class="usp-icon-wrap">
|
||
<i class="fa-solid fa-chalkboard-user text-2xl text-[#e2c687]"></i>
|
||
</div>
|
||
<h3 class="usp-card-title text-white">
|
||
1:1 초·중·고<br />맞춤 코칭
|
||
</h3>
|
||
<p class="usp-card-desc text-slate-300">
|
||
학생별 취약 개념 역추적부터 서울 관내 학교별 3개년 내신 기출·서술형 족보 1:1 완벽 대비
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 우측 화이트+골드 보더 카드 -->
|
||
<div class="usp-card usp-card-light">
|
||
<div class="usp-card-inner">
|
||
<div class="usp-icon-wrap">
|
||
<i class="fa-solid fa-award text-2xl text-[#b58e43]"></i>
|
||
</div>
|
||
<h3 class="usp-card-title text-[#10192b]">
|
||
검증된<br />베테랑 강사진
|
||
</h3>
|
||
<p class="usp-card-desc text-slate-600">
|
||
학력·경력·신원 4단계 서류 인증을 통과한 상위 1% 전문 강사진 배정 및 무료 시범수업 보장
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 캐러셀 도트 인디케이터 장식 (시안 디테일) -->
|
||
<div class="flex justify-center items-center gap-2 mt-8">
|
||
<span class="w-6 h-1.5 rounded-full bg-[#10192b]"></span>
|
||
<span class="w-1.5 h-1.5 rounded-full bg-[#d4b068]"></span>
|
||
<span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. TUTOR Lineup 섹션 (시안 3번째 섹션: 웜 크림 베이지 배경 #f4ece0 + 정장 프로필 카드 3열) -->
|
||
<section id="tutor-section" class="tutor-section py-16 sm:py-20 px-4 sm:px-6 bg-[#f4ece0] border-y border-[#e4d9c5]">
|
||
<div class="max-w-5xl mx-auto">
|
||
<header class="text-center mb-10 sm:mb-12">
|
||
<span class="block text-xs font-extrabold tracking-[0.25em] text-[#9e7a32] uppercase mb-1.5">
|
||
TUTOR
|
||
</span>
|
||
<h2 class="text-2xl sm:text-3xl font-extrabold text-[#10192b] tracking-tight">
|
||
Tutor Lineup
|
||
</h2>
|
||
<p class="text-sm sm:text-base font-bold text-[#334155] mt-1">
|
||
서울대, 연세대, 고려대 석박사 및 베테랑 교사
|
||
</p>
|
||
</header>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<!-- 강사 1 -->
|
||
<article class="tutor-card">
|
||
<div class="tutor-img-box">
|
||
<img
|
||
src="/img/tutor-1.jpg"
|
||
alt="서울 중등 수학 과외 서울대·연고대 수리과학 전담 강사"
|
||
width="600"
|
||
height="600"
|
||
loading="lazy"
|
||
decoding="async"
|
||
class="tutor-img"
|
||
/>
|
||
</div>
|
||
<div class="tutor-body">
|
||
<span class="tutor-badge">수리·과학 전담</span>
|
||
<h3 class="tutor-title">서울대, 연세대, 고려대<br />석박사 및 베테랑 교사</h3>
|
||
<p class="tutor-sub">대치·목동·중계 내신 킬러 문항 및 수능 1등급 역추적 클리닉</p>
|
||
<div class="tutor-stat">
|
||
<span>성적 향상도</span>
|
||
<strong>98%</strong>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 강사 2 -->
|
||
<article class="tutor-card">
|
||
<div class="tutor-img-box">
|
||
<img
|
||
src="/img/tutor-2.jpg"
|
||
alt="서울 중등 영어 과외 서울대·연세대 영문·국어 전담 강사"
|
||
width="600"
|
||
height="600"
|
||
loading="lazy"
|
||
decoding="async"
|
||
class="tutor-img"
|
||
/>
|
||
</div>
|
||
<div class="tutor-body">
|
||
<span class="tutor-badge">영어·국어 전담</span>
|
||
<h3 class="tutor-title">서울대, 연세대<br />석박사 및 베테랑 교사</h3>
|
||
<p class="tutor-sub">학교별 부교재 변형 예측 및 서술형 조건 영작·비문학 감점 제로화</p>
|
||
<div class="tutor-stat">
|
||
<span>성적 향상도</span>
|
||
<strong>98%</strong>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 강사 3 -->
|
||
<article class="tutor-card">
|
||
<div class="tutor-img-box">
|
||
<img
|
||
src="/img/tutor-3.jpg"
|
||
alt="서울 고등 수학 과외 서울대·연고대 입시 컨설팅 베테랑 강사"
|
||
width="600"
|
||
height="600"
|
||
loading="lazy"
|
||
decoding="async"
|
||
class="tutor-img"
|
||
/>
|
||
</div>
|
||
<div class="tutor-body">
|
||
<span class="tutor-badge">입시·특목고 전담</span>
|
||
<h3 class="tutor-title">서울대, 연세대, 고려대<br />베테랑 교사</h3>
|
||
<p class="tutor-sub">자사고·일반고 1등급 전략 및 메타인지 자기주도 플래너 밀착 관리</p>
|
||
<div class="tutor-stat">
|
||
<span>성적 향상도</span>
|
||
<strong>98%</strong>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="flex justify-center items-center gap-2 mt-8">
|
||
<span class="w-6 h-1.5 rounded-full bg-[#10192b]"></span>
|
||
<span class="w-1.5 h-1.5 rounded-full bg-[#b58e43]"></span>
|
||
<span class="w-1.5 h-1.5 rounded-full bg-[#d6c7b2]"></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. MATCHING PROCESS 섹션 (시안 4번째 섹션: 다크 네이비 배경 #10192b + 화이트 골드 테두리 카드 1 -> 2 -> 3) -->
|
||
<section id="process-section" class="matching-process-section py-16 sm:py-20 px-4 sm:px-6 bg-[#10192b] text-white">
|
||
<div class="max-w-5xl mx-auto">
|
||
<header class="text-center mb-10 sm:mb-12">
|
||
<span class="block text-xs font-extrabold tracking-[0.25em] text-[#e2c687] uppercase mb-2">
|
||
MATCHING PROCESS
|
||
</span>
|
||
<h2 class="text-xl sm:text-3xl font-extrabold text-white tracking-tight">
|
||
진단 테스트 및 상담 <span class="text-[#e2c687] mx-1">➔</span> 최적의 교사 매칭 <span class="text-[#e2c687] mx-1">➔</span> 1:1 맞춤 수업 진행
|
||
</h2>
|
||
</header>
|
||
|
||
<div class="process-cards-wrap">
|
||
<!-- STEP 1 -->
|
||
<div class="mp-card">
|
||
<div class="mp-num font-royal-serif">1</div>
|
||
<h3 class="mp-title">진단 테스트 및 상담</h3>
|
||
<p class="mp-desc">
|
||
현재 성적·학습 성향 정밀 진단 및<br />서울 학군별 출제 경향 맞춤 상담
|
||
</p>
|
||
</div>
|
||
|
||
<div class="mp-arrow" aria-hidden="true">
|
||
<i class="fa-solid fa-arrow-right"></i>
|
||
</div>
|
||
|
||
<!-- STEP 2 -->
|
||
<div class="mp-card">
|
||
<div class="mp-num font-royal-serif">2</div>
|
||
<h3 class="mp-title">최적의 교사 매칭</h3>
|
||
<p class="mp-desc">
|
||
학생 성향과 목표 등급에 부합하는<br />검증된 전담 선생님 배정 & 모의수업
|
||
</p>
|
||
</div>
|
||
|
||
<div class="mp-arrow" aria-hidden="true">
|
||
<i class="fa-solid fa-arrow-right"></i>
|
||
</div>
|
||
|
||
<!-- STEP 3 -->
|
||
<div class="mp-card">
|
||
<div class="mp-num font-royal-serif">3</div>
|
||
<h3 class="mp-title">1:1 맞춤 수업 진행</h3>
|
||
<p class="mp-desc">
|
||
학교 기출 족보 밀착 지도 및<br />주간 메타인지 플래너 성적 관리
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. REVIEWS & 성공 스토리 + 98% 성적 상승 그래프 섹션 (시안 5번째 섹션 완벽 구현) -->
|
||
<section id="stories-section" class="reviews-graph-section py-16 sm:py-20 px-4 sm:px-6 bg-[#f4ece0] border-b border-[#e4d9c5]">
|
||
<div class="max-w-5xl mx-auto">
|
||
<header class="text-center mb-10 sm:mb-12">
|
||
<span class="block text-xs font-extrabold tracking-[0.25em] text-[#9e7a32] uppercase mb-1.5">
|
||
REVIEWS
|
||
</span>
|
||
<h2 class="text-2xl sm:text-3xl font-extrabold text-[#10192b] tracking-tight">
|
||
수강생 리뷰 & 성적 상승 스토리
|
||
</h2>
|
||
<p class="text-xs sm:text-sm text-slate-600 mt-1">
|
||
1:1 밀착 관리를 통해 서울 주요 중·고등학교에서 내신 1등급과 수능 역전을 이뤄낸 실제 결과입니다.
|
||
</p>
|
||
</header>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
|
||
<!-- 좌측: 별점 리뷰 카드 2단 스택 (5컬럼) -->
|
||
<div class="lg:col-span-5 flex flex-col gap-5">
|
||
<div class="rv-card flex-1">
|
||
<div class="flex items-center justify-between mb-2.5">
|
||
<div>
|
||
<strong class="text-sm sm:text-base font-extrabold text-[#10192b]">대치동 고2 김OO 학생</strong>
|
||
<span class="text-xs text-[#9e7a32] font-bold ml-2">수학 5등급 ➔ 1등급</span>
|
||
</div>
|
||
<div class="text-[#d4a038] text-xs">
|
||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed mb-3">
|
||
"함수와 미적분 킬러 문항에 대한 막연한 두려움이 있었는데, 로열클래스 선생님께서 오답의 원인과 풀이 접근 로직을 1:1로 짚어주셔서 3개월 만에 모의고사와 내신 모두 1등급을 달성했습니다."
|
||
</p>
|
||
<span class="text-[11px] text-slate-400 font-medium">서울 강남구 대치동 · 고등 수학과외 수강</span>
|
||
</div>
|
||
|
||
<div class="rv-card flex-1">
|
||
<div class="flex items-center justify-between mb-2.5">
|
||
<div>
|
||
<strong class="text-sm sm:text-base font-extrabold text-[#10192b]">목동 중3 이OO 학부모님</strong>
|
||
<span class="text-xs text-[#9e7a32] font-bold ml-2">영어 68점 ➔ 98점</span>
|
||
</div>
|
||
<div class="text-[#d4a038] text-xs">
|
||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed mb-3">
|
||
"아이 성향에 맞지 않는 대형 학원 진도 대신 딱 필요한 구문 독해와 학교 서술형 영작만 밀착 지도해 주시니 감점이 0점이 되고 스스로 책상에 앉는 습관이 잡혔습니다."
|
||
</p>
|
||
<span class="text-[11px] text-slate-400 font-medium">서울 양천구 목동 · 중등 영어과외 수강</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 우측: 성적 향상 추이 라인+바 차트 카드 (7컬럼 - 시안 우측 그래프 카드 완벽 재현) -->
|
||
<div class="lg:col-span-7">
|
||
<div class="rv-card h-full flex flex-col justify-between">
|
||
<div>
|
||
<div class="flex items-center justify-between flex-wrap gap-2 mb-2">
|
||
<div>
|
||
<strong class="text-base sm:text-lg font-extrabold text-[#10192b]">성적 향상 추이 리포트</strong>
|
||
<span class="text-xs text-slate-400 ml-2">Growth Report</span>
|
||
</div>
|
||
<div class="text-[#d4a038] text-xs">
|
||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed mb-5">
|
||
로열클래스 1:1 맞춤 코칭 수강생의 주차별·월별 실제 지필고사 및 모의고사 성적 상승 지표입니다.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- SVG 바 + 골드 라인 차트 (98% 달성 하이라이트) -->
|
||
<div class="chart-box bg-[#fbf8f3] border border-[#e4d9c5] rounded-xl p-4 sm:p-6">
|
||
<svg viewBox="0 0 500 210" class="w-full h-auto overflow-visible" role="img" aria-label="수강 후 1개월부터 6개월까지 98% 성적 향상 그래프">
|
||
<!-- 가로 그리드 라인 -->
|
||
<line x1="30" y1="35" x2="470" y2="35" stroke="#e5dec9" stroke-dasharray="3 3" />
|
||
<line x1="30" y1="85" x2="470" y2="85" stroke="#e5dec9" stroke-dasharray="3 3" />
|
||
<line x1="30" y1="135" x2="470" y2="135" stroke="#e5dec9" stroke-dasharray="3 3" />
|
||
<line x1="30" y1="175" x2="470" y2="175" stroke="#cbbba0" stroke-width="1.5" />
|
||
|
||
<!-- 막대 그래프 (1월 ~ 6월) -->
|
||
<rect x="52" y="135" width="26" height="40" rx="4" fill="#d9cebe" />
|
||
<rect x="128" y="105" width="26" height="70" rx="4" fill="#cfc1ab" />
|
||
<rect x="204" y="120" width="26" height="55" rx="4" fill="#cfc1ab" />
|
||
<rect x="280" y="82" width="26" height="93" rx="4" fill="#c2ae8e" />
|
||
<rect x="356" y="95" width="26" height="80" rx="4" fill="#b89f78" />
|
||
<rect x="430" y="38" width="30" height="137" rx="4" fill="#10192b" />
|
||
|
||
<!-- 골드 꺾은선 그래프 -->
|
||
<polyline
|
||
fill="none"
|
||
stroke="#c49b50"
|
||
stroke-width="3"
|
||
points="65,130 141,98 217,114 293,74 369,88 445,32"
|
||
/>
|
||
|
||
<!-- 데이터 포인트 노드 -->
|
||
<circle cx="65" cy="130" r="4.5" fill="#ffffff" stroke="#c49b50" stroke-width="2.5" />
|
||
<circle cx="141" cy="98" r="4.5" fill="#ffffff" stroke="#c49b50" stroke-width="2.5" />
|
||
<circle cx="217" cy="114" r="4.5" fill="#ffffff" stroke="#c49b50" stroke-width="2.5" />
|
||
<circle cx="293" cy="74" r="4.5" fill="#ffffff" stroke="#c49b50" stroke-width="2.5" />
|
||
<circle cx="369" cy="88" r="4.5" fill="#ffffff" stroke="#c49b50" stroke-width="2.5" />
|
||
<circle cx="445" cy="32" r="6" fill="#e2c687" stroke="#10192b" stroke-width="2.5" />
|
||
|
||
<!-- 98% 달성 뱃지 -->
|
||
<rect x="418" y="4" width="54" height="20" rx="6" fill="#10192b" />
|
||
<text x="445" y="18" text-anchor="middle" fill="#e2c687" font-size="11" font-weight="800">98%</text>
|
||
|
||
<!-- X축 라벨 -->
|
||
<text x="65" y="196" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">1개월</text>
|
||
<text x="141" y="196" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">2개월</text>
|
||
<text x="217" y="196" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">3개월</text>
|
||
<text x="293" y="196" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">4개월</text>
|
||
<text x="369" y="196" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">5개월</text>
|
||
<text x="445" y="196" text-anchor="middle" fill="#10192b" font-size="11" font-weight="800">6개월</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. 과목별 1:1 맞춤과외 갤러리 캐러셀 (SEO 멀티 이미지 5열 유지 + 로열 골드 테마 조화) -->
|
||
<SubjectCarousel :regionDong="defaultDong" shortSido="서울" grade="중학생" gradeShort="중등" />
|
||
|
||
<!-- 8. 프리미엄 상담 신청 폼 섹션 (로열 다크 네이비 & 골드 포인트 폼 카드) -->
|
||
<section id="leadFormSection" class="py-16 sm:py-20 px-4 sm:px-6 bg-[#10192b] relative">
|
||
<div class="max-w-3xl mx-auto">
|
||
<div class="bg-white rounded-2xl shadow-2xl border-2 border-[#c9a55c]/60 p-6 sm:p-10">
|
||
|
||
<header class="text-center mb-7 pb-5 border-b border-[#e4d9c5]">
|
||
<div class="inline-flex items-center gap-1.5 px-3.5 py-1 rounded-full text-xs font-extrabold bg-[#10192b] text-[#e2c687] mb-2.5">
|
||
<i class="fa-solid fa-crown text-[11px]"></i>
|
||
<span>선착순 30명 한정 1:1 시범수업 무료</span>
|
||
</div>
|
||
<h2 class="text-xl sm:text-2xl font-extrabold text-[#10192b] tracking-tight">
|
||
서울 우리 동네 과외 시세 확인 & 무료 시범수업 신청
|
||
</h2>
|
||
<p class="text-xs sm:text-sm text-slate-600 mt-1">
|
||
단 1분 간단 입력으로 아이에게 가장 적합한 명문대·베테랑 선생님과 진단 리포트를 배정해 드립니다.
|
||
</p>
|
||
</header>
|
||
|
||
<form @submit.prevent="handleSubmit" class="space-y-6">
|
||
|
||
<!-- 1) 학년 선택 -->
|
||
<div>
|
||
<label for="studentGrade" class="block text-xs sm:text-sm font-bold text-[#10192b] mb-2">
|
||
1. 학생 학년 선택 <span class="text-[#b58e43]">*</span>
|
||
</label>
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-2">
|
||
<button
|
||
type="button"
|
||
@click="selectGradeStage('초등')"
|
||
:class="[
|
||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
gradeStage === '초등'
|
||
? 'bg-[#10192b] border-[#c9a55c] text-[#e2c687] shadow-xs'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
초등부 (1~6학년)
|
||
</button>
|
||
<button
|
||
type="button"
|
||
@click="selectGradeStage('중등')"
|
||
:class="[
|
||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
gradeStage === '중등'
|
||
? 'bg-[#10192b] border-[#c9a55c] text-[#e2c687] shadow-xs'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
중등부 (1~3학년)
|
||
</button>
|
||
<button
|
||
type="button"
|
||
@click="selectGradeStage('고등')"
|
||
:class="[
|
||
'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
gradeStage === '고등'
|
||
? 'bg-[#10192b] border-[#c9a55c] text-[#e2c687] shadow-xs'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
고등부 / N수
|
||
</button>
|
||
</div>
|
||
|
||
<select
|
||
id="studentGrade"
|
||
v-model="formData.grade"
|
||
required
|
||
class="w-full bg-[#fbf8f3] border border-[#d6c7b2] text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-[#c9a55c] focus:border-[#c9a55c] p-3 outline-none font-medium transition"
|
||
>
|
||
<option value="" disabled>세부 학년을 선택해 주세요</option>
|
||
<option v-for="opt in currentGradeOptions" :key="opt" :value="opt">{{ opt }}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 2) 취약 과목 빠른 선택 -->
|
||
<div>
|
||
<div class="flex justify-between items-center mb-2">
|
||
<label class="block text-xs sm:text-sm font-bold text-[#10192b]">
|
||
2. 집중 지도가 필요한 과목 <span class="text-[#b58e43]">*</span>
|
||
</label>
|
||
<span class="text-[11px] text-slate-400 font-normal">단일 선택</span>
|
||
</div>
|
||
<div class="grid grid-cols-3 sm:grid-cols-6 gap-2 text-center">
|
||
<button
|
||
v-for="subj in subjects"
|
||
:key="subj.name"
|
||
type="button"
|
||
:data-subject="subj.name"
|
||
@click="formData.subject = subj.name"
|
||
:class="[
|
||
'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-bold transition border',
|
||
formData.subject === subj.name
|
||
? 'bg-[#10192b] border-[#c9a55c] text-[#e2c687] shadow-sm'
|
||
: 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
|
||
]"
|
||
>
|
||
<span>{{ subj.label }}</span>
|
||
<span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-[#e2c687]/80' : 'text-slate-400'">
|
||
{{ subj.badge }}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3) 희망 수업 형태 -->
|
||
<div>
|
||
<label class="block text-xs sm:text-sm font-bold text-[#10192b] mb-2">
|
||
3. 희망 수업 형태
|
||
</label>
|
||
<div class="grid grid-cols-3 gap-2">
|
||
<label
|
||
v-for="type in lessonTypes"
|
||
:key="type"
|
||
class="flex items-center justify-center p-3 rounded-xl border text-xs sm:text-sm font-semibold cursor-pointer transition text-center"
|
||
:class="formData.lessonType === type ? 'bg-[#fbf8f3] border-[#b58e43] text-[#10192b] font-extrabold' : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'"
|
||
>
|
||
<input type="radio" :value="type" v-model="formData.lessonType" class="hidden" />
|
||
<span>{{ type }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4) 현재 가장 큰 고민 -->
|
||
<div>
|
||
<label class="block text-xs sm:text-sm font-bold text-[#10192b] mb-2">
|
||
4. 현재 가장 큰 학습 고민 (복수 선택 가능)
|
||
</label>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs sm:text-sm">
|
||
<label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-[#fbf8f3] border border-[#e4d9c5] rounded-xl cursor-pointer hover:bg-[#f4ece0] transition">
|
||
<input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-[#10192b] rounded border-slate-300">
|
||
<span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5) 거주 지역 / 학교명 입력 -->
|
||
<div>
|
||
<label for="regionInput" class="block text-xs sm:text-sm font-bold text-[#10192b] mb-1.5">
|
||
5. 거주 지역 및 재학 학교명 <span class="text-slate-400 font-normal text-xs">(인근 학교 기출 족보 매칭용)</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="regionInput"
|
||
v-model="formData.region"
|
||
placeholder="예: 서울 강남구 대치동 / 단대부고"
|
||
class="w-full bg-[#fbf8f3] border border-[#d6c7b2] text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-[#c9a55c] focus:border-[#c9a55c] p-3.5 outline-none placeholder:text-slate-400 transition"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 6) 학부모 연락처 -->
|
||
<div>
|
||
<label for="parentPhone" class="block text-xs sm:text-sm font-bold text-[#10192b] mb-1.5">
|
||
6. 학부모 연락처 <span class="text-[#b58e43]">*</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-[#fbf8f3] border border-[#d6c7b2] text-slate-900 text-base font-bold rounded-xl focus:ring-2 focus:ring-[#c9a55c] focus:border-[#c9a55c] p-3.5 pl-11 outline-none tracking-wider"
|
||
/>
|
||
<i class="fa-solid fa-mobile-screen absolute left-4 top-4 text-[#b58e43] 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-[#10192b] rounded border-slate-300">
|
||
<label for="privacyAgree" class="cursor-pointer">
|
||
[필수] 과외 상담 및 무료 시범수업 안내를 위한 개인정보 수집에 동의합니다.
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 제출 버튼 (로열 골드 그라데이션) -->
|
||
<button
|
||
type="submit"
|
||
:disabled="isSubmitting"
|
||
class="w-full btn-hero-gold font-extrabold text-base sm:text-lg py-4 px-6 rounded-xl shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 cursor-pointer"
|
||
>
|
||
<i class="fa-solid fa-crown text-base"></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-shield-halved text-xs text-[#b58e43]"></i>
|
||
<span>입력하신 정보는 안전하게 보호되며, 상담 외 목적으로 절대 사용되지 않습니다.</span>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- 완료 메시지 -->
|
||
<div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-[#fbf8f3] border border-[#c9a55c] rounded-xl text-[#10192b] text-xs sm:text-sm">
|
||
<div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-[#10192b]">
|
||
<i class="fa-solid fa-circle-check text-[#b58e43] text-lg"></i>
|
||
<span>맞춤 과외 시세 및 무료 시범수업 신청이 완료되었습니다!</span>
|
||
</div>
|
||
<p class="leading-relaxed text-slate-700">
|
||
기재해주신 연락처로 <strong>‘서울 관내 학교별 내신 분석 요약표’</strong>가 발송되며, 전담 학습 매니저가 1:1 맞춤 선생님 추천 및 무료 모의수업 일정을 조율해 드립니다.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 9. FAQ 섹션 (더세이브 방식 네이티브 details/summary 시맨틱 구조 유지) -->
|
||
<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-extrabold text-[#9e7a32] tracking-[0.2em]">FAQ</span>
|
||
<h2 class="text-2xl sm:text-3xl font-extrabold text-[#10192b] mt-1 tracking-tight">서울 1:1 맞춤 과외 자주 묻는 질문</h2>
|
||
<p class="text-xs sm:text-sm text-slate-500 mt-1">서울 학부모님들께서 가장 많이 문의하시는 과외 진행 절차입니다.</p>
|
||
</header>
|
||
|
||
<div class="space-y-3">
|
||
<details v-for="(faq, idx) in faqs" :key="idx" :open="idx === 0" class="qa border border-[#e4d9c5] rounded-xl overflow-hidden bg-white shadow-xs group">
|
||
<summary class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-[#10192b] cursor-pointer list-none flex justify-between items-center hover:bg-[#fbf8f3] transition">
|
||
<span>{{ faq.q }}</span>
|
||
<i class="fa-solid fa-chevron-down text-xs sm:text-sm text-[#b58e43] transition-transform group-open:rotate-180"></i>
|
||
</summary>
|
||
<div class="ans p-4 sm:p-5 pt-0 text-xs sm:text-sm text-slate-600 leading-relaxed border-t border-[#f4ece0] bg-[#fbf8f3]/60">
|
||
{{ faq.a }}
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 10. 크롤러 및 사용자 탐색용 전 지역 내부 링크 허브 -->
|
||
<InternalLinkHub :regionDong="defaultDong" grade="중학생" subjectName="수학" />
|
||
|
||
</main>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted } from 'vue'
|
||
|
||
const config = useRuntimeConfig()
|
||
const siteName = config.public.siteName || '로열클래스 1:1 과외'
|
||
const siteDomain = config.public.siteDomain || 'https://aeseo.cloud'
|
||
const defaultDong = '대치동'
|
||
|
||
const isSubmitting = ref(false)
|
||
const submitSuccess = ref(false)
|
||
|
||
const gradeStage = ref('중등')
|
||
|
||
const gradeOptionsByStage = {
|
||
'초등': [
|
||
'초등 1~3학년 (기초 연산·한글 습관)',
|
||
'초등 4학년 (개념 이해·응용)',
|
||
'초등 5학년 (분수·도형 심화)',
|
||
'초등 6학년 (중등 선행 대비)'
|
||
],
|
||
'중등': [
|
||
'중학교 1학년 (자유학기제·자기주도학습)',
|
||
'중학교 2학년 (내신 지필평가 본격 대비)',
|
||
'중학교 3학년 (고등 진학·심화 선행)'
|
||
],
|
||
'고등': [
|
||
'고등학교 1학년 (공통과목 1등급 집중)',
|
||
'고등학교 2학년 (내신 수시 + 수능 정시)',
|
||
'고등학교 3학년 / N수 (수능 최저·실전 파이널)'
|
||
]
|
||
}
|
||
|
||
const currentGradeOptions = computed(() => {
|
||
return gradeOptionsByStage[gradeStage.value] || []
|
||
})
|
||
|
||
function selectGradeStage(stage) {
|
||
gradeStage.value = stage
|
||
formData.grade = currentGradeOptions.value[0] || ''
|
||
}
|
||
|
||
const rollingMessages = [
|
||
"서울 강남구 대치동 중2 수학 무료 시범수업 신청 완료 (방금 전)",
|
||
"서울 서초구 반포동 고1 영어 내신대비 과외 매칭 접수 (1분 전)",
|
||
"서울 송파구 잠실동 중3 과학 오답분석 리포트 신청 (3분 전)",
|
||
"서울 노원구 중계동 초6 중등수학 선행 시범수업 신청 (5분 전)",
|
||
"서울 양천구 목동 고2 국어 비문학 클리닉 신청 (7분 전)"
|
||
]
|
||
const currentNotice = ref(rollingMessages[0])
|
||
let rollingIdx = 0
|
||
|
||
onMounted(() => {
|
||
if (typeof window !== 'undefined') {
|
||
window.addEventListener('select-subject', (e) => {
|
||
if (e.detail && e.detail.subject) {
|
||
const target = e.detail.subject
|
||
try {
|
||
if (typeof subjects !== 'undefined' && Array.isArray(subjects)) {
|
||
const found = subjects.find(s => s.name === target || s.label.startsWith(target))
|
||
if (found) formData.subject = found.name
|
||
} else {
|
||
formData.subject = target
|
||
}
|
||
} catch (_) {
|
||
formData.subject = target
|
||
}
|
||
}
|
||
})
|
||
}
|
||
formData.grade = currentGradeOptions.value[1] || currentGradeOptions.value[0]
|
||
setInterval(() => {
|
||
rollingIdx = (rollingIdx + 1) % rollingMessages.length
|
||
currentNotice.value = rollingMessages[rollingIdx]
|
||
}, 3500)
|
||
})
|
||
|
||
const subjects = [
|
||
{ name: '수학', label: '수학', badge: '인기 1위' },
|
||
{ name: '영어', label: '영어', badge: '내신필수' },
|
||
{ name: '국어', label: '국어', badge: '비문학' },
|
||
{ name: '과학', label: '과학', badge: '탐구영역' },
|
||
{ name: '사회', label: '사회', badge: '한국사' },
|
||
{ name: '전과목', label: '전과목', badge: '학습습관' }
|
||
]
|
||
|
||
const lessonTypes = ['1:1 방문 과외', '1:1 실시간 화상', '상담 후 추천']
|
||
|
||
const concernOptions = [
|
||
'응용·심화 및 킬러 문항 해결력 부족',
|
||
'서술형 주관식 감점 방지 및 시간 부족',
|
||
'개념 이해 부족 및 기초 연산 흔들림',
|
||
'스스로 공부하는 자기주도 학습 습관 부재'
|
||
]
|
||
|
||
const formData = reactive({
|
||
grade: '중학교 2학년 (내신 지필평가 본격 대비)',
|
||
subject: '수학',
|
||
lessonType: '1:1 방문 과외',
|
||
concerns: ['응용·심화 및 킬러 문항 해결력 부족'],
|
||
region: '',
|
||
phone: '',
|
||
privacy: true
|
||
})
|
||
|
||
function formatPhone(e) {
|
||
let val = e.target.value.replace(/[^0-9]/g, '')
|
||
if (val.length > 11) val = val.slice(0, 11)
|
||
if (val.length >= 7) {
|
||
val = val.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
|
||
} else if (val.length >= 4) {
|
||
val = val.replace(/(\d{3})(\d{3,4})/, '$1-$2')
|
||
}
|
||
formData.phone = val
|
||
}
|
||
|
||
const faqs = reactive([
|
||
{
|
||
q: '서울 중등 수학 과외 및 서울 중등 과외 무료 시범수업은 어떻게 진행되나요?',
|
||
a: '신청서 접수 후 서울 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 서울 초·중·고 과외 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.'
|
||
},
|
||
{
|
||
q: '서울 중등 수학 과외 · 서울 초·중·고 과외 비용 및 시세는 어떻게 되나요?',
|
||
a: '서울 중등 과외 및 초등·고등 과외 비용은 학년과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 우리 동네 과외 비용을 안내해 드립니다.'
|
||
},
|
||
{
|
||
q: '서울 중등 과외 선생님 신원과 학력 검증은 어떻게 이루어지나요?',
|
||
a: '서울 중등 수학 과외 및 서울 초·중·고 과외 모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.'
|
||
},
|
||
{
|
||
q: '서울 중등 수학 과외 선생님이 아이와 맞지 않으면 교체가 가능한가요?',
|
||
a: '네, 서울 중등 과외 무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.'
|
||
}
|
||
])
|
||
|
||
async function handleSubmit() {
|
||
if (!formData.grade || !formData.subject || !formData.phone) {
|
||
alert('필수 항목을 모두 입력해 주세요.')
|
||
return
|
||
}
|
||
|
||
isSubmitting.value = true
|
||
try {
|
||
const res = await $fetch('/api/consult', {
|
||
method: 'POST',
|
||
body: {
|
||
name: '학부모 상담 신청',
|
||
phone: formData.phone,
|
||
grade: formData.grade,
|
||
subject: `${formData.subject} (${formData.lessonType})`,
|
||
region: formData.region || '서울 전지역',
|
||
message: `[학습고민] ${formData.concerns.join(', ')}`
|
||
}
|
||
})
|
||
|
||
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
|
||
}
|
||
}
|
||
|
||
const homeCanonical = siteDomain.endsWith('/') ? siteDomain : `${siteDomain}/`
|
||
const homeTitle = `서울 중등 수학 과외 · 서울 중등 과외 | 초·중·고 1:1 맞춤 과외 ${siteName}`
|
||
const homeDesc = `서울 중등 수학 과외, 서울 중등 과외, ${defaultDong} 중등 수학 과외 전문 ${siteName}! 초·중·고 국영수사과 과외 비용·시세 투명 비교부터 검증된 전문 선생님 무료 시범수업 신청까지 1:1 맞춤 솔루션`
|
||
const allBrandImages = [
|
||
`${siteDomain}/img/og-main.png`,
|
||
`${siteDomain}/img/math-tutoring.png`,
|
||
`${siteDomain}/img/english-tutoring.png`,
|
||
`${siteDomain}/img/korean-tutoring.png`,
|
||
`${siteDomain}/img/science-tutoring.png`,
|
||
`${siteDomain}/img/social-studies-tutoring.png`
|
||
]
|
||
|
||
// SEO 태그 및 소셜 메타데이터 (더세이브 방식 메타태그 + 3분할 구조화 데이터 JSON-LD 100% 유지)
|
||
useHead({
|
||
title: homeTitle,
|
||
link: [
|
||
{ rel: 'canonical', href: homeCanonical }
|
||
],
|
||
meta: [
|
||
{ name: 'robots', content: 'index,follow' },
|
||
{ name: 'naver-site-verification', content: '299523ed34c7419d7fb724426e14b5def8badac7' },
|
||
{ name: 'description', content: homeDesc },
|
||
{ name: 'keywords', content: '서울 중등 수학 과외, 서울 중등 과외, 서울 고등 수학 과외, 서울 고등 과외, 서울 초등 수학 과외, 서울 초등 과외, 서울 중등 영어 과외, 서울 고등 영어 과외, 서울 과외, 대치동 과외, 대치동 중등 수학 과외' },
|
||
{ property: 'og:type', content: 'website' },
|
||
{ property: 'og:locale', content: 'ko_KR' },
|
||
{ property: 'og:site_name', content: siteName },
|
||
{ property: 'og:title', content: homeTitle },
|
||
{ property: 'og:description', content: homeDesc },
|
||
{ property: 'og:url', content: homeCanonical },
|
||
{ property: 'og:image', content: `${siteDomain}/img/og-main.png` },
|
||
{ property: 'og:image:type', content: 'image/png' },
|
||
{ property: 'og:image:width', content: '1200' },
|
||
{ property: 'og:image:height', content: '630' },
|
||
{ property: 'og:image:alt', content: '서울 중등 수학 과외 · 서울 중등 과외' },
|
||
{ name: 'twitter:card', content: 'summary_large_image' },
|
||
{ name: 'twitter:title', content: homeTitle },
|
||
{ name: 'twitter:description', content: homeDesc },
|
||
{ name: 'twitter:image', content: `${siteDomain}/img/og-main.png` }
|
||
],
|
||
script: [
|
||
// 1. @graph (WebSite + WebPage + ImageObject + EducationalOrganization + LocalBusiness)
|
||
{
|
||
type: 'application/ld+json',
|
||
children: JSON.stringify({
|
||
'@context': 'https://schema.org',
|
||
'@graph': [
|
||
{
|
||
'@type': 'WebSite',
|
||
'@id': `${siteDomain}/#site`,
|
||
url: homeCanonical,
|
||
name: siteName,
|
||
inLanguage: 'ko-KR'
|
||
},
|
||
{
|
||
'@type': 'WebPage',
|
||
'@id': `${homeCanonical}#page`,
|
||
url: homeCanonical,
|
||
name: homeTitle,
|
||
description: homeDesc,
|
||
isPartOf: { '@id': `${siteDomain}/#site` },
|
||
primaryImageOfPage: { '@id': `${homeCanonical}#img` },
|
||
inLanguage: 'ko-KR'
|
||
},
|
||
{
|
||
'@type': 'ImageObject',
|
||
'@id': `${homeCanonical}#img`,
|
||
url: `${siteDomain}/img/math-tutoring.png`,
|
||
contentUrl: `${siteDomain}/img/math-tutoring.png`,
|
||
width: 1080,
|
||
height: 1080,
|
||
caption: '서울 중등 수학 과외 · 서울 중등 과외'
|
||
},
|
||
{
|
||
'@type': ['EducationalOrganization', 'LocalBusiness'],
|
||
'@id': `${siteDomain}/#org`,
|
||
name: siteName,
|
||
telephone: '+82-10-5961-5807',
|
||
url: homeCanonical,
|
||
image: allBrandImages,
|
||
priceRange: '₩₩',
|
||
address: {
|
||
'@type': 'PostalAddress',
|
||
streetAddress: '테헤란로 123 비전타워 4층',
|
||
addressLocality: '강남구',
|
||
addressRegion: '서울특별시',
|
||
addressCountry: 'KR'
|
||
},
|
||
description: homeDesc,
|
||
areaServed: '서울특별시 전지역'
|
||
}
|
||
]
|
||
})
|
||
},
|
||
// 2. FAQPage 스키마
|
||
{
|
||
type: 'application/ld+json',
|
||
children: JSON.stringify({
|
||
'@context': 'https://schema.org',
|
||
'@type': 'FAQPage',
|
||
mainEntity: faqs.map(faq => ({
|
||
'@type': 'Question',
|
||
name: faq.q,
|
||
acceptedAnswer: {
|
||
'@type': 'Answer',
|
||
text: faq.a
|
||
}
|
||
}))
|
||
})
|
||
},
|
||
// 3. ItemList 과목별 및 학년별 서브 라우터 캐러셀 스키마
|
||
{
|
||
type: 'application/ld+json',
|
||
children: JSON.stringify({
|
||
'@context': 'https://schema.org',
|
||
'@type': 'ItemList',
|
||
name: '서울 중등 수학 과외 · 서울 중등 과외 및 학년별·과목별 1:1 맞춤 과외 프로그램',
|
||
itemListElement: [
|
||
{ sub: '수학', grade: '중학생', title: '서울 중등 수학 과외 · 중학생 수학과외', desc: '서울 중등 수학 과외 및 서울 중등 과외 개념 구멍 추적 및 킬러 문항 1:1 완파', img: 'math-tutoring.png' },
|
||
{ sub: '영어', grade: '중학생', title: '서울 중등 영어 과외 · 중학생 영어과외', desc: '서울 중등 영어 과외 및 서울 중등 과외 교과서·부교재 전 지문 변형 및 서술형 영작', img: 'english-tutoring.png' },
|
||
{ sub: '국어', grade: '중학생', title: '서울 중등 국어 과외 · 중학생 국어과외', desc: '서울 중등 국어 과외 및 비문학 독해 논리와 교과서 문학 1:1 정밀 분석', img: 'korean-tutoring.png' },
|
||
{ sub: '과학', grade: '중학생', title: '서울 중등 과학 과외 · 중학생 과학과외', desc: '서울 중등 과학 과외 및 통합과학 원리 이해·물화생지 킬러 단원 정복', img: 'science-tutoring.png' },
|
||
{ sub: '사회', grade: '중학생', title: '서울 중등 사회 과외 · 중학생 사회과외', desc: '서울 중등 사회 과외 및 통합사회·한국사 핵심 흐름 만점 전략', img: 'social-studies-tutoring.png' },
|
||
{ sub: '수학', grade: '초등학생', title: '서울 초등 수학 과외 · 초등학생 수학과외', desc: '서울 초등 수학 과외 기초 연산 습관 형성 및 중등 선행 심화 대비', img: 'math-tutoring.png' },
|
||
{ sub: '영어', grade: '고등학생', title: '서울 고등 영어 과외 · 고등학생 영어과외', desc: '서울 고등 영어 과외 내신 서술형 감점 방지 및 수능 1등급 완성', img: 'english-tutoring.png' },
|
||
{ sub: '수학', grade: '고등학생', title: '서울 고등 수학 과외 · 고등학생 수학과외', desc: '서울 고등 수학 과외 공통수학·미적분 킬러 문항 및 내신 1등급 전략', img: 'math-tutoring.png' }
|
||
].map((item, idx) => {
|
||
const courseUrl = `${siteDomain}/${encodeURIComponent(defaultDong)}/${encodeURIComponent(item.grade)}/${encodeURIComponent(item.sub)}`
|
||
const courseImg = `${siteDomain}/img/${item.img}`
|
||
const courseName = `${item.title} (${defaultDong})`
|
||
return {
|
||
'@type': 'ListItem',
|
||
position: idx + 1,
|
||
name: courseName,
|
||
url: courseUrl,
|
||
image: courseImg,
|
||
item: {
|
||
'@type': 'Course',
|
||
name: courseName,
|
||
description: item.desc,
|
||
url: courseUrl,
|
||
image: courseImg,
|
||
provider: {
|
||
'@type': 'Organization',
|
||
name: siteName,
|
||
sameAs: siteDomain
|
||
},
|
||
offers: {
|
||
'@type': 'Offer',
|
||
category: 'Paid',
|
||
priceCurrency: 'KRW',
|
||
availability: 'https://schema.org/InStock',
|
||
url: courseUrl
|
||
},
|
||
hasCourseInstance: {
|
||
'@type': 'CourseInstance',
|
||
courseMode: ['onsite', 'online']
|
||
}
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
]
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.landing-container {
|
||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
/* 히어로 배경 이미지 & 다크 오버레이 */
|
||
.royal-hero-section {
|
||
background-color: #0d1424;
|
||
}
|
||
|
||
.hero-bg-wrap {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
.hero-bg-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
}
|
||
|
||
.hero-bg-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(10, 16, 29, 0.72) 0%,
|
||
rgba(16, 25, 43, 0.65) 50%,
|
||
rgba(10, 16, 29, 0.88) 100%
|
||
);
|
||
}
|
||
|
||
.gold-gradient-text {
|
||
background: linear-gradient(180deg, #f9ebb9 0%, #DFB970 50%, #c19344 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
|
||
}
|
||
|
||
.btn-hero-gold {
|
||
background: linear-gradient(135deg, #e5c889 0%, #c49b50 100%);
|
||
color: #0d1424;
|
||
border: 1px solid #f2dfb3;
|
||
}
|
||
|
||
.btn-hero-gold:hover {
|
||
background: linear-gradient(135deg, #f0d79e 0%, #d4ab5f 100%);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-hero-outline {
|
||
background: rgba(16, 25, 43, 0.72);
|
||
color: #f3e4be;
|
||
border: 1.5px solid #c9a55c;
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
|
||
.btn-hero-outline:hover {
|
||
background: rgba(201, 165, 92, 0.22);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* USP 3열 카드 (시안 프레임 디자인) */
|
||
.usp-card {
|
||
border-radius: 14px;
|
||
padding: 6px;
|
||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||
}
|
||
|
||
.usp-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.usp-card-light {
|
||
background: #ffffff;
|
||
border: 1.5px solid #dec492;
|
||
box-shadow: 0 10px 28px rgba(16, 25, 43, 0.06);
|
||
}
|
||
|
||
.usp-card-light .usp-card-inner {
|
||
border: 1px solid rgba(222, 196, 146, 0.45);
|
||
border-radius: 10px;
|
||
padding: 28px 22px;
|
||
height: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.usp-card-navy {
|
||
background: #10192b;
|
||
border: 2px solid #d4b068;
|
||
box-shadow: 0 16px 36px rgba(16, 25, 43, 0.28);
|
||
}
|
||
|
||
.usp-card-navy .usp-card-inner {
|
||
border: 1px solid rgba(212, 176, 104, 0.45);
|
||
border-radius: 10px;
|
||
padding: 28px 22px;
|
||
height: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.usp-icon-wrap {
|
||
width: 54px;
|
||
height: 54px;
|
||
margin: 0 auto 14px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(201, 165, 92, 0.12);
|
||
}
|
||
|
||
.usp-card-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 800;
|
||
line-height: 1.35;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.usp-card-desc {
|
||
font-size: 0.84rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Tutor Lineup 정장 프로필 카드 */
|
||
.tutor-card {
|
||
background: #ffffff;
|
||
border: 1.5px solid #dec492;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 24px rgba(16, 25, 43, 0.07);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 0.25s ease;
|
||
}
|
||
|
||
.tutor-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.tutor-img-box {
|
||
width: 100%;
|
||
aspect-ratio: 1 / 1;
|
||
background: #e8dccb;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tutor-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
}
|
||
|
||
.tutor-body {
|
||
padding: 20px 18px 22px;
|
||
text-align: center;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tutor-badge {
|
||
display: inline-block;
|
||
align-self: center;
|
||
font-size: 0.72rem;
|
||
font-weight: 800;
|
||
color: #9e7a32;
|
||
background: #fbf8f3;
|
||
border: 1px solid #e4d9c5;
|
||
padding: 3px 10px;
|
||
border-radius: 9999px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tutor-title {
|
||
font-size: 0.98rem;
|
||
font-weight: 800;
|
||
color: #10192b;
|
||
line-height: 1.4;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tutor-sub {
|
||
font-size: 0.78rem;
|
||
color: #64748b;
|
||
line-height: 1.5;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.tutor-stat {
|
||
border-top: 1px solid #f1eae0;
|
||
padding-top: 12px;
|
||
font-size: 0.92rem;
|
||
font-weight: 800;
|
||
color: #10192b;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tutor-stat strong {
|
||
color: #b58e43;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* Matching Process 3단계 카드 */
|
||
.process-cards-wrap {
|
||
display: flex;
|
||
align-items: stretch;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
}
|
||
|
||
.mp-card {
|
||
flex: 1;
|
||
background: #ffffff;
|
||
color: #10192b;
|
||
border: 2px solid #d4b068;
|
||
border-radius: 14px;
|
||
padding: 28px 20px;
|
||
text-align: center;
|
||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.mp-num {
|
||
font-size: 2.3rem;
|
||
font-weight: 800;
|
||
color: #c49b50;
|
||
line-height: 1;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.mp-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 800;
|
||
color: #10192b;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.mp-desc {
|
||
font-size: 0.82rem;
|
||
color: #475569;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.mp-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #e2c687;
|
||
font-size: 1.35rem;
|
||
}
|
||
|
||
/* 리뷰 & 그래프 카드 */
|
||
.rv-card {
|
||
background: #ffffff;
|
||
border: 1.5px solid #dec492;
|
||
border-radius: 16px;
|
||
padding: 22px 24px;
|
||
box-shadow: 0 8px 22px rgba(16, 25, 43, 0.05);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.process-cards-wrap {
|
||
flex-direction: column;
|
||
}
|
||
.mp-arrow {
|
||
transform: rotate(90deg);
|
||
padding: 4px 0;
|
||
}
|
||
}
|
||
</style>
|