<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([
//])
const imgItem1 = ref(null)
let data = reactive({
})
onMounted(()=>{
	
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<section class="strategic-partners">
		<div class="content">
			<h2 v-tween="{'y':'30px','opacity':0}">{{ $t('aboutUs.StrategicPartners') }}</h2>
			<div class="img-box" v-tween="{'y':'30px','opacity':0}">
				<a href="https://www.aidlab.hk/">
					<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/about_partners_01.png" alt="">
				</a>
				<a href="https://www.polyu.edu.hk/">
					<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/about_partners_02-1.png" alt="">
				</a>
				<a href="https://www.rca.ac.uk/">
					<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/about_partners_03-300x145.png" alt="">
				</a>
				<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2025/05/Eschange-600x130.jpg" alt="">
			</div>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.strategic-partners{
		width: 100%;
		background-color: #fff;
		> .content{
			margin: 0 auto;
			max-width: 1440px;
			padding: 200px 0px 200px 0px;
			@media (max-width: 1000px) {
				padding: 60px 20px 60px 20px;
				max-width: 1000px;
			}
			> h2{
				font-family: "Poppins", Sans-serif;
				font-size: 40px;
				font-weight: 600;
				letter-spacing: 1px;
				color: #000000;
				margin-bottom: 30px;
				text-align: center;
				@media (max-width: 1000px) {
					font-size: 28px;
				}
			}
			> .img-box{
				width: 1110px;
				margin: 0 auto;
				margin-top: 40px;
				display: flex;
				height: 100px;
				@media (max-width: 1000px) {
					height: auto;
					flex-direction: column;
					align-items: center;
					width: 100%;

				}
				> a{
					width: 25%;
					@media (max-width: 1000px) {
						text-align: center;
						width: 100%;
						height: 100px;
					}
					> img{
						object-fit: contain;
						height: 100%;
						width: 100%;
					}
				}
				> img{
					width: 25%;
					object-fit: contain;
					padding: 10px;
					@media (max-width: 1000px) {
						width: 100%;
						height: 100px;
					}
				}
			}
		}
	}
</style>