<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { gsap, TweenMax, TweenLite } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<section class="mission">
		<div class="content">
			<h2>Mission</h2>
			<p>To be the world leading innovative leader in offering the state-of-the-art AI based solutions and systems to disrupt the fashion industry</p>
		</div>
	</section>
	<section class="mission-focus-area">
		<div class="content">
			<div class="img-box">
				<img src="https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg" alt="">
			</div>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.mission{
		width: 100%;
		background-color: #eeeeee;
		> .content{
			margin: 0 auto;
			max-width: 730px;
			padding: 200px 0px 200px 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			> h2{
				margin-bottom: 30px;
				color: #000000;
				font-size: 40px;
				font-weight: 600;
				letter-spacing: 1px;
				font-family: "Poppins", Sans-serif;
			}
			> p{
				color: #555;
				font-size: 16px;
			}

		}
	}
	.mission-video{
		width: 100%;
		background-color: #463a37;
		> .content{
			max-width: 1200px;
			margin: 0 auto;
			padding: 100px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			> .img-box{
				margin: 0 auto;
				position: relative;
				> img{
					width: 1120px;
				}
			}
		}
	}
</style>