94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<template>
|
|
<footer class="site-footer">
|
|
<div class="footer-container">
|
|
<div class="footer-info">
|
|
<h4 class="footer-brand">{{ siteName }}</h4>
|
|
<p class="footer-meta">
|
|
전국 초·중·고 1:1 맞춤 방문과외 및 실시간 화상코칭 서비스 | 대표번호: 010-5961-5807<br />
|
|
사업자등록번호: 123-45-67890 | 통신판매업신고: 제2026-서울강남-0123호 | 개인정보관리책임자: 교육연구소<br />
|
|
주소: 서울특별시 강남구 테헤란로 123 에듀빌딩 4층
|
|
</p>
|
|
<p class="footer-copy">
|
|
Copyright © 2026 {{ siteName }}. All rights reserved.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<a href="#consult-section" class="f-link">무료상담신청</a>
|
|
<span class="f-divider">|</span>
|
|
<span class="f-link">이용약관</span>
|
|
<span class="f-divider">|</span>
|
|
<span class="f-link"><strong>개인정보처리방침</strong></span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup>
|
|
const config = useRuntimeConfig()
|
|
const siteName = config.public.siteName || '에듀로열 1:1 과외'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.site-footer {
|
|
background: var(--footer-bg, #0f172a);
|
|
color: #94a3b8;
|
|
padding: clamp(30px, 5vw, 50px) 16px;
|
|
font-size: clamp(0.72rem, 1.8vw, 0.82rem);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.footer-container {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-info {
|
|
flex: 1 1 500px;
|
|
}
|
|
|
|
.footer-brand {
|
|
font-size: clamp(1rem, 2.4vw, 1.15rem);
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.footer-meta {
|
|
line-height: 1.6;
|
|
margin-bottom: 12px;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.footer-copy {
|
|
color: #64748b;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.f-link {
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.f-divider {
|
|
color: #475569;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.footer-container {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
}
|
|
</style>
|