<script setup lang="ts">
import { computed } from 'vue'
import Ecosystem from './ecosystem.vue'
import Title from './title.vue'
import Mission from './mission.vue'
import OurTeam from './our-team.vue'
import StrategicPartners from './strategic-partners.vue'
import { useGlobalStore } from '@/stores/global'
import { useHead } from '@unhead/vue'
import { useI18n } from 'vue-i18n'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
const { t } = useI18n()
useHead({
	title: t('aboutUs.Title'),
	meta: [
		{
			name: 'description',
			content: t('aboutUs.meta')
		}
	]
})
defineExpose({})

</script>
<template>
	<div class="about-us">
		<div class="bg" v-show="windowWidth > 1000">
			<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/12/about_banner-1.jpg" alt="">
		</div>
		<Title />
		<Ecosystem />
		<Mission />
		<OurTeam />
		<StrategicPartners />
	</div>
</template>
<style lang="less" scoped>
	.about-us{
		width: 100%;
		height: 100%;
		position: relative;
		> .bg{
			width: 100%;
			position: fixed;
			z-index: -1;
			top: 0;
			> img{
				width: 100%;
			}
		}
	}
</style>
