This commit is contained in:
李志鹏
2026-06-04 10:47:18 +08:00
14 changed files with 646 additions and 143 deletions

View File

@@ -80,12 +80,34 @@
}
}
@media (max-width: 800px) {
padding: 15px 20px;
min-height: 155px;
padding: 20px 14px 18px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
> .left {
order: 1;
font-size: 11px;
line-height: 1.4;
}
> .right {
order: 2;
width: 100%;
justify-content: space-around;
gap: 10px;
> div {
border-left: none;
margin-left: 0;
padding-left: 0;
> .link {
font-size: 11px;
line-height: 1.4;
white-space: nowrap;
}
}
}
}

View File

@@ -45,7 +45,7 @@ export default {
viewMore: 'VIEW MORE',
mixiSlogan: `Drives sales by improving shoppers' experience through precise and fast search.`,
contactSlogan: 'Talk To Us About Your Next Project',
contactUs: 'CONTACT US',
contactUs: 'CONTACT US'
},
Mixi: {
IntroduceTitle: 'Best-in-class Precise Fashion Attribute and Colour Recognition System',
@@ -66,6 +66,46 @@ export default {
EmailInputTitle: 'Interested in Mixi?',
EmailInputTip: 'We will contact you for customized plan.'
},
Aida: {
description:
'AiDA 3.1 AI-based interactive Design Assistant for Fashion 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',
slogan: ' AI-Based Interactive Design Assistant For Fashion',
desc: `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.`,
annual: 'Annual Subscription Fee: $5,000 HKD / Year (50000 Credits)',
monthly: 'Monthly Subscription Fee: $500 HKD / Month (3500 Credits)',
monthlyCheaper: 'Monthly Subscription Fee: $100 HKD / Month (500 Credits)',
tips: 'Special Academic rate available, please contact us for details.',
subscribe: 'Subscribe Now',
userManual: 'User Manual',
keyFeatures: 'Key Features',
feature1: `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.`,
feature2: `Excels in synthesizing diverse inputs, such as moodboards, fabric prints, color choices, and sketches, into a cohesive collection quickly, harmoniously, and efficiently.`,
feature3: `Significantly speeds up the design process by over 60%, quickly generating unlimited designs based on user input.`,
feature4: `Incorporates cutting-edge AIGC technology to generate innovative designs and provide comprehensive assistance in the creative process.`,
benefits: 'Benefits to Industry',
benefits1: 'Provides speedy ideation for fashion brands and individual designers',
benefits2:
'Speeds up the whole fashion design process to strive for the goal of sustainability and cost-saving',
benefits3:
'Allows fashion novices who do not have drawing or sketching skills to create their own designs in a simple and easy mode',
demo: 'Demo',
play: 'Click to play',
choosePlan: 'Choose Your Subscription Plan',
plan1: 'Easily create your fashion collections in around 10 seconds based on your creative inspirations and Brand DNA',
plan2: 'Upload mood boards, colour choices, fabric prints and sketches for generating unlimited design proposals',
plan3: 'Save and retrieve your own designs with just a few clicks',
plan4: 'A Cloud-based system by subscription for accessing anytime and anywhere',
plan5: 'Easy to use, can learn in 10 minutes',
plan6: 'Contact us for AiDA trial at info\\@code-create.com.hk',
trial:'Trial',
days:'7 days free trial',
start:'Start Trial',
corporate:'Corporate',
customised:'Customised plan',
contact:'Contact Us',
termsAndConditions: 'Terms & Conditions',
agreement:'Subscription Agreement',
},
helpCentre: {
Title: 'HELP CENTRE',
FAQ: 'FAQ',
@@ -89,6 +129,7 @@ export default {
},
aboutUs: {
Title: 'ABOUT US',
meta: 'About Us: Transforming the Fashion Ecosystem through Artificial Intelligence (AI) https://code-create.com.hk',
ecosystem: {
Title: 'REVITALISE THE FASHION ECOSYSTEM',
Desc: 'through Artificial Intelligence (AI)'
@@ -126,6 +167,7 @@ export default {
},
userStories: {
Title: 'User Stories',
meta: 'User Stories - Code-Create',
XULULUInfo1:
'AiDA is a very interesting and creatively inspiring system that showcases limitless potential in fashion design. Traditional designers can typically create only a handful of styles in a day, whereas AiDA can generate multiple designs in an instant, making its efficiency incomparable to that of humans.',
XULULUInfo2:

View File

@@ -44,7 +44,7 @@ export default {
viewMore: '查看更多',
mixiSlogan: '精确、快速地检索,改善顾客的购物体验,推动销售量',
contactSlogan: '与我们分享你的创意项目',
contactUs: '联络我们',
contactUs: '联络我们'
},
Mixi: {
IntroduceTitle: '精准时装属性及颜色辨识系统(Mixi)',
@@ -62,6 +62,48 @@ export default {
EmailInputTitle: '有兴趣使用精准时装属性及颜色辨识系统 (Mixi)',
EmailInputTip: '请留下电邮地址,以获取度身订造的计划'
},
Aida: {
description:
'AiDA 3.1 是一项开创性的技术,它使时装设计师能够基于自己的创意灵感,借助人工智能创作原创设计。设计师只需点击几下,即可选择或调整方案来开发时装系列,为传统且耗时的设计工作室流程注入敏捷性、高效性和灵活性。',
slogan: '互动性人工智能时装设计助理',
desc: 'AiDA 3.1 是一项开创性的技术,它使时装设计师能够基于自己的创意灵感,借助人工智能创作原创设计。设计师只需点击几下,即可选择或调整方案来开发时装系列,为传统且耗时的设计工作室流程注入敏捷性、高效性和灵活性。',
annual: '年费: $5,000 HKD / 年(50000积分)',
monthly: '月费: $500 HKD / 月 (3500 积分)',
monthlyCheaper: '月费: $100 HKD / 月 (500 积分)',
tips: '可提供专属教育优惠,详情请联系我们',
subscribe: '立即订阅',
userManual: '用户手册',
keyFeatures: '技术特点',
feature1:
'世界上第一个服装设计领域的人工智能系统,强调用户控制,确保人工智能生成的设计与设计师的独特愿景和品牌身份无缝结合。',
feature2:
'擅长综合不同的输入,如情绪板,织物印花,颜色选择和草图,成为一个有凝聚力的集合,快速,和谐,高效。',
feature3: '设计过程显著加快超过60%,根据用户输入快速生成无限的设计。',
feature4: '采用尖端的AIGC技术生成创新设计并在创作过程中提供全面的协助。',
benefits: '对行业的好处',
benefits1:
'加快设计流程: AiDA为个人设计师和时尚品牌提供快速创意构思革新了时装设计过程让设计师以灵活、高效及别具弹性的方式提升传统而密集的工作室设计流程。',
benefits2: '加快产品上市速度: 同时又能确保品牌的标志性设计元素在新设计中得以体现。',
benefits3:
'更有弹性: 让没有绘画基础的时装设计初学者也可以简易的创作自己的设计。设计师们通过和 AI一起合作可以迅速创作多样化的原创设计产品并快速把这些产品推向市场。',
demo: '示范影片',
play: '点击播放',
choosePlan: '选择你的订阅方案',
plan1: '根据你的创意灵感及品牌DNA只需要10秒时间去设计一个时装系列',
plan2: '上载灵感板、颜色、布料印花图案及草图等,生成无限设计建议',
plan3: '只需点击几下,储存及取回你的设计',
plan4: '订阅后只需通过云端系统就能随时随地存取',
plan5: '操作精简,只需大概十分钟就能学习使用方法',
plan6: '通过 info\\@code-create.com.hk 联系我们了解更多',
trial: '试用',
days: '7天免费试用',
start: '开始使用',
corporate: '企业',
customised: '定制计划',
contactUs: '联系我们',
termsAndConditions: '条款及细则',
agreement: '订阅协议'
},
helpCentre: {
Title: '支援中心',
FAQ: '常见问题',
@@ -83,6 +125,7 @@ export default {
},
aboutUs: {
Title: '关于我们',
meta: '关于我们 通过人工智能(AI) 重塑时尚生态系统 https://code-create.com.hk/wp-',
ecosystem: {
Title: '通过人工智能(AI)',
Desc: '重塑时尚生态系统'
@@ -117,6 +160,7 @@ export default {
},
userStories: {
Title: '使用者故事',
meta: '使用者故事 - Code-Create',
XULULUInfo1:
'AiDA 是一个有趣且富有创意灵感的系统在时尚设计领域展现出无限潜力。与传统设计师一天只能设计出几款服装相比AiDA 能瞬间生成多款设计,效率远超人类。',
XULULUInfo2:
@@ -151,4 +195,4 @@ export default {
MinnaPolamInfo1:
'AiDA除了可以帮助我们衬搭不同的单品更可以生成不同的颜色令我们可以快速看到整个造型所有单品都可以衬搭在一起可看到不同颜色和图案的效果。 而且AiDA亦在设计开发阶段通过学习我们的风格和品味帮助我们加快设计过程。'
}
}
}

View File

@@ -83,6 +83,7 @@ export default {
},
aboutUs: {
Title: '關於我們',
meta: '關於我們 通過人工智能(AI) 重塑時尚生態系統 https://code-create.com.hk',
ecosystem: {
Title: '通過人工智能(AI)',
Desc: '重塑時尚生態系統'
@@ -117,6 +118,7 @@ export default {
},
userStories: {
Title: '使用者故事',
meta: '使用者故事 - Code-Create',
XULULUInfo1:
'AiDA 是一個有趣且富有創意靈感的繫統在時尚設計領域展現出無限潛力。與傳統設計師一天隻能設計出幾款服裝相比AiDA 能瞬間生成多款設計,效率遠超人類。',
XULULUInfo2:

View File

@@ -1,9 +1,13 @@
<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from 'vue-i18n'
import MyEvent from "@/tools/myEvents";
const { t, locale } = useI18n()
let videoUrl = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2023/05/codec_brand_vid_16x9_ENG.mp4'
let videoPosterUrl = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2026/06/codec_brand_vid_16x9_ENG_11_layer.jpeg'
const playVideo = ()=>{
console.log(locale.value)
return
MyEvent.emit("playVideo",{
url: videoUrl,
poster: videoPosterUrl,

View File

@@ -6,9 +6,22 @@ import Mission from './mission.vue'
import OurTeam from './our-team.vue'
import StrategicPartners from './strategic-partners.vue'
import { useGlobalStore } from '@/stores/global'
import { useHead } from '@unhead/vue'
import { useI18n } from 'vue-i18n'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
const { t } = useI18n()
useHead({
title: t('aboutUs.Title'),
meta: [
{
name: 'description',
content: t('aboutUs.meta')
}
]
})
defineExpose({})
</script>
<template>
<div class="about-us">

View File

@@ -1,66 +1,77 @@
<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, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
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'
import { IMAGE_BASE_URL } from '@/tools/config'
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
gsap.registerPlugin(ScrollTrigger)
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 { t, locale } = useI18n()
const demoVideo = computed(() => {
if (locale.value === 'en') {
return `${IMAGE_BASE_URL}/2026/02/Demo-video-26-2-27-EN.mp4`
}
] as const
return `${IMAGE_BASE_URL}/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 = [
{
icon: timeIcon,
name: 'Trial',
description: '7 days free trial',
action: 'Start Trial',
href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Trial'
},
{
icon: diamondIcon,
name: 'Corporate',
description: 'Customised plan',
action: 'Contact Us',
href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
}
] as const
const benefits = computed(() => {
return [
{
image: `${IMAGE_BASE_URL}/2022/11/aida_feature_icon_01.png`,
alt: 'Light bulb icon',
text: t('Aida.benefits1')
},
{
image: `${IMAGE_BASE_URL}/2022/11/aida_feature_icon_02.png`,
alt: 'Stopwatch icon',
text: t('Aida.benefits2')
},
{
image: `${IMAGE_BASE_URL}/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: t('Aida.trial'),
description: t('Aida.days'),
action: t('Aida.start'),
href: 'https://www.aida.com.hk/register'
},
{
icon: diamondIcon,
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'
}
]
})
const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
const isVideoPlaying = shallowRef(false)
@@ -88,51 +99,246 @@
}
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')
}
]
})
onMounted(() => {
// 1. 顶部 aida-title 从上往下滑入
gsap.from('#aida-title', {
y: -100,
opacity: 0,
duration: 1.5,
ease: 'power3.out',
scrollTrigger: {
trigger: '#aida-title',
start: 'top 80%',
once: true
}
})
// 2. intro-copy 从下往上滑入
gsap.from('.intro-copy', {
y: 50,
opacity: 0,
duration: 1.3,
ease: 'power3.out',
scrollTrigger: {
trigger: '.intro-copy',
start: 'top 85%',
once: true
}
})
// 3. pricing-copy 从下往上滑入
gsap.from('.pricing-copy', {
y: 50,
opacity: 0,
duration: 1.3,
delay: 0.1,
ease: 'power3.out',
scrollTrigger: {
trigger: '.pricing-copy',
start: 'top 85%',
once: true
}
})
// 4. academic-copy 从下往上滑入
gsap.from('.academic-copy', {
y: 50,
opacity: 0,
duration: 1.3,
delay: 0.2,
ease: 'power3.out',
scrollTrigger: {
trigger: '.academic-copy',
start: 'top 85%',
once: true
}
})
// 5. features-section 的 section-title 从下往上滑入
gsap.from('.features-section .section-title', {
y: 50,
opacity: 0,
duration: 1.3,
ease: 'power3.out',
scrollTrigger: {
trigger: '.features-section .section-title',
start: 'top 85%',
once: true
}
})
// 6. feature-list 从下往上滑入
gsap.from('.feature-list', {
y: 50,
opacity: 0,
duration: 1.3,
delay: 0.2,
ease: 'power3.out',
scrollTrigger: {
trigger: '.feature-list',
start: 'top 85%',
once: true
}
})
// 7. benefits-section 的 section-title 从下往上滑入
gsap.from('.benefits-title', {
y: 50,
opacity: 0,
duration: 1.3,
ease: 'power3.out',
scrollTrigger: {
trigger: '.benefits-title',
start: 'top 85%',
once: true
}
})
// 8. benefits-grid 的三个图标动画
// 先设置初始状态:左右两个隐藏在中间位置
gsap.set('.benefit-card:first-child', { x: 200, opacity: 0 })
gsap.set('.benefit-card:last-child', { x: -200, opacity: 0 })
// 中间的图标先显示
gsap.from('.benefit-card:nth-child(2)', {
scale: 0.5,
opacity: 0,
duration: 1.1,
ease: 'back.out(1.7)',
scrollTrigger: {
trigger: '.benefits-grid',
start: 'top 80%',
once: true
}
})
// 左边的图标从中间滑到左边
gsap.to('.benefit-card:first-child', {
x: 0,
opacity: 1,
duration: 1.3,
delay: 0.3,
ease: 'power3.out',
scrollTrigger: {
trigger: '.benefits-grid',
start: 'top 80%',
once: true
}
})
// 右边的图标从中间滑到右边
gsap.to('.benefit-card:last-child', {
x: 0,
opacity: 1,
duration: 1.3,
delay: 0.3,
ease: 'power3.out',
scrollTrigger: {
trigger: '.benefits-grid',
start: 'top 80%',
once: true
}
})
// 9. demo-title 从下往上滑入
gsap.from('.demo-title', {
y: 50,
opacity: 0,
duration: 1.3,
ease: 'power3.out',
scrollTrigger: {
trigger: '.demo-title',
start: 'top 85%',
once: true
}
})
// 10. subscription-title 从下往上滑入
gsap.from('.subscription-title', {
y: 50,
opacity: 0,
duration: 1.3,
ease: 'power3.out',
scrollTrigger: {
trigger: '.subscription-title',
start: 'top 85%',
once: true
}
})
// 11. subscription-list 从下往上滑入
gsap.from('.subscription-list', {
y: 50,
opacity: 0,
duration: 1.3,
delay: 0.1,
ease: 'power3.out',
scrollTrigger: {
trigger: '.subscription-list',
start: 'top 85%',
once: true
}
})
// 12. plans-grid 从下往上滑入
gsap.from('.plans-grid', {
y: 50,
opacity: 0,
duration: 1.3,
delay: 0.2,
ease: 'power3.out',
scrollTrigger: {
trigger: '.plans-grid',
start: 'top 85%',
once: true
}
})
})
</script>
<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="`${IMAGE_BASE_URL}/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 +347,19 @@
<div class="feature-art">
<img
class="feature-bg"
:src="aidaIntroBg"
:src="`${IMAGE_BASE_URL}/2022/11/aida_intro_01_bg.png`"
alt="Fashion design sketches on paper"
loading="lazy"
/>
<img
class="feature-panel"
:src="aidaPanel"
:src="`${IMAGE_BASE_URL}/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 +372,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 +390,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 +412,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 +426,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 +456,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 +579,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 +611,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 +672,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 +720,7 @@
max-width: 248px;
margin: 0;
color: #555555;
font-size: 12px;
line-height: 1.45;
font-size: 16px;
letter-spacing: 0;
}
@@ -620,7 +832,11 @@
position: relative;
padding-left: 24px;
}
.mail-link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.subscription-list li + li {
margin-top: 14px;
}

View File

@@ -1,15 +1,19 @@
<template>
<section
class="carousel-container"
:class="{ 'show-pagination': showPagination }"
aria-label="Featured content"
@mouseenter="pauseAutoplay"
@mouseleave="resumeAutoplay"
@click="handleCarouselClick"
@touchstart="handleCarouselTouch"
@touchmove="handleCarouselTouch"
>
<KagolCarousel
v-model="activePage"
class="home-carousel"
:autoplay="false"
:interval="1000"
:autoplay="isAutoplayEnabled"
:interval="10000"
>
<article v-for="slide in slides" :key="slide.id" ref="slideEls" class="carousel-slide">
<div class="mask"></div>
@@ -89,9 +93,8 @@
import { gsap } from 'gsap'
import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
import '@kagol/vue-carousel/dist/style.css'
import mainBanner01 from '../../../assets/images/home/mainbanner01.jpg'
import mainBanner02 from '../../../assets/images/home/mainbanner02.jpg'
import { useI18n } from 'vue-i18n'
import { IMAGE_BASE_URL } from '@/tools/config'
const { t, locale } = useI18n()
@@ -109,6 +112,8 @@
const isAutoplayEnabled = shallowRef(false)
const slideEls = useTemplateRef<HTMLElement[]>('slideEls')
const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 768)
const showPagination = ref(false)
let hideTimeout: number | null = null
const getVideoUrl = () => {
const isMobile = windowWidth.value < 768
@@ -129,7 +134,7 @@
const slides = computed<HomeSlide[]>(() => [
{
id: 'aida',
image: mainBanner01,
image: `${IMAGE_BASE_URL}/2022/11/mainbanner01-2.jpg`,
video: '',
alt: t('Home.banner1slogan'),
title: t('Home.banner1slogan'),
@@ -138,7 +143,7 @@
},
{
id: 'mixi',
image: mainBanner02,
image: `${IMAGE_BASE_URL}/2022/11/mainbanner02-3.jpg`,
video: '',
alt: 'Code Create product banner',
title: t('Home.banner2slogan'),
@@ -247,6 +252,38 @@
isAutoplayEnabled.value = true
}
function showPaginationControls() {
showPagination.value = true
if (hideTimeout) {
window.clearTimeout(hideTimeout)
}
hideTimeout = window.setTimeout(() => {
showPagination.value = false
hideTimeout = null
}, 3000)
}
function handleCarouselClick() {
showPaginationControls()
}
function handleCarouselTouch() {
showPaginationControls()
}
function handleOutsideClick(event: MouseEvent | TouchEvent) {
const container = document.querySelector('.carousel-container')
if (container && !container.contains(event.target as Node)) {
showPagination.value = false
if (hideTimeout) {
window.clearTimeout(hideTimeout)
hideTimeout = null
}
}
}
onMounted(() => {
resumeAutoplay()
queueDescAnimation()
@@ -256,6 +293,10 @@
windowWidth.value = window.innerWidth
}
window.addEventListener('resize', handleResize)
// 监听点击轮播图外部区域
document.addEventListener('click', handleOutsideClick)
document.addEventListener('touchstart', handleOutsideClick)
})
onBeforeUnmount(() => {
@@ -269,6 +310,13 @@
if (handleResize) {
window.removeEventListener('resize', handleResize)
}
// 清理定时器和事件监听
if (hideTimeout) {
window.clearTimeout(hideTimeout)
}
document.removeEventListener('click', handleOutsideClick)
document.removeEventListener('touchstart', handleOutsideClick)
})
watch(activePage, queueDescAnimation)
@@ -327,6 +375,7 @@
color: #ffffff;
background: transparent;
isolation: isolate;
pointer-events: none;
}
.desc-fill {
position: absolute;
@@ -337,6 +386,9 @@
background: #a51f24;
pointer-events: none;
}
.desc > * {
pointer-events: auto;
}
.desc-index-group {
position: relative;
@@ -407,6 +459,8 @@
transform: translateX(100%);
transition: transform 0.28s ease;
will-change: transform;
z-index: 9;
opacity: 1;
}
.carousel-pagination-button {
position: relative;
@@ -424,16 +478,16 @@
transition: background-color 0.2s ease;
}
.carousel-pagination-button:hover {
background: rgba(255, 255, 255, 0.75);
}
// .carousel-pagination-button:hover {
// background: rgba(255, 255, 255, 0.75);
// }
.carousel-pagination-button:focus-visible {
position: relative;
z-index: 1;
outline: 2px solid #ffffff;
outline-offset: -6px;
}
// .carousel-pagination-button:focus-visible {
// position: relative;
// z-index: 1;
// outline: 2px solid #ffffff;
// outline-offset: -6px;
// }
.carousel-pagination-arrow {
position: absolute;
@@ -469,36 +523,77 @@
}
@media (max-width: 768px) {
.carousel-slide {
min-height: 320px;
}
.home-carousel {
.carousel-slide {
aspect-ratio: auto;
height: 365px;
min-height: 365px;
.carousel-banner {
height: 100%;
}
.banner-title {
top: 86px;
right: auto;
left: 30px;
width: min(220px, calc(100% - 60px));
font-size: 28px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 2px;
transform: none;
}
.desc {
width: 100%;
min-width: 0;
height: auto;
min-height: 92px;
padding: 16px 20px;
height: 102px;
min-height: 102px;
padding: 16px 15px;
gap: 18px;
background: transparent;
}
.desc-line {
top: -28px;
height: 42px;
top: -70px;
height: 45px;
}
.desc-index {
font-size: 40px;
font-size: 32px;
}
.desc-copy {
max-width: none;
font-size: 12px;
font-size: 11px;
font-weight: 600;
line-height: 1.45;
}
}
.carousel-pagination {
width: 50px;
height: 102px;
transform: translateX(0);
opacity: 0;
transition: opacity 0.3s ease;
}
.carousel-pagination-button {
width: 50px;
height: 51px;
}
}
.carousel-container.show-pagination .carousel-pagination {
opacity: 1;
}
.carousel-pagination-arrow {
width: 18px;
height: 18px;
}
.carousel-container:hover .carousel-pagination {
transform: translateX(0);
}
}
</style>

View File

@@ -191,7 +191,7 @@
@media (max-width: 980px) {
.product-feature,
.product-feature-reversed {
grid-template-columns: 1fr;
flex-direction: column-reverse;
gap: 24px;
width: min(680px, calc(100% - 40px));
min-height: 0;
@@ -227,11 +227,12 @@
.product-feature,
.product-feature-reversed {
width: calc(100% - 32px);
padding: 52px 0;
gap: 28px;
padding: 0 0 64px;
}
.product-feature-art {
min-height: clamp(300px, 82vw, 430px);
min-height: clamp(280px, 82vw, 360px);
}
.product-feature-copy,
@@ -242,28 +243,54 @@
}
.product-feature-bg {
width: 78%;
width: 72%;
margin-left: 38px;
border-radius: 10px;
}
.product-feature-panel,
.product-feature-reversed .product-feature-panel {
left: auto;
right: 0;
bottom: 42px;
width: 68%;
right: 12px;
bottom: 22px;
width: 72%;
}
.product-feature-reversed .product-feature-bg {
width: 70%;
margin-right: 16px;
margin-left: auto;
}
.product-feature-reversed .product-feature-panel {
right: auto;
left: 18px;
bottom: 16px;
width: 72%;
}
.product-feature-name {
margin-bottom: 16px;
font-size: 18px;
letter-spacing: 1.5px;
}
.product-feature-title {
width: 100%;
max-width: 100%;
font-size: clamp(26px, 7.2vw, 30px);
line-height: 1.2;
margin-bottom: 26px;
font-size: clamp(22px, 6.1vw, 26px);
line-height: 1.35;
letter-spacing: 1.2px;
overflow-wrap: anywhere;
}
.product-feature-link {
min-width: 100px;
min-height: 40px;
padding: 0 22px;
font-size: 9px;
letter-spacing: 1px;
}
}
</style>

View File

@@ -77,7 +77,26 @@
@media (max-width: 640px) {
.project-cta {
min-height: 340px;
min-height: 288px;
padding: 64px 20px;
}
.project-cta-inner {
gap: 28px;
}
.project-cta-title {
font-size: 22px;
line-height: 1.4;
letter-spacing: 1.2px;
}
.project-cta-link {
min-width: 100px;
min-height: 40px;
padding: 0 22px;
font-size: 9px;
letter-spacing: 1px;
}
}
</style>

View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { watch, computed } from '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'
@@ -9,7 +8,9 @@
import HomeCarousel from './components/Carousel.vue'
import ProductFeature from './components/ProductFeature.vue'
import ProjectCta from './components/ProjectCta.vue'
import { IMAGE_BASE_URL } from '@/tools/config'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const productFeatures = computed(() => {
@@ -17,18 +18,18 @@
{
name: 'AiDA 3.1',
title: t('Home.aidaDesc'),
backgroundImage: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/aida_intro_01_bg.png',
backgroundImage: `${IMAGE_BASE_URL}/2022/11/aida_intro_01_bg.png`,
backgroundAlt: 'Fashion design sketches on paper',
panelImage: 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2024/01/new-layout-1.png',
panelImage: `${IMAGE_BASE_URL}/2024/01/new-layout-1.png`,
panelAlt: 'AiDA design workspace preview',
reversed: false
},
{
name: 'Mixi',
title: t('Home.mixiSlogan'),
backgroundImage: mixiIntroBg,
backgroundImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_bg.png`,
backgroundAlt: 'Layered fabric texture',
panelImage: mixiPanel,
panelImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_panel.png`,
panelAlt: 'Mixi visual search interface preview',
reversed: true
}
@@ -62,7 +63,7 @@
>
<img
class="ecosystem-logo"
src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/home_ai_logo.png"
:src="homeAiLogo"
alt="Code Create"
loading="lazy"
translate-y-s="-20"
@@ -164,26 +165,31 @@
@media (max-width: 640px) {
.home-content {
padding: 72px 0 36px;
padding: 52px 0 0;
}
.ecosystem-intro {
padding: 0 24px 58px;
}
.ecosystem-logo {
width: 138px;
margin-bottom: 22px;
width: 76px;
margin-bottom: 26px;
}
.ecosystem-title {
width: min(100%, 330px);
max-width: none;
font-size: 14px;
letter-spacing: 1.5px;
line-height: 1.45;
margin-bottom: 10px;
font-size: 18px;
letter-spacing: 1px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.ecosystem-subtitle {
font-size: 12px;
letter-spacing: 1.5px;
font-size: 13px;
letter-spacing: 0.8px;
}
}
</style>

View File

@@ -1,5 +1,17 @@
<script setup lang="ts">
import UserList from './user-list.vue'
import { useHead } from '@unhead/vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
useHead({
title: t('userStories.Title'),
meta: [
{
name: 'description',
content: t('userStories.meta')
}
]
})
defineExpose({})
</script>
<template>

1
src/tools/config.ts Normal file
View File

@@ -0,0 +1 @@
export const IMAGE_BASE_URL = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk'

View File

@@ -1 +1 @@
{"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/index.ts","./src/directives/myevents.ts","./src/directives/scroll-progress.ts","./src/directives/tween-animation.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/contactview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/events/index.vue","./src/pages/events/swiper.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/register.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/types/kagol-vue-carousel.d.ts"],"version":"6.0.3"}
{"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/email-box.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/main-menu-dialog.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/custom-show.js","./src/directives/index.ts","./src/directives/scroll-progress.ts","./src/directives/tween.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/contact-us/index.vue","./src/pages/events/all-events.vue","./src/pages/events/index.vue","./src/pages/events/list-en.js","./src/pages/events/list-zh-cn.js","./src/pages/events/list-zh-tw.js","./src/pages/events/swiper.vue","./src/pages/events-detail/index.vue","./src/pages/events-detail/list-en.js","./src/pages/events-detail/list-zh-cn.js","./src/pages/events-detail/list-zh-tw.js","./src/pages/help-centre/faq.vue","./src/pages/help-centre/index.vue","./src/pages/help-centre/title.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/media/index.vue","./src/pages/media/list-en.js","./src/pages/media/list-zh-cn.js","./src/pages/media/list-zh-tw.js","./src/pages/mixi/index.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/address.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/payment-methods.vue","./src/pages/my-account/register.vue","./src/pages/my-account/subscriptions.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/pages/others/disclaimer.vue","./src/pages/others/not-found-404.vue","./src/pages/others/others-header.vue","./src/pages/others/privacy-policy.vue","./src/pages/others/site-map.vue","./src/pages/others/terms-of-use.vue","./src/pages/user-stories/index.vue","./src/pages/user-stories/user-list.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/tools/myevents.ts","./src/types/kagol-vue-carousel.d.ts"],"errors":true,"version":"6.0.3"}