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

ui 개편 완료

Browse Source
This commit is contained in:
kyounggu
2026-11-11 12:18:47 +09:00
parent 67a7fa0326
commit 15e8bcd37b
145 changed files with 141907 additions and 23029 deletions
Download Patch File Download Diff File Expand all files Collapse all files
seoul/components/ProcessGuide.vue
+83 -80
View File
@@ -1,138 +1,141 @@
<template>
<section class="process-section">
<div class="section-header">
<span class="section-badge">쉽고 빠른 시작</span>
<h2 class="section-title">1:1 맞춤 과외 4단계 진행 프로세스</h2>
<p class="section-desc">무료 상담부터 모의수업까지 부담 없이 체험해보고 결정하실 수 있습니다.</p>
</div>
<section id="process-section" class="royal-process-section">
<div class="process-inner">
<div class="section-header">
<span class="section-badge">MATCHING PROCESS</span>
<h2 class="section-title">
진단 테스트 및 상담 <span class="gold-arrow">➔</span> 최적의 교사 매칭 <span class="gold-arrow">➔</span> 1:1 맞춤 수업 진행
</h2>
<p class="section-desc">무료 학습 진단부터 시범수업까지 직접 경험해보고 결정하실 수 있습니다.</p>
</div>
<div class="process-flow">
<div class="flow-step">
<div class="step-num-circle">1</div>
<h3 class="step-label">무료 상담 신청</h3>
<p class="step-desc">온라인 폼 또는 전화로 학생의 지역, 학년, 희망 과목 접수</p>
</div>
<div class="flow-arrow"><i class="fa-solid fa-chevron-right"></i></div>
<div class="flow-step">
<div class="step-num-circle">2</div>
<h3 class="step-label">학습 정밀 진단</h3>
<p class="step-desc">전문 교육팀장이 유선으로 학생의 최근 성적, 성향 및 목표 분석</p>
</div>
<div class="flow-arrow"><i class="fa-solid fa-chevron-right"></i></div>
<div class="flow-step">
<div class="step-num-circle">3</div>
<h3 class="step-label">1회 무료 모의수업</h3>
<p class="step-desc">배정된 전담 선생님과 1:1 방문 또는 화상 시범 수업 진행</p>
</div>
<div class="flow-arrow"><i class="fa-solid fa-chevron-right"></i></div>
<div class="flow-step highlight">
<div class="step-num-circle">4</div>
<h3 class="step-label">정규 수업 & 코칭</h3>
<p class="step-desc">선생님 최종 확정 후 주간 플래너 및 맞춤 커리큘럼 시작</p>
<div class="process-flow">
<div class="flow-step">
<div class="step-num font-royal-serif">1</div>
<h3 class="step-label">진단 테스트 및 상담</h3>
<p class="step-desc">온라인 또는 전화로 학생의 현재 성적, 학습 성향 및 목표 대학·학교 정밀 분석</p>
</div>
<div class="flow-arrow"><i class="fa-solid fa-arrow-right"></i></div>
<div class="flow-step">
<div class="step-num font-royal-serif">2</div>
<h3 class="step-label">최적의 교사 매칭</h3>
<p class="step-desc">학생 성향과 목표 등급에 최적화된 전담 선생님 배정 및 1회 무료 모의수업 진행</p>
</div>
<div class="flow-arrow"><i class="fa-solid fa-arrow-right"></i></div>
<div class="flow-step">
<div class="step-num font-royal-serif">3</div>
<h3 class="step-label">1:1 맞춤 수업 진행</h3>
<p class="step-desc">선생님 확정 후 학교별 기출 족보 밀착 코칭 및 주간 메타인지 플래너 관리</p>
</div>
</div>
</div>
</section>
</template>
<style scoped>
.process-section {
max-width: 1080px;
.royal-process-section {
background: #10192b;
color: #ffffff;
padding: clamp(48px, 6vw, 72px) 16px;
margin: 0 auto 50px;
padding: 0 16px;
border-top: 1px solid rgba(212, 176, 104, 0.35);
border-bottom: 1px solid rgba(212, 176, 104, 0.35);
}
.process-inner {
max-width: 1080px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 28px;
margin-bottom: 36px;
}
.section-badge {
display: inline-block;
font-size: clamp(0.78rem, 2vw, 0.88rem);
font-weight: 700;
color: var(--primary-color, #1e3a8a);
background: var(--badge-bg, rgba(30, 58, 138, 0.08));
padding: 5px 12px;
border-radius: 9999px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.22em;
color: #e2c687;
margin-bottom: 8px;
}
.section-title {
font-size: clamp(1.3rem, 3.8vw, 1.95rem);
font-size: clamp(1.25rem, 3.4vw, 1.85rem);
font-weight: 800;
color: var(--text-color, #1e293b);
letter-spacing: -0.6px;
color: #ffffff;
letter-spacing: -0.4px;
word-break: keep-all;
line-height: 1.35;
}
.gold-arrow {
color: #e2c687;
margin: 0 4px;
}
.section-desc {
font-size: clamp(0.85rem, 2.2vw, 0.98rem);
color: #64748b;
margin-top: 6px;
word-break: keep-all;
font-size: clamp(0.84rem, 2vw, 0.95rem);
color: #cbd5e1;
margin-top: 8px;
}
.process-flow {
display: flex;
align-items: center;
align-items: stretch;
justify-content: space-between;
gap: 10px;
background: var(--bg-card, #ffffff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: var(--card-radius, 16px);
padding: clamp(20px, 4vw, 32px) clamp(16px, 3vw, 24px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
gap: 14px;
}
.flow-step {
flex: 1;
background: #ffffff;
border: 2px solid #d4b068;
border-radius: 14px;
padding: 28px 20px;
text-align: center;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.step-num-circle {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--primary-color, #1e3a8a);
color: #ffffff;
font-size: 1.1rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
}
.flow-step.highlight .step-num-circle {
background: var(--accent-color, #d97706);
.step-num {
font-size: 2.3rem;
font-weight: 800;
color: #c49b50;
line-height: 1;
margin-bottom: 12px;
}
.step-label {
font-size: clamp(0.88rem, 2.2vw, 1rem);
font-size: 1.08rem;
font-weight: 800;
color: var(--text-color, #0f172a);
margin-bottom: 6px;
word-break: keep-all;
color: #10192b;
margin-bottom: 8px;
}
.step-desc {
font-size: clamp(0.74rem, 1.8vw, 0.82rem);
color: #64748b;
line-height: 1.45;
font-size: 0.82rem;
color: #475569;
line-height: 1.55;
word-break: keep-all;
}
.flow-arrow {
color: #cbd5e1;
font-size: 1.2rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
color: #e2c687;
font-size: 1.35rem;
}
@media (max-width: 768px) {
.process-flow {
flex-direction: column;
gap: 18px;
gap: 14px;
}
.flow-arrow {
transform: rotate(90deg);