<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import feeling_1 from "@/assets/images/collectionStory/feeling_1.png";
import feeling_2 from "@/assets/images/collectionStory/feeling_2.png";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
let slides = [
	{ image: feeling_1, text: 'Web interface in AiDA - the process of apparel edit' },
	{ image: feeling_2, text: 'Web interface in AiDA-Sketchboard' },
]
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="feeling-with-AiDA">
		<div class="title">Feeling with AiDA</div>
		<div class="info">
			<div>
				AiDA significantly enhances the creative latitude for cross-disciplinary creators like myself. Its functionalities, particularly the robust line-art extraction and the ability to edit the front and back garment panels, have been a major source of inspiration. This allows me to rapidly prototype by extracting traditional ethnic wear and conduct detailed style modifications directly on the canvas. As an integrated creation platform, AiDA enables a deeper focus on the design process. For seasoned designers, AI serves as a powerful source of inspiration, and AiDA is an exemplary manifestation of this principle.
			</div>
		</div>
		<div class="img-box">
			<div class="img-item" v-for="item in slides" :key="item.text">
				<img :src="item.image" alt="">
				<div class="text">{{ item.text }}</div>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.feeling-with-AiDA{
		width: 100%;
		height: auto;
		position: relative;
		padding: 6rem 0;
		padding-bottom: 18rem;
		> .title{
			padding: 0 2.4rem;
			font-family: "KaiseiOpti-Bold";
			font-weight: 700;
			font-size: 3rem;
			line-height: 100%;
			margin-bottom: 6rem;
		}
		> .info{
			width: 70.7rem;
			margin: 0 auto;
			margin-bottom: 4rem;
			> div{
				font-family: "KaiseiOpti-Regular";
				font-weight: 400;
				font-size: 1.6rem;
				line-height: 2.3rem;
			}
		}
		> .img-box{
			width: 100%;
			margin-top: 4rem;
			display: flex;
			gap: 2.3rem;
			justify-content: center;
			> .img-item{
				width: min-content;
				> img{
					margin-bottom: .9rem;
					height: 34.3rem;
				}
				> .text{
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.4rem;
					line-height: 2.3rem;
				}
			}
		}
	}
</style>