diff --git a/src/pages/home/components/Carousel.vue b/src/pages/home/components/Carousel.vue
index f9b44d2..cf7e682 100644
--- a/src/pages/home/components/Carousel.vue
+++ b/src/pages/home/components/Carousel.vue
@@ -526,8 +526,8 @@
.home-carousel {
.carousel-slide {
aspect-ratio: auto;
- height: 365px;
- min-height: 365px;
+ height: 504px;
+ min-height: 504px;
.carousel-banner {
height: 100%;
@@ -596,4 +596,13 @@
transform: translateX(0);
}
}
+
+ // @media (max-width: 768px) and (min-height: 844px) {
+ // .home-carousel {
+ // .carousel-slide {
+ // height: 504px;
+ // min-height: 504px;
+ // }
+ // }
+ // }
diff --git a/src/pages/home/components/ProductFeature.vue b/src/pages/home/components/ProductFeature.vue
index 13aef19..3b19c25 100644
--- a/src/pages/home/components/ProductFeature.vue
+++ b/src/pages/home/components/ProductFeature.vue
@@ -30,7 +30,7 @@
:src="backgroundImage"
:alt="backgroundAlt"
loading="lazy"
- translate-x-s="-100"
+ translate-x-s="0"
translate-x="100"
/>
![]()
{{ name }}
{{ title }}
-
- {{$t('Home.viewMore')}}
+
+ {{ $t('Home.viewMore') }}
@@ -63,12 +58,18 @@
display: flex;
align-items: center;
gap: clamp(48px, 5.5vw, 76px);
+ width: 100%;
max-width: 1440px;
min-width: 0;
min-height: 690px;
margin: 0 auto;
+ padding: 100px 15px;
+ justify-content: center;
+ box-sizing: border-box;
+ overflow-x: hidden;
& > div {
- width: 50%;
+ // width: 50%;
+ box-sizing: content-box;
}
}
@@ -89,15 +90,17 @@
.product-feature-art {
position: relative;
- width: min(100%, 560px);
+ width: clamp(320px, 45vw, 560px);
min-width: 0;
min-height: 560px;
justify-self: start;
+ flex: 0 1 auto;
+ overflow: hidden;
}
.product-feature-bg {
display: block;
- width: min(100%, 480px);
+ width: clamp(200px, 70%, 400px);
max-width: 100%;
height: auto;
user-select: none;
@@ -105,52 +108,51 @@
.product-feature-panel {
position: absolute;
- right: 0;
- bottom: 94px;
- width: min(72%, 380px);
- max-width: 100%;
+ left: 15%;
+ top: 53.329%;
+ max-width: 400px;
+ width: auto;
height: auto;
user-select: none;
}
.product-feature-reversed .product-feature-bg {
- width: min(100%, 460px);
+ width: 70%;
margin-left: auto;
}
.product-feature-reversed .product-feature-panel {
- right: auto;
- left: -88px;
- bottom: 70px;
- width: min(78%, 430px);
+ left: 0;
+ top: 53.329%;
}
.product-feature-copy {
position: relative;
z-index: 1;
- max-width: 590px;
+ max-width: 450px;
min-width: 0;
justify-self: start;
padding-bottom: 18px;
+ flex: 1 1 auto;
}
.product-feature-name {
margin: 0 0 20px;
- color: #6e6e6e;
+ color: #666666;
font-family: Poppins, sans-serif;
- font-size: 18px;
- font-weight: 700;
+ font-size: 24px;
+ font-weight: 600;
line-height: 1;
letter-spacing: 2px;
}
.product-feature-title {
- margin: 0 0 28px;
- color: #252525;
+ margin: 0 0 10px;
+ color: #222222;
font-family: Poppins, sans-serif;
- font-size: clamp(30px, 2.8vw, 38px);
- font-weight: 700;
- line-height: 1.16;
+ font-size: clamp(24px, 2.8vw, 39px);
+ font-weight: 600;
+ line-height: 1.3em;
letter-spacing: 2px;
text-transform: none;
overflow-wrap: break-word;
@@ -160,19 +162,17 @@
display: inline-flex;
align-items: center;
justify-content: center;
- min-width: 152px;
- min-height: 48px;
- padding: 0 28px;
- border-radius: 999px;
+ padding: 20px 40px;
+ border-radius: 40px;
color: #ffffff;
- background: #a72125;
+ background: #9a2125;
font-family: Poppins, sans-serif;
- font-size: 10px;
- font-weight: 700;
- line-height: 1;
+ font-size: 14px;
+ font-weight: 600;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
+ margin-top: 12px;
transition:
background-color 0.2s ease,
transform 0.2s ease;
@@ -180,23 +180,23 @@
.product-feature-link:hover,
.product-feature-link:focus-visible {
- background: #8e171b;
+ background: #63504b;
transform: translateY(-1px);
}
.product-feature-link:focus-visible {
- outline: 2px solid #a72125;
+ outline: 2px solid #9a2125;
outline-offset: 4px;
}
- @media (max-width: 980px) {
+ @media (max-width: 1024px) {
.product-feature,
.product-feature-reversed {
flex-direction: column-reverse;
gap: 24px;
width: min(680px, calc(100% - 40px));
min-height: 0;
- padding: 70px 0;
+ padding: 60px 0;
}
.product-feature-reversed .product-feature-art,
@@ -219,17 +219,26 @@
padding-bottom: 0;
}
+ .product-feature-panel,
.product-feature-reversed .product-feature-panel {
- left: 0;
+ max-width: 60%;
+ }
+
+ .product-feature-title {
+ font-size: 32px;
+ }
+
+ .product-feature-link {
+ font-size: 12px;
}
}
- @media (max-width: 640px) {
+ @media (max-width: 767px) {
.product-feature,
.product-feature-reversed {
width: calc(100% - 32px);
gap: 28px;
- padding: 0 0 64px;
+ padding: 20px 0;
}
.product-feature-art {
@@ -244,8 +253,7 @@
}
.product-feature-bg {
- width: 72%;
- margin-left: 38px;
+ width: 70%;
border-radius: 10px;
}
@@ -254,7 +262,8 @@
left: auto;
right: 12px;
bottom: 22px;
- width: 72%;
+ top: auto;
+ max-width: 70%;
}
.product-feature-reversed .product-feature-bg {
@@ -267,31 +276,31 @@
right: auto;
left: 18px;
bottom: 16px;
- width: 72%;
+ top: auto;
+ max-width: 70%;
}
.product-feature-name {
margin-bottom: 16px;
- font-size: 18px;
+ font-size: 24px;
+ font-weight: 600;
letter-spacing: 1.5px;
}
.product-feature-title {
width: 100%;
max-width: 100%;
- margin-bottom: 26px;
- font-size: clamp(22px, 6.1vw, 26px);
+ margin-bottom: 10px;
+ font-size: 24px;
+ font-weight: 600;
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;
+ font-size: 12px;
+ padding: 16px 32px;
}
}
diff --git a/src/pages/home/components/ProjectCta.vue b/src/pages/home/components/ProjectCta.vue
index 4f436e1..44baf14 100644
--- a/src/pages/home/components/ProjectCta.vue
+++ b/src/pages/home/components/ProjectCta.vue
@@ -18,16 +18,15 @@
display: flex;
align-items: center;
justify-content: center;
- min-height: 435px;
- padding: 72px 20px;
- background: #473935;
+ padding: 200px 0;
+ background: #463A37;
}
.project-cta-inner {
display: flex;
flex-direction: column;
align-items: center;
- gap: 38px;
+ gap: 20px;
text-align: center;
}
@@ -35,9 +34,9 @@
margin: 0;
color: #ffffff;
font-family: Poppins, sans-serif;
- font-size: clamp(22px, 2vw, 27px);
- font-weight: 700;
- line-height: 1.35;
+ font-size: clamp(22px, 2vw, 29px);
+ font-weight: 600;
+ line-height: 1.3em;
letter-spacing: 2px;
text-transform: capitalize;
}
@@ -46,16 +45,14 @@
display: inline-flex;
align-items: center;
justify-content: center;
- min-width: 158px;
- min-height: 48px;
- padding: 0 28px;
- border-radius: 999px;
+ padding: 20px 40px;
+ border-radius: 40px;
color: #ffffff;
- background: #ad2228;
+ background: #9A2125;
font-family: Poppins, sans-serif;
- font-size: 10px;
- font-weight: 700;
- line-height: 1;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.2em;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
@@ -66,7 +63,7 @@
.project-cta-link:hover,
.project-cta-link:focus-visible {
- background: #93191f;
+ background: #000000;
transform: translateY(-1px);
}
@@ -75,14 +72,13 @@
outline-offset: 4px;
}
- @media (max-width: 640px) {
+ @media (max-width: 767px) {
.project-cta {
- min-height: 288px;
- padding: 64px 20px;
+ padding: 100px 0;
}
.project-cta-inner {
- gap: 28px;
+ gap: 20px;
}
.project-cta-title {
@@ -92,11 +88,8 @@
}
.project-cta-link {
- min-width: 100px;
- min-height: 40px;
- padding: 0 22px;
- font-size: 9px;
- letter-spacing: 1px;
+ font-size: 12px;
+ padding: 16px 32px;
}
}
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 8166e3f..8459635 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -23,7 +23,7 @@
panelImage: `${IMAGE_BASE_URL}/2024/01/new-layout-1.png`,
panelAlt: 'AiDA design workspace preview',
reversed: false,
- to:'/aida'
+ to: '/aida'
},
{
name: 'Mixi',
@@ -33,7 +33,7 @@
panelImage: `${IMAGE_BASE_URL}/2022/11/mixi_intro_01_panel.png`,
panelAlt: 'Mixi visual search interface preview',
reversed: true,
- to:'/mixi'
+ to: '/mixi'
}
]
})
@@ -110,7 +110,7 @@
}
.home-content {
- padding: clamp(116px, 10vw, 172px) 0 clamp(92px, 8vw, 126px);
+ padding: 100px 0;
background: #ffffff;
}
@@ -119,28 +119,29 @@
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 0 20px clamp(92px, 10vw, 150px);
+ padding: 0 0 100px;
text-align: center;
}
.ecosystem-logo {
display: block;
- width: clamp(146px, 15vw, 184px);
+ width: auto;
+ max-width: 100%;
height: auto;
- margin-bottom: 30px;
+ margin-bottom: 16px;
user-select: none;
}
.ecosystem-title {
width: 100%;
max-width: 100%;
- margin: 0 0 9px;
- color: #101010;
+ margin: 0 0 8px;
+ color: #222222;
font-family: Poppins, sans-serif;
- font-size: clamp(18px, 1.65vw, 22px);
- font-weight: 700;
- line-height: 1.25;
- letter-spacing: 4px;
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 1;
+ letter-spacing: 2px;
text-transform: uppercase;
overflow-wrap: break-word;
}
@@ -148,51 +149,51 @@
.ecosystem-subtitle {
width: 100%;
margin: 0;
- color: #101010;
+ color: #333333;
font-family: Poppins, sans-serif;
- font-size: clamp(13px, 1.2vw, 16px);
+ font-size: 18px;
font-weight: 600;
- line-height: 1.35;
- letter-spacing: 2.5px;
+ line-height: 1;
+ letter-spacing: 2px;
}
- @media (max-width: 980px) {
+ @media (max-width: 1024px) {
.home-content {
- padding: 96px 0 64px;
+ padding: 60px 0;
}
.ecosystem-intro {
- padding-bottom: 50px;
+ padding-bottom: 60px;
}
}
- @media (max-width: 640px) {
+ @media (max-width: 767px) {
.home-content {
- padding: 52px 0 0;
+ padding: 40px 0;
}
.ecosystem-intro {
- padding: 0 24px 58px;
+ padding: 40px 20px 40px 20px;
}
.ecosystem-logo {
- width: 76px;
- margin-bottom: 26px;
+ width: 100px;
+ margin-bottom: 54px;
}
.ecosystem-title {
width: min(100%, 330px);
max-width: none;
- margin-bottom: 10px;
- font-size: 18px;
- letter-spacing: 1px;
- line-height: 1.35;
+ margin-bottom: 20px;
+ font-size: 24px;
+ letter-spacing: 2px;
+ line-height: 1;
overflow-wrap: anywhere;
}
.ecosystem-subtitle {
- font-size: 13px;
- letter-spacing: 0.8px;
+ font-size: 18px;
+ letter-spacing: 2px;
}
}
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
index 20de38a..0fb751a 100644
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -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/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"}
\ No newline at end of file
+{"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/config.ts","./src/tools/myevents.ts","./src/types/kagol-vue-carousel.d.ts"],"errors":true,"version":"6.0.3"}
\ No newline at end of file