Code-Create/src/pages/home/index.vue

<script setup lang="ts">
	import { useHead } from '@unhead/vue'
	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
	import aidaPanel from '@/assets/images/home/aida-panel.png'
	import homeAiLogo from '@/assets/images/home/home-ai-logo.png'
	import mixiIntroBg from '@/assets/images/home/mixi-intro-bg.png'
	import mixiPanel from '@/assets/images/home/mixi-panel.png'
	import HomeCarousel from './components/Carousel.vue'
	import ProductFeature from './components/ProductFeature.vue'
	import ProjectCta from './components/ProjectCta.vue'

	const productFeatures = [
		{
			name: 'AiDA 3.1',
			title: 'Empowers fashion designers to create a collection with just a few clicks based on their creative inspirations.',
			backgroundImage: aidaIntroBg,
			backgroundAlt: 'Fashion design sketches on paper',
			panelImage: aidaPanel,
			panelAlt: 'AiDA design workspace preview',
			reversed: false
		},
		{
			name: 'Mixi',
			title: "Drives sales by improving shoppers' experience through precise and fast search.",
			backgroundImage: mixiIntroBg,
			backgroundAlt: 'Layered fabric texture',
			panelImage: mixiPanel,
			panelAlt: 'Mixi visual search interface preview',
			reversed: true
		}
	] as const

	useHead({
		title: 'Home | Code Create',
		meta: [
			{
				name: 'description',
				content:
					'Code Create revitalises the fashion ecosystem through artificial intelligence.'
			}
		]
	})
</script>

<template>
	<main class="home-page">
		<HomeCarousel />

		<div class="home-content">
			<section
				class="ecosystem-intro"
				aria-labelledby="ecosystem-title"
				v-custom-animation.scroll
			>
				<img
					class="ecosystem-logo"
					:src="homeAiLogo"
					alt="Code Create"
					loading="lazy"
					translate-y-s="80"
					translate-y="0"
				/>
				<h1
					id="ecosystem-title"
					class="ecosystem-title"
					translate-y-s="-60"
					translate-y="0"
				>
					Revitalise The Fashion Ecosystem
				</h1>
				<p translate-y-s="-60" translate-y="0" class="ecosystem-subtitle">
					Through Artificial Intelligence (AI)
				</p>
			</section>

			<ProductFeature
				v-for="feature in productFeatures"
				:key="feature.name"
				:name="feature.name"
				:title="feature.title"
				:background-image="feature.backgroundImage"
				:background-alt="feature.backgroundAlt"
				:panel-image="feature.panelImage"
				:panel-alt="feature.panelAlt"
				:reversed="feature.reversed"
			/>
		</div>

		<ProjectCta />
	</main>
</template>

<style scoped lang="less">
	.home-page {
		width: 100%;
		overflow: hidden;
		background: #ffffff;
	}

	.home-content {
		padding: clamp(116px, 10vw, 172px) 0 clamp(92px, 8vw, 126px);
		background: #ffffff;
	}

	.ecosystem-intro {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 20px clamp(92px, 10vw, 150px);
		text-align: center;
	}

	.ecosystem-logo {
		display: block;
		width: clamp(146px, 15vw, 184px);
		height: auto;
		margin-bottom: 30px;
		user-select: none;
	}

	.ecosystem-title {
		width: 100%;
		max-width: 100%;
		margin: 0 0 9px;
		color: #101010;
		font-family: Poppins, sans-serif;
		font-size: clamp(18px, 1.65vw, 22px);
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: 4px;
		text-transform: uppercase;
		overflow-wrap: break-word;
	}

	.ecosystem-subtitle {
		width: 100%;
		margin: 0;
		color: #101010;
		font-family: Poppins, sans-serif;
		font-size: clamp(13px, 1.2vw, 16px);
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: 2.5px;
	}

	@media (max-width: 980px) {
		.home-content {
			padding: 96px 0 64px;
		}

		.ecosystem-intro {
			padding-bottom: 50px;
		}
	}

	@media (max-width: 640px) {
		.home-content {
			padding: 72px 0 36px;
		}

		.ecosystem-logo {
			width: 138px;
			margin-bottom: 22px;
		}

		.ecosystem-title {
			width: min(100%, 330px);
			max-width: none;
			font-size: 14px;
			letter-spacing: 1.5px;
			line-height: 1.45;
			overflow-wrap: anywhere;
		}

		.ecosystem-subtitle {
			font-size: 12px;
			letter-spacing: 1.5px;
		}
	}
</style>