239 lines
6.5 KiB
Vue
239 lines
6.5 KiB
Vue
<template>
|
|
<header class="hero-banner">
|
|
<div class="hero-container">
|
|
<div class="hero-badge-wrap">
|
|
<span class="hero-badge royal-badge">{{ region.dong }} 학군 맞춤 1:1 전문 지도</span>
|
|
<span class="hero-subbadge">2026 개정 교육과정 완벽 반영</span>
|
|
</div>
|
|
|
|
<h1 class="hero-title">
|
|
<span class="region-highlight">{{ displayRegionName }}</span><br />
|
|
<span class="subject-highlight">{{ grade }} {{ subjectName }}</span> 1:1 맞춤 과외
|
|
</h1>
|
|
|
|
<p class="hero-desc">
|
|
{{ region.dong }} 인근 학교별 기출 분석부터 서술형 조건 감점 0점화까지!<br />
|
|
우리 아이의 취약점을 1:1로 진단하고 <strong>성적 1등급 역전</strong>을 이끌어냅니다.
|
|
</p>
|
|
|
|
<div class="hero-cta-group">
|
|
<a href="#consult-section" class="btn-hero-primary">
|
|
<span>{{ region.dong }} 1:1 무료 방문·진단 모의수업 신청</span>
|
|
</a>
|
|
<div class="hero-call-info">
|
|
<span class="call-icon"></span>
|
|
<span class="call-text">실시간 학습상담 <strong>010-5961-5807</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-tags">
|
|
<span class="tag-item">#{{ region.dong }}과외</span>
|
|
<span class="tag-item">#{{ region.dong }}{{ subjectName }}</span>
|
|
<span class="tag-item">#{{ grade }}내신대비</span>
|
|
<span class="tag-item">#서술형감점방지</span>
|
|
<span class="tag-item">#1대1밀착코칭</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
region: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
shortRegionName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
grade: {
|
|
type: String,
|
|
default: '중학생'
|
|
},
|
|
subjectName: {
|
|
type: String,
|
|
default: '영어'
|
|
}
|
|
})
|
|
|
|
// '대구광역시 수성구 황금동' -> '대구 황금동' 등 축약 지역명 산출
|
|
const displayRegionName = computed(() => {
|
|
if (props.shortRegionName) return props.shortRegionName
|
|
if (props.region) {
|
|
const sido = props.region.sido || ''
|
|
const dong = props.region.dong || ''
|
|
if (sido && dong) {
|
|
let shortSido = sido.slice(0, 2)
|
|
if (sido.includes('서울')) shortSido = '서울'
|
|
else if (sido.includes('대구')) shortSido = '대구'
|
|
else if (sido.includes('부산')) shortSido = '부산'
|
|
else if (sido.includes('인천')) shortSido = '인천'
|
|
else if (sido.includes('광주')) shortSido = '광주'
|
|
else if (sido.includes('대전')) shortSido = '대전'
|
|
else if (sido.includes('울산')) shortSido = '울산'
|
|
else if (sido.includes('세종')) shortSido = '세종'
|
|
else if (sido.includes('경기')) shortSido = '경기'
|
|
else if (sido.includes('강원')) shortSido = '강원'
|
|
else if (sido.includes('충북') || sido.includes('충청북')) shortSido = '충북'
|
|
else if (sido.includes('충남') || sido.includes('충청남')) shortSido = '충남'
|
|
else if (sido.includes('전북') || sido.includes('전라북')) shortSido = '전북'
|
|
else if (sido.includes('전남') || sido.includes('전라남')) shortSido = '전남'
|
|
else if (sido.includes('경북') || sido.includes('경상북')) shortSido = '경북'
|
|
else if (sido.includes('경남') || sido.includes('경상남')) shortSido = '경남'
|
|
else if (sido.includes('제주')) shortSido = '제주'
|
|
return `${shortSido} ${dong}`.trim()
|
|
}
|
|
return props.region.fullName || ''
|
|
}
|
|
return ''
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-banner {
|
|
background: var(--hero-gradient, linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%));
|
|
color: #ffffff;
|
|
padding: clamp(40px, 8vw, 80px) 16px clamp(35px, 6vw, 60px);
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.hero-banner::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: radial-gradient(circle at 50% 20%, rgba(217, 119, 6, 0.15) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-badge-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
font-size: clamp(0.78rem, 2.2vw, 0.9rem);
|
|
font-weight: 700;
|
|
border-radius: 9999px;
|
|
background: var(--accent-color, #d97706);
|
|
color: #ffffff;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
|
|
.hero-subbadge {
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
font-size: clamp(0.75rem, 2vw, 0.85rem);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(4px);
|
|
border-radius: 9999px;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(1.65rem, 5vw, 2.85rem);
|
|
font-weight: 900;
|
|
line-height: 1.3;
|
|
margin-bottom: 18px;
|
|
word-break: keep-all;
|
|
letter-spacing: -0.8px;
|
|
}
|
|
|
|
.region-highlight {
|
|
color: var(--hero-region-color, #cbd5e1);
|
|
font-size: 0.85em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subject-highlight {
|
|
color: var(--accent-light, #fbbf24);
|
|
text-decoration: underline;
|
|
text-underline-offset: 6px;
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: clamp(0.92rem, 2.6vw, 1.15rem);
|
|
line-height: 1.65;
|
|
color: #e2e8f0;
|
|
margin-bottom: 30px;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.hero-cta-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.btn-hero-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: clamp(14px, 3.5vw, 18px) clamp(20px, 5vw, 36px);
|
|
font-size: clamp(0.95rem, 2.8vw, 1.2rem);
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
background: var(--hero-btn-bg, linear-gradient(135deg, #d97706 0%, #b45309 100%));
|
|
border-radius: var(--card-radius, 12px);
|
|
box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
width: 100%;
|
|
max-width: 480px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.btn-hero-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 28px rgba(217, 119, 6, 0.45);
|
|
}
|
|
|
|
.hero-call-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: clamp(0.85rem, 2.2vw, 0.95rem);
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.hero-call-info strong {
|
|
color: #ffffff;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.hero-tags {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tag-item {
|
|
font-size: clamp(0.72rem, 1.8vw, 0.82rem);
|
|
padding: 4px 10px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 6px;
|
|
color: #cbd5e1;
|
|
}
|
|
</style>
|