+
+ );
+};
diff --git a/blocks/server-side/customer-logo-marquee/customer-logo-marquee-data.ts b/blocks/server-side/customer-logo-marquee/customer-logo-marquee-data.ts
new file mode 100644
index 00000000000..e1bd84609b6
--- /dev/null
+++ b/blocks/server-side/customer-logo-marquee/customer-logo-marquee-data.ts
@@ -0,0 +1,110 @@
+import doordash from './logos/doordash-dark.svg'
+import kingfisher from './logos/kingfisher-dark.svg'
+import ing from './logos/ING.svg'
+import n26 from './logos/N26.svg'
+import adobe from './logos/adobe-logo.svg'
+import allegro from './logos/allegro.svg'
+import atlassian from './logos/atlassian.svg'
+import aws from './logos/aws.svg'
+import corda from './logos/c-rda.svg'
+import expediaGroup from './logos/expedia grour.svg'
+import faire from './logos/faire-dark.svg'
+import flux from './logos/flux.svg'
+import intuit from './logos/intuit.svg'
+import ktor from './logos/ktor.svg'
+import memobank from './logos/memobank.svg'
+import mercedes from './logos/mercedes-io-dark.svg'
+import novatec from './logos/novatec-dark.svg'
+import olx from './logos/olx.svg'
+import shazam from './logos/shazam.svg'
+import spring from './logos/spring.svg'
+
+interface LogoItem {
+ id: ImgSrc;
+ link: string;
+}
+
+const logos: LogoItem[] = [
+ {
+ id: doordash,
+ link: 'https://kotlinlang.org/lp/server-side/case-studies/doordash/',
+ },
+ {
+ id: kingfisher,
+ link: 'https://medium.com/kingfisher-technology/server-side-kotlin-our-new-default-2d15644f8ed0',
+ },
+ {
+ id: ing,
+ link: 'https://medium.com/ing-blog/introducing-kotlin-at-ing-a-long-but-rewarding-story-1bfcd3dc8da0',
+ },
+ {
+ id: n26,
+ link: 'https://medium.com/insiden26/5-reasons-why-n26-is-moving-to-kotlin-f920b184ab58',
+ },
+ {
+ id: adobe,
+ link: 'https://medium.com/adobetech/streamlining-server-side-app-development-with-kotlin-be8cf9d8b61a',
+ },
+ {
+ id: allegro,
+ link: 'https://open.spotify.com/episode/6gRiIJSWN515tAvZuMAwRR?si=vPsgW2jDShSG2_S8eLfjqA',
+ },
+ {
+ id: atlassian,
+ link: 'https://www.youtube.com/watch?v=4GkoB4hZUnw',
+ },
+ {
+ id: aws,
+ link: 'https://www.youtube.com/live/Ar73Axsz2YA?si=E2qlkuznF9B2MXou&t=2766',
+ },
+ {
+ id: corda,
+ link: 'https://www.corda.net/blog/kotlin/',
+ },
+ {
+ id: expediaGroup,
+ link: 'https://kotlinlang.org/lp/server-side/case-studies/expedia/',
+ },
+ {
+ id: faire,
+ link: 'https://kotlinlang.org/lp/server-side/case-studies/faire/',
+ },
+ {
+ id: flux,
+ link: 'https://open.spotify.com/episode/3VS5dSUfcsC4fSvzbm2OxV?si=yEcubDoeRAW7zwVdo3XFtw&nd=1&dlsi=5e0e4c8dba104719',
+ },
+ {
+ id: intuit,
+ link: 'https://medium.com/intuit-engineering/what-the-f-p-is-kotlin-7c55e2643b07',
+ },
+ {
+ id: ktor,
+ link: 'https://open.spotify.com/episode/7rcwW7gNFIOrDqy6tgA1HU?si=c8QerntfTUqUO9Ks3s3kKw',
+ },
+ {
+ id: memobank,
+ link: 'https://medium.com/memobank/cuddling-with-kotlin-35f4f96931bb',
+ },
+ {
+ id: mercedes,
+ link: 'https://www.mercedes-benz.io/blog/2024-11-22-transitioning-from-java-to-kotlin-in-backend-development',
+ },
+ {
+ id: novatec,
+ link: 'https://kotlinlang.org/lp/server-side/case-studies/novatec/',
+ },
+ {
+ id: olx,
+ link: 'https://open.spotify.com/episode/3XBlKY3x4vVojuay4oSh8g?si=qiiwg8vkSm2OIP6rvrwnkg',
+ },
+ {
+ id: shazam,
+ link: 'https://open.spotify.com/episode/6oZdJE7XU1GF6Dlir6tP50?si=2h7YKDejSxGrlFaWqZE6Ng',
+ },
+ {
+ id: spring,
+ link: 'https://youtu.be/QExksqeNWbY?si=KSy63mxDTh07DYPM',
+ },
+];
+
+export default logos;
diff --git a/blocks/server-side/customer-logo-marquee/index.module.css b/blocks/server-side/customer-logo-marquee/index.module.css
new file mode 100644
index 00000000000..70c20ec1f3c
--- /dev/null
+++ b/blocks/server-side/customer-logo-marquee/index.module.css
@@ -0,0 +1,12 @@
+.section {
+ --marquee-gap: 64px;
+ padding: 48px 0;
+}
+
+.list :global(.cmn-ui-marquee__group) {
+ align-items: center;
+}
+
+.logo {
+ max-height: 64px;
+}
diff --git a/blocks/server-side/customer-logo-marquee/index.tsx b/blocks/server-side/customer-logo-marquee/index.tsx
new file mode 100644
index 00000000000..5ebfd48c8a8
--- /dev/null
+++ b/blocks/server-side/customer-logo-marquee/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Marquee } from '../marquee';
+import styles from './index.module.css';
+
+import logos from './customer-logo-marquee-data';
+
+const CustomerLogoMarqueeSection: React.FC = () => {
+ return (
+ {title}
++ {description} +
+
+
+
+ + Rich JVM ecosystem for backend development +
+ +
+
+
+
+
+ {primaryCardsData.map((card) => (
+
+ 
+
+
+ {card.text}
++ {card.linkText} +
+ + ))} +
+ {secondaryCardsData.map((card) => (
+
+
+
+
+
+ ))}
+ {card.text}
+
+
+
+
+ + Use your favorite tools +
+ +
+
+
+
+
+
+
+
+
+ + IDE support +
+ ++ For a Java developer, getting started with Kotlin is very easy. Kotlin is natively supported + in IntelliJ IDEA, and the automated Java-to-Kotlin converter is there to help you with your + first steps. The powerful refactoring, navigation, and static code analysis features make + programming in Kotlin a pleasure! +
+ + } + iconPosition={'right'} + > + Download + + +
+ 
+
+
+
+ );
+};
+
+interface FeaturesCarouselProps {
+ featuresData: FeatureSlideItem[];
+ className?: string;
+}
+
+export const FeaturesCarousel: FC
+
+
+
+
+ 
+
+ {title}
++ {description} +
+
+
+
+
+
+ {featuresData.map(feature => (
+
+
+ );
+};
+
+export default FeaturesCarousel;
diff --git a/blocks/server-side/features-section/diamond.svg b/blocks/server-side/features-section/diamond.svg
new file mode 100644
index 00000000000..ab3c7ac220e
--- /dev/null
+++ b/blocks/server-side/features-section/diamond.svg
@@ -0,0 +1,3 @@
+
diff --git a/blocks/server-side/features-section/index.module.css b/blocks/server-side/features-section/index.module.css
new file mode 100644
index 00000000000..71f3e3129e6
--- /dev/null
+++ b/blocks/server-side/features-section/index.module.css
@@ -0,0 +1,13 @@
+.exposedFeatureCard {
+ padding: 24px;
+ border-radius: 16px;
+ background: rgba(107, 87, 255, 0.20);
+ backdrop-filter: blur(8px);
+ box-sizing: border-box;
+}
+
+.exposedFeatureCardIcon svg {
+ width: 48px;
+ height: 48px;
+}
+
diff --git a/blocks/server-side/features-section/index.tsx b/blocks/server-side/features-section/index.tsx
new file mode 100644
index 00000000000..31f7b3a2ce1
--- /dev/null
+++ b/blocks/server-side/features-section/index.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import { useTL } from '@jetbrains/kotlin-web-site-ui/out/components/breakpoints';
+
+import { featureSlideshowItems } from './items';
+import { FeaturesCarousel } from '../features-carousel';
+import { FeaturesSwitcher } from '../features-switcher';
+
+const FeaturesSection: FC = () => {
+ const textCn = useTextStyles();
+ const isTL = useTL();
+
+ return (
+
+
+ + Safety: fewer production bugs and crashes +
+ + {isTL ? ( +
+
+);
+
+interface FeatureSlideItem {
+ id: string;
+ icon: ImgSrc;
+ title: React.ReactNode;
+ description: React.ReactNode;
+ codeSample: string;
+}
+
+interface FeaturesSwitcherProps {
+ slides: FeatureSlideItem[];
+ className?: string;
+}
+
+export const FeaturesSwitcher: FC
+
+ );
+};
+
+export default FeaturesSwitcher;
diff --git a/blocks/server-side/get-started/get-started.module.css b/blocks/server-side/get-started/get-started.module.css
new file mode 100644
index 00000000000..331b174b90a
--- /dev/null
+++ b/blocks/server-side/get-started/get-started.module.css
@@ -0,0 +1,46 @@
+.wrapper {
+ position: relative;
+ overflow: hidden;
+ padding: 96px 0;
+}
+
+.content {
+ position: relative;
+ z-index: 2;
+}
+
+.backgroundImage {
+ position: absolute;
+ bottom: 0;
+ right: 50%;
+ transform: translateX(50%);
+ margin-right: -150px;
+ z-index: 1;
+ max-width: none;
+}
+
+.card {
+ background: #000000;
+ border: 1px solid rgba(255, 255, 255, 0.20);
+ padding: 32px 32px 40px 32px;
+ box-sizing: border-box;
+ border-radius: 16px;
+ height: 100%;
+ display: block;
+ text-decoration: none;
+ &:hover {
+ outline: 1px solid #7E42FF;
+ }
+}
+
+@media (max-width: 1024px) {
+ .mobileSpacer {
+ margin-top: 32px;
+ }
+}
+
+@media (max-width: 768px) {
+ .mobileSpacer {
+ margin-top: 16px;
+ }
+}
diff --git a/blocks/server-side/get-started/get-started.tsx b/blocks/server-side/get-started/get-started.tsx
new file mode 100644
index 00000000000..66461718408
--- /dev/null
+++ b/blocks/server-side/get-started/get-started.tsx
@@ -0,0 +1,81 @@
+import React, { FC } from 'react';
+
+import cn from 'classnames';
+
+import styles from './get-started.module.css';
+import { useTextStyles } from '@rescui/typography';
+
+import ktorLogo from './images/ktor.svg';
+import springLogo from './images/spring.svg';
+
+import Img from 'next/image';
+import getStartedGraphics from './images/get-started-graphics-cut.webp';
+
+import Link from 'next/link';
+
+export const GetStarted: FC = ({}) => {
+
+ const textCn = useTextStyles();
+
+ return (
+
+
+
+ -
+ {slides.map((slide, i) => (
+
- + + + ))} +
+ {slides.map((slide, i) => (
+
+
+
+ ))}
+
+
+ 
+
+
+
+
+
+
+ + Get started +
+ +
+
+
+
+
+
+
+
+ 
+
+
+
+ + Ktor quick start +
+
+
+
+ + Ktor is a multiplatform toolkit built by JetBrains for creating Web applications + in + Kotlin. It makes use of coroutines for high scalability and offers an + easy-to-use + API. +
+
+
+
+
+ 
+
+
+
+ + Go server-side with Spring +
+
+
+
+ + Use Kotlin with the familiar Spring framework to build powerful enterprise + applications. +
+
+
+ 
+
+
+ );
+};
diff --git a/blocks/server-side/hero/images/hero-graphics.webp b/blocks/server-side/hero/images/hero-graphics.webp
new file mode 100644
index 00000000000..10cafa72c9e
Binary files /dev/null and b/blocks/server-side/hero/images/hero-graphics.webp differ
diff --git a/blocks/server-side/how-to-start/how-to-start.module.css b/blocks/server-side/how-to-start/how-to-start.module.css
new file mode 100644
index 00000000000..6785a8a57a2
--- /dev/null
+++ b/blocks/server-side/how-to-start/how-to-start.module.css
@@ -0,0 +1,64 @@
+.item {
+ border-radius: 16px;
+ background: rgba(126, 66, 255, 0.30);
+ backdrop-filter: blur(8px);
+ display: flex;
+ align-items: center;
+ padding: 16px;
+ min-height: 80px;
+ box-sizing: border-box;
+ &:not(:last-child) {
+ margin-bottom: 16px;
+ }
+
+ &:nth-child(2) {
+ background: rgba(126, 66, 255, 0.50);
+ margin-left: 32px;
+ }
+
+ &:nth-child(3) {
+ background: rgba(126, 66, 255, 0.70);
+ margin-left: 64px;
+ }
+
+ &:nth-child(4) {
+ background: rgba(126, 66, 255, 0.90);
+ margin-left: 96px;
+ }
+}
+
+.icon {
+ flex-shrink: 0;
+ margin-right: 16px;
+}
+
+.title {
+ padding: 0;
+ margin: 0;
+}
+
+.codeBlock {
+ width: 100%;
+ padding: 32px 32px 66px;
+ border-radius: 16px;
+ box-sizing: border-box;
+ overflow: auto;
+ background-color: #282a36; /* Dracula theme background */
+}
+
+.codeBlock :global(pre) {
+ margin: 0;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 14px;
+ line-height: 2;
+}
+
+@media (max-width: 1000px) {
+ .codeSample {
+ margin-top: 32px;
+ }
+
+ .codeBlock {
+ padding: 16px 16px 66px;
+ }
+}
diff --git a/blocks/server-side/how-to-start/how-to-start.tsx b/blocks/server-side/how-to-start/how-to-start.tsx
new file mode 100644
index 00000000000..2be0160f7b4
--- /dev/null
+++ b/blocks/server-side/how-to-start/how-to-start.tsx
@@ -0,0 +1,80 @@
+import React, { FC } from 'react';
+
+import cn from 'classnames';
+
+import styles from './how-to-start.module.css';
+import { useTextStyles } from '@rescui/typography';
+
+import {ArrowRightIcon} from '@rescui/icons';
+
+import { CodeHighlight } from '../../../components/code-highlight/code-highlight';
+
+const codeSample = `data class User(val name: String, val age: Int)
+
+@Test fun \`should return valid user when input correct\`() {
+ val repo = mockk
+
+
+
+ Modern backend
+
+
+
+
+ Modern backend
development
with Kotlin
+
+
+ + Kotlin is a perfect fit for building backends on JVM. It's trusted by major tech companies to build scalable and reliable server-side applications +
+ +
+
+
+
+
+ Safety
+ + +Runtime performance
+ + +Access to the rich JVM ecosystem
+ + +Great developer experience
+ + +
+
+
+
+
+
+
+ Because of Kotlin’s full interoperability with Java,
+
+
+ + How to start – incremental adoption in Java projects +
+ +
+ Because of Kotlin’s full interoperability with Java,
+ teams can introduce it gradually
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Start using Kotlin for your tests. +
+
+
+ + Implement new services from scratch in Kotlin using your existing framework (Spring, Quarkus, JEE, etc.). +
+
+
+ + Develop new features in Kotlin within existing Java projects. +
+
+
+ + Gradually convert your existing Java codebase to Kotlin. +
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+};
diff --git a/blocks/server-side/performance/performance.module.css b/blocks/server-side/performance/performance.module.css
new file mode 100644
index 00000000000..4ba53ba9a3c
--- /dev/null
+++ b/blocks/server-side/performance/performance.module.css
@@ -0,0 +1,38 @@
+.cards {
+ display: grid;
+ grid-gap: 16px;
+}
+
+.videos {
+ display: grid;
+ grid-gap: 16px;
+}
+
+.videoCard {
+ border-radius: 16px;
+ overflow: hidden;
+ background: #19191C;
+ border: 1px solid rgba(255, 255, 255, 0.20)
+}
+
+.videoCardDescription {
+ padding: 32px;
+ margin: 0;
+}
+
+@media (min-width: 809px) {
+ .cards {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+
+@media (min-width: 1001px) {
+ .cards {
+ grid-template-columns: repeat(4, 1fr);
+ }
+
+ .videos {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
diff --git a/blocks/server-side/performance/performance.tsx b/blocks/server-side/performance/performance.tsx
new file mode 100644
index 00000000000..4366dab6d78
--- /dev/null
+++ b/blocks/server-side/performance/performance.tsx
@@ -0,0 +1,85 @@
+import React, { FC } from 'react';
+
+import cn from 'classnames';
+
+import styles from './performance.module.css';
+import { useTextStyles } from '@rescui/typography';
+
+import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player';
+
+import { Card } from '../card/card';
+
+
+export const ServerSidePerformance: FC = ({}) => {
+
+ const textCn = useTextStyles();
+
+ return (
+ {children}
+ {children}
+
+
+ From lightweight concurrency to efficient memory use,
+
+
+ + Performance: optimized for high-load +
+ +
+ From lightweight concurrency to efficient memory use,
+ Kotlin and JVM combo brings serious advantage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Watch the full story on Kotlin coroutines from their creator, Roman Elizarov. +
+
+
+
+
+
+
+ + Watch the full story on Kotlin coroutines from their creator, Roman Elizarov. +
+
+
+
+ );
+};
diff --git a/package.json b/package.json
index f98c0aa5eff..f1d1c95ced5 100644
--- a/package.json
+++ b/package.json
@@ -68,10 +68,12 @@
"react-outside-click-handler": "1.3.0",
"react-remove-scroll-bar": "2.3.4",
"react-scrollbar-size": "5.0.0",
+ "react-snap-carousel": "0.5.1",
"react-swipeable-views": "0.14.0",
"resolve-url-loader": "4.0.0",
"rollup": "2.47.0",
"sha.js": "^2.4.11",
+ "shiki": "3.6.0",
"svgo": "2.7.0",
"svgo-loader": "3.0.0",
"tslib": "2.2.0",
diff --git a/pages/global.css b/pages/global.css
index 0f81945714e..8e934022422 100644
--- a/pages/global.css
+++ b/pages/global.css
@@ -8,6 +8,7 @@
html {
min-width: 320px;
+ scroll-behavior: smooth;
}
img {
diff --git a/pages/server-side/index.tsx b/pages/server-side/index.tsx
new file mode 100644
index 00000000000..ab60a6252bd
--- /dev/null
+++ b/pages/server-side/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { ServerSideLayout } from '../../blocks/server-side/layout/server-side-layout';
+import { ServerSideHero } from '../../blocks/server-side/hero/hero';
+import { ServerSidePerformance } from '../../blocks/server-side/performance/performance';
+import FeaturesSection from '../../blocks/server-side/features-section';
+import CustomerLogoMarqueeSection from '../../blocks/server-side/customer-logo-marquee';
+import { Ecosystem } from '../../blocks/server-side/ecosystem/ecosystem';
+import { HowToStart } from '../../blocks/server-side/how-to-start/how-to-start';
+import { FavoriteTools } from '../../blocks/server-side/favorite-tools/favorite-tools';
+import { AdditionalMaterials } from '../../blocks/server-side/additional-materials/additional-materials';
+import { GetStarted } from '../../blocks/server-side/get-started/get-started';
+
+import './styles.css';
+
+function Index() {
+ return (
+
+
+
+
+
+
+ {childrenWithProps}
+
+
+
+