From 5f91171aff0da9979191fabc130c22ab9531d39a Mon Sep 17 00:00:00 2001 From: zoobestik Date: Thu, 20 Nov 2025 20:01:07 +0100 Subject: [PATCH 1/7] feat(landing): Multiplatform: implement a hero section and redesign page # Conflicts: # pages/multiplatform/index.tsx --- blocks/multiplatform/hero/hero.module.css | 119 ++++++++++++++++++++ blocks/multiplatform/hero/icons/android.svg | 5 + blocks/multiplatform/hero/icons/desktop.svg | 4 + blocks/multiplatform/hero/icons/ios.svg | 3 + blocks/multiplatform/hero/icons/server.svg | 4 + blocks/multiplatform/hero/icons/web.svg | 3 + blocks/multiplatform/hero/index.tsx | 50 ++++++++ blocks/multiplatform/hero/logo.svg | 10 ++ pages/multiplatform/index.tsx | 32 ++++-- 9 files changed, 220 insertions(+), 10 deletions(-) create mode 100644 blocks/multiplatform/hero/hero.module.css create mode 100644 blocks/multiplatform/hero/icons/android.svg create mode 100644 blocks/multiplatform/hero/icons/desktop.svg create mode 100644 blocks/multiplatform/hero/icons/ios.svg create mode 100644 blocks/multiplatform/hero/icons/server.svg create mode 100644 blocks/multiplatform/hero/icons/web.svg create mode 100644 blocks/multiplatform/hero/index.tsx create mode 100644 blocks/multiplatform/hero/logo.svg diff --git a/blocks/multiplatform/hero/hero.module.css b/blocks/multiplatform/hero/hero.module.css new file mode 100644 index 00000000000..ed56503e091 --- /dev/null +++ b/blocks/multiplatform/hero/hero.module.css @@ -0,0 +1,119 @@ +@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints/media.pcss"; + +.wrapper { + position: relative; + z-index: 0; + overflow: hidden; +} + +.wrapper::before { + content: ''; + display: block; + + background: radial-gradient(238.09% 60.02% at 49.98% 105.17%, rgba(177, 38, 235, 0.00) 0%, #260053 100%) center no-repeat; + filter: blur(200px); + + height: 696px; + width: 826px; + + position: absolute; + top: 36px; + left: 50%; + transform: translate(-50%, -50%); + z-index: -1; +} + +.hero { + display: flex; + flex-direction: column; + align-items: center; + + padding-block: 72px 96px; + + --hero-logo-image: ''; +} + +.hero::before { + display: block; + content: ''; + background: var(--hero-logo-image) no-repeat center; + + height: 72px; + width: 72px; + + @media (--ktl-ts-min) { + height: 96px; + width: 96px; + } +} + +.title, .subtitle { + margin: 0; + padding: 0; + text-align: center; +} + +.title { + padding-block: 24px; + font-size: 42px; + line-height: 1.2; + + @media (--ktl-tm-min) { + font-size: 72px; + line-height: 1; + } +} + +.subtitle { + font-size: 23px; + line-height: 1.3; + font-weight: 300; + + @media (--ktl-tm-min) { + font-size: 39px; + } +} + +.platforms { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 18px 40px ; + + margin: 0; + padding: 48px 0; + list-style: none; + + --hero-item-src: ''; +} + +.platform { + display: flex; + flex-direction: column; + align-items: center; + + font-size: 13px; + line-height: 1.5; + + @media (--ktl-ts-min) { + font-size: 16px; + } +} + +.platform::before { + display: block; + content: ''; + + background: var(--hero-item-src) no-repeat center; + background-size: 32px; + height: 32px; + width: 32px; + + font-size: 16px; + + @media (--ktl-ts-min) { + background-size: 48px; + height: 48px; + width: 48px; + } +} diff --git a/blocks/multiplatform/hero/icons/android.svg b/blocks/multiplatform/hero/icons/android.svg new file mode 100644 index 00000000000..bc288de4bf1 --- /dev/null +++ b/blocks/multiplatform/hero/icons/android.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/blocks/multiplatform/hero/icons/desktop.svg b/blocks/multiplatform/hero/icons/desktop.svg new file mode 100644 index 00000000000..0eafbe49798 --- /dev/null +++ b/blocks/multiplatform/hero/icons/desktop.svg @@ -0,0 +1,4 @@ + + + + diff --git a/blocks/multiplatform/hero/icons/ios.svg b/blocks/multiplatform/hero/icons/ios.svg new file mode 100644 index 00000000000..d821547422d --- /dev/null +++ b/blocks/multiplatform/hero/icons/ios.svg @@ -0,0 +1,3 @@ + + + diff --git a/blocks/multiplatform/hero/icons/server.svg b/blocks/multiplatform/hero/icons/server.svg new file mode 100644 index 00000000000..7ce66fb2094 --- /dev/null +++ b/blocks/multiplatform/hero/icons/server.svg @@ -0,0 +1,4 @@ + + + + diff --git a/blocks/multiplatform/hero/icons/web.svg b/blocks/multiplatform/hero/icons/web.svg new file mode 100644 index 00000000000..c1380dabfae --- /dev/null +++ b/blocks/multiplatform/hero/icons/web.svg @@ -0,0 +1,3 @@ + + + diff --git a/blocks/multiplatform/hero/index.tsx b/blocks/multiplatform/hero/index.tsx new file mode 100644 index 00000000000..90ff774a029 --- /dev/null +++ b/blocks/multiplatform/hero/index.tsx @@ -0,0 +1,50 @@ +import cn from 'classnames'; + +import { Button } from '@rescui/button'; +import { useTextStyles } from '@rescui/typography'; + +import android from './icons/android.svg'; +import ios from './icons/ios.svg'; +import web from './icons/web.svg'; +import desktop from './icons/desktop.svg'; +import server from './icons/server.svg'; + +import logo from './logo.svg'; + +import styles from './hero.module.css'; + +const platforms = [ + { title: 'Android', icon: android }, + { title: 'iOS', icon: ios }, + { title: 'Web', icon: web }, + { title: 'Desktop', icon: desktop }, + { title: 'Server', icon: server } +] as const; + +export function HeroBanner({ url }: { url: string }) { + const textCn = useTextStyles(); + + return ( +
+
+

Kotlin Multiplatform

+

+ Go cross‑platform without compromising performance, UX, or code quality +

+
    + {platforms.map(({ title, icon }) => ( +
  • + {title} +
    • + ))} +
+ +
+
+ ); +} diff --git a/blocks/multiplatform/hero/logo.svg b/blocks/multiplatform/hero/logo.svg new file mode 100644 index 00000000000..5c5d029e46c --- /dev/null +++ b/blocks/multiplatform/hero/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/pages/multiplatform/index.tsx b/pages/multiplatform/index.tsx index a87c06be9ec..80de8189e38 100644 --- a/pages/multiplatform/index.tsx +++ b/pages/multiplatform/index.tsx @@ -1,15 +1,26 @@ import { Button } from '@rescui/button'; -import { LandingLayout, LandingLayoutProps } from '../../components/landing-layout/landing-layout'; +import { ThemeProvider } from '@rescui/ui-contexts'; -import { - MULTIPLATFORM_MOBILE_TITLE, - MULTIPLATFORM_MOBILE_URL -} from '@jetbrains/kotlin-web-site-ui/out/components/header'; +import { LandingLayout, LandingLayoutProps } from '../../components/landing-layout/landing-layout'; -import styles from './multiplatform.module.css'; import { FaqBlock } from '../../blocks/multiplatform/faq-block/faq-block'; +import { HeroBanner } from '../../blocks/multiplatform/hero'; + +const MULTIPLATFORM_MOBILE_TITLE = 'Kotlin Multiplatform' as const; +const MULTIPLATFORM_MOBILE_URL = '/multiplatform/' as const; + +const TOP_MENU_ITEMS: LandingLayoutProps['topMenuItems'] = [ + { + title: 'Compose Multiplatform', + url: 'https://www.jetbrains.com/compose-multiplatform/' + }, + { + title: 'Docs', + url: 'https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html' + } +]; -const TOP_MENU_ITEMS: LandingLayoutProps['topMenuItems'] = []; +const GET_STARTED_URL = '/docs/multiplatform/get-started.html' as const; export default function MultiplatformLanding() { return ( @@ -23,12 +34,13 @@ export default function MultiplatformLanding() { topMenuTitle={MULTIPLATFORM_MOBILE_TITLE} topMenuHomeUrl={MULTIPLATFORM_MOBILE_URL} topMenuItems={TOP_MENU_ITEMS} - topMenuButton={} + topMenuButton={} canonical={'https://kotlinlang.org/multiplatform/'} > -
+ + -
+ ); } From 6e70c335caf385ce0328bb59080749483a5757e9 Mon Sep 17 00:00:00 2001 From: zoobestik Date: Fri, 21 Nov 2025 18:49:13 +0100 Subject: [PATCH 2/7] feat(multiplatform): update landing layout and upgrade UI library to 4.13.0-alpha.2 --- blocks/multiplatform/hero/hero.module.css | 2 +- package.json | 2 +- pages/multiplatform/index.tsx | 10 ++++++---- yarn.lock | 8 ++++---- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/blocks/multiplatform/hero/hero.module.css b/blocks/multiplatform/hero/hero.module.css index ed56503e091..a362ce31ef9 100644 --- a/blocks/multiplatform/hero/hero.module.css +++ b/blocks/multiplatform/hero/hero.module.css @@ -1,4 +1,4 @@ -@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints/media.pcss"; +@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2/media.pcss"; .wrapper { position: relative; diff --git a/package.json b/package.json index 2a202d114a2..b6f22a45074 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@babel/core": "^7.22.10", "@babel/register": "7.15.3", "@jetbrains/babel-preset-jetbrains": "^2.3.1", - "@jetbrains/kotlin-web-site-ui": "4.12.0", + "@jetbrains/kotlin-web-site-ui": "4.13.0-alpha.2", "@react-hook/resize-observer": "1.2.5", "@rescui/button": "0.18.0", "@rescui/card": "^0.8.1", diff --git a/pages/multiplatform/index.tsx b/pages/multiplatform/index.tsx index 80de8189e38..a56fb6b7c07 100644 --- a/pages/multiplatform/index.tsx +++ b/pages/multiplatform/index.tsx @@ -37,10 +37,12 @@ export default function MultiplatformLanding() { topMenuButton={} canonical={'https://kotlinlang.org/multiplatform/'} > - - - - +
+ + + + +
); } diff --git a/yarn.lock b/yarn.lock index e14cacb6daa..842f4c35511 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1433,10 +1433,10 @@ "@babel/runtime" "^7.14.0" babel-plugin-angularjs-annotate "^0.10.0" -"@jetbrains/kotlin-web-site-ui@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@jetbrains/kotlin-web-site-ui/-/kotlin-web-site-ui-4.12.0.tgz#54ac736c11588e3caf427d1f6041081ecda72960" - integrity sha512-xjHSphIJPKGnd74jZThqbGqeKk4OH3/znCJ6jdVUP3x5REwcPzegcF0qhEzcYnzl3wZ6/LLk2wHudnwCIAfm+w== +"@jetbrains/kotlin-web-site-ui@4.13.0-alpha.2": + version "4.13.0-alpha.2" + resolved "https://registry.yarnpkg.com/@jetbrains/kotlin-web-site-ui/-/kotlin-web-site-ui-4.13.0-alpha.2.tgz#0bcfafb362389f956a519e6880c55f421a26c778" + integrity sha512-p2+IMTqeg/He5+2qhC8UDueQX+XoaxiNJETerJGVdlgQVi4bbImIhTTJMpymIZoWbSQsWRiV7l9XL9b+I8YKFg== "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2": version "0.3.3" From 54c64370b057604e73ce9c99ec347063786a3c72 Mon Sep 17 00:00:00 2001 From: zoobestik Date: Fri, 21 Nov 2025 20:02:17 +0100 Subject: [PATCH 3/7] feat(multiplatform): update Hero styles - Update `@jetbrains/kotlin-web-site-ui` to version 4.13.0-alpha.3 - Modify a Hero section to leverage new breakpoint hooks - Adjust responsive styles for improved layout behavior --- blocks/multiplatform/hero/hero.module.css | 29 +++++++++++++++----- blocks/multiplatform/hero/index.tsx | 4 ++- components/landing-layout/landing-layout.tsx | 1 + package.json | 2 +- yarn.lock | 8 +++--- 5 files changed, 31 insertions(+), 13 deletions(-) diff --git a/blocks/multiplatform/hero/hero.module.css b/blocks/multiplatform/hero/hero.module.css index a362ce31ef9..aea1ad1159c 100644 --- a/blocks/multiplatform/hero/hero.module.css +++ b/blocks/multiplatform/hero/hero.module.css @@ -41,7 +41,7 @@ height: 72px; width: 72px; - @media (--ktl-ts-min) { + @media (--ktl-ts-more) { height: 96px; width: 96px; } @@ -58,7 +58,7 @@ font-size: 42px; line-height: 1.2; - @media (--ktl-tm-min) { + @media (--ktl-ts-more) { font-size: 72px; line-height: 1; } @@ -69,7 +69,7 @@ line-height: 1.3; font-weight: 300; - @media (--ktl-tm-min) { + @media (--ktl-ts-more) { font-size: 39px; } } @@ -78,7 +78,10 @@ display: flex; flex-wrap: wrap; justify-content: center; - gap: 18px 40px ; + + box-sizing: border-box; + gap: 18px 40px; + width: 100%; margin: 0; padding: 48px 0; @@ -91,13 +94,19 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; font-size: 13px; line-height: 1.5; - - @media (--ktl-ts-min) { + + @media (--ktl-ts-more) { + flex-basis: 80px; font-size: 16px; } + + @media (--ktl-ms-in) { + padding-inline: 14px; + } } .platform::before { @@ -111,9 +120,15 @@ font-size: 16px; - @media (--ktl-ts-min) { + @media (--ktl-ts-more) { background-size: 48px; height: 48px; width: 48px; } } + +.button { + @media (--ktl-ms-in) { + width: 100%; + } +} \ No newline at end of file diff --git a/blocks/multiplatform/hero/index.tsx b/blocks/multiplatform/hero/index.tsx index 90ff774a029..e2ca7b00475 100644 --- a/blocks/multiplatform/hero/index.tsx +++ b/blocks/multiplatform/hero/index.tsx @@ -2,6 +2,7 @@ import cn from 'classnames'; import { Button } from '@rescui/button'; import { useTextStyles } from '@rescui/typography'; +import { useML } from '@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2'; import android from './icons/android.svg'; import ios from './icons/ios.svg'; @@ -23,6 +24,7 @@ const platforms = [ export function HeroBanner({ url }: { url: string }) { const textCn = useTextStyles(); + const isML = useML(); return (
@@ -43,7 +45,7 @@ export function HeroBanner({ url }: { url: string }) { ))} - +
); diff --git a/components/landing-layout/landing-layout.tsx b/components/landing-layout/landing-layout.tsx index 63983c0a431..278e5f99ccc 100644 --- a/components/landing-layout/landing-layout.tsx +++ b/components/landing-layout/landing-layout.tsx @@ -2,6 +2,7 @@ import React, { FC, useCallback, useMemo } from 'react'; import Head from 'next/head'; +import '@jetbrains/kotlin-web-site-ui/out/components/layout-v2'; import GlobalHeader from '@jetbrains/kotlin-web-site-ui/out/components/header'; import GlobalFooter from '@jetbrains/kotlin-web-site-ui/out/components/footer'; import TopMenu from '@jetbrains/kotlin-web-site-ui/out/components/top-menu'; diff --git a/package.json b/package.json index b6f22a45074..074d9770254 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@babel/core": "^7.22.10", "@babel/register": "7.15.3", "@jetbrains/babel-preset-jetbrains": "^2.3.1", - "@jetbrains/kotlin-web-site-ui": "4.13.0-alpha.2", + "@jetbrains/kotlin-web-site-ui": "4.13.0-alpha.3", "@react-hook/resize-observer": "1.2.5", "@rescui/button": "0.18.0", "@rescui/card": "^0.8.1", diff --git a/yarn.lock b/yarn.lock index 842f4c35511..88d85f09b47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1433,10 +1433,10 @@ "@babel/runtime" "^7.14.0" babel-plugin-angularjs-annotate "^0.10.0" -"@jetbrains/kotlin-web-site-ui@4.13.0-alpha.2": - version "4.13.0-alpha.2" - resolved "https://registry.yarnpkg.com/@jetbrains/kotlin-web-site-ui/-/kotlin-web-site-ui-4.13.0-alpha.2.tgz#0bcfafb362389f956a519e6880c55f421a26c778" - integrity sha512-p2+IMTqeg/He5+2qhC8UDueQX+XoaxiNJETerJGVdlgQVi4bbImIhTTJMpymIZoWbSQsWRiV7l9XL9b+I8YKFg== +"@jetbrains/kotlin-web-site-ui@4.13.0-alpha.3": + version "4.13.0-alpha.3" + resolved "https://registry.yarnpkg.com/@jetbrains/kotlin-web-site-ui/-/kotlin-web-site-ui-4.13.0-alpha.3.tgz#6ce4b3e5bf02cf3f2cdb3c57ba9e8d0b67b7f093" + integrity sha512-r8LzSZjW1KpVuev3vdNeipjXOtl3VxXrjCdG+N07zkozwwsC2gbHyUIVwN+Or5754ElJj7zj9aEgskbhkXxIDw== "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2": version "0.3.3" From f31efe21ffc1a0903b7f09ded0724d584c9914c5 Mon Sep 17 00:00:00 2001 From: zoobestik Date: Fri, 21 Nov 2025 20:05:06 +0100 Subject: [PATCH 4/7] fix(multiplatform): adjust Hero subtitle spacing for consistent formatting --- blocks/multiplatform/hero/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/multiplatform/hero/index.tsx b/blocks/multiplatform/hero/index.tsx index e2ca7b00475..50e7b1c06e5 100644 --- a/blocks/multiplatform/hero/index.tsx +++ b/blocks/multiplatform/hero/index.tsx @@ -32,7 +32,7 @@ export function HeroBanner({ url }: { url: string }) { style={{ '--hero-logo-image': `url(${logo.src})` }}>

Kotlin Multiplatform

- Go cross‑platform without compromising performance, UX, or code quality + Go cross‑platform without compromising performance, UX, or code quality

    {platforms.map(({ title, icon }) => ( From d0f8fe3fc7e26669f072c41ff0615e5cf7ead7b1 Mon Sep 17 00:00:00 2001 From: zoobestik Date: Fri, 21 Nov 2025 20:07:21 +0100 Subject: [PATCH 5/7] fix(multiplatform): adjust Hero spacing with added gap for better alignment --- blocks/multiplatform/hero/hero.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/multiplatform/hero/hero.module.css b/blocks/multiplatform/hero/hero.module.css index aea1ad1159c..22775f0c400 100644 --- a/blocks/multiplatform/hero/hero.module.css +++ b/blocks/multiplatform/hero/hero.module.css @@ -95,6 +95,7 @@ flex-direction: column; align-items: center; justify-content: center; + gap: 8px; font-size: 13px; line-height: 1.5; From f8ff05d44fd1a157fc5febf1ac999ef5bda1c856 Mon Sep 17 00:00:00 2001 From: zoobestik Date: Mon, 24 Nov 2025 15:40:26 +0100 Subject: [PATCH 6/7] feat(multiplatform): update Hero styles and dependencies for improved responsiveness - Upgrade `@jetbrains/kotlin-web-site-ui` to `4.13.0-alpha.4` - Update `@rescui/colors` dependency to `0.1.11` - Refactor Hero section layout with updated breakpoints and styling adjustments --- blocks/multiplatform/hero/hero.module.css | 25 ++++++++--------------- blocks/multiplatform/hero/index.tsx | 10 +++++---- package.json | 2 +- yarn.lock | 16 +++++++-------- 4 files changed, 24 insertions(+), 29 deletions(-) diff --git a/blocks/multiplatform/hero/hero.module.css b/blocks/multiplatform/hero/hero.module.css index 22775f0c400..8d24677bcee 100644 --- a/blocks/multiplatform/hero/hero.module.css +++ b/blocks/multiplatform/hero/hero.module.css @@ -55,22 +55,19 @@ .title { padding-block: 24px; - font-size: 42px; - line-height: 1.2; - @media (--ktl-ts-more) { - font-size: 72px; - line-height: 1; + @media (--ktl-ts-in) { + /* @mixin rs-hero-sm-*; */ + font-size: 42px; + line-height: 50px; } } .subtitle { - font-size: 23px; - line-height: 1.3; - font-weight: 300; - - @media (--ktl-ts-more) { - font-size: 39px; + @media (--ktl-ts-in) { + /* @mixin rs-subtitle-1-sm-* */ + font-size: 23px; + line-height: 30px; } } @@ -97,12 +94,10 @@ justify-content: center; gap: 8px; - font-size: 13px; line-height: 1.5; @media (--ktl-ts-more) { flex-basis: 80px; - font-size: 16px; } @media (--ktl-ms-in) { @@ -119,8 +114,6 @@ height: 32px; width: 32px; - font-size: 16px; - @media (--ktl-ts-more) { background-size: 48px; height: 48px; @@ -132,4 +125,4 @@ @media (--ktl-ms-in) { width: 100%; } -} \ No newline at end of file +} diff --git a/blocks/multiplatform/hero/index.tsx b/blocks/multiplatform/hero/index.tsx index 50e7b1c06e5..895e1c8d1e9 100644 --- a/blocks/multiplatform/hero/index.tsx +++ b/blocks/multiplatform/hero/index.tsx @@ -1,7 +1,8 @@ import cn from 'classnames'; -import { Button } from '@rescui/button'; import { useTextStyles } from '@rescui/typography'; +import { Button } from '@rescui/button'; + import { useML } from '@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2'; import android from './icons/android.svg'; @@ -23,8 +24,8 @@ const platforms = [ ] as const; export function HeroBanner({ url }: { url: string }) { - const textCn = useTextStyles(); const isML = useML(); + const textCn = useTextStyles(); return (
    @@ -38,14 +39,15 @@ export function HeroBanner({ url }: { url: string }) { {platforms.map(({ title, icon }) => (
  • {title}
    • ))}
- + ); diff --git a/package.json b/package.json index 074d9770254..4f4adc0e231 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@babel/core": "^7.22.10", "@babel/register": "7.15.3", "@jetbrains/babel-preset-jetbrains": "^2.3.1", - "@jetbrains/kotlin-web-site-ui": "4.13.0-alpha.3", + "@jetbrains/kotlin-web-site-ui": "4.13.0-alpha.4", "@react-hook/resize-observer": "1.2.5", "@rescui/button": "0.18.0", "@rescui/card": "^0.8.1", diff --git a/yarn.lock b/yarn.lock index 88d85f09b47..3942d0a9c38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1433,10 +1433,10 @@ "@babel/runtime" "^7.14.0" babel-plugin-angularjs-annotate "^0.10.0" -"@jetbrains/kotlin-web-site-ui@4.13.0-alpha.3": - version "4.13.0-alpha.3" - resolved "https://registry.yarnpkg.com/@jetbrains/kotlin-web-site-ui/-/kotlin-web-site-ui-4.13.0-alpha.3.tgz#6ce4b3e5bf02cf3f2cdb3c57ba9e8d0b67b7f093" - integrity sha512-r8LzSZjW1KpVuev3vdNeipjXOtl3VxXrjCdG+N07zkozwwsC2gbHyUIVwN+Or5754ElJj7zj9aEgskbhkXxIDw== +"@jetbrains/kotlin-web-site-ui@4.13.0-alpha.4": + version "4.13.0-alpha.4" + resolved "https://registry.yarnpkg.com/@jetbrains/kotlin-web-site-ui/-/kotlin-web-site-ui-4.13.0-alpha.4.tgz#e8c8ee5a6ad203632b7f65ee37b55b9da9bafb8e" + integrity sha512-RYka7guyOoPdR4GQoTM+qIVDcwNuRRhsjjuTJflGe/XB+ipo3nR8UsPvZmnJtDcoLXGT2XgHyQiIyvQfy6uijg== "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2": version "0.3.3" @@ -1790,9 +1790,9 @@ integrity sha512-SfFy7W8vlWuRsEpT9VYSVRXGso6PK2pP5BuPnt3d525aW8Rx99kiuKYaqNPdu9p2nh2/XIf+febOl4Q3x/fH1g== "@rescui/colors@^0.1.9": - version "0.1.9" - resolved "https://registry.npmjs.org/@rescui/colors/-/colors-0.1.9.tgz" - integrity sha512-ZgMmIuCJERqPsfCY+7I9UvOIWEypyiZ4VdDdHPb/HUy9lxPpfNzV7Fs/RalBJP4wtgsfwR24d4IlYNhpJcunTA== + version "0.1.11" + resolved "https://registry.yarnpkg.com/@rescui/colors/-/colors-0.1.11.tgz#438b5058cc308d28d4bda407236c25b67aff0179" + integrity sha512-zfZ7czMTQ5/DyZeMXCm1nTWEclIY5+Iuc8D3CZK2Zl64La//mjHz9Rjf+NlAE70bESzYtBNlItATN/lWgkowaQ== "@rescui/colors@^0.2.10": version "0.2.10" @@ -1941,7 +1941,7 @@ "@rescui/typography@^0.11.0": version "0.11.0" - resolved "https://registry.npmjs.org/@rescui/typography/-/typography-0.11.0.tgz" + resolved "https://registry.yarnpkg.com/@rescui/typography/-/typography-0.11.0.tgz#8a348121ea3bb18249f6af18628426b04a3ee6d7" integrity sha512-IT8pXLkFQs7RsJ0eWWsCVz11HuJn1dQ78Lti2mz8q6NLbvb8TS+dlh53UzN5hLVISC9kFTRtyK2IblMIDd0zpA== dependencies: "@babel/runtime-corejs3" "^7.14.0" From 10ec632bfe6f21f7ba7f05b75237e5381c929109 Mon Sep 17 00:00:00 2001 From: zoobestik Date: Mon, 1 Dec 2025 13:30:07 +0100 Subject: [PATCH 7/7] feat(multiplatform): refactor Hero icons structure and update image sources - Migrate Hero icons from inline SVGs to static assets under `/public/images/multiplatform/hero` - Update `HeroBanner` component to reference new image paths - Refactor `hero.module.css` to use new CSS classes for platform-specific styles --- blocks/multiplatform/hero/hero.module.css | 24 ++++++++++-- blocks/multiplatform/hero/index.tsx | 38 ++++++------------- pages/multiplatform/index.tsx | 2 +- .../images/multiplatform/hero}/android.svg | 0 .../images/multiplatform/hero/desktop.svg | 0 .../images/multiplatform/hero}/ios.svg | 0 .../images}/multiplatform/hero/logo.svg | 0 .../images/multiplatform/hero/server.svg | 0 .../images/multiplatform/hero}/web.svg | 0 9 files changed, 34 insertions(+), 30 deletions(-) rename {blocks/multiplatform/hero/icons => public/images/multiplatform/hero}/android.svg (100%) rename blocks/multiplatform/hero/icons/server.svg => public/images/multiplatform/hero/desktop.svg (100%) rename {blocks/multiplatform/hero/icons => public/images/multiplatform/hero}/ios.svg (100%) rename {blocks => public/images}/multiplatform/hero/logo.svg (100%) rename blocks/multiplatform/hero/icons/desktop.svg => public/images/multiplatform/hero/server.svg (100%) rename {blocks/multiplatform/hero/icons => public/images/multiplatform/hero}/web.svg (100%) diff --git a/blocks/multiplatform/hero/hero.module.css b/blocks/multiplatform/hero/hero.module.css index 8d24677bcee..eb6a6051622 100644 --- a/blocks/multiplatform/hero/hero.module.css +++ b/blocks/multiplatform/hero/hero.module.css @@ -29,14 +29,12 @@ align-items: center; padding-block: 72px 96px; - - --hero-logo-image: ''; } .hero::before { display: block; content: ''; - background: var(--hero-logo-image) no-repeat center; + background: url('/images/multiplatform/hero/logo.svg') no-repeat center; height: 72px; width: 72px; @@ -103,6 +101,26 @@ @media (--ktl-ms-in) { padding-inline: 14px; } + + &.android { + --hero-item-src: url('/images/multiplatform/hero/android.svg'); + } + + &.ios { + --hero-item-src: url('/images/multiplatform/hero/ios.svg'); + } + + &.web { + --hero-item-src: url('/images/multiplatform/hero/web.svg'); + } + + &.desktop { + --hero-item-src: url('/images/multiplatform/hero/desktop.svg'); + } + + &.server { + --hero-item-src: url('/images/multiplatform/hero/server.svg'); + } } .platform::before { diff --git a/blocks/multiplatform/hero/index.tsx b/blocks/multiplatform/hero/index.tsx index 895e1c8d1e9..91304f14be6 100644 --- a/blocks/multiplatform/hero/index.tsx +++ b/blocks/multiplatform/hero/index.tsx @@ -5,23 +5,9 @@ import { Button } from '@rescui/button'; import { useML } from '@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2'; -import android from './icons/android.svg'; -import ios from './icons/ios.svg'; -import web from './icons/web.svg'; -import desktop from './icons/desktop.svg'; -import server from './icons/server.svg'; - -import logo from './logo.svg'; - import styles from './hero.module.css'; -const platforms = [ - { title: 'Android', icon: android }, - { title: 'iOS', icon: ios }, - { title: 'Web', icon: web }, - { title: 'Desktop', icon: desktop }, - { title: 'Server', icon: server } -] as const; +const platforms = ['Android', 'iOS', 'Web', 'Desktop', 'Server'] as const; export function HeroBanner({ url }: { url: string }) { const isML = useML(); @@ -29,22 +15,22 @@ export function HeroBanner({ url }: { url: string }) { return (
-
+

Kotlin Multiplatform

Go cross‑platform without compromising performance, UX, or code quality

    - {platforms.map(({ title, icon }) => ( -
  • - {title} -
    • - ))} + {platforms.map(title => { + const key = title.toLowerCase(); + + return ( +
  • + {title} +
    • + ); + })}
diff --git a/pages/multiplatform/index.tsx b/pages/multiplatform/index.tsx index a56fb6b7c07..d4b77f1ecf6 100644 --- a/pages/multiplatform/index.tsx +++ b/pages/multiplatform/index.tsx @@ -16,7 +16,7 @@ const TOP_MENU_ITEMS: LandingLayoutProps['topMenuItems'] = [ }, { title: 'Docs', - url: 'https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html' + url: 'https://kotlinlang.org/docs/multiplatform/get-started.html' } ]; diff --git a/blocks/multiplatform/hero/icons/android.svg b/public/images/multiplatform/hero/android.svg similarity index 100% rename from blocks/multiplatform/hero/icons/android.svg rename to public/images/multiplatform/hero/android.svg diff --git a/blocks/multiplatform/hero/icons/server.svg b/public/images/multiplatform/hero/desktop.svg similarity index 100% rename from blocks/multiplatform/hero/icons/server.svg rename to public/images/multiplatform/hero/desktop.svg diff --git a/blocks/multiplatform/hero/icons/ios.svg b/public/images/multiplatform/hero/ios.svg similarity index 100% rename from blocks/multiplatform/hero/icons/ios.svg rename to public/images/multiplatform/hero/ios.svg diff --git a/blocks/multiplatform/hero/logo.svg b/public/images/multiplatform/hero/logo.svg similarity index 100% rename from blocks/multiplatform/hero/logo.svg rename to public/images/multiplatform/hero/logo.svg diff --git a/blocks/multiplatform/hero/icons/desktop.svg b/public/images/multiplatform/hero/server.svg similarity index 100% rename from blocks/multiplatform/hero/icons/desktop.svg rename to public/images/multiplatform/hero/server.svg diff --git a/blocks/multiplatform/hero/icons/web.svg b/public/images/multiplatform/hero/web.svg similarity index 100% rename from blocks/multiplatform/hero/icons/web.svg rename to public/images/multiplatform/hero/web.svg