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

seo 기반으로 설정 완료

Browse Source
This commit is contained in:
kyounggu
2026-10-13 02:00:03 +09:00
parent 75f6f74e84
commit 7b999f2732
29 changed files with 48144 additions and 132612 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site3/pages/index.vue
+26 -84
View File
@@ -1,54 +1,8 @@
<template>
<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>
<!-- 인스펙터 서랍 -->
<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>
<!-- Header -->
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm w-full">
<header class="bg-white border-b border-slate-200 sticky top-0 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">
@@ -56,7 +10,7 @@
</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>
<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">SMART 정밀 진단</span>
</div>
</div>
@@ -66,7 +20,7 @@
<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>
<span>정밀 진단 신청</span>
<i class="fa-solid fa-arrow-right text-[11px]"></i>
</a>
</div>
@@ -84,11 +38,11 @@
<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>
<span>관내 초·중·고 학교별 내신 기출 완벽 분석</span>
</div>
<h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
빅데이터 AI 정밀 분석 기반<br class="hidden sm:inline">
우리 동네 학교별 맞춤 내신·수능 대비<br class="hidden sm:inline">
<span class="text-cyan-200 underline decoration-wavy decoration-cyan-300">취약 단원 핀포인트 1:1 클리닉</span> 무료 리포트 신청
</h1>
@@ -99,15 +53,15 @@
<!-- 지표 카운터 -->
<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 class="text-[11px] sm:text-xs text-sky-200">지역 전담 강사진</div>
<div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">3,500<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 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">100<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="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>
@@ -126,7 +80,7 @@
<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 정밀 분석 무료
선착순 30명 정밀 분석 무료
</span>
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">
분석받고 싶은 과목과 학년을 선택하세요!
@@ -229,7 +183,7 @@
<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>
<span class="text-slate-400 font-normal text-xs">(정밀 진단표 발송용)</span>
</label>
<div class="relative">
<input
@@ -261,7 +215,7 @@
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>
<span>{{ isSubmitting ? '분석 중...' : '정밀 진단 리포트 & 1:1 클리닉 신청하기' }}</span>
</button>
<div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
@@ -284,10 +238,10 @@
<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>
<span>학습 정밀 진단 신청이 성공적으로 접수되었습니다!</span>
</div>
<p class="leading-relaxed">
기재해주신 연락처로 <strong>‘AI 취약 단원 분석 리포트’</strong>가 발송되며, 전문 입시 분석관이 유선으로 심층 솔루션을 안내해 드립니다.
기재해주신 연락처로 <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>
@@ -373,7 +327,7 @@
</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>
@@ -408,7 +362,7 @@
<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>
<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">
@@ -442,17 +396,6 @@
</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">
@@ -478,7 +421,7 @@
</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>
<span>지금 무료 정밀 진단 신청하기</span>
</a>
</div>
</aside>
@@ -493,12 +436,11 @@ const config = useRuntimeConfig()
const siteName = config.public.siteName || '테크노바 스마트러닝'
const siteDomain = config.public.siteDomain || 'https://aeseo.site'
const showInspector = ref(false)
const isSubmitting = ref(false)
const submitSuccess = ref(false)
const rollingMessages = [
"경기 성남시 분당구 수내동 고1 수학 킬러문항 AI 분석 접수 (방금 전)",
"경기 성남시 분당구 수내동 고1 수학 킬러문항 정밀 분석 접수 (방금 전)",
"경기 성남시 판교동 중3 과학 탐구 오답 클리닉 신청 완료 (1분 전)",
"경기 수원시 영통구 고2 영어 빈칸추론 정밀 진단 신청 (3분 전)",
"경기 용인시 수지구 중2 수학 개념 단원 역추적 접수 (5분 전)",
@@ -540,8 +482,8 @@ const formData = reactive({
const faqs = reactive([
{
q: '1. AI 정밀 진단은 어떻게 진행되나요?',
a: '신청서를 남겨주시면 최근 학교 시험지 및 모의고사 성적을 바탕으로 AI 알고리즘이 학생의 취약 단원과 오답 패턴을 5단계로 역추적하여 리포트를 제공합니다.',
q: '1. 학습 정밀 진단은 어떻게 진행되나요?',
a: '신청서를 남겨주시면 최근 학교 시험지 및 모의고사 성적을 바탕으로 학생의 취약 단원과 오답 패턴을 5단계로 역추적하여 정밀 리포트를 제공합니다.',
open: false
},
{
@@ -551,7 +493,7 @@ const faqs = reactive([
},
{
q: '3. 정밀 진단 비용이 정말 무료인가요?',
a: '네, 현재 프로모션 기간 동안 신청하시는 모든 분께 AI 진단 리포트와 전문 학습 매니저의 전화 분석이 전액 무료로 제공됩니다.',
a: '네, 현재 프로모션 기간 동안 신청하시는 모든 분께 정밀 진단 리포트와 전문 학습 매니저의 전화 분석이 전액 무료로 제공됩니다.',
open: false
},
{
@@ -584,7 +526,7 @@ async function handleSubmit() {
const res = await $fetch('/api/consult', {
method: 'POST',
body: {
name: '학부모 (AI진단신청)',
name: '학부모 (정밀진단신청)',
phone: formData.phone,
grade: formData.grade,
schoolName: formData.region || '지역 미기재',
@@ -611,10 +553,10 @@ async function handleSubmit() {
}
useHead({
title: `${siteName} | AI 취약 단원 역추적 1:1 스마트 맞춤과외`,
title: `${siteName} | 우리 동네 1:1 전담 맞춤과외`,
meta: [
{ name: 'description', content: `${siteName} - 빅데이터 AI 정밀 분석을 통한 초중고 취약 단원 역추적 및 1:1 과외 매칭 무료 리포트 신청.` },
{ property: 'og:title', content: `${siteName} | AI 빅데이터 1:1 학습 정밀 진단` },
{ name: 'description', content: `${siteName} - 관내 초·중·고 학교별 내신 기출 완벽 분석 및 취약 단원 1:1 맞춤과외 매칭.` },
{ property: 'og:title', content: `${siteName} | 우리 동네 1:1 맞춤과외 센터` },
{ property: 'og:description', content: '데이터로 찾는 성적 향상의 지름길! 취약 단원 핀포인트 클리닉.' },
{ property: 'og:url', content: siteDomain }
],