Code-Create/src/components/main-footer.vue

<template>
	<footer class="main-footer">
		<div class="left">
			<span>©2025 Code-Create Limited</span>
		</div>
		<div class="right">
			<div v-for="item in nav" :key="item.path">
				<router-link class="link" :to="item.path">{{ item.name }}</router-link>
			</div>
		</div>
	</footer>
</template>
<script setup lang="ts">
	import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
	const nav = ref([
		{
			name: 'Privacy Policy',
			path: '/privacy-policy'
		},
		{
			name: 'Terms of Use',
			path: '/terms-of-use'
		},
		{
			name: 'Disclaimer',
			path: '/disclaimer'
		},
		{
			name: 'Site Map',
			path: '/site-map'
		}
	])
</script>
<style lang="less" scoped>
	.main-footer {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 15px 0;
		min-height: 140px;
		display: flex;
		justify-content: space-between;
		font-family: Poppins, sans-serif;
		> .left {
			font-size: 13px;
			font-weight: normal;
			line-height: 24px;
			color: #000000b3;
		}
		> .right {
			display: flex;
			align-items: flex-start;
			> div {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-left: 20px;
				border-left: 1px solid #0a0a0a;
				margin-left: 20px;
				&:first-child {
					border-left: none;
					padding-left: 0;
					margin-left: 0;
				}
				> .link {
					font-weight: 400;
					font-size: 12px;
					transition: all 0.2s ease-out;
					box-sizing: border-box;
					box-shadow: none;
					text-decoration: none;
					display: inline-block;
					color: #0a0a0a;
				}
			}
		}
	}
</style>