aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: solutions/aida

Browse Source
This commit is contained in:
zhangyahui
2026-05-15 16:41:52 +08:00
parent 99af8da607
commit 5158b63ddd
12 changed files with 913 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/home/components/ProductFeature.vue
View File

@@ -18,7 +18,11 @@
</script>
<template>
<section class="product-feature" :class="{ 'product-feature-reversed': reversed }" v-custom-animation.scroll>
<section
class="product-feature"
:class="{ 'product-feature-reversed': reversed }"
v-custom-animation.scroll
>
<div class="product-feature-art">
<img
class="product-feature-bg"
@@ -28,13 +32,27 @@
translate-x-s="-100"
translate-x="100"
/>
<img class="product-feature-panel" :src="panelImage" :alt="panelAlt" loading="lazy" />
<img
class="product-feature-panel"
:src="panelImage"
:alt="panelAlt"
loading="lazy"
translate-y-s="-100"
translate-y="20"
/>
</div>
<div class="product-feature-copy">
<p class="product-feature-name">{{ name }}</p>
<h2 class="product-feature-title">{{ title }}</h2>
<RouterLink class="product-feature-link" to="/products"> View More </RouterLink>
<RouterLink
class="product-feature-link"
to="/products"
translate-y-s="100"
translate-y="0"
>
View More
</RouterLink>
</div>
</section>
</template>

142
src/pages/home/index.vue
View File

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