Skip to content

Commit bae21ac

Browse files
nikpachoonikpachoo
authored
Merge pull request #5190 from JetBrains/KTL-3873-add-faq-block
2 parents 7e07c41 + 49f4c97 commit bae21ac

File tree

4 files changed

+109
-1
lines changed

4 files changed

+109
-1
lines changed

‎blocks/multiplatform/faq-block/faq-block.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React, { FC } from 'react';
2+
import { Accordion, Collapse } from '@rescui/collapse';
3+
import { useTextStyles } from '@jetbrains/kotlin-web-site-ui/out/components/typography';
4+
5+
export const FaqBlock = () => {
6+
const textCn = useTextStyles();
7+
const linkClass = textCn('rs-link', { hardness: 'hard' });
8+
9+
return (
10+
<Accordion>
11+
<div className={'ktl-layout ktl-layout--center ktl-offset-bottom-xxl'}>
12+
<div className={'ktl-row'}>
13+
<div className="ktl-col-12 ktl-col-md-6">
14+
<Collapse title={'What is Kotlin Multiplatform?'}>
15+
Kotlin Multiplatform is a technology that allows you to create applications for various
16+
platforms and efficiently reuse code across them while retaining the benefits of native
17+
programming. Your applications will run on iOS, Android, macOS, Windows, Linux, and more.
18+
</Collapse>
19+
<Collapse
20+
title={'What’s the difference between Kotlin Multiplatform and Compose Multiplatform?'}
21+
>
22+
Kotlin Multiplatform is the core technology that lets you share code – such as business
23+
logic, data models, networking, and more – across multiple platforms, including Android,
24+
iOS, desktop, web, and server. It focuses on code reuse without replacing the native UI
25+
unless you want it to.{' '}
26+
<a className={linkClass} href={'https://www.jetbrains.com/compose-multiplatform/'}>
27+
Compose Multiplatform
28+
</a>{' '}
29+
is an optional UI framework built on top of Kotlin Multiplatform. It allows you to share
30+
your user interface across platforms using a modern, declarative approach similar to Jetpack
31+
Compose on Android. You can use it to build visually appealing, responsive UIs for Android,
32+
iOS, desktop, and web from a single codebase.
33+
</Collapse>
34+
<Collapse title={'Are Kotlin Multiplatform and Compose Multiplatform ready for production?'}>
35+
Yes, Kotlin Multiplatform is production-ready for all supported platforms – Android, iOS,
36+
desktop, web, and server. Compose Multiplatform is stable for Android, iOS, and desktop,
37+
while the web target is currently in Beta.
38+
</Collapse>
39+
</div>
40+
41+
<div className="ktl-col-12 ktl-col-md-6">
42+
<Collapse
43+
title={
44+
'Where should I choose Kotlin Multiplatform (KMP) over other cross-platform solutions?'
45+
}
46+
>
47+
<ul className={textCn('rs-ul')}>
48+
Choose Kotlin Multiplatform when you need:
49+
<li>
50+
<strong>Incremental adoption:</strong> KMP lets you share code selectively – start
51+
with a single module or expand to your full app at your own pace.
52+
</li>
53+
<li>
54+
<strong>Native performance:</strong> KMP compiles to native code for each platform
55+
with no bridges or VMs, ensuring high performance and responsiveness.
56+
</li>
57+
<li>
58+
<strong>Truly native UI with Compose Multiplatform:</strong> Compose Multiplatform
59+
respects each platform's UI conventions, offering a native-feeling experience across
60+
Android, iOS, desktop, and web.
61+
</li>
62+
<li>
63+
<strong>The same tools and architecture as Kotlin and Jetpack Compose:</strong> Your
64+
skills will transfer easily, reducing onboarding and ramp-up time.
65+
</li>
66+
<li>
67+
<strong>Direct access to platform APIs:</strong> You can call native APIs directly –
68+
with no wrappers needed and zero time wasted waiting for framework updates.
69+
</li>
70+
<li>
71+
<strong>Escape hatches for native code:</strong> You can write fully native code
72+
where needed (e.g. for performance-critical components), without having to abandon
73+
the cross-platform approach.
74+
</li>
75+
</ul>
76+
Learn more about{' '}
77+
<a className={linkClass} href="/docs/multiplatform/kotlin-multiplatform-flutter.html">
78+
KMP and Flutter
79+
</a>{' '}
80+
and{' '}
81+
<a className={linkClass} href="/docs/multiplatform/kotlin-multiplatform-react-native.html">
82+
KMP and React Native
83+
</a>
84+
.
85+
</Collapse>
86+
87+
<Collapse title={'Do I have to rewrite my app to use KMP?'}>
88+
No. You can start small by sharing a module or feature and integrating it into your existing
89+
app. KMP is designed for gradual adoption, making it easy to incrementally introduce
90+
cross-platform code.
91+
</Collapse>
92+
</div>
93+
</div>
94+
</div>
95+
</Accordion>
96+
);
97+
};

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@rescui/button": "0.18.0",
1616
"@rescui/card": "^0.8.1",
1717
"@rescui/checkbox": "^0.4.13",
18+
"@rescui/collapse": "0.7.1",
1819
"@rescui/colors": "^0.1.6",
1920
"@rescui/dropdown-menu": "^0.6.1",
2021
"@rescui/focus-manager": "^0.1.4",

‎pages/multiplatform/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from '@jetbrains/kotlin-web-site-ui/out/components/header';
88

99
import styles from './multiplatform.module.css';
10+
import { FaqBlock } from '../../blocks/multiplatform/faq-block/faq-block';
1011

1112
const TOP_MENU_ITEMS: LandingLayoutProps['topMenuItems'] = [];
1213

@@ -26,7 +27,7 @@ export default function MultiplatformLanding() {
2627
canonical={'https://kotlinlang.org/multiplatform/'}
2728
>
2829
<div className={styles.page}>
29-
!!!!!! MULTIPLATFORM PAGE IS UNDER CONSTRUCTION !!!!!!
30+
<FaqBlock />
3031
</div>
3132
</LandingLayout>
3233
);

‎yarn.lock‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1775,6 +1775,15 @@
17751775
classnames "^2.2.6"
17761776
core-js "^3.9.1"
17771777

1778+
"@rescui/[email protected]":
1779+
version "0.7.1"
1780+
resolved "https://registry.yarnpkg.com/@rescui/collapse/-/collapse-0.7.1.tgz#12a3965b5025bfd151310d9573a79534b2ad1e3a"
1781+
integrity sha512-fdfcHG1J8qI838uj/ZJuZ4IRpUYN6+tGFuUe235MSqQ1pBgEoAOcZIf0A+YuSpLI6kvViBQHCwy52fZFPhhCnQ==
1782+
dependencies:
1783+
"@babel/runtime-corejs3" "^7.26.0"
1784+
"@rescui/use-resize-observer" "^0.3.0"
1785+
classnames "^2.2.6"
1786+
17781787
"@rescui/colors@^0.1.6":
17791788
version "0.1.6"
17801789
resolved "https://registry.npmjs.org/@rescui/colors/-/colors-0.1.6.tgz"

0 commit comments

Comments
 (0)