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">
				<img
					class="ecosystem-logo"
					:src="homeAiLogo"
					alt="Code Create"
					loading="lazy"
				/>
				<h1 id="ecosystem-title" class="ecosystem-title">
					Revitalise The Fashion Ecosystem
				</h1>
				<p 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 />

		<section class="home-next" aria-labelledby="home-next-title">
			<p class="home-next-kicker">Subheading Text</p>
			<h2 id="home-next-title" class="home-next-title">Headline</h2>
			<p class="home-next-copy">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit
				tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
			</p>
		</section>
	</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;
	}

	.home-next {
		padding: 18px 20px 34px;
		background: #ffffff;
		text-align: center;
	}

	.home-next-kicker {
		margin: 0 0 2px;
		color: #222222;
		font-family: Poppins, sans-serif;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4;
	}

	.home-next-title {
		margin: 0 0 12px;
		color: #1455ff;
		font-family: Poppins, sans-serif;
		font-size: 30px;
		font-weight: 700;
		line-height: 1.1;
		letter-spacing: 0;
		text-transform: none;
	}

	.home-next-copy {
		max-width: 720px;
		margin: 0 auto;
		color: #202020;
		font-family: Poppins, sans-serif;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.55;
	}

	@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>