Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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亦在设计开发阶段,通过学习我们的风格和品味,帮助我们加快设计过程。'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 & 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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
1
src/tools/config.ts
Normal file
@@ -0,0 +1 @@
|
||||
export const IMAGE_BASE_URL = 'https://s3.ap-east-1.amazonaws.com/code-create.com.hk'
|
||||
@@ -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"}
|
||||
Reference in New Issue
Block a user