129 lines
5.7 KiB
Vue
129 lines
5.7 KiB
Vue
<template>
|
|
<footer
|
|
class="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800"
|
|
>
|
|
<div class="mx-auto max-w-7xl overflow-hidden px-6 py-12 sm:py-16 lg:px-8">
|
|
<div class="flex justify-center mb-8">
|
|
<NuxtLink to="/" aria-label="Bobu Home">
|
|
<span class="sr-only">Bobu</span>
|
|
<img
|
|
class="h-10 w-auto block dark:hidden transition-all duration-300"
|
|
:src="LOGOS.RedGaro"
|
|
alt="Bobu Logo Light"
|
|
/>
|
|
<img
|
|
class="h-10 w-auto hidden dark:block transition-all duration-300"
|
|
:src="LOGOS.White"
|
|
alt="Bobu Logo Dark"
|
|
/>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<nav
|
|
class="-mb-6 flex flex-wrap justify-center gap-x-6 sm:gap-x-12 gap-y-3 text-sm"
|
|
aria-label="Footer Navigation"
|
|
>
|
|
<NuxtLink
|
|
v-for="item in navigation.main"
|
|
:key="item.name"
|
|
:to="item.href"
|
|
class="font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
|
|
>
|
|
{{ item.name }}
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<hr class="my-8 border-gray-300 dark:border-gray-700 w-1/2 mx-auto" />
|
|
|
|
<div
|
|
class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400 space-y-1"
|
|
>
|
|
<p>
|
|
<span class="font-semibold">사업자등록번호 :</span>
|
|
{{ companyInfo.registrationNumber }}
|
|
</p>
|
|
<p>
|
|
<span class="font-semibold">대표이사 :</span>
|
|
{{ companyInfo.president }}
|
|
</p>
|
|
<p>
|
|
<span class="font-semibold">주소 :</span> {{ companyInfo.address }}
|
|
</p>
|
|
<p>
|
|
<span class="font-semibold">연락처 :</span> {{ companyInfo.phone }}
|
|
<span class="text-gray-400 dark:text-gray-600 mx-1">|</span>
|
|
<span class="font-semibold">팩스 :</span> {{ companyInfo.fax }}
|
|
</p>
|
|
<p>
|
|
<span class="font-semibold">이메일 : </span> {{ companyInfo.email }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- <div class="mt-10 flex justify-center gap-x-8 sm:gap-x-10">
|
|
<a
|
|
v-for="item in navigation.social"
|
|
:key="item.name"
|
|
:href="item.href"
|
|
class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span class="sr-only">{{ item.name }}</span>
|
|
<component :is="item.icon" class="size-6" aria-hidden="true" />
|
|
</a>
|
|
</div> -->
|
|
|
|
<p
|
|
class="mt-10 text-center text-xs sm:text-sm text-gray-500 dark:text-gray-400"
|
|
>
|
|
© {{ companyInfo.copyYear }} {{ companyInfo.name }}. All rights
|
|
reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent, h } from 'vue';
|
|
import { LOGOS } from '@/data/assets'; // Make sure you have LOGOS defined/imported
|
|
import { companyInfo } from '@/data/config';
|
|
|
|
// Define Navigation (Consider moving social icons to components)
|
|
const navigation = {
|
|
main: [
|
|
// Use actual paths or hashes relevant to your site structure
|
|
{ name: '회사소개', href: '/about' },
|
|
{ name: '쇼핑하기', href: '/shop' },
|
|
{ name: '공유 오피스 예약', href: '/office' },
|
|
{ name: '문의하기', href: '/contact' },
|
|
// { name: '개인정보처리방침', href: '/privacy' },
|
|
// { name: '이용약관', href: '/terms' },
|
|
],
|
|
social: [
|
|
{
|
|
name: 'Instagram',
|
|
href: '#', // Replace with your actual Instagram link
|
|
// SUGGESTION: Replace this complex inline icon definition
|
|
// with an imported component like <InstagramIcon /> or library icon
|
|
icon: defineComponent({
|
|
render: () =>
|
|
h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
|
|
h('path', {
|
|
'fill-rule': 'evenodd',
|
|
// Example Instagram Path (replace with actual minimal path if possible)
|
|
d: 'M12 2.163c3.204 0 3.584.012 4.85.07 1.272.058 2.163.248 2.948.568.859.333 1.564.824 2.27 1.531.707.707 1.198 1.411 1.531 2.27.32.785.51 1.676.568 2.948.058 1.265.07 1.645.07 4.85s-.012 3.584-.07 4.85c-.058 1.272-.248 2.163-.568 2.948-.333.859-.824 1.564-1.531 2.27-.707.707-1.411 1.198-2.27 1.531-.785.32-1.676.51-2.948.568-1.265.058-1.645.07-4.85.07s-3.584-.012-4.85-.07c-1.272-.058-2.163-.248-2.948-.568-.859-.333-1.564-.824-2.27-1.531-.707-.707-1.198-1.411-1.531-2.27-.32-.785-.51-1.676-.568-2.948-.058-1.265-.07-1.645-.07-4.85s.012-3.584.07-4.85c.058-1.272.248-2.163.568-2.948.333-.859.824-1.564 1.531 2.27.707-.707 1.411-1.198 2.27-1.531.785-.32 1.676-.51 2.948-.568C8.416 2.175 8.796 2.163 12 2.163m0-1.014c-3.247 0-3.65.013-4.924.072-1.356.06-2.328.25-3.17.58C2.97 2.21 2.24 2.713 1.53 3.423.82 4.133.317 4.862.09 5.787c-.33 1.04-.52 2.012-.58 3.368C-.07 10.32-.083 10.727-.083 12s.013 1.68.072 2.95c.06 1.356.25 2.328.58 3.17.227.925.73 1.655 1.44 2.365.71.71 1.44.213 2.365.44.842.33 1.814.52 3.17.58 1.273.06 1.676.072 4.924.072s3.65-.013 4.924-.072c1.356-.06 2.328-.25 3.17-.58.925-.227 1.655-.73 2.365-1.44.71-.71 1.213-1.44 1.44-2.365.33-.842.52-1.814.58-3.17.06-1.27.072-1.675.072-4.95s-.013-3.678-.072-4.948c-.06-1.356-.25-2.328-.58-3.17-.227-.925-.73-1.655-1.44-2.365C21.87 1.317 21.14.814 20.216.586c-.842-.33-1.814-.52-3.17-.58C15.65.013 15.247 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z',
|
|
'clip-rule': 'evenodd',
|
|
}),
|
|
]),
|
|
}),
|
|
},
|
|
// Add more social links here if needed
|
|
// { name: 'Facebook', href: '#', icon: FacebookIconComponent },
|
|
],
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Add any component-specific styles here if needed */
|
|
</style>
|