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

feat: AiDA页面i18n

Browse Source
This commit is contained in:
zhangyahui
2026-06-03 16:13:15 +08:00
parent 1b7403b375
commit 3610bbb013
4 changed files with 224 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/pages/aida/index.vue
View File

@@ -1,66 +1,74 @@
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { shallowRef, useTemplateRef } from 'vue'
import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
import aidaPanel from '@/assets/images/home/aida-panel.png'
import aidaBanner from '@/assets/images/aida/aida-banner.jpg'
import demoVideo from '@/assets/images/aida/aida-demo-video.mp4'
import { shallowRef, useTemplateRef, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import diamondIcon from '@/assets/images/aida/diamond.svg'
import industryOne from '@/assets/images/aida/industry-1.png'
import industryTwo from '@/assets/images/aida/industry-2.png'
import industryThree from '@/assets/images/aida/industry-3.png'
import timeIcon from '@/assets/images/aida/time.svg'
const keyFeatures = [
"The world's first AI system in fashion design emphasizing user control, ensuring AI-generated designs align seamlessly with the designer's unique vision and brand identity.",
'Excels in synthesizing diverse inputs, such as moodboards, fabric prints, color choices, and sketches, into a cohesive collection quickly, harmoniously, and efficiently.',
'Significantly speeds up the design process by over 60%, quickly generating unlimited designs based on user input.',
'Incorporates cutting-edge AIGC technology to generate innovative designs and provide comprehensive assistance in the creative process.'
] as const
const { t, locale } = useI18n()
const benefits = [
{
image: industryOne,
alt: 'Light bulb icon',
text: 'Provides speedy ideation for fashion brands and individual designers'
},
{
image: industryTwo,
alt: 'Stopwatch icon',
text: 'Speeds up the whole fashion design process to strive for the goal of sustainability and cost-saving'
},
{
image: industryThree,
alt: 'Drawing brush icon',
text: 'Allows fashion novices who do not have drawing or sketching skills to create their own designs in a simple and easy mode'
const demoVideo = computed(() => {
if (locale.value === 'en') {
return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-EN.mp4'
}
] as const
return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-CN.mp4'
})
const subscriptionHighlights = [
'Easily create your fashion collections in around 10 seconds based on your creative inspirations and Brand DNA',
'Upload mood boards, colour choices, fabric prints and sketches for generating unlimited design proposals',
'Save and retrieve your own designs with just a few clicks',
'A Cloud-based system by subscription for accessing anytime and anywhere',
'Easy to use, can learn in 10 minutes',
'Contact us for AiDA trial at info@code-create.com.hk'
] as const
const keyFeatures = computed(() => {
return [t('Aida.feature1'), t('Aida.feature2'), t('Aida.feature3'), t('Aida.feature4')]
})
const plans = [
const benefits = computed(() => {
return [
{
image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_01.png',
alt: 'Light bulb icon',
text: t('Aida.benefits1')
},
{
image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_02.png',
alt: 'Stopwatch icon',
text: t('Aida.benefits2')
},
{
image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_03-1.png',
alt: 'Drawing brush icon',
text: t('Aida.benefits3')
}
]
})
const subscriptionHighlights = computed(() => {
return [
t('Aida.plan1'),
t('Aida.plan2'),
t('Aida.plan3'),
t('Aida.plan4'),
t('Aida.plan5'),
t('Aida.plan6')
]
})
const plans = computed(() => {
return [
{
icon: timeIcon,
name: 'Trial',
description: '7 days free trial',
action: 'Start Trial',
href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Trial'
name: t('Aida.trial'),
description: t('Aida.days'),
action: t('Aida.start'),
href: 'https://www.aida.com.hk/register'
},
{
icon: diamondIcon,
name: 'Corporate',
description: 'Customised plan',
action: 'Contact Us',
href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
name: t('Aida.corporate'),
description: t('Aida.customised'),
action: t('Aida.contactUs'),
href: 'mailto:info\\@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
}
] as const
]
})
const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
const isVideoPlaying = shallowRef(false)
@@ -88,12 +96,11 @@
}
useHead({
title: 'AiDA 3.1 | Code Create',
title: 'AiDA - Code-Create',
meta: [
{
name: 'description',
content:
'AiDA 3.1 is an AI-based interactive design assistant for fashion designers.'
content: t('Aida.description')
}
]
})
@@ -102,37 +109,37 @@
<template>
<main class="aida-page">
<section class="aida-hero" aria-labelledby="aida-title">
<img class="aida-hero-image" :src="aidaBanner" alt="AiDA 3.1 purple silk banner" />
<img
class="aida-hero-image"
src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_banner-1.jpg"
alt="AiDA 3.1 banner"
/>
<h1 id="aida-title" class="aida-hero-title">AiDA 3.1</h1>
</section>
<section class="intro-section" aria-labelledby="intro-title">
<div class="intro-inner" v-custom-animation.scroll>
<h2 id="intro-title" class="intro-title">
AI-Based Interactive Design Assistant For Fashion
{{ t('Aida.slogan') }}
</h2>
<p class="intro-copy">
AiDA 3.1, a first-to-market technology that empowers fashion designers, based on
their creative inspirations, to work with AI to create original designs. With
just a few clicks, designers can choose or refine options to develop fashion
collections, bringing agility, efficiency and flexibility to conventional and
intensive studio processes.
{{ t('Aida.desc') }}
</p>
<p class="pricing-copy">
Annual Subscription Fee: $5,000 HKD / Year (50000 Credits)<br />
Monthly Subscription Fee: $500 HKD / Month (3500 Credits)<br />
Monthly Subscription Fee: $100 HKD / Month (500 Credits)
{{ t('Aida.annual') }}<br />
{{ t('Aida.monthly') }}<br />
{{ t('Aida.monthlyCheaper') }}
</p>
<p class="academic-copy">
Special Academic rate available, please contact us for details.
{{ t('Aida.tips') }}
</p>
<a
class="primary-button"
href="mailto:info@code-create.com.hk?subject=AiDA%203.1%20Subscription"
>
Subscribe Now
{{ t('Aida.subscribe') }}
</a>
<a class="manual-link" href="#subscription">User Manual</a>
<a class="manual-link" href="#subscription">{{ t('Aida.userManual') }}</a>
</div>
</section>
@@ -141,19 +148,19 @@
<div class="feature-art">
<img
class="feature-bg"
:src="aidaIntroBg"
src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_intro_01_bg.png"
alt="Fashion design sketches on paper"
loading="lazy"
/>
<img
class="feature-panel"
:src="aidaPanel"
src="https://code-create.com.hk/wp-content/uploads/2024/01/new-layout-1.png"
alt="AiDA design workspace preview"
loading="lazy"
/>
</div>
<div class="feature-copy">
<h2 id="features-title" class="section-title">Key Features</h2>
<h2 id="features-title" class="section-title">{{ t('Aida.keyFeatures') }}</h2>
<ul class="feature-list">
<li v-for="feature in keyFeatures" :key="feature">
{{ feature }}
@@ -166,7 +173,7 @@
<section class="benefits-section" aria-labelledby="benefits-title">
<div class="benefits-inner">
<h2 id="benefits-title" class="section-title benefits-title">
Benefits to Industry
{{ t('Aida.benefits') }}
</h2>
<div class="benefits-grid">
<article v-for="benefit in benefits" :key="benefit.text" class="benefit-card">
@@ -184,7 +191,7 @@
<section class="demo-section" aria-labelledby="demo-title">
<div class="demo-inner">
<h2 id="demo-title" class="demo-title">Demo</h2>
<h2 id="demo-title" class="demo-title">{{ t('Aida.demo') }}</h2>
<div class="demo-video-wrap">
<video
ref="demoVideoRef"
@@ -206,7 +213,7 @@
aria-label="Play AiDA demo video"
@click="toggleDemoVideo"
>
Click to play
{{ t('Aida.play') }}
<span class="play-dot" aria-hidden="true"></span>
</button>
</div>
@@ -220,11 +227,18 @@
>
<div class="subscription-inner">
<h2 id="subscription-title" class="section-title subscription-title">
Choose Your Subscription Plan
{{ t('Aida.choosePlan') }}
</h2>
<ul class="subscription-list">
<li v-for="item in subscriptionHighlights" :key="item">
{{ item }}
<li v-for="(item, index) in subscriptionHighlights" :key="item">
<template v-if="index + 1 === subscriptionHighlights.length">
<a class="mail-link" href="mailto:info@code-create.com.hk">
{{ item }}
</a>
</template>
<template v-else>
{{ item }}
</template>
</li>
</ul>
@@ -243,8 +257,8 @@
</div>
<div class="legal-links">
<a href="#subscription">Terms &amp; Conditions</a>
<a href="#subscription">Subscription Agreement</a>
<a href="#subscription">{{ t('Aida.termsAndConditions') }}</a>
<a href="#subscription">{{ t('Aida.agreement') }}</a>
</div>
</div>
</section>
@@ -366,7 +380,7 @@
border-radius: 999px;
background: #a51f28;
color: #ffffff;
font-size: 10px;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 1.8px;
@@ -398,7 +412,7 @@
display: table;
margin: 23px auto 0;
color: #333333;
font-size: 10px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
text-decoration: underline;
@@ -459,8 +473,8 @@
margin: 32px 0 0;
padding-left: 18px;
color: #444444;
font-size: 13px;
line-height: 1.55;
font-size: 16px;
// line-height: 1.55;
}
.feature-list li + li {
@@ -507,8 +521,7 @@
max-width: 248px;
margin: 0;
color: #555555;
font-size: 12px;
line-height: 1.45;
font-size: 16px;
letter-spacing: 0;
}
@@ -620,7 +633,11 @@
position: relative;
padding-left: 24px;
}
.mail-link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.subscription-list li + li {
margin-top: 14px;
}