diff --git a/blocks/multiplatform/hero/hero.module.css b/blocks/multiplatform/hero/hero.module.css
new file mode 100644
index 00000000000..eb6a6051622
--- /dev/null
+++ b/blocks/multiplatform/hero/hero.module.css
@@ -0,0 +1,146 @@
+@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2/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::before {
+    display: block;
+    content: '';
+    background: url('/images/multiplatform/hero/logo.svg') no-repeat center;
+
+    height: 72px;
+    width: 72px;
+
+    @media (--ktl-ts-more) {
+        height: 96px;
+        width: 96px;
+    }
+}
+
+.title, .subtitle {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+.title {
+    padding-block: 24px;
+
+    @media (--ktl-ts-in) {
+        /* @mixin rs-hero-sm-*; */
+        font-size: 42px;
+        line-height: 50px;
+    }
+}
+
+.subtitle {
+    @media (--ktl-ts-in) {
+        /* @mixin rs-subtitle-1-sm-* */
+        font-size: 23px;
+        line-height: 30px;
+    }
+}
+
+.platforms {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    box-sizing: border-box;
+    gap: 18px 40px;
+    width: 100%;
+
+    margin: 0;
+    padding: 48px 0;
+    list-style: none;
+
+    --hero-item-src: '';
+}
+
+.platform {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    line-height: 1.5;
+
+    @media (--ktl-ts-more) {
+        flex-basis: 80px;
+    }
+
+    @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 {
+    display: block;
+    content: '';
+
+    background: var(--hero-item-src) no-repeat center;
+    background-size: 32px;
+    height: 32px;
+    width: 32px;
+
+    @media (--ktl-ts-more) {
+        background-size: 48px;
+        height: 48px;
+        width: 48px;
+    }
+}
+
+.button {
+    @media (--ktl-ms-in) {
+        width: 100%;
+    }
+}
diff --git a/blocks/multiplatform/hero/index.tsx b/blocks/multiplatform/hero/index.tsx
new file mode 100644
index 00000000000..91304f14be6
--- /dev/null
+++ b/blocks/multiplatform/hero/index.tsx
@@ -0,0 +1,40 @@
+import cn from 'classnames';
+
+import { useTextStyles } from '@rescui/typography';
+import { Button } from '@rescui/button';
+
+import { useML } from '@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2';
+
+import styles from './hero.module.css';
+
+const platforms = ['Android', 'iOS', 'Web', 'Desktop', 'Server'] as const;
+
+export function HeroBanner({ url }: { url: string }) {
+    const isML = useML();
+    const textCn = useTextStyles();
+
+    return (
+        <div className={styles.wrapper}>
+            <div className={cn(styles.hero, 'ktl-layout', 'ktl-layout--center')}>
+                <h1 className={cn(styles.title, textCn('rs-hero'))}>Kotlin Multiplatform</h1>
+                <p className={cn(styles.subtitle, textCn('rs-subtitle-1'))}>
+                    Go&nbsp;cross&#8209;platform without compromising performance, UX, or&nbsp;code&nbsp;quality
+                </p>
+                <ul className={styles.platforms}>
+                    {platforms.map(title => {
+                        const key = title.toLowerCase();
+
+                        return (
+                            <li key={key}
+                                className={cn(styles.platform, styles[`${key}`], textCn(isML ? 'rs-h5' : 'rs-h4'))}>
+                                {title}
+                            </li>
+                        );
+                    })}
+                </ul>
+                <Button className={cn(styles.button)} mode={'rock'} href={url} size={isML ? 'm' : 'l'}>Get
+                    Started</Button>
+            </div>
+        </div>
+    );
+}
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 2a202d114a2..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.12.0",
+    "@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/pages/multiplatform/index.tsx b/pages/multiplatform/index.tsx
index a87c06be9ec..d4b77f1ecf6 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://kotlinlang.org/docs/multiplatform/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,11 +34,14 @@ export default function MultiplatformLanding() {
             topMenuTitle={MULTIPLATFORM_MOBILE_TITLE}
             topMenuHomeUrl={MULTIPLATFORM_MOBILE_URL}
             topMenuItems={TOP_MENU_ITEMS}
-            topMenuButton={<Button href={'#get-started'}>Get started</Button>}
+            topMenuButton={<Button href={GET_STARTED_URL}>Get started</Button>}
             canonical={'https://kotlinlang.org/multiplatform/'}
         >
-            <div className={styles.page}>
-                <FaqBlock />
+            <div className="ktl-layout-to-2">
+                <ThemeProvider theme={'dark'}>
+                    <HeroBanner url={GET_STARTED_URL} />
+                    <FaqBlock />
+                </ThemeProvider>
             </div>
         </LandingLayout>
     );
diff --git a/public/images/multiplatform/hero/android.svg b/public/images/multiplatform/hero/android.svg
new file mode 100644
index 00000000000..bc288de4bf1
--- /dev/null
+++ b/public/images/multiplatform/hero/android.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.7025 27.1053C15.5775 27.4728 14.9662 28.6728 15.3262 29.7978C15.6262 30.7428 16.5262 31.3278 17.4712 31.2791C17.6512 31.2678 17.835 31.2341 18.0187 31.1778C19.1437 30.8141 19.755 29.6103 19.3912 28.4853C19.0312 27.3603 17.8275 26.7416 16.7025 27.1053Z" fill="white"/>
+    <path d="M29.9775 27.1053C28.8525 27.4728 28.2413 28.6728 28.6013 29.7978C28.9013 30.7428 29.8013 31.3278 30.7463 31.2791C30.9263 31.2678 31.11 31.2341 31.2938 31.1778C32.4188 30.8141 33.03 29.6103 32.6663 28.4853C32.3063 27.3603 31.1025 26.7416 29.9775 27.1053Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M40.3425 15.6716L37.4738 21.4091C42.0713 25.2641 45 31.0466 45 37.5003V39.0003H3V37.5003C3 31.0466 5.92873 25.2641 10.5262 21.4091L7.65752 15.6716L10.3425 14.3291L12.99 19.6279C16.1925 17.6479 19.965 16.5003 24 16.5003C28.035 16.5003 31.8075 17.6479 35.01 19.6279L37.6575 14.3291L40.3425 15.6716ZM24 19.5003C14.58 19.5003 6.82877 26.7753 6.06377 36.0003H41.9362C41.1712 26.7753 33.42 19.5003 24 19.5003Z" fill="white"/>
+</svg>
diff --git a/public/images/multiplatform/hero/desktop.svg b/public/images/multiplatform/hero/desktop.svg
new file mode 100644
index 00000000000..7ce66fb2094
--- /dev/null
+++ b/public/images/multiplatform/hero/desktop.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M37.125 33H10.875C9.01125 33 7.5 31.4888 7.5 29.625V9.375C7.5 7.51125 9.01125 6 10.875 6H37.125C38.9888 6 40.5 7.51125 40.5 9.375V29.625C40.5 31.4888 38.9888 33 37.125 33ZM37.125 9H10.875C10.6688 9 10.5 9.16875 10.5 9.375V29.625C10.5 29.8313 10.6688 30 10.875 30H37.125C37.3313 30 37.5 29.8313 37.5 29.625V9.375C37.5 9.16875 37.3313 9 37.125 9Z" fill="white"/>
+    <path d="M3 37.5H45V40.5H3V37.5Z" fill="white"/>
+</svg>
diff --git a/public/images/multiplatform/hero/ios.svg b/public/images/multiplatform/hero/ios.svg
new file mode 100644
index 00000000000..d821547422d
--- /dev/null
+++ b/public/images/multiplatform/hero/ios.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M41.0058 31.0765C40.732 30.964 36.4045 29.0852 36.4045 24.0565C36.4045 20.4265 38.7408 18.349 40.1358 17.4377C40.2371 17.3702 40.3045 17.3252 40.3383 17.299L41.4633 16.4252L40.6458 15.2552C38.497 12.1727 35.1221 10.4777 31.1471 10.4777C29.0433 10.4777 27.2358 11.194 25.7808 11.7715C25.7058 11.8015 25.6308 11.8315 25.5596 11.8577C25.9008 8.89521 27.607 6.44649 30.8433 4.24149L29.1558 1.7627C24.982 4.60145 22.807 7.98398 22.5258 12.0677C22.2745 11.974 22.0083 11.8652 21.7383 11.7565C20.4483 11.2352 18.8395 10.5865 17.0095 10.5865C11.0658 10.5865 5.05078 15.364 5.05078 24.4915C5.05078 29.479 6.82453 35.1002 9.68578 39.1689C11.6658 41.9477 13.9083 45.094 17.392 45.094C18.9258 45.094 20.0583 44.614 21.0596 44.1902C22.0683 43.7627 22.9383 43.3914 24.3108 43.3914C25.6945 43.3914 26.4821 43.7364 27.3971 44.1339C28.3683 44.5577 29.4708 45.0377 31.1508 45.0377C34.852 45.0377 37.0796 41.8352 38.8721 39.2515C40.9871 36.169 41.9096 33.1165 41.9733 32.7602L42.2133 31.474L41.0058 31.0765ZM36.4045 37.549C34.6383 40.0915 33.127 42.0377 31.1508 42.0377C30.097 42.0377 29.4333 41.749 28.597 41.3852C27.5808 40.9427 26.3208 40.3914 24.3108 40.3914C22.327 40.3914 20.9733 40.9652 19.8858 41.4265C19.0083 41.7977 18.3183 42.0902 17.392 42.0902C15.5958 42.0902 14.077 40.1552 12.1345 37.4327C9.65204 33.9039 8.05078 28.8227 8.05078 24.4877C8.05078 17.329 12.5583 13.5827 17.0095 13.5827C18.2545 13.5827 19.4545 14.0665 20.6133 14.5352C21.7045 14.9777 22.7358 15.394 23.7933 15.394C24.772 15.394 25.7508 15.0077 26.8833 14.5577C28.162 14.0514 29.6133 13.4777 31.1433 13.4777C32.9358 13.4777 35.3358 13.9202 37.252 15.8515C35.4595 17.374 33.4008 20.0065 33.4008 24.0565C33.4008 29.0327 36.517 31.9727 38.6508 33.2515C38.2533 34.2865 37.5258 35.9102 36.4045 37.549Z" fill="white"/>
+</svg>
diff --git a/public/images/multiplatform/hero/logo.svg b/public/images/multiplatform/hero/logo.svg
new file mode 100644
index 00000000000..5c5d029e46c
--- /dev/null
+++ b/public/images/multiplatform/hero/logo.svg
@@ -0,0 +1,10 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 45.1258V0.167062L44.9587 45.1258H0ZM0 50.8744V96H0.114514L45.2402 50.8744H0ZM51.9812 44.0188L96 0H7.96255L51.9812 44.0188ZM52.0385 52.2056L8.2442 96H95.8329L52.0385 52.2056Z" fill="url(#paint0_radial_5_67259)"/>
+    <defs>
+        <radialGradient id="paint0_radial_5_67259" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(87 9) rotate(135) scale(123.037)">
+            <stop stop-color="#37BCFD"/>
+            <stop offset="0.580197" stop-color="#7F52FF"/>
+            <stop offset="1" stop-color="#C711E1"/>
+        </radialGradient>
+    </defs>
+</svg>
diff --git a/public/images/multiplatform/hero/server.svg b/public/images/multiplatform/hero/server.svg
new file mode 100644
index 00000000000..0eafbe49798
--- /dev/null
+++ b/public/images/multiplatform/hero/server.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.5 30H34.5C36.9825 30 39 27.9825 39 25.5V12C39 9.5175 36.9825 7.5 34.5 7.5H13.5C11.0175 7.5 9 9.5175 9 12V25.5C9 27.9825 11.0175 30 13.5 30ZM12 12C12 11.1712 12.6712 10.5 13.5 10.5H34.5C35.3288 10.5 36 11.1712 36 12V25.5C36 26.3288 35.3288 27 34.5 27H13.5C12.6712 27 12 26.3288 12 25.5V12Z" fill="white"/>
+    <path d="M28.74 36C28.23 33.855 26.3025 32.25 24 32.25C21.6975 32.25 19.77 33.855 19.26 36H6V39H19.5C20.235 40.7588 21.975 42 24 42C26.025 42 27.7612 40.7588 28.5 39H42V36H28.74ZM25.875 37.125C25.875 38.16 25.035 39 24 39C22.965 39 22.125 38.16 22.125 37.125C22.125 36.7013 22.2713 36.315 22.5113 36C22.8525 35.5462 23.3925 35.25 24 35.25C24.6075 35.25 25.1475 35.5462 25.4887 36C25.7287 36.315 25.875 36.7013 25.875 37.125Z" fill="white"/>
+</svg>
diff --git a/public/images/multiplatform/hero/web.svg b/public/images/multiplatform/hero/web.svg
new file mode 100644
index 00000000000..c1380dabfae
--- /dev/null
+++ b/public/images/multiplatform/hero/web.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M44.8125 24C44.8125 12.5738 35.64 3.25876 24.2737 3.01126C24.2137 3.00751 24.1537 3.00375 24.0938 3.00375C24.1238 3.00375 24.1537 3 24.1875 3C24.15 3 24.1087 3.00375 24.0712 3.00375C24.0487 3.00375 24.0263 3 24 3C23.9737 3 23.955 3.00375 23.9288 3.00375C23.8913 3.00375 23.85 3 23.8125 3C23.8425 3 23.8762 3.00375 23.9062 3.00375C23.8463 3.00375 23.7863 3.00751 23.7263 3.01126C12.36 3.25876 3.1875 12.5738 3.1875 24C3.1875 35.4263 12.36 44.7412 23.7263 44.9887C23.7863 44.9925 23.8463 44.9962 23.9062 44.9962C23.8762 44.9962 23.8463 45 23.8125 45C23.85 45 23.8913 44.9962 23.9288 44.9962C23.9513 44.9962 23.9737 45 24 45C24.0263 45 24.045 44.9962 24.0712 44.9962C24.1087 44.9962 24.15 45 24.1875 45C24.1575 45 24.1238 44.9962 24.0938 44.9962C24.1537 44.9962 24.2137 44.9925 24.2737 44.9887C35.64 44.7412 44.8125 35.4263 44.8125 24ZM24 6C26.3925 6 29.6812 12.24 29.9775 22.5H18.0263C18.3188 12.24 21.6075 6 24 6ZM29.9775 25.5C29.6812 35.76 26.3925 42 24 42C21.6075 42 18.3188 35.76 18.0225 25.5H29.9775ZM29.3625 41.1225C31.56 37.38 32.7975 31.4325 32.9737 25.5H41.745C41.1375 32.8275 36.1238 38.925 29.3625 41.1225ZM41.745 22.5H32.9737C32.7937 16.5712 31.56 10.62 29.3625 6.87751C36.1238 9.07501 41.1375 15.1725 41.745 22.5ZM18.6375 6.87751C16.44 10.62 15.2025 16.5675 15.0263 22.5H6.25497C6.86247 15.1725 11.8762 9.07501 18.6375 6.87751ZM6.25497 25.5H15.0263C15.2063 31.4288 16.44 37.38 18.6375 41.1225C11.8762 38.925 6.86247 32.8275 6.25497 25.5Z" fill="white"/>
+</svg>
diff --git a/yarn.lock b/yarn.lock
index e14cacb6daa..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.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.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"