142 lines
3.5 KiB
Vue
142 lines
3.5 KiB
Vue
<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>
|
|
|
|
<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">➔</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">➔</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">➔</div>
|
|
<div class="flow-step highlight">
|
|
<div class="step-num-circle">4</div>
|
|
<h3 class="step-label">정규 수업 & 코칭</h3>
|
|
<p class="step-desc">선생님 최종 확정 후 주간 플래너 및 맞춤 커리큘럼 시작</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.process-section {
|
|
max-width: 1080px;
|
|
margin: 0 auto 50px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.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;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.3rem, 3.8vw, 1.95rem);
|
|
font-weight: 800;
|
|
color: var(--text-color, #1e293b);
|
|
letter-spacing: -0.6px;
|
|
word-break: keep-all;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: clamp(0.85rem, 2.2vw, 0.98rem);
|
|
color: #64748b;
|
|
margin-top: 6px;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.process-flow {
|
|
display: flex;
|
|
align-items: center;
|
|
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);
|
|
}
|
|
|
|
.flow-step {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.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-label {
|
|
font-size: clamp(0.88rem, 2.2vw, 1rem);
|
|
font-weight: 800;
|
|
color: var(--text-color, #0f172a);
|
|
margin-bottom: 6px;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.step-desc {
|
|
font-size: clamp(0.74rem, 1.8vw, 0.82rem);
|
|
color: #64748b;
|
|
line-height: 1.45;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.flow-arrow {
|
|
color: #cbd5e1;
|
|
font-size: 1.2rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.process-flow {
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
.flow-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
</style>
|