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