Skip to content

Commit e20f5fb

Browse files
zoobestikzoobestik
authored
KTL-3868: Move KMP landing page - hero block (#5193)
* feat(landing): Multiplatform: implement a hero section and redesign page * feat(multiplatform): update landing layout and upgrade UI library to 4.13.0-alpha.2 * feat(multiplatform): update Hero styles * fix(multiplatform): adjust Hero subtitle spacing for consistent formatting * fix(multiplatform): adjust Hero spacing with added gap for better alignment * feat(multiplatform): update Hero styles and dependencies for improved responsiveness * feat(multiplatform): refactor Hero icons structure and update image sources
2 parents 1003266 + 10ec632 commit e20f5fb

File tree

12 files changed

+249
-19
lines changed

12 files changed

+249
-19
lines changed

‎blocks/multiplatform/hero/hero.module.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
@import "@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2/media.pcss";
2+
3+
.wrapper {
4+
position: relative;
5+
z-index: 0;
6+
overflow: hidden;
7+
}
8+
9+
.wrapper::before {
10+
content: '';
11+
display: block;
12+
13+
background: radial-gradient(238.09% 60.02% at 49.98% 105.17%, rgba(177, 38, 235, 0.00) 0%, #260053 100%) center no-repeat;
14+
filter: blur(200px);
15+
16+
height: 696px;
17+
width: 826px;
18+
19+
position: absolute;
20+
top: 36px;
21+
left: 50%;
22+
transform: translate(-50%, -50%);
23+
z-index: -1;
24+
}
25+
26+
.hero {
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
31+
padding-block: 72px 96px;
32+
}
33+
34+
.hero::before {
35+
display: block;
36+
content: '';
37+
background: url('/images/multiplatform/hero/logo.svg') no-repeat center;
38+
39+
height: 72px;
40+
width: 72px;
41+
42+
@media (--ktl-ts-more) {
43+
height: 96px;
44+
width: 96px;
45+
}
46+
}
47+
48+
.title, .subtitle {
49+
margin: 0;
50+
padding: 0;
51+
text-align: center;
52+
}
53+
54+
.title {
55+
padding-block: 24px;
56+
57+
@media (--ktl-ts-in) {
58+
/* @mixin rs-hero-sm-*; */
59+
font-size: 42px;
60+
line-height: 50px;
61+
}
62+
}
63+
64+
.subtitle {
65+
@media (--ktl-ts-in) {
66+
/* @mixin rs-subtitle-1-sm-* */
67+
font-size: 23px;
68+
line-height: 30px;
69+
}
70+
}
71+
72+
.platforms {
73+
display: flex;
74+
flex-wrap: wrap;
75+
justify-content: center;
76+
77+
box-sizing: border-box;
78+
gap: 18px 40px;
79+
width: 100%;
80+
81+
margin: 0;
82+
padding: 48px 0;
83+
list-style: none;
84+
85+
--hero-item-src: '';
86+
}
87+
88+
.platform {
89+
display: flex;
90+
flex-direction: column;
91+
align-items: center;
92+
justify-content: center;
93+
gap: 8px;
94+
95+
line-height: 1.5;
96+
97+
@media (--ktl-ts-more) {
98+
flex-basis: 80px;
99+
}
100+
101+
@media (--ktl-ms-in) {
102+
padding-inline: 14px;
103+
}
104+
105+
&.android {
106+
--hero-item-src: url('/images/multiplatform/hero/android.svg');
107+
}
108+
109+
&.ios {
110+
--hero-item-src: url('/images/multiplatform/hero/ios.svg');
111+
}
112+
113+
&.web {
114+
--hero-item-src: url('/images/multiplatform/hero/web.svg');
115+
}
116+
117+
&.desktop {
118+
--hero-item-src: url('/images/multiplatform/hero/desktop.svg');
119+
}
120+
121+
&.server {
122+
--hero-item-src: url('/images/multiplatform/hero/server.svg');
123+
}
124+
}
125+
126+
.platform::before {
127+
display: block;
128+
content: '';
129+
130+
background: var(--hero-item-src) no-repeat center;
131+
background-size: 32px;
132+
height: 32px;
133+
width: 32px;
134+
135+
@media (--ktl-ts-more) {
136+
background-size: 48px;
137+
height: 48px;
138+
width: 48px;
139+
}
140+
}
141+
142+
.button {
143+
@media (--ktl-ms-in) {
144+
width: 100%;
145+
}
146+
}

‎blocks/multiplatform/hero/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import cn from 'classnames';
2+
3+
import { useTextStyles } from '@rescui/typography';
4+
import { Button } from '@rescui/button';
5+
6+
import { useML } from '@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2';
7+
8+
import styles from './hero.module.css';
9+
10+
const platforms = ['Android', 'iOS', 'Web', 'Desktop', 'Server'] as const;
11+
12+
export function HeroBanner({ url }: { url: string }) {
13+
const isML = useML();
14+
const textCn = useTextStyles();
15+
16+
return (
17+
<div className={styles.wrapper}>
18+
<div className={cn(styles.hero, 'ktl-layout', 'ktl-layout--center')}>
19+
<h1 className={cn(styles.title, textCn('rs-hero'))}>Kotlin Multiplatform</h1>
20+
<p className={cn(styles.subtitle, textCn('rs-subtitle-1'))}>
21+
Go&nbsp;cross&#8209;platform without compromising performance, UX, or&nbsp;code&nbsp;quality
22+
</p>
23+
<ul className={styles.platforms}>
24+
{platforms.map(title => {
25+
const key = title.toLowerCase();
26+
27+
return (
28+
<li key={key}
29+
className={cn(styles.platform, styles[`${key}`], textCn(isML ? 'rs-h5' : 'rs-h4'))}>
30+
{title}
31+
</li>
32+
);
33+
})}
34+
</ul>
35+
<Button className={cn(styles.button)} mode={'rock'} href={url} size={isML ? 'm' : 'l'}>Get
36+
Started</Button>
37+
</div>
38+
</div>
39+
);
40+
}

‎components/landing-layout/landing-layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { FC, useCallback, useMemo } from 'react';
22

33
import Head from 'next/head';
44

5+
import '@jetbrains/kotlin-web-site-ui/out/components/layout-v2';
56
import GlobalHeader from '@jetbrains/kotlin-web-site-ui/out/components/header';
67
import GlobalFooter from '@jetbrains/kotlin-web-site-ui/out/components/footer';
78
import TopMenu from '@jetbrains/kotlin-web-site-ui/out/components/top-menu';

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@babel/core": "^7.22.10",
1111
"@babel/register": "7.15.3",
1212
"@jetbrains/babel-preset-jetbrains": "^2.3.1",
13-
"@jetbrains/kotlin-web-site-ui": "4.12.0",
13+
"@jetbrains/kotlin-web-site-ui": "4.13.0-alpha.4",
1414
"@react-hook/resize-observer": "1.2.5",
1515
"@rescui/button": "0.18.0",
1616
"@rescui/card": "^0.8.1",

‎pages/multiplatform/index.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
import { Button } from '@rescui/button';
2-
import { LandingLayout, LandingLayoutProps } from '../../components/landing-layout/landing-layout';
2+
import { ThemeProvider } from '@rescui/ui-contexts';
33

4-
import {
5-
MULTIPLATFORM_MOBILE_TITLE,
6-
MULTIPLATFORM_MOBILE_URL
7-
} from '@jetbrains/kotlin-web-site-ui/out/components/header';
4+
import { LandingLayout, LandingLayoutProps } from '../../components/landing-layout/landing-layout';
85

9-
import styles from './multiplatform.module.css';
106
import { FaqBlock } from '../../blocks/multiplatform/faq-block/faq-block';
7+
import { HeroBanner } from '../../blocks/multiplatform/hero';
8+
9+
const MULTIPLATFORM_MOBILE_TITLE = 'Kotlin Multiplatform' as const;
10+
const MULTIPLATFORM_MOBILE_URL = '/multiplatform/' as const;
11+
12+
const TOP_MENU_ITEMS: LandingLayoutProps['topMenuItems'] = [
13+
{
14+
title: 'Compose Multiplatform',
15+
url: 'https://www.jetbrains.com/compose-multiplatform/'
16+
},
17+
{
18+
title: 'Docs',
19+
url: 'https://kotlinlang.org/docs/multiplatform/get-started.html'
20+
}
21+
];
1122

12-
const TOP_MENU_ITEMS: LandingLayoutProps['topMenuItems'] = [];
23+
const GET_STARTED_URL = '/docs/multiplatform/get-started.html' as const;
1324

1425
export default function MultiplatformLanding() {
1526
return (
@@ -23,11 +34,14 @@ export default function MultiplatformLanding() {
2334
topMenuTitle={MULTIPLATFORM_MOBILE_TITLE}
2435
topMenuHomeUrl={MULTIPLATFORM_MOBILE_URL}
2536
topMenuItems={TOP_MENU_ITEMS}
26-
topMenuButton={<Button href={'#get-started'}>Get started</Button>}
37+
topMenuButton={<Button href={GET_STARTED_URL}>Get started</Button>}
2738
canonical={'https://kotlinlang.org/multiplatform/'}
2839
>
29-
<div className={styles.page}>
30-
<FaqBlock />
40+
<div className="ktl-layout-to-2">
41+
<ThemeProvider theme={'dark'}>
42+
<HeroBanner url={GET_STARTED_URL} />
43+
<FaqBlock />
44+
</ThemeProvider>
3145
</div>
3246
</LandingLayout>
3347
);

‎public/images/multiplatform/hero/android.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎public/images/multiplatform/hero/desktop.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎public/images/multiplatform/hero/ios.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/images/multiplatform/hero/logo.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎public/images/multiplatform/hero/server.svg‎

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)