From 45e1b85ad0313b628db1a8261e7054bf25d4bbd5 Mon Sep 17 00:00:00 2001
From: berezinant <berezinant@gmail.com>
Date: Thu, 11 Sep 2025 20:51:49 +0200
Subject: [PATCH 1/3] feat(ktl-2781): added case studies page blocks

---
 .../card/case-studies-card.module.css         | 172 +++++++++++
 .../case-studies/card/case-studies-card.tsx   | 266 ++++++++++++++++++
 blocks/case-studies/case-studies.ts           |  37 +++
 .../filter/case-studies-filter.module.css     |  49 ++++
 .../filter/case-studies-filter.tsx            | 110 ++++++++
 .../grid/case-studies-grid.module.css         |  22 ++
 .../case-studies/grid/case-studies-grid.tsx   |  24 ++
 .../hero/case-studies-hero.module.css         |  24 ++
 .../case-studies/hero/case-studies-hero.tsx   |  26 ++
 pages/case-studies/index.tsx                  |  17 ++
 10 files changed, 747 insertions(+)
 create mode 100644 blocks/case-studies/card/case-studies-card.module.css
 create mode 100644 blocks/case-studies/card/case-studies-card.tsx
 create mode 100644 blocks/case-studies/case-studies.ts
 create mode 100644 blocks/case-studies/filter/case-studies-filter.module.css
 create mode 100644 blocks/case-studies/filter/case-studies-filter.tsx
 create mode 100644 blocks/case-studies/grid/case-studies-grid.module.css
 create mode 100644 blocks/case-studies/grid/case-studies-grid.tsx
 create mode 100644 blocks/case-studies/hero/case-studies-hero.module.css
 create mode 100644 blocks/case-studies/hero/case-studies-hero.tsx
 create mode 100644 pages/case-studies/index.tsx

diff --git a/blocks/case-studies/card/case-studies-card.module.css b/blocks/case-studies/card/case-studies-card.module.css
new file mode 100644
index 00000000000..1e1c189812d
--- /dev/null
+++ b/blocks/case-studies/card/case-studies-card.module.css
@@ -0,0 +1,172 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  border: 1px solid rgba(0,0,0,0.12);
+  max-width: 500px;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.badge {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 10px;
+  border-radius: 999px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.badgeMultiplatform {
+  background: #eef7ff;
+  color: #1565c0;
+  border: 1px solid rgba(21,101,192,0.15);
+}
+
+.badgeServerSide {
+  background: #eef9f2;
+  color: #1b5e20;
+  border: 1px solid rgba(27,94,32,0.15);
+}
+
+.logos {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logosDouble {}
+
+.logo {
+  height: 28px;
+  width: auto;
+  object-fit: contain;
+  max-width: 140px;
+  opacity: 0.95;
+}
+
+.logoSecond {
+  border-left: 1px solid rgba(0,0,0,0.06);
+  padding-left: 10px;
+}
+
+.media {
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f6f7f9;
+}
+
+.mediaVideo {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mediaImage {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.description {
+  color: #1f2328;
+  font-size: 16px;
+  line-height: 1.6;
+}
+.description :global(a) {
+  color: #0b65c2;
+  text-decoration: underline;
+}
+.description :global(strong) {
+  font-weight: 700;
+}
+
+.signature {
+  margin-top: 4px;
+  margin-bottom: 24px;
+}
+.signatureLine1 {
+  font-weight: 600;
+  color: #101214;
+}
+.signatureLine2 {
+  color: #555c63;
+}
+
+.platforms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  align-items: center;
+}
+
+.platform {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 999px;
+  background: #fafbfc;
+  color: #2b2f35;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.platformIcon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.platformLabel {
+  text-transform: capitalize;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.link {
+  color: #0b65c2;
+  text-decoration: underline;
+  font-weight: 600;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid #0b65c2;
+  color: #0b65c2;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+
+.button:hover {
+  background: #0b65c2;
+  color: #fff;
+}
diff --git a/blocks/case-studies/card/case-studies-card.tsx b/blocks/case-studies/card/case-studies-card.tsx
new file mode 100644
index 00000000000..490f0e48632
--- /dev/null
+++ b/blocks/case-studies/card/case-studies-card.tsx
@@ -0,0 +1,266 @@
+// TypeScript React
+import React from 'react';
+import cn from 'classnames';
+import styles from './case-studies-card.module.css';
+
+type Platform =
+    | 'android'
+    | 'ios'
+    | 'desktop'
+    | 'frontend'
+    | 'backend'
+    | 'compose-multi-platform';
+
+type CaseType = 'multiplatform' | 'server-side';
+
+type Media =
+    | { type: 'youtube'; url: string }
+    | { type: 'image'; path: string };
+
+interface Signature {
+    // markdown allowed (e.g., **Name Surname**, Role)
+    line1: string;
+    // plain text
+    line2: string;
+}
+
+export interface CaseCardItem {
+    logos?: [string] | [string, string]; // 0–2 logos, local paths or filenames
+    description: string;                 // markdown-enabled text
+    signature?: Signature;
+    readMoreUrl?: string;                // "Read the full story →"
+    exploreUrl?: string;                 // "Explore the stories"
+    type: CaseType;
+    platforms?: Platform[];              // platform icons row
+    media?: Media;                       // youtube or local image
+    /** Optional: mark case as selected for the home page */
+    featuredOnHome?: boolean;
+}
+
+/**
+ * Resolve asset path from YAML:
+ * - http/https or path starting with "/" => return as is
+ * - otherwise => treat as a filename under /images/case-studies/
+ */
+const resolveAssetPath = (v?: string) => {
+    if (!v) return '';
+    const lower = v.toLowerCase();
+    if (lower.startsWith('http://') || lower.startsWith('https://') || v.startsWith('/')) return v;
+    return `/images/case-studies/${v}`;
+};
+
+/**
+ * Very small markdown -> HTML for bold (**text**) and links [text](url).
+ * Safe subset suitable for our content. Extend if needed.
+ */
+const mdToHtml = (md: string) => {
+    // escape basic HTML first
+    const esc = md
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+
+    // bold: **text**
+    const withBold = esc.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+
+    // links: [text](url)
+    const withLinks = withBold.replace(
+        /\[([^\]]+?)\]\((https?:\/\/[^\s)]+)\)/g,
+        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+    );
+
+    return withLinks;
+};
+
+const badgeText: Record<CaseType, string> = {
+    'multiplatform': 'Kotlin Multiplatform',
+    'server-side': 'Server-side',
+};
+
+const badgeClass: Record<CaseType, string> = {
+    'multiplatform': 'badgeMultiplatform',
+    'server-side': 'badgeServerSide',
+};
+
+// Platform icon path builder. If you keep icons in (for example) /images/platforms/*.svg,
+// they’ll be resolved automatically by key. If an icon is missing, we still render the label.
+const platformIconPath = (p: Platform) => `/images/platforms/${p}.svg`;
+
+type Props = {
+    item: CaseCardItem;
+    className?: string;
+};
+
+export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
+    const logos = item.logos ?? [];
+    const logoSrc1 = resolveAssetPath(logos[0]);
+    const logoSrc2 = resolveAssetPath(logos[1]);
+
+    const hasMedia = Boolean(item.media);
+    const isYoutube = item.media?.type === 'youtube';
+    const mediaUrl = item.media?.type === 'youtube' ? item.media.url : undefined;
+    const mediaImgSrc = item.media?.type === 'image' ? resolveAssetPath(item.media.path) : undefined;
+
+    return (
+        <article className={cn(styles.card, className)}>
+            {/* Header: type badge and logos (0–2) */}
+            <header className={styles.header}>
+        <span className={cn(styles.badge, styles[badgeClass[item.type]])}>
+          {badgeText[item.type]}
+        </span>
+
+                {(logoSrc1 || logoSrc2) && (
+                    <div className={cn(styles.logos, { [styles.logosDouble]: Boolean(logoSrc1 && logoSrc2) })}>
+                        {logoSrc1 && (
+                            <img className={styles.logo} src={logoSrc1} alt="Logo" />
+                        )}
+                        {logoSrc2 && (
+                            <img className={cn(styles.logo, styles.logoSecond)} src={logoSrc2} alt="Second logo" />
+                        )}
+                    </div>
+                )}
+            </header>
+
+            {/* Media (optional): YouTube or Image */}
+            {hasMedia && (
+                <div className={styles.media}>
+                    {isYoutube && mediaUrl && (
+                        <div className={styles.mediaVideo}>
+                            <iframe
+                                className={styles.iframe}
+                                src={toYoutubeEmbedUrl(mediaUrl)}
+                                title="Case study video"
+                                frameBorder={0}
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                allowFullScreen
+                            />
+                        </div>
+                    )}
+                    {!isYoutube && mediaImgSrc && (
+                        <img className={styles.mediaImage} src={mediaImgSrc} alt="Case media" />
+                    )}
+                </div>
+            )}
+
+            {/* Description (markdown) */}
+            <div
+                className={styles.description}
+                dangerouslySetInnerHTML={{ __html: mdToHtml(item.description) }}
+            />
+
+            {/* Signature (optional) */}
+            {item.signature && (
+                <div className={styles.signature}>
+                    <div
+                        className={styles.signatureLine1}
+                        dangerouslySetInnerHTML={{ __html: mdToHtml(item.signature.line1) }}
+                    />
+                    <div className={styles.signatureLine2}>{item.signature.line2}</div>
+                </div>
+            )}
+
+            {/* Platforms (optional) */}
+            {item.platforms && item.platforms.length > 0 && (
+                <div className={styles.platforms} aria-label="Platforms">
+                    {item.platforms.map((p) => {
+                        const iconSrc = platformIconPath(p);
+                        // We render icon + label; if icon path 404s, the label remains visible
+                        return (
+                            <span key={p} className={styles.platform}>
+                <img className={styles.platformIcon} src={iconSrc} alt={`${p} icon`} onError={(e) => hideBrokenIcon(e.currentTarget)} />
+                <span className={styles.platformLabel}>{humanizePlatform(p)}</span>
+              </span>
+                        );
+                    })}
+                </div>
+            )}
+
+            {/* Actions */}
+            {(item.readMoreUrl || item.exploreUrl) && (
+                <div className={styles.actions}>
+                    {item.readMoreUrl && (
+                        <a
+                            className={styles.link}
+                            href={item.readMoreUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            Read the full story →
+                        </a>
+                    )}
+                    {item.exploreUrl && (
+                        <a
+                            className={styles.button}
+                            href={item.exploreUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            Explore the stories
+                        </a>
+                    )}
+                </div>
+            )}
+        </article>
+    );
+};
+
+/**
+ * Convert various YouTube URL shapes to embed URL.
+ * Supports:
+ * - https://youtu.be/ID
+ * - https://www.youtube.com/watch?v=ID
+ * - https://www.youtube.com/live/ID
+ * Falls back to input URL if not recognized.
+ */
+function toYoutubeEmbedUrl(url: string): string {
+    try {
+        const u = new URL(url);
+        // youtu.be/VIDEO
+        if (u.hostname.includes('youtu.be')) {
+            const id = u.pathname.replace('/', '');
+            return `https://www.youtube.com/embed/${id}`;
+        }
+        // youtube.com/watch?v=VIDEO
+        if (u.searchParams.has('v')) {
+            return `https://www.youtube.com/embed/${u.searchParams.get('v')}`;
+        }
+        // youtube.com/live/VIDEO
+        if (u.pathname.startsWith('/live/')) {
+            const id = u.pathname.replace('/live/', '').split('/')[0];
+            return `https://www.youtube.com/embed/${id}`;
+        }
+        return url;
+    } catch {
+        return url;
+    }
+}
+
+/**
+ * If a platform icon is missing (404), hide the broken <img> and keep the label visible.
+ */
+function hideBrokenIcon(img: HTMLImageElement) {
+    img.style.display = 'none';
+}
+
+/**
+ * Humanize platform name for label.
+ */
+function humanizePlatform(p: Platform): string {
+    switch (p) {
+        case 'compose-multi-platform':
+            return 'Compose Multiplatform';
+        case 'frontend':
+            return 'Frontend';
+        case 'backend':
+            return 'Backend';
+        case 'ios':
+            return 'iOS';
+        default:
+            // 'android' | 'desktop'
+            return capitalize(p);
+    }
+}
+
+function capitalize(s: string) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
\ No newline at end of file
diff --git a/blocks/case-studies/case-studies.ts b/blocks/case-studies/case-studies.ts
new file mode 100644
index 00000000000..5205b2cfa5f
--- /dev/null
+++ b/blocks/case-studies/case-studies.ts
@@ -0,0 +1,37 @@
+export type Platform =
+    | 'android'
+    | 'ios'
+    | 'desktop'
+    | 'frontend'
+    | 'backend'
+    | 'compose-multi-platform';
+
+type CaseType = 'multiplatform' | 'server-side';
+
+type Media =
+    | { type: 'youtube'; url: string }
+    | { type: 'image'; path: string };
+
+interface Signature {
+    // line1 — markdown (e.g., **Name Surname**, Role)
+    line1: string;
+    // line2 — plain text
+    line2: string;
+}
+
+interface CaseCardItem {
+    // 0–2 logos: single or pair (for KMP + Compose special card)
+    logos?: [string] | [string, string];
+    // markdown-enabled description
+    description: string;
+    signature?: Signature;
+    // "Read the full story →"
+    readMoreUrl?: string;
+    // "Explore the stories"
+    exploreUrl?: string;
+    caseType: CaseType;
+    platforms?: Platform[];
+    media?: Media;
+    /** Optional: selected for the home page */
+    featuredOnHome?: boolean;
+}
\ No newline at end of file
diff --git a/blocks/case-studies/filter/case-studies-filter.module.css b/blocks/case-studies/filter/case-studies-filter.module.css
new file mode 100644
index 00000000000..8418a794ea9
--- /dev/null
+++ b/blocks/case-studies/filter/case-studies-filter.module.css
@@ -0,0 +1,49 @@
+.wrapper {
+  padding: 32px 0;
+  color: #ffffff; /* ensure white text */
+}
+
+.title {
+  margin: 0 0 16px 0;
+  color: inherit;
+}
+
+.inner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+.group {
+  background: #0f0f0f;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.groupType {
+  /* will span both columns on desktop */
+}
+
+.groupTitle {
+  margin: 0 0 12px 0;
+  color: inherit;
+}
+
+.checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+}
+
+.switcherSmall {
+}
+
+@media (min-width: 768px) {
+  .inner {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .groupType {
+    grid-column: 1 / -1;
+  }
+}
diff --git a/blocks/case-studies/filter/case-studies-filter.tsx b/blocks/case-studies/filter/case-studies-filter.tsx
new file mode 100644
index 00000000000..6d219d66b83
--- /dev/null
+++ b/blocks/case-studies/filter/case-studies-filter.tsx
@@ -0,0 +1,110 @@
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import Switcher from '@rescui/switcher';
+import Checkbox from '@rescui/checkbox';
+import { createTextCn } from '@rescui/typography';
+import '@jetbrains/kotlin-web-site-ui/out/components/layout';
+import styles from './case-studies-filter.module.css';
+
+export const CaseStudiesFilter: React.FC = () => {
+    const darkTextCn = createTextCn('dark');
+    // Case study type switcher
+    const typeOptions = useMemo(
+        () => [
+            { value: 'all', label: 'All' },
+            { value: 'kotlin-multiplatform', label: 'Kotlin Multiplatform' },
+            { value: 'server-side', label: 'Server-side' },
+        ], []
+    );
+    const [type, setType] = useState<string>('all');
+    const onTypeChange = useCallback((value: string) => setType(value), []);
+
+    // Code shared across (checkboxes)
+    const codeSharedOptions = useMemo(
+        () => [
+            { id: 'android', label: 'Android' },
+            { id: 'ios', label: 'iOS' },
+            { id: 'desktop', label: 'Desktop' },
+            { id: 'frontend', label: 'Frontend' },
+            { id: 'backend', label: 'Backend' },
+        ], []
+    );
+    const [codeShared, setCodeShared] = useState<string[]>([]);
+    const toggleCodeShared = useCallback((id: string) => {
+        setCodeShared((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+    }, []);
+
+    // UI Technology (checkboxes)
+    const uiTechOptions = useMemo(
+        () => [
+            { id: 'built-with-compose-multiplatform', label: 'Built with Compose Multiplatform' },
+        ], []
+    );
+    const [uiTech, setUiTech] = useState<string[]>([]);
+    const toggleUiTech = useCallback((id: string) => {
+        setUiTech((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+    }, []);
+
+    // for accessibility ids
+    const typeTitleId = useId();
+    const codeSharedTitleId = useId();
+    const uiTechTitleId = useId();
+
+    return (
+        <section data-testid="case-studies-filter" aria-label="Case Studies Filter" className={styles.wrapper}>
+            <div className={'ktl-layout ktl-layout--center'}>
+                <h2 className={styles.title}>
+                    <span className={darkTextCn('rs-h4')}>Filters</span>
+                </h2>
+                <div className={styles.inner}>
+                    {/* Case study type */}
+                    <div className={`${styles.group} ${styles.groupType}`} role="group" aria-labelledby={typeTitleId} data-test="filter-type">
+                        <h3 id={typeTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Case study type</span></h3>
+                        <div className={styles.switcherSmall}>
+                            <Switcher mode={'rock'} value={type} onChange={onTypeChange} options={typeOptions} />
+                        </div>
+                    </div>
+
+                    {/* Code shared across */}
+                    <div className={styles.group} role="group" aria-labelledby={codeSharedTitleId} data-test="filter-code-shared">
+                        <h3 id={codeSharedTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Code shared across</span></h3>
+                        <div className={styles.checkboxes}>
+                            {codeSharedOptions.map((opt) => {
+                                const id = `code-shared-${opt.id}`;
+                                const checked = codeShared.includes(opt.id);
+                                return (
+                                    <Checkbox
+                                        key={opt.id}
+                                        checked={checked}
+                                        onChange={() => toggleCodeShared(opt.id)}
+                                        mode="classic"
+                                        size="m"
+                                    />
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* UI technology */}
+                    <div className={styles.group} role="group" aria-labelledby={uiTechTitleId} data-test="filter-ui-technology">
+                        <h3 id={uiTechTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>UI technology</span></h3>
+                        <div className={styles.checkboxes}>
+                            {uiTechOptions.map((opt) => {
+                                const id = `ui-tech-${opt.id}`;
+                                const checked = uiTech.includes(opt.id);
+                                return (
+                                    <Checkbox
+                                        key={opt.id}
+                                        checked={checked}
+                                        onChange={() => toggleUiTech(opt.id)}
+                                        mode="classic"
+                                        size="m"
+                                    />
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
diff --git a/blocks/case-studies/grid/case-studies-grid.module.css b/blocks/case-studies/grid/case-studies-grid.module.css
new file mode 100644
index 00000000000..9279927c14c
--- /dev/null
+++ b/blocks/case-studies/grid/case-studies-grid.module.css
@@ -0,0 +1,22 @@
+/* Grid layout for Case Studies: two columns with responsive fallback */
+.masonry-tiles-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  column-gap: 32px;
+  row-gap: 32px;
+}
+
+/* Tile wrapper: keep visuals controlled by the card component */
+.masonry-tile {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+@media (--md) {
+  .masonry-tiles-container {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/blocks/case-studies/grid/case-studies-grid.tsx b/blocks/case-studies/grid/case-studies-grid.tsx
new file mode 100644
index 00000000000..c869872fafa
--- /dev/null
+++ b/blocks/case-studies/grid/case-studies-grid.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import caseStudiesDataRaw from '../../../data/case-studies/case-studies.yml';
+import { CaseStudyCard } from '../card/case-studies-card';
+import styles from './case-studies-grid.module.css';
+
+export const CaseStudiesGrid: React.FC = () => {
+  return (
+    <section data-testid="case-studies-grid" aria-label="Case Studies Grid">
+      <h2>Case studies</h2>
+      <div role="list" className={styles['masonry-tiles-container']}>
+        {caseStudiesDataRaw.items.map((it) => (
+          <div
+            key={it.id}
+            role="listitem"
+            className={styles['masonry-tile']}
+          >
+            <CaseStudyCard item={{ ...it }} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
\ No newline at end of file
diff --git a/blocks/case-studies/hero/case-studies-hero.module.css b/blocks/case-studies/hero/case-studies-hero.module.css
new file mode 100644
index 00000000000..723a15317b7
--- /dev/null
+++ b/blocks/case-studies/hero/case-studies-hero.module.css
@@ -0,0 +1,24 @@
+.wrapper {
+  background: #000000;
+  color: #ffffff;
+  padding: 96px 0 72px 0;
+}
+
+.content {
+  max-width: 816px;
+}
+
+.title {
+  margin: 0;
+}
+
+.subtitle {
+  margin-top: 24px;
+  color: #ffffff;
+}
+
+@media (min-width: 768px) {
+  .subtitle {
+    margin-top: 32px;
+  }
+}
diff --git a/blocks/case-studies/hero/case-studies-hero.tsx b/blocks/case-studies/hero/case-studies-hero.tsx
new file mode 100644
index 00000000000..5860d211fea
--- /dev/null
+++ b/blocks/case-studies/hero/case-studies-hero.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import '@jetbrains/kotlin-web-site-ui/out/components/layout';
+import styles from './case-studies-hero.module.css';
+
+export const CaseStudiesHero: React.FC = () => {
+    const textCn = useTextStyles();
+
+    return (
+        <section data-testid="case-studies-hero" aria-label="Case Studies Hero">
+            <div className={styles.wrapper}>
+                <div className={cn('ktl-layout', 'ktl-layout--center')}>
+                    <div className={styles.content}>
+                        <h1 className={cn(textCn('rs-hero'), styles.title)}>
+                            Case studies
+                        </h1>
+                        <p className={cn(textCn('rs-text-1'), styles.subtitle)}>
+                            Discover how companies of all sizes and industries apply Kotlin across client and server. From building cross-platform applications with shared logic and UI using Kotlin Multiplatform and Compose Multiplatform to developing reliable, high-performance backends with Kotlin — explore real-world strategies, integration approaches, and the benefits teams gain from using Kotlin in production.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
diff --git a/pages/case-studies/index.tsx b/pages/case-studies/index.tsx
new file mode 100644
index 00000000000..f5eeae2712c
--- /dev/null
+++ b/pages/case-studies/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ServerSideLayout } from '../../blocks/server-side/layout/server-side-layout';
+import { CaseStudiesHero } from '../../blocks/case-studies/hero/case-studies-hero';
+import { CaseStudiesFilter } from '../../blocks/case-studies/filter/case-studies-filter';
+import { CaseStudiesGrid } from '../../blocks/case-studies/grid/case-studies-grid';
+
+function Index() {
+    return (
+        <ServerSideLayout title={'Case Studies'} ogImageName={'case-studies.png'}>
+            <CaseStudiesHero />
+            <CaseStudiesFilter />
+            <CaseStudiesGrid />
+        </ServerSideLayout>
+    );
+}
+
+export default Index;

From f1aff6031933e946f65a3ae9661af14770356aa2 Mon Sep 17 00:00:00 2001
From: berezinant <berezinant@gmail.com>
Date: Mon, 15 Sep 2025 19:41:47 +0200
Subject: [PATCH 2/3] update icons and types

---
 .../case-studies/card/case-studies-card.tsx   | 103 +++++++-----------
 blocks/case-studies/case-studies.ts           |  67 ++++++++----
 .../filter/case-studies-filter.tsx            |   8 +-
 package.json                                  |   2 +-
 yarn.lock                                     |   8 +-
 5 files changed, 95 insertions(+), 93 deletions(-)

diff --git a/blocks/case-studies/card/case-studies-card.tsx b/blocks/case-studies/card/case-studies-card.tsx
index 490f0e48632..4a1a78a90cb 100644
--- a/blocks/case-studies/card/case-studies-card.tsx
+++ b/blocks/case-studies/card/case-studies-card.tsx
@@ -1,41 +1,9 @@
-// TypeScript React
 import React from 'react';
 import cn from 'classnames';
 import styles from './case-studies-card.module.css';
+import { AndroidIcon, AppleIcon, ServerIcon, ComputerIcon, GlobusIcon } from '@rescui/icons';
+import { CaseStudyItem, CaseStudyType, isExternalCaseStudy, Platform } from '../case-studies';
 
-type Platform =
-    | 'android'
-    | 'ios'
-    | 'desktop'
-    | 'frontend'
-    | 'backend'
-    | 'compose-multi-platform';
-
-type CaseType = 'multiplatform' | 'server-side';
-
-type Media =
-    | { type: 'youtube'; url: string }
-    | { type: 'image'; path: string };
-
-interface Signature {
-    // markdown allowed (e.g., **Name Surname**, Role)
-    line1: string;
-    // plain text
-    line2: string;
-}
-
-export interface CaseCardItem {
-    logos?: [string] | [string, string]; // 0–2 logos, local paths or filenames
-    description: string;                 // markdown-enabled text
-    signature?: Signature;
-    readMoreUrl?: string;                // "Read the full story →"
-    exploreUrl?: string;                 // "Explore the stories"
-    type: CaseType;
-    platforms?: Platform[];              // platform icons row
-    media?: Media;                       // youtube or local image
-    /** Optional: mark case as selected for the home page */
-    featuredOnHome?: boolean;
-}
 
 /**
  * Resolve asset path from YAML:
@@ -44,8 +12,6 @@ export interface CaseCardItem {
  */
 const resolveAssetPath = (v?: string) => {
     if (!v) return '';
-    const lower = v.toLowerCase();
-    if (lower.startsWith('http://') || lower.startsWith('https://') || v.startsWith('/')) return v;
     return `/images/case-studies/${v}`;
 };
 
@@ -72,27 +38,46 @@ const mdToHtml = (md: string) => {
     return withLinks;
 };
 
-const badgeText: Record<CaseType, string> = {
+const badgeText: Record<CaseStudyType, string> = {
     'multiplatform': 'Kotlin Multiplatform',
-    'server-side': 'Server-side',
+    'server-side': 'Server-side'
 };
 
-const badgeClass: Record<CaseType, string> = {
+const badgeClass: Record<CaseStudyType, string> = {
     'multiplatform': 'badgeMultiplatform',
-    'server-side': 'badgeServerSide',
+    'server-side': 'badgeServerSide'
 };
 
 // Platform icon path builder. If you keep icons in (for example) /images/platforms/*.svg,
 // they’ll be resolved automatically by key. If an icon is missing, we still render the label.
-const platformIconPath = (p: Platform) => `/images/platforms/${p}.svg`;
+const getPlatformIcon = (p: Platform) => {
+    switch (p) {
+        case 'android':
+            return <AndroidIcon/>;
+        case 'ios':
+            return <AppleIcon/>;
+        case 'desktop':
+            return <ComputerIcon/>;
+        case 'frontend':
+            return <GlobusIcon/>;
+        case 'backend':
+            return <ServerIcon/>;
+        case 'compose-multiplatform':
+            return <img className={styles.platformIcon} src={'/images/platforms/compose-multiplatform.svg'}
+                        alt="Compose Multiplatform icon"
+                        onError={(e) => hideBrokenIcon(e.currentTarget)} />;
+        default:
+            return null;
+    }
+};
 
 type Props = {
-    item: CaseCardItem;
+    item: CaseStudyItem;
     className?: string;
 };
 
 export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
-    const logos = item.logos ?? [];
+    const logos = item.logo ?? [];
     const logoSrc1 = resolveAssetPath(logos[0]);
     const logoSrc2 = resolveAssetPath(logos[1]);
 
@@ -142,13 +127,11 @@ export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
                 </div>
             )}
 
-            {/* Description (markdown) */}
             <div
                 className={styles.description}
                 dangerouslySetInnerHTML={{ __html: mdToHtml(item.description) }}
             />
 
-            {/* Signature (optional) */}
             {item.signature && (
                 <div className={styles.signature}>
                     <div
@@ -163,43 +146,33 @@ export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
             {item.platforms && item.platforms.length > 0 && (
                 <div className={styles.platforms} aria-label="Platforms">
                     {item.platforms.map((p) => {
-                        const iconSrc = platformIconPath(p);
+                        const iconSrc = getPlatformIcon(p);
                         // We render icon + label; if icon path 404s, the label remains visible
                         return (
                             <span key={p} className={styles.platform}>
-                <img className={styles.platformIcon} src={iconSrc} alt={`${p} icon`} onError={(e) => hideBrokenIcon(e.currentTarget)} />
+                                <>
+                {getPlatformIcon(p)}
+                                    </>
                 <span className={styles.platformLabel}>{humanizePlatform(p)}</span>
               </span>
                         );
                     })}
                 </div>
             )}
-
-            {/* Actions */}
-            {(item.readMoreUrl || item.exploreUrl) && (
+            {(isExternalCaseStudy(item)) ? (
                 <div className={styles.actions}>
-                    {item.readMoreUrl && (
-                        <a
-                            className={styles.link}
-                            href={item.readMoreUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            Read the full story →
-                        </a>
-                    )}
-                    {item.exploreUrl && (
+                    {item.externalLink && (
                         <a
                             className={styles.button}
-                            href={item.exploreUrl}
+                            href={item.externalLink}
                             target="_blank"
                             rel="noopener noreferrer"
                         >
-                            Explore the stories
+                            {item.externalLinkText || 'Read the full story'}
                         </a>
                     )}
                 </div>
-            )}
+            ) : null}
         </article>
     );
 };
@@ -247,7 +220,7 @@ function hideBrokenIcon(img: HTMLImageElement) {
  */
 function humanizePlatform(p: Platform): string {
     switch (p) {
-        case 'compose-multi-platform':
+        case 'compose-multiplatform':
             return 'Compose Multiplatform';
         case 'frontend':
             return 'Frontend';
diff --git a/blocks/case-studies/case-studies.ts b/blocks/case-studies/case-studies.ts
index 5205b2cfa5f..8dde3a80208 100644
--- a/blocks/case-studies/case-studies.ts
+++ b/blocks/case-studies/case-studies.ts
@@ -1,37 +1,62 @@
+export type CaseStudyType = 'multiplatform' | 'server-side';
+
+type CaseStudyDestination = 'internal' | 'external';
+
 export type Platform =
     | 'android'
     | 'ios'
     | 'desktop'
     | 'frontend'
     | 'backend'
-    | 'compose-multi-platform';
-
-type CaseType = 'multiplatform' | 'server-side';
-
-type Media =
-    | { type: 'youtube'; url: string }
-    | { type: 'image'; path: string };
+    | 'compose-multiplatform';
 
-interface Signature {
-    // line1 — markdown (e.g., **Name Surname**, Role)
+type Signature = {
     line1: string;
-    // line2 — plain text
     line2: string;
 }
 
-interface CaseCardItem {
-    // 0–2 logos: single or pair (for KMP + Compose special card)
-    logos?: [string] | [string, string];
-    // markdown-enabled description
+type YoutubeMedia = {
+    type: 'youtube';
+    url: string;
+};
+
+type ImageMedia = {
+    type: 'image';
+    path: string;
+};
+
+type Media = YoutubeMedia | ImageMedia;
+
+interface CaseStudyItemBase {
+    id: string;
+    type: CaseStudyType;
     description: string;
+    destination: CaseStudyDestination;
+    logo?: string[];
     signature?: Signature;
-    // "Read the full story →"
-    readMoreUrl?: string;
-    // "Explore the stories"
-    exploreUrl?: string;
-    caseType: CaseType;
     platforms?: Platform[];
     media?: Media;
-    /** Optional: selected for the home page */
-    featuredOnHome?: boolean;
+    featuredOnMainPage?: boolean;
+    slug?: string;
+    externalLinkText?: string;
+}
+
+export interface ExternalDestinationCaseStudyItem extends CaseStudyItemBase {
+    destination: 'external';
+    // required when destination === 'external'
+    externalLink: string;
+}
+
+export interface InternalDestinationCaseStudyItem extends CaseStudyItemBase {
+    destination: 'internal';
+    // required when destination === 'internal'
+    pageContentPath: string;
+}
+
+export type CaseStudyItem =
+    | ExternalDestinationCaseStudyItem
+    | InternalDestinationCaseStudyItem;
+
+export function isExternalCaseStudy(item: CaseStudyItem): item is ExternalDestinationCaseStudyItem {
+    return item.destination === 'external';
 }
\ No newline at end of file
diff --git a/blocks/case-studies/filter/case-studies-filter.tsx b/blocks/case-studies/filter/case-studies-filter.tsx
index 6d219d66b83..d7ecc610aff 100644
--- a/blocks/case-studies/filter/case-studies-filter.tsx
+++ b/blocks/case-studies/filter/case-studies-filter.tsx
@@ -78,7 +78,9 @@ export const CaseStudiesFilter: React.FC = () => {
                                         onChange={() => toggleCodeShared(opt.id)}
                                         mode="classic"
                                         size="m"
-                                    />
+                                    >
+                                        {opt.label}
+                                    </Checkbox>
                                 );
                             })}
                         </div>
@@ -98,7 +100,9 @@ export const CaseStudiesFilter: React.FC = () => {
                                         onChange={() => toggleUiTech(opt.id)}
                                         mode="classic"
                                         size="m"
-                                    />
+                                    >
+                                        {opt.label}
+                                    </Checkbox>
                                 );
                             })}
                         </div>
diff --git a/package.json b/package.json
index e705dabc63e..2887561343f 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@rescui/colors": "^0.1.6",
     "@rescui/dropdown-menu": "^0.6.1",
     "@rescui/focus-manager": "^0.1.4",
-    "@rescui/icons": "^0.16.13",
+    "@rescui/icons": "^1.5.0",
     "@rescui/input": "^0.8.2",
     "@rescui/menu": "0.9.4",
     "@rescui/switcher": "^0.5.1",
diff --git a/yarn.lock b/yarn.lock
index 5559a7b1d45..6e87a45f2f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1840,10 +1840,10 @@
     classnames "^2.2.6"
     core-js "^3.9.1"
 
-"@rescui/icons@^0.16.13":
-  version "0.16.13"
-  resolved "https://registry.yarnpkg.com/@rescui/icons/-/icons-0.16.13.tgz#e1a64bd98d83bd8815035a3aa56ec67ecaead95e"
-  integrity sha512-ik1ZE0QNFM6Kfk8hs3GSmHMvcLLTu/Pxzi5aAy4Z5uIrnKxqXf5k3AlbKZVWS/pneeKLSWhheztcjUVtjidv+g==
+"@rescui/icons@^1.5.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@rescui/icons/-/icons-1.6.0.tgz#3bf7fbda19e0690e70cb254c583bf958a4af78f2"
+  integrity sha512-O5+ElCJ4I0tx1wSy6M7IdOuTvIjJLWL/3wNJ0LANu2jfi95cVhbMrxfvZewhOimS6/QgZXqJ7aPn2iCgagrySQ==
   dependencies:
     "@babel/runtime-corejs3" "^7.26.0"
     classnames "^2.2.6"

From 4bf7da1c32591665cd3601f84f285ea831d6bbba Mon Sep 17 00:00:00 2001
From: berezinant <berezinant@gmail.com>
Date: Mon, 29 Sep 2025 13:00:55 +0200
Subject: [PATCH 3/3] temp

---
 .../case-studies/card/case-studies-card.tsx   |   6 +-
 blocks/case-studies/case-studies.ts           |  20 +-
 .../filter/case-studies-filter.tsx            | 202 +++++++++++-------
 .../case-studies/grid/case-studies-grid.tsx   |  64 +++++-
 4 files changed, 207 insertions(+), 85 deletions(-)

diff --git a/blocks/case-studies/card/case-studies-card.tsx b/blocks/case-studies/card/case-studies-card.tsx
index 4a1a78a90cb..6fb83d50c8b 100644
--- a/blocks/case-studies/card/case-studies-card.tsx
+++ b/blocks/case-studies/card/case-studies-card.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './case-studies-card.module.css';
 import { AndroidIcon, AppleIcon, ServerIcon, ComputerIcon, GlobusIcon } from '@rescui/icons';
-import { CaseStudyItem, CaseStudyType, isExternalCaseStudy, Platform } from '../case-studies';
+import { CaseStudyItem, CaseStudyType, isExternalCaseStudy, CasePlatform } from '../case-studies';
 
 
 /**
@@ -50,7 +50,7 @@ const badgeClass: Record<CaseStudyType, string> = {
 
 // Platform icon path builder. If you keep icons in (for example) /images/platforms/*.svg,
 // they’ll be resolved automatically by key. If an icon is missing, we still render the label.
-const getPlatformIcon = (p: Platform) => {
+const getPlatformIcon = (p: CasePlatform) => {
     switch (p) {
         case 'android':
             return <AndroidIcon/>;
@@ -218,7 +218,7 @@ function hideBrokenIcon(img: HTMLImageElement) {
 /**
  * Humanize platform name for label.
  */
-function humanizePlatform(p: Platform): string {
+function humanizePlatform(p: CasePlatform): string {
     switch (p) {
         case 'compose-multiplatform':
             return 'Compose Multiplatform';
diff --git a/blocks/case-studies/case-studies.ts b/blocks/case-studies/case-studies.ts
index 8dde3a80208..64d5c500d59 100644
--- a/blocks/case-studies/case-studies.ts
+++ b/blocks/case-studies/case-studies.ts
@@ -1,14 +1,18 @@
 export type CaseStudyType = 'multiplatform' | 'server-side';
 
+export type  CaseTypeSwitch = 'all' | CaseStudyType;
+
 type CaseStudyDestination = 'internal' | 'external';
 
-export type Platform =
-    | 'android'
-    | 'ios'
-    | 'desktop'
-    | 'frontend'
-    | 'backend'
-    | 'compose-multiplatform';
+export const Platforms = [
+    'android',
+    'ios',
+    'desktop',
+    'frontend',
+    'backend',
+] as const;
+
+export type CasePlatform = typeof Platforms[number] | 'compose-multiplatform';
 
 type Signature = {
     line1: string;
@@ -34,7 +38,7 @@ interface CaseStudyItemBase {
     destination: CaseStudyDestination;
     logo?: string[];
     signature?: Signature;
-    platforms?: Platform[];
+    platforms?: CasePlatform[];
     media?: Media;
     featuredOnMainPage?: boolean;
     slug?: string;
diff --git a/blocks/case-studies/filter/case-studies-filter.tsx b/blocks/case-studies/filter/case-studies-filter.tsx
index d7ecc610aff..87e1018d9ea 100644
--- a/blocks/case-studies/filter/case-studies-filter.tsx
+++ b/blocks/case-studies/filter/case-studies-filter.tsx
@@ -1,54 +1,111 @@
-import React, { useCallback, useId, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { useRouter } from 'next/router';
 import Switcher from '@rescui/switcher';
 import Checkbox from '@rescui/checkbox';
 import { createTextCn } from '@rescui/typography';
 import '@jetbrains/kotlin-web-site-ui/out/components/layout';
 import styles from './case-studies-filter.module.css';
+import { CasePlatform, CaseStudyType, CaseTypeSwitch, Platforms } from '../case-studies';
+
+
+function parseType(maybeCaseType: unknown): CaseTypeSwitch {
+    const maybeCaseTypeString = String(maybeCaseType || 'all');
+    return (maybeCaseTypeString === 'multiplatform' || maybeCaseTypeString === 'server-side') ? maybeCaseTypeString : 'all';
+}
+
+function parsePlatforms(maybePlatforms: unknown): CasePlatform[] {
+    if (!maybePlatforms) {
+        return [...Platforms];
+    }
+    const list = String(maybePlatforms).split(',').map((x) => x.trim()).filter(Boolean);
+    const set = new Set<CasePlatform>();
+    for (const i of list) {
+        if ((Platforms as readonly string[]).includes(i)) {
+            set.add(i as CasePlatform);
+        }
+    }
+    return set.size === 0 ? [...Platforms] : Array.from(set);
+}
+
+function parseCompose(v: unknown): boolean {
+    if (v === true) return true;
+    const s = String(v || 'true').toLowerCase();
+    return s === 'true' || s === '1' || s === 'yes';
+}
+
+function buildQuery(type: CaseTypeSwitch, platforms: CasePlatform[], compose: boolean) {
+    const q: Record<string, any> = {};
+    if (type && type !== 'all') q.type = type;
+    // only keep platforms if not all selected
+    const allSelected = platforms.length === Platforms.length && Platforms.every((p) => platforms.includes(p));
+    if (!allSelected && (type === 'multiplatform' || type === 'all')) {
+        q.platforms = platforms.join(',');
+    }
+    if (type === 'multiplatform' || type === 'all') q.compose = compose ? 'true' : 'false';
+    return q;
+}
 
 export const CaseStudiesFilter: React.FC = () => {
+    const router = useRouter();
     const darkTextCn = createTextCn('dark');
+
     // Case study type switcher
-    const typeOptions = useMemo(
+    const typeOptions: Array<{value: CaseTypeSwitch, label: string}> = useMemo(
         () => [
             { value: 'all', label: 'All' },
-            { value: 'kotlin-multiplatform', label: 'Kotlin Multiplatform' },
-            { value: 'server-side', label: 'Server-side' },
+            { value: 'multiplatform', label: 'Kotlin Multiplatform' },
+            { value: 'server-side', label: 'Server-side' }
         ], []
     );
-    const [type, setType] = useState<string>('all');
-    const onTypeChange = useCallback((value: string) => setType(value), []);
 
-    // Code shared across (checkboxes)
-    const codeSharedOptions = useMemo(
-        () => [
-            { id: 'android', label: 'Android' },
-            { id: 'ios', label: 'iOS' },
-            { id: 'desktop', label: 'Desktop' },
-            { id: 'frontend', label: 'Frontend' },
-            { id: 'backend', label: 'Backend' },
-        ], []
-    );
-    const [codeShared, setCodeShared] = useState<string[]>([]);
-    const toggleCodeShared = useCallback((id: string) => {
-        setCodeShared((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
-    }, []);
+    // State synchronized with URL
+    const [type, setType] = useState<CaseTypeSwitch>('all');
+    const [platforms, setPlatforms] = useState<CasePlatform[]>([...Platforms]);
+    const [compose, setCompose] = useState<boolean>(true);
 
-    // UI Technology (checkboxes)
-    const uiTechOptions = useMemo(
-        () => [
-            { id: 'built-with-compose-multiplatform', label: 'Built with Compose Multiplatform' },
-        ], []
-    );
-    const [uiTech, setUiTech] = useState<string[]>([]);
-    const toggleUiTech = useCallback((id: string) => {
-        setUiTech((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
-    }, []);
+    // Initialize/Sync from URL
+    useEffect(() => {
+        const q = router.query;
+        const t = parseType(q.type);
+        const p = parsePlatforms(q.platforms);
+        const c = parseCompose(q.compose);
+        setType(t);
+        setPlatforms(p);
+        setCompose(c);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [router.query.type, router.query.platforms, router.query.compose]);
+
+    // Handlers update both state and URL (shallow)
+    const pushQuery = useCallback((nextType: CaseTypeSwitch, nextPlatforms: CasePlatform[], nextCompose: boolean) => {
+        const q = buildQuery(nextType, nextPlatforms, nextCompose);
+        router.replace({ pathname: router.pathname, query: q }, undefined, { shallow: true });
+    }, [router]);
+
+    const onTypeChange = useCallback((value: string) => {
+        const nextType = parseType(value);
+        // When switching to server-side, we can keep platforms/compose but they won't be shown
+        pushQuery(nextType, platforms, compose);
+    }, [platforms, compose, pushQuery]);
+
+    const togglePlatform = useCallback((id: CasePlatform) => {
+        let next = platforms.includes(id) ? platforms.filter((x) => x !== id) : [...platforms, id];
+        // If user unchecks all, reset to all selected
+        if (next.length === 0) next = [...Platforms];
+        pushQuery(type, next, compose);
+    }, [platforms, type, compose, pushQuery]);
+
+    const onComposeChange = useCallback(() => {
+        const next = !compose;
+        pushQuery(type, platforms, next);
+    }, [compose, type, platforms, pushQuery]);
 
     // for accessibility ids
     const typeTitleId = useId();
     const codeSharedTitleId = useId();
     const uiTechTitleId = useId();
 
+    const showKmpFilters = type === 'multiplatform' || type === 'all';
+
     return (
         <section data-testid="case-studies-filter" aria-label="Case Studies Filter" className={styles.wrapper}>
             <div className={'ktl-layout ktl-layout--center'}>
@@ -57,56 +114,57 @@ export const CaseStudiesFilter: React.FC = () => {
                 </h2>
                 <div className={styles.inner}>
                     {/* Case study type */}
-                    <div className={`${styles.group} ${styles.groupType}`} role="group" aria-labelledby={typeTitleId} data-test="filter-type">
-                        <h3 id={typeTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Case study type</span></h3>
+                    <div className={`${styles.group} ${styles.groupType}`} role="group" aria-labelledby={typeTitleId}
+                         data-test="filter-type">
+                        <h3 id={typeTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Case study type</span>
+                        </h3>
                         <div className={styles.switcherSmall}>
                             <Switcher mode={'rock'} value={type} onChange={onTypeChange} options={typeOptions} />
                         </div>
                     </div>
 
-                    {/* Code shared across */}
-                    <div className={styles.group} role="group" aria-labelledby={codeSharedTitleId} data-test="filter-code-shared">
-                        <h3 id={codeSharedTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Code shared across</span></h3>
-                        <div className={styles.checkboxes}>
-                            {codeSharedOptions.map((opt) => {
-                                const id = `code-shared-${opt.id}`;
-                                const checked = codeShared.includes(opt.id);
-                                return (
-                                    <Checkbox
-                                        key={opt.id}
-                                        checked={checked}
-                                        onChange={() => toggleCodeShared(opt.id)}
-                                        mode="classic"
-                                        size="m"
-                                    >
-                                        {opt.label}
-                                    </Checkbox>
-                                );
-                            })}
+                    {showKmpFilters && (
+                        <div className={styles.group} role="group" aria-labelledby={codeSharedTitleId}
+                             data-test="filter-code-shared">
+                            <h3 id={codeSharedTitleId} className={styles.groupTitle}><span
+                                className={darkTextCn('rs-h4')}>Code shared across</span></h3>
+                            <div className={styles.checkboxes}>
+                                {Platforms.map((pid) => {
+                                    const checked = platforms.includes(pid);
+                                    const label = pid === 'ios' ? 'iOS' : pid.charAt(0).toUpperCase() + pid.slice(1);
+                                    return (
+                                        <Checkbox
+                                            key={pid}
+                                            checked={checked}
+                                            onChange={() => togglePlatform(pid)}
+                                            mode="classic"
+                                            size="m"
+                                        >
+                                            {label}
+                                        </Checkbox>
+                                    );
+                                })}
+                            </div>
                         </div>
-                    </div>
+                    )}
 
-                    {/* UI technology */}
-                    <div className={styles.group} role="group" aria-labelledby={uiTechTitleId} data-test="filter-ui-technology">
-                        <h3 id={uiTechTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>UI technology</span></h3>
-                        <div className={styles.checkboxes}>
-                            {uiTechOptions.map((opt) => {
-                                const id = `ui-tech-${opt.id}`;
-                                const checked = uiTech.includes(opt.id);
-                                return (
-                                    <Checkbox
-                                        key={opt.id}
-                                        checked={checked}
-                                        onChange={() => toggleUiTech(opt.id)}
-                                        mode="classic"
-                                        size="m"
-                                    >
-                                        {opt.label}
-                                    </Checkbox>
-                                );
-                            })}
+                    {showKmpFilters && (
+                        <div className={styles.group} role="group" aria-labelledby={uiTechTitleId}
+                             data-test="filter-ui-technology">
+                            <h3 id={uiTechTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>UI technology</span>
+                            </h3>
+                            <div className={styles.checkboxes}>
+                                <Checkbox
+                                    checked={compose}
+                                    onChange={onComposeChange}
+                                    mode="classic"
+                                    size="m"
+                                >
+                                    Built with Compose Multiplatform
+                                </Checkbox>
+                            </div>
                         </div>
-                    </div>
+                    )}
                 </div>
             </div>
         </section>
diff --git a/blocks/case-studies/grid/case-studies-grid.tsx b/blocks/case-studies/grid/case-studies-grid.tsx
index c869872fafa..0fddac2cabd 100644
--- a/blocks/case-studies/grid/case-studies-grid.tsx
+++ b/blocks/case-studies/grid/case-studies-grid.tsx
@@ -1,15 +1,75 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useRouter } from 'next/router';
 
 import caseStudiesDataRaw from '../../../data/case-studies/case-studies.yml';
 import { CaseStudyCard } from '../card/case-studies-card';
 import styles from './case-studies-grid.module.css';
+import type { CaseStudyItem } from '../case-studies';
+
+const ALL_PLATFORMS = ['android', 'ios', 'desktop', 'frontend', 'backend'] as const;
+type PlatformFilter = typeof ALL_PLATFORMS[number];
+
+type TypeFilter = 'all' | 'kotlin-multiplatform' | 'server-side';
+
+function parseType(v: unknown): TypeFilter {
+  const s = String(v || 'all');
+  return (s === 'kotlin-multiplatform' || s === 'server-side') ? (s as TypeFilter) : 'all';
+}
+
+function parsePlatforms(v: unknown): PlatformFilter[] {
+  if (!v) return [...ALL_PLATFORMS];
+  const list = String(v).split(',').map((x) => x.trim()).filter(Boolean);
+  const set = new Set<PlatformFilter>();
+  for (const i of list) {
+    if ((ALL_PLATFORMS as readonly string[]).includes(i)) set.add(i as PlatformFilter);
+  }
+  return set.size === 0 ? [...ALL_PLATFORMS] : Array.from(set);
+}
+
+function parseCompose(v: unknown): boolean {
+  if (v === true) return true;
+  const s = String(v || 'true').toLowerCase();
+  return s === 'true' || s === '1' || s === 'yes';
+}
 
 export const CaseStudiesGrid: React.FC = () => {
+  const router = useRouter();
+
+  const type = parseType(router.query.type);
+  const platforms = parsePlatforms(router.query.platforms);
+  const compose = parseCompose(router.query.compose);
+
+  const items = useMemo(() => {
+    const source: CaseStudyItem[] = caseStudiesDataRaw.items as any;
+    return source.filter((it) => {
+      // Map filter type to item types
+      const isMp = it.type === 'multiplatform';
+      const isSs = it.type === 'server-side';
+
+      if (type === 'server-side') return isSs;
+      if (type === 'kotlin-multiplatform') {
+        // Only multiplatform items with filters applied
+        if (!isMp) return false;
+        // Compose filter
+        if (compose && !(it.platforms || []).includes('compose-multiplatform')) return false;
+        // Platform filter applies only to MP: must intersect
+        const intersects = (it.platforms || []).some((p: string) => (platforms as string[]).includes(p));
+        return intersects;
+      }
+      // type === 'all': include server-side as is; apply filters to MP only
+      if (isSs) return true;
+      // MP item: apply compose + platforms
+      if (compose && !(it.platforms || []).includes('compose-multiplatform')) return false;
+      const intersects = (it.platforms || []).some((p: string) => (platforms as string[]).includes(p));
+      return intersects;
+    });
+  }, [type, platforms, compose]);
+
   return (
     <section data-testid="case-studies-grid" aria-label="Case Studies Grid">
       <h2>Case studies</h2>
       <div role="list" className={styles['masonry-tiles-container']}>
-        {caseStudiesDataRaw.items.map((it) => (
+        {items.map((it) => (
           <div
             key={it.id}
             role="listitem"