feat: solutions/aida
This commit is contained in:
@@ -1,47 +1,45 @@
|
||||
<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'
|
||||
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: [
|
||||
const productFeatures = [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'Code Create revitalises the fashion ecosystem through artificial intelligence.'
|
||||
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>
|
||||
@@ -49,17 +47,30 @@ useHead({
|
||||
<HomeCarousel />
|
||||
|
||||
<div class="home-content">
|
||||
<section class="ecosystem-intro" aria-labelledby="ecosystem-title">
|
||||
<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">
|
||||
<h1
|
||||
id="ecosystem-title"
|
||||
class="ecosystem-title"
|
||||
translate-y-s="-60"
|
||||
translate-y="0"
|
||||
>
|
||||
Revitalise The Fashion Ecosystem
|
||||
</h1>
|
||||
<p class="ecosystem-subtitle">Through Artificial Intelligence (AI)</p>
|
||||
<p translate-y-s="-60" translate-y="0" class="ecosystem-subtitle">
|
||||
Through Artificial Intelligence (AI)
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<ProductFeature
|
||||
@@ -76,15 +87,6 @@ useHead({
|
||||
</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>
|
||||
|
||||
@@ -142,42 +144,6 @@ useHead({
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user