web_6ea_educo/daegu/components/HeroBanner.vue

<template>
  <header class="hero-banner-clean bg-white border-b border-slate-200/80 pt-10 sm:pt-14 pb-14 sm:pb-18 px-4 sm:px-6 relative overflow-hidden text-center">
    
    <!-- 은은한 상단 엠비언트 라이트 -->
    <div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>

    <div class="max-w-4xl mx-auto relative z-10">
      
      <!-- 신뢰 보증 뱃지 -->
      <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-5">
        <span class="w-2 h-2 rounded-full bg-blue-600"></span>
        <span>{{ region.dong }} 학군 전담 | 서울대·연고대 및 베테랑 강사진 100% 신원 보증</span>
      </div>
      
      <!-- SEO 메인 H1 (사용자 지정 롱테일 조합형: [지역] + [학년] + [과목]과외 + 검증된 전문 선생님 100% 매칭) -->
      <h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.22] sm:leading-[1.18] mb-4">
        <span>{{ displayRegionName }} {{ grade }} {{ subjectName }}과외</span><br />
        <span class="text-blue-600">우리 아이 맞춤 검증된 전문 선생님 100% 매칭</span>
      </h1>

      <!-- 서브 카피 (비용 시세 비교 + 학교 기출 분석 + 무료 시범수업 신뢰 트리거) -->
      <p class="text-xs sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
        {{ region.dong }} 인근 학교별 기출 분석부터 과외 비용·시세 비교, 취약 개념 클리닉까지.<br class="hidden sm:inline" />
        직접 수업받아보고 결정하는 <strong>1:1 무료 방문·화상 시범수업</strong>을 신청하세요.
      </p>

      <!-- 4대 핵심 신뢰 지표 바 -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-7 text-left">
        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
          <div>
            <strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
            <span class="text-[11px] text-slate-500 leading-tight">학력·경력 증명서 인증</span>
          </div>
        </div>

        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
          <div>
            <strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
            <span class="text-[11px] text-slate-500 leading-tight">직접 받아보고 선택</span>
          </div>
        </div>

        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
          <div>
            <strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 투명 시세</strong>
            <span class="text-[11px] text-slate-500 leading-tight">동네 표준 시세 가이드</span>
          </div>
        </div>

        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
          <div>
            <strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
            <span class="text-[11px] text-slate-500 leading-tight">{{ region.dong }} 3개년 족보 완파</span>
          </div>
        </div>
      </div>

      <!-- CTA 그룹 -->
      <div class="flex flex-col items-center gap-3.5 mb-6">
        <a 
          href="#consult-section" 
          class="inline-flex items-center justify-center gap-2 w-full max-w-md py-4 px-6 bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-sm sm:text-base rounded-xl shadow-md hover:shadow-lg transition-all"
        >
          <i class="fa-solid fa-file-signature text-base"></i>
          <span>{{ region.dong }} 과외 시세 확인 & 무료 시범수업 신청</span>
        </a>
        <div class="flex items-center gap-2 text-xs sm:text-sm text-slate-500">
          <i class="fa-solid fa-phone text-blue-600 text-xs"></i>
          <span>실시간 학습상담 직통: <strong class="text-slate-800 font-bold">010-5961-5807</strong></span>
        </div>
      </div>

      <!-- 실시간 접수 롤링 바 -->
      <div class="inline-flex items-center gap-2.5 bg-slate-100/90 border border-slate-200/80 rounded-full px-4 py-1.5 text-xs text-slate-600 shadow-xs mb-6">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
        <span class="font-bold text-slate-700">실시간 매칭</span>
        <span class="text-slate-300">|</span>
        <span class="truncate max-w-[260px] sm:max-w-md font-medium text-slate-600">{{ currentNotice }}</span>
      </div>

      <!-- 태그 목록 -->
      <div class="flex justify-center flex-wrap gap-1.5">
        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}과외</span>
        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}{{ subjectName }}과외</span>
        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ grade }}내신대비</span>
        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#과외비용시세</span>
        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#1대1무료시범수업</span>
      </div>

    </div>
  </header>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  region: {
    type: Object,
    required: true
  },
  shortRegionName: {
    type: String,
    default: ''
  },
  grade: {
    type: String,
    default: '중학생'
  },
  subjectName: {
    type: String,
    default: '수학'
  }
})

const noticeIdx = ref(0)
let timer = null

const notices = computed(() => {
  const d = props.region?.dong || '관내'
  const sub = props.subjectName || '과목'
  const grd = props.grade || '중학생'
  return [
    `${d} ${grd} ${sub} 1:1 맞춤 전담 선생님 매칭 완료`,
    `${d} 내신 1등급 도약 무료 시범수업 신청 접수 중`,
    `${d} 학교별 3개년 기출 족보 분석 자료 배부 완료`,
    `${d} 취약 단원 집중 클리닉 및 모의수업 예약 마감 임박`
  ]
})

const currentNotice = computed(() => notices.value[noticeIdx.value % notices.value.length])

onMounted(() => {
  timer = setInterval(() => {
    noticeIdx.value = (noticeIdx.value + 1) % notices.value.length
  }, 3500)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

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 = '경기'
      return `${shortSido} ${dong}`
    }
    return dong || sido
  }
  return ''
})
</script>

<style scoped>
.hero-banner-clean {
  word-break: keep-all;
}
</style>