Ktl 2512 server side hero

blocks/server-side/additional-materials/additional-materials.module.css

@@ -0,0 +1,3 @@
+.subtitle {
+    max-width: 740px;
+}

blocks/server-side/additional-materials/additional-materials.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+
+import cn from 'classnames';
+
+import styles from './additional-materials.module.css';
+import { useTextStyles } from '@rescui/typography';
+
+import YoutubePlayer from '@jetbrains/kotlin-web-site-ui/out/components/youtube-player';
+
+export const AdditionalMaterials: FC = ({}) => {
+
+    const textCn = useTextStyles();
+
+    return (
+        <section className="ktl-layout ktl-layout--center">
+            <div className="ktl-container section-offset">
+
+                <h2 className={cn(textCn('rs-h1'))}>
+                    Additional materials
+                </h2>
+
+                <h3 className={cn(textCn('rs-subtitle-2'), styles.subtitle)}>
+                    Build better backends with Kotlin. Check out the Kotlin for Backend playlist for real-world use
+                    cases, expert insights, and performance tips.
+                </h3>
+
+                <div className="ktl-row">
+                    <div className="ktl-col-12 ktl-col-md-8">
+                        <YoutubePlayer
+                            mode={1}
+                            id="PLlFc5cFwUnmx-dpq9nkdaVJX0GnrM1Mp1"
+                            previewImgSrc="https://img.youtube.com/vi/0URxGa3q3tY/maxresdefault.jpg"
+                        />
+                    </div>
+                </div>
+
+
+            </div>
+        </section>
+    );
+};

blocks/server-side/card/card.module.css

@@ -0,0 +1,18 @@
+.card {
+    background: #3F2180;
+    border-radius: 16px;
+    backdrop-filter: blur(8px);
+    padding: 24px;
+    box-sizing: border-box;
+    height: 100%;
+}
+
+.cardTitle {
+    padding: 0;
+    margin: 0 0 16px;
+}
+
+.cardDescription {
+    margin: 0;
+    padding: 0;
+}

blocks/server-side/card/card.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import cn from 'classnames';
+
+import styles from './card.module.css';
+import { useTextStyles } from '@rescui/typography';
+
+interface CardProps {
+    title: string;
+    description: string;
+}
+
+export const Card: FC<CardProps> = ({ title, description }) => {
+
+    const textCn = useTextStyles();
+
+    return (
+        <div className={styles.card}>
+            <h3 className={cn(textCn('rs-h3'), styles.cardTitle)}>{title}</h3>
+            <p className={cn(textCn('rs-text-2'), styles.cardDescription)}>
+                {description}
+            </p>
+        </div>
+    );
+};

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;

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;
+}

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 (
+        <section className={styles.section}>
+            <Marquee className={styles.list} pauseOnHover hasFadingEdges>
+                {logos.map((item, index) => (
+                    <a
+                        href={item.link}
+                        key={`logo_${index}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={styles.logoLink}
+                    >
+                        <img src={item.id.src} alt={item.link} className={styles.logo} />
+                    </a>
+                ))}
+            </Marquee>
+        </section>
+    );
+};
+
+export default CustomerLogoMarqueeSection;