From 172a94bd23c9740c870d04d4404d065a477bc307 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:05:42 +0100
Subject: [PATCH 01/23] Add padding bottom to MDX wrapper

---
 src/components/nextra-mdx-wrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/nextra-mdx-wrapper.tsx b/src/components/nextra-mdx-wrapper.tsx
index 4dc9b4fc2f..2614f7167b 100644
--- a/src/components/nextra-mdx-wrapper.tsx
+++ b/src/components/nextra-mdx-wrapper.tsx
@@ -57,7 +57,7 @@ export function NextraMdxWrapper({
   return (
     <div
       className={clsx(
-        "mx-auto flex",
+        "mx-auto flex pb-8 xl:pb-12",
         themeContext.layout !== "raw" && "max-w-[90rem]",
       )}
     >

From 1ff73a1b2b53833804d3bd666186adb494141c77 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:05:51 +0100
Subject: [PATCH 02/23] Add border-top to footer as per design

---
 src/components/footer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index b23a0a6814..bc61380eb9 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -115,7 +115,7 @@ export function Footer() {
     <footer className="relative isolate !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
       <Stripes />
 
-      <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 3xl:border-x 3xl:dark:border-t">
+      <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 xl:border-t 3xl:border-x">
         <div className="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:p-6 2xl:px-10">
           <NextLink href="/" className="nextra-logo flex items-center">
             <GraphQLWordmarkLogo className="h-6" title="GraphQL" />

From f6f30a44366aa524343bed69a41b419c4358570a Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:06:09 +0100
Subject: [PATCH 03/23] Show first page of Best Practices in Learn index

---
 src/components/learn-aggregator/assets/keyboard.svg | 1 +
 src/components/learn-aggregator/learn-pages.tsx     | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/components/learn-aggregator/assets/keyboard.svg

diff --git a/src/components/learn-aggregator/assets/keyboard.svg b/src/components/learn-aggregator/assets/keyboard.svg
new file mode 100644
index 0000000000..54e8029459
--- /dev/null
+++ b/src/components/learn-aggregator/assets/keyboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="138" height="138" fill="none" viewBox="0 0 138 138"><g fill="#83bd02" clip-path="url(#a)"><path d="M137.557 85.156h-6.534v45.867h6.534zM131.023 131.023H6.577v6.534h124.446zM111.378 104.801h-6.577v6.577h13.111V98.267h-6.534zM117.912 117.912h-13.111v6.577h13.111zM104.801 91.733h-6.534v6.534h6.534zM104.801 45.867h-6.534V52.4h6.534zM98.267 104.801H91.69v6.577h6.577zM98.267 52.4H91.69v6.577h6.577zM98.267 39.333H91.69v6.534h6.577zM98.267 117.912H39.29v6.577h58.977zM91.69 91.733h-6.534v6.534h6.534zM91.69 32.756H26.222v6.577H91.69zM85.156 104.801h-6.534v6.577h6.534zM85.156 0h-6.534v13.11h6.534zM78.622 91.733h-6.577v6.534h6.577zM72.045 104.801h-6.534v6.577h6.534zM65.511 91.733h-6.534v6.534h6.534zM91.69 58.977H52.4v6.534h39.29zM58.977 104.801H52.4v6.577h6.577zM52.4 91.733h-6.533v6.534H52.4zM45.867 104.801H39.29v6.577h6.577zM39.29 91.733h-6.534v6.534h6.534zM78.622 13.11h-52.4v6.578h52.4zM32.756 104.801h-6.534v6.577h6.534zM32.756 117.912H19.645v6.577h13.11zM26.222 91.733h-6.577v6.534h6.577zM26.222 19.688h-6.577v13.068h6.577zM19.645 104.801H13.11v6.577h6.534zM131.023 85.156v-6.534H52.4v-13.11h-6.533v13.11H6.577v6.534zM6.577 85.156H0v45.867h6.577z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h137.557v137.557H0z"/></clipPath></defs></svg>
diff --git a/src/components/learn-aggregator/learn-pages.tsx b/src/components/learn-aggregator/learn-pages.tsx
index 36fb291e90..c401d6e446 100644
--- a/src/components/learn-aggregator/learn-pages.tsx
+++ b/src/components/learn-aggregator/learn-pages.tsx
@@ -69,7 +69,12 @@ const _items: Record<
     section: "getting-started",
   },
   // ---
-  "best-practices": null,
+  "best-practices": {
+    description:
+      "Understand the context behind the GraphQL Best Practices lessons.",
+    icon: new URL("./assets/keyboard.svg", import.meta.url).href,
+    section: "best-practices",
+  },
   "thinking-in-graphs": {
     description:
       "Learn how to shift your mindset from RESTful endpoints to graph-based thinking, aligning your schema with business logic and legacy systems.",

From 54d65bf3b3f98bf39d4d00c6d31cab6b62ee926d Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:06:36 +0100
Subject: [PATCH 04/23] Align left sidebar with logos in footer and navbar

---
 src/components/sidebar/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 2db9ecc0b4..9f01cb7605 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -449,7 +449,7 @@ export function Sidebar({
             <div
               className={cn(
                 "overflow-y-auto",
-                "grow p-4 md:h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]",
+                "grow p-4 md:h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] xl:pl-0",
                 showSidebar ? "nextra-scrollbar" : "no-scrollbar",
               )}
               ref={sidebarRef}
@@ -512,9 +512,7 @@ export function SidebarFooter({
   return (
     <div
       className={cn(
-        "nextra-sidebar-footer sticky bottom-0",
-        "flex items-center gap-2 py-4",
-        "mx-3 px-1", // to hide focused sidebar links
+        "nextra-sidebar-footer sticky bottom-0 mx-3 flex items-center gap-2 px-1 py-4 xl:-ml-1 xl:mr-0 xl:px-0",
         showSidebar
           ? hasI18n && "justify-end"
           : "flex-col flex-wrap justify-center py-4",

From a4f579d5552e079e1a7bbeb17ac114080565920c Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:20:51 +0100
Subject: [PATCH 05/23] Shorten the h1

---
 src/pages/learn/index.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/learn/index.mdx b/src/pages/learn/index.mdx
index b2187f13d2..ceeeb3c341 100644
--- a/src/pages/learn/index.mdx
+++ b/src/pages/learn/index.mdx
@@ -15,7 +15,7 @@ import { LookingForMore } from "../../components/learn-aggregator/looking-for-mo
 <NavbarFixed />
 <TocHero
   className="mb-4 lg:mb-8"
-  heading="Start learning GraphQL"
+  heading="Learn GraphQL"
   text={
     <>
     Get hands-on with the fundamentals of GraphQL. Start with the basics and see how it compares to other technologies.

From 3e597abd4bc604be4a8ec1e90f77867137fef335 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:31:59 +0100
Subject: [PATCH 06/23] Align border with end of stripes

---
 .../learn-aggregator/learn-hero-stripes.tsx   | 28 +++++++++++++++++++
 .../{index.tsx => teaser-section.tsx}         | 27 ------------------
 src/components/toc-hero/toc-hero-contents.tsx |  2 +-
 src/pages/learn/index.mdx                     |  5 ++--
 4 files changed, 32 insertions(+), 30 deletions(-)
 create mode 100644 src/components/learn-aggregator/learn-hero-stripes.tsx
 rename src/components/learn-aggregator/{index.tsx => teaser-section.tsx} (80%)

diff --git a/src/components/learn-aggregator/learn-hero-stripes.tsx b/src/components/learn-aggregator/learn-hero-stripes.tsx
new file mode 100644
index 0000000000..3537fb157b
--- /dev/null
+++ b/src/components/learn-aggregator/learn-hero-stripes.tsx
@@ -0,0 +1,28 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+import blurBean from "./learn-blur-bean.webp"
+
+export function LearnHeroStripes() {
+  return (
+    <div
+      role="presentation"
+      // eslint-disable-next-line tailwindcss/no-contradicting-classname
+      className="pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(var(--color-neu-0))] dark:[--end-2:hsl(var(--color-pri-base)/.1)] dark:[--start-1:hsl(var(--color-neu-100)/.2)] dark:[--start-2:hsl(var(--color-sec-light)/.1)] sm:h-[360px] lg:h-[calc(100%-163px)]"
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        maskSize: "2200px",
+        WebkitMaskSize: "2200px",
+        maskPosition: "50% 60%",
+        WebkitMaskPosition: "50% 60%",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]"
+        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_-80%,var(--end-2)_102%)]"
+      />
+    </div>
+  )
+}
diff --git a/src/components/learn-aggregator/index.tsx b/src/components/learn-aggregator/teaser-section.tsx
similarity index 80%
rename from src/components/learn-aggregator/index.tsx
rename to src/components/learn-aggregator/teaser-section.tsx
index e2f6417f2b..7add47a590 100644
--- a/src/components/learn-aggregator/index.tsx
+++ b/src/components/learn-aggregator/teaser-section.tsx
@@ -1,12 +1,10 @@
 import { ReactNode, useState } from "react"
 import { clsx } from "clsx"
 
-import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 import { Eyebrow } from "@/_design-system/eyebrow"
 
-import blurBean from "./learn-blur-bean.webp"
 import { Button } from "@/app/conf/_design-system/button"
 
 export interface TeaserSectionProps
@@ -156,28 +154,3 @@ function TeaserSectionListItem({
     </li>
   )
 }
-
-export function LearnHeroStripes() {
-  return (
-    <div
-      role="presentation"
-      // eslint-disable-next-line tailwindcss/no-contradicting-classname
-      className="pointer-events-none absolute inset-0 h-[300px] bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(var(--color-neu-0))] dark:[--end-2:hsl(var(--color-pri-base)/.1)] dark:[--start-1:hsl(var(--color-neu-100)/.2)] dark:[--start-2:hsl(var(--color-sec-light)/.1)] sm:h-[360px] lg:h-[480px]"
-      style={{
-        maskImage: `url(${blurBean.src})`,
-        WebkitMaskImage: `url(${blurBean.src})`,
-        maskSize: "2200px",
-        WebkitMaskSize: "2200px",
-        maskPosition: "50% 60%",
-        WebkitMaskPosition: "50% 60%",
-        maskRepeat: "no-repeat",
-        WebkitMaskRepeat: "no-repeat",
-      }}
-    >
-      <StripesDecoration
-        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]"
-        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_-80%,var(--end-2)_102%)]"
-      />
-    </div>
-  )
-}
diff --git a/src/components/toc-hero/toc-hero-contents.tsx b/src/components/toc-hero/toc-hero-contents.tsx
index f621002191..0047ea123b 100644
--- a/src/components/toc-hero/toc-hero-contents.tsx
+++ b/src/components/toc-hero/toc-hero-contents.tsx
@@ -16,7 +16,7 @@ export function TocHeroContents({
     <div
       {...rest}
       className={clsx(
-        "mt-2 w-full border border-neu-300 bg-neu-0 dark:border-neu-100 lg:mt-4",
+        "mt-2 w-full border border-neu-300 bg-neu-0/[.64] backdrop-blur-[6px] dark:border-neu-100 lg:mt-4",
         className,
       )}
     >
diff --git a/src/pages/learn/index.mdx b/src/pages/learn/index.mdx
index ceeeb3c341..c26ab6d58e 100644
--- a/src/pages/learn/index.mdx
+++ b/src/pages/learn/index.mdx
@@ -5,8 +5,9 @@ title: Learn
 import { Button } from '@/app/conf/_design-system/button';
 
 import { NavbarFixed } from '../../components/navbar/navbar-fixed'
-import { TocHero, TocHeroContents } from '../../components/toc-hero';
-import { TeaserSection, LearnHeroStripes } from '../../components/learn-aggregator'
+import { TocHero, TocHeroContents } from '../../components/toc-hero'
+import { TeaserSection } from '../../components/learn-aggregator/teaser-section'
+import { LearnHeroStripes } from '../../components/learn-aggregator/learn-hero-stripes'
 import { pagesBySection } from '../../components/learn-aggregator/learn-pages'
 import { CommonQuestionsSection } from '../../components/learn-aggregator/common-questions'
 import { TrainingCoursesSection } from '../../components/learn-aggregator/training-courses'

From 27bf32d14c5780bfa078e6d4baa996bdc2972e8e Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:42:23 +0100
Subject: [PATCH 07/23] Remove backdrop blur from TocHeroContents

---
 src/components/toc-hero/toc-hero-contents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/toc-hero/toc-hero-contents.tsx b/src/components/toc-hero/toc-hero-contents.tsx
index 0047ea123b..84f060efb3 100644
--- a/src/components/toc-hero/toc-hero-contents.tsx
+++ b/src/components/toc-hero/toc-hero-contents.tsx
@@ -16,7 +16,7 @@ export function TocHeroContents({
     <div
       {...rest}
       className={clsx(
-        "mt-2 w-full border border-neu-300 bg-neu-0/[.64] backdrop-blur-[6px] dark:border-neu-100 lg:mt-4",
+        "mt-2 w-full border border-neu-300 bg-neu-0/[.64] dark:border-neu-100 lg:mt-4",
         className,
       )}
     >

From 406a1b51fab4887082314801d435eca441da0762 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:42:30 +0100
Subject: [PATCH 08/23] Update to new gradient colors

---
 src/components/learn-aggregator/learn-hero-stripes.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/learn-aggregator/learn-hero-stripes.tsx b/src/components/learn-aggregator/learn-hero-stripes.tsx
index 3537fb157b..29d2a4e37f 100644
--- a/src/components/learn-aggregator/learn-hero-stripes.tsx
+++ b/src/components/learn-aggregator/learn-hero-stripes.tsx
@@ -7,7 +7,7 @@ export function LearnHeroStripes() {
     <div
       role="presentation"
       // eslint-disable-next-line tailwindcss/no-contradicting-classname
-      className="pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(var(--color-neu-0))] dark:[--end-2:hsl(var(--color-pri-base)/.1)] dark:[--start-1:hsl(var(--color-neu-100)/.2)] dark:[--start-2:hsl(var(--color-sec-light)/.1)] sm:h-[360px] lg:h-[calc(100%-163px)]"
+      className="pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(75,15%,5%)] dark:[--end-2:hsl(319,100%,10%)] dark:[--start-1:hsl(319,100%,14%)] dark:[--start-2:hsl(319,100%,30%)] sm:h-[360px] lg:h-[calc(100%-163px)]"
       style={{
         maskImage: `url(${blurBean.src})`,
         WebkitMaskImage: `url(${blurBean.src})`,

From 446606b312029aec548df0fd07dbf6e10008a1eb Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 21:42:42 +0100
Subject: [PATCH 09/23] Rename Best Practices article to Introduction

---
 src/pages/learn/_meta.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/learn/_meta.ts b/src/pages/learn/_meta.ts
index 29048f6fac..efcc5f53f6 100644
--- a/src/pages/learn/_meta.ts
+++ b/src/pages/learn/_meta.ts
@@ -25,7 +25,7 @@ export default {
     type: "separator",
     title: "Best Practices",
   },
-  "best-practices": "",
+  "best-practices": "Introduction",
   "thinking-in-graphs": "",
   "serving-over-http": "",
   "file-uploads": "",

From be4d1a66b03980f03c19190cf73d07143f7375db Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 22:34:15 +0100
Subject: [PATCH 10/23] Extract NavLinks from Nextra

---
 src/components/nav-links.tsx          | 74 +++++++++++++++++++++++++++
 src/components/nextra-mdx-wrapper.tsx |  8 +--
 2 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 src/components/nav-links.tsx

diff --git a/src/components/nav-links.tsx b/src/components/nav-links.tsx
new file mode 100644
index 0000000000..832ec6ce9d
--- /dev/null
+++ b/src/components/nav-links.tsx
@@ -0,0 +1,74 @@
+import cn from "clsx"
+// eslint-disable-next-line no-restricted-imports -- since we don't need newWindow prop
+import NextLink from "next/link"
+import { ArrowRightIcon } from "nextra/icons"
+import type { Item } from "nextra/normalize-pages"
+import type { ReactElement } from "react"
+import { useThemeConfig } from "nextra-theme-docs"
+import type { DocsThemeConfig } from "nextra-theme-docs"
+
+interface NavLinkProps {
+  currentIndex: number
+  flatDocsDirectories: Item[]
+}
+
+const classes = {
+  link: cn(
+    "nextra-focus _text-gray-600 dark:_text-gray-400",
+    "hover:_text-gray-800 dark:hover:_text-gray-200",
+    "contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100",
+    "_flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg",
+  ),
+  icon: cn("_inline _h-5 _shrink-0"),
+}
+
+export function NavLinks({
+  flatDocsDirectories,
+  currentIndex,
+}: NavLinkProps): ReactElement | null {
+  const themeConfig = useThemeConfig()
+  const nav = themeConfig.navigation
+  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
+    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
+  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
+  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
+
+  if (prev && !prev.isUnderCurrentDocsTree) prev = false
+  if (next && !next.isUnderCurrentDocsTree) next = false
+
+  if (!prev && !next) return null
+
+  return (
+    <div
+      className={cn(
+        "_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800",
+        "contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400",
+        "print:_hidden",
+      )}
+    >
+      {prev && (
+        <NextLink
+          href={prev.route}
+          title={prev.title}
+          className={cn(classes.link, "ltr:_pr-4 rtl:_pl-4")}
+        >
+          <ArrowRightIcon className={cn(classes.icon, "ltr:_rotate-180")} />
+          {prev.title}
+        </NextLink>
+      )}
+      {next && (
+        <NextLink
+          href={next.route}
+          title={next.title}
+          className={cn(
+            classes.link,
+            "ltr:_ml-auto ltr:_pl-4 ltr:_text-right rtl:_mr-auto rtl:_pr-4 rtl:_text-left",
+          )}
+        >
+          {next.title}
+          <ArrowRightIcon className={cn(classes.icon, "rtl:_rotate-180")} />
+        </NextLink>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/nextra-mdx-wrapper.tsx b/src/components/nextra-mdx-wrapper.tsx
index 2614f7167b..48eebe3bd7 100644
--- a/src/components/nextra-mdx-wrapper.tsx
+++ b/src/components/nextra-mdx-wrapper.tsx
@@ -1,14 +1,10 @@
 import type { ReactElement, ReactNode } from "react"
 import { useMounted } from "nextra/hooks"
 import { Heading } from "nextra"
-import {
-  useConfig,
-  useThemeConfig,
-  SkipNavContent,
-  NavLinks,
-} from "nextra-theme-docs"
+import { useConfig, useThemeConfig, SkipNavContent } from "nextra-theme-docs"
 import { clsx } from "clsx"
 
+import { NavLinks } from "./nav-links.tsx"
 import { Sidebar } from "./sidebar"
 import { renderComponent } from "./utils/render-component"
 import { TableOfContents } from "./table-of-contents"

From 642984c23cb4bdf6f2ec5e0107f499c5687aee45 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 23:00:50 +0100
Subject: [PATCH 11/23] Add --color-pri-lightest

---
 src/app/colors.css | 1 +
 tailwind.config.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/app/colors.css b/src/app/colors.css
index 95ec008b24..e955c4c2dd 100644
--- a/src/app/colors.css
+++ b/src/app/colors.css
@@ -1,5 +1,6 @@
 :root,
 .light {
+  --color-pri-lightest: 319 100% 96%;
   --color-pri-lighter: 319 100% 90%;
   --color-pri-light: 318 100% 80%;
   --color-pri-base: 319 100% 44.1%;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2b9620c9ba..16649f5949 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -38,6 +38,7 @@ const config: Config = {
         black: "#1b1b1b",
 
         // #region new design system colors
+        "pri-lightest": "hsl(var(--color-pri-lightest) / <alpha-value>)",
         "pri-lighter": "hsl(var(--color-pri-lighter) / <alpha-value>)",
         "pri-light": "hsl(var(--color-pri-light) / <alpha-value>)",
         "pri-base": "hsl(var(--color-pri-base) / <alpha-value>)",

From cde2275c7d3bca78162dddc19684e14afcea7ab9 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 23:11:25 +0100
Subject: [PATCH 12/23] Implement new NavLinks cards

---
 src/components/nav-links.tsx              |  74 --------------
 src/components/nav-links/blur-corner.webp | Bin 0 -> 3246 bytes
 src/components/nav-links/index.tsx        | 117 ++++++++++++++++++++++
 src/components/nextra-mdx-wrapper.tsx     |   2 +-
 4 files changed, 118 insertions(+), 75 deletions(-)
 delete mode 100644 src/components/nav-links.tsx
 create mode 100644 src/components/nav-links/blur-corner.webp
 create mode 100644 src/components/nav-links/index.tsx

diff --git a/src/components/nav-links.tsx b/src/components/nav-links.tsx
deleted file mode 100644
index 832ec6ce9d..0000000000
--- a/src/components/nav-links.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import cn from "clsx"
-// eslint-disable-next-line no-restricted-imports -- since we don't need newWindow prop
-import NextLink from "next/link"
-import { ArrowRightIcon } from "nextra/icons"
-import type { Item } from "nextra/normalize-pages"
-import type { ReactElement } from "react"
-import { useThemeConfig } from "nextra-theme-docs"
-import type { DocsThemeConfig } from "nextra-theme-docs"
-
-interface NavLinkProps {
-  currentIndex: number
-  flatDocsDirectories: Item[]
-}
-
-const classes = {
-  link: cn(
-    "nextra-focus _text-gray-600 dark:_text-gray-400",
-    "hover:_text-gray-800 dark:hover:_text-gray-200",
-    "contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100",
-    "_flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg",
-  ),
-  icon: cn("_inline _h-5 _shrink-0"),
-}
-
-export function NavLinks({
-  flatDocsDirectories,
-  currentIndex,
-}: NavLinkProps): ReactElement | null {
-  const themeConfig = useThemeConfig()
-  const nav = themeConfig.navigation
-  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
-    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
-  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
-  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
-
-  if (prev && !prev.isUnderCurrentDocsTree) prev = false
-  if (next && !next.isUnderCurrentDocsTree) next = false
-
-  if (!prev && !next) return null
-
-  return (
-    <div
-      className={cn(
-        "_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800",
-        "contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400",
-        "print:_hidden",
-      )}
-    >
-      {prev && (
-        <NextLink
-          href={prev.route}
-          title={prev.title}
-          className={cn(classes.link, "ltr:_pr-4 rtl:_pl-4")}
-        >
-          <ArrowRightIcon className={cn(classes.icon, "ltr:_rotate-180")} />
-          {prev.title}
-        </NextLink>
-      )}
-      {next && (
-        <NextLink
-          href={next.route}
-          title={next.title}
-          className={cn(
-            classes.link,
-            "ltr:_ml-auto ltr:_pl-4 ltr:_text-right rtl:_mr-auto rtl:_pr-4 rtl:_text-left",
-          )}
-        >
-          {next.title}
-          <ArrowRightIcon className={cn(classes.icon, "rtl:_rotate-180")} />
-        </NextLink>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/nav-links/blur-corner.webp b/src/components/nav-links/blur-corner.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7d5e8947ba9d3055515c623b1619da503be0dfba
GIT binary patch
literal 3246
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

literal 0
HcmV?d00001

diff --git a/src/components/nav-links/index.tsx b/src/components/nav-links/index.tsx
new file mode 100644
index 0000000000..ce868e58b7
--- /dev/null
+++ b/src/components/nav-links/index.tsx
@@ -0,0 +1,117 @@
+import NextLink from "next/link"
+import type { Item } from "nextra/normalize-pages"
+import type { ReactElement } from "react"
+import { useThemeConfig } from "nextra-theme-docs"
+import type { DocsThemeConfig } from "nextra-theme-docs"
+
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { learnPages } from "@/components/learn-aggregator/learn-pages"
+
+import blurCorner from "./blur-corner.webp"
+import clsx from "clsx"
+
+interface NavLinkProps {
+  currentIndex: number
+  flatDocsDirectories: Item[]
+}
+
+export function NavLinks({
+  flatDocsDirectories,
+  currentIndex,
+}: NavLinkProps): ReactElement | null {
+  const themeConfig = useThemeConfig()
+  const nav = themeConfig.navigation
+  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
+    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
+  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
+  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
+
+  if (prev && !prev.isUnderCurrentDocsTree) prev = false
+  if (next && !next.isUnderCurrentDocsTree) next = false
+
+  if (!prev && !next) return null
+
+  const displayPost = next || prev
+  const isNext = !!next
+
+  if (!displayPost) return null
+
+  const pageKey = displayPost.route.split("/").pop() as keyof typeof learnPages
+  const pageData = learnPages[pageKey]
+  const section = pageData?.section
+
+  return (
+    <div className="gql-container mb-8 print:hidden">
+      <NextLink
+        href={displayPost.route}
+        className="gql-focus-visible relative flex items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50"
+      >
+        <div
+          className={clsx(
+            "pointer-events-none absolute inset-0 left-4 overflow-hidden",
+            section === "getting-started" &&
+              "[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
+            section === "best-practices" &&
+              "[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
+          )}
+          style={{
+            maskImage: `url(${blurCorner.src})`,
+            WebkitMaskImage: `url(${blurCorner.src})`,
+            maskSize: "50% 50%",
+            WebkitMaskSize: "50% 50%",
+            maskPosition: "top right",
+            WebkitMaskPosition: "top right",
+            maskRepeat: "no-repeat",
+            WebkitMaskRepeat: "no-repeat",
+          }}
+        >
+          <StripesDecoration
+            oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
+            stripeWidth="12px"
+          />
+        </div>
+
+        <div className="flex flex-1 flex-col gap-6">
+          <p className="typography-menu text-pri-base dark:text-pri-light">
+            {isNext ? "next lesson" : "previous lesson"}
+          </p>
+
+          <div className="flex flex-col gap-4 text-neu-900">
+            <h2 className="typography-h2">{displayPost.title}</h2>
+            {pageData?.description && (
+              <p className="typography-body-lg max-w-[560px]">
+                {pageData.description}
+              </p>
+            )}
+          </div>
+
+          <div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
+            <span className="typography-button text-neu-0">
+              Go to {isNext ? "next" : "previous"} lesson
+            </span>
+          </div>
+        </div>
+
+        {pageData?.icon && (
+          <div className="relative flex size-[222px] bg-neu-0">
+            <div
+              className={clsx(
+                "shrink-0 items-center justify-center p-12",
+                section === "getting-started" &&
+                  "bg-pri-lightest dark:bg-pri-lighter/5",
+                section === "best-practices" &&
+                  "bg-sec-lighter dark:bg-sec-lighter/10",
+              )}
+            >
+              <img
+                src={pageData.icon}
+                alt=""
+                className="size-full object-contain"
+              />
+            </div>
+          </div>
+        )}
+      </NextLink>
+    </div>
+  )
+}
diff --git a/src/components/nextra-mdx-wrapper.tsx b/src/components/nextra-mdx-wrapper.tsx
index 48eebe3bd7..58d3ebc7c1 100644
--- a/src/components/nextra-mdx-wrapper.tsx
+++ b/src/components/nextra-mdx-wrapper.tsx
@@ -4,7 +4,7 @@ import { Heading } from "nextra"
 import { useConfig, useThemeConfig, SkipNavContent } from "nextra-theme-docs"
 import { clsx } from "clsx"
 
-import { NavLinks } from "./nav-links.tsx"
+import { NavLinks } from "./nav-links"
 import { Sidebar } from "./sidebar"
 import { renderComponent } from "./utils/render-component"
 import { TableOfContents } from "./table-of-contents"

From 9db204b145be5718f2ad06f389d153674208335d Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 2 Dec 2025 23:52:24 +0100
Subject: [PATCH 13/23] Render the LearnNavLinkCard outside

---
 src/components/nav-links/arrow-nav-links.tsx  |  73 +++++++++++
 src/components/nav-links/index.tsx            | 119 +----------------
 .../nav-links/learn-nav-link-card.tsx         | 124 ++++++++++++++++++
 src/components/nextra-mdx-wrapper.tsx         |  59 ++++++---
 src/components/tools-and-libraries.tsx        |   2 +-
 5 files changed, 239 insertions(+), 138 deletions(-)
 create mode 100644 src/components/nav-links/arrow-nav-links.tsx
 create mode 100644 src/components/nav-links/learn-nav-link-card.tsx

diff --git a/src/components/nav-links/arrow-nav-links.tsx b/src/components/nav-links/arrow-nav-links.tsx
new file mode 100644
index 0000000000..cbc818ec40
--- /dev/null
+++ b/src/components/nav-links/arrow-nav-links.tsx
@@ -0,0 +1,73 @@
+import cn from "clsx"
+import NextLink from "next/link"
+import { ArrowRightIcon } from "nextra/icons"
+import type { Item } from "nextra/normalize-pages"
+import type { ReactElement } from "react"
+import { useThemeConfig } from "nextra-theme-docs"
+import type { DocsThemeConfig } from "nextra-theme-docs"
+
+interface NavLinkProps {
+  currentIndex: number
+  flatDocsDirectories: Item[]
+}
+
+const classes = {
+  link: cn(
+    "nextra-focus _text-gray-600 dark:_text-gray-400",
+    "hover:_text-gray-800 dark:hover:_text-gray-200",
+    "contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100",
+    "_flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg",
+  ),
+  icon: cn("_inline _h-5 _shrink-0"),
+}
+
+export function ArrowNavLinks({
+  flatDocsDirectories,
+  currentIndex,
+}: NavLinkProps): ReactElement | null {
+  const themeConfig = useThemeConfig()
+  const nav = themeConfig.navigation
+  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
+    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
+  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
+  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
+
+  if (prev && !prev.isUnderCurrentDocsTree) prev = false
+  if (next && !next.isUnderCurrentDocsTree) next = false
+
+  if (!prev && !next) return null
+
+  return (
+    <div
+      className={cn(
+        "_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800",
+        "contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400",
+        "print:_hidden",
+      )}
+    >
+      {prev && (
+        <NextLink
+          href={prev.route}
+          title={prev.title}
+          className={cn(classes.link, "ltr:_pr-4 rtl:_pl-4")}
+        >
+          <ArrowRightIcon className={cn(classes.icon, "ltr:_rotate-180")} />
+          {prev.title}
+        </NextLink>
+      )}
+      {next && (
+        <NextLink
+          href={next.route}
+          title={next.title}
+          className={cn(
+            classes.link,
+            "ltr:_ml-auto ltr:_pl-4 ltr:_text-right rtl:_mr-auto rtl:_pr-4 rtl:_text-left",
+          )}
+        >
+          {next.title}
+          <ArrowRightIcon className={cn(classes.icon, "rtl:_rotate-180")} />
+        </NextLink>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/nav-links/index.tsx b/src/components/nav-links/index.tsx
index ce868e58b7..517c022dad 100644
--- a/src/components/nav-links/index.tsx
+++ b/src/components/nav-links/index.tsx
@@ -1,117 +1,2 @@
-import NextLink from "next/link"
-import type { Item } from "nextra/normalize-pages"
-import type { ReactElement } from "react"
-import { useThemeConfig } from "nextra-theme-docs"
-import type { DocsThemeConfig } from "nextra-theme-docs"
-
-import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
-import { learnPages } from "@/components/learn-aggregator/learn-pages"
-
-import blurCorner from "./blur-corner.webp"
-import clsx from "clsx"
-
-interface NavLinkProps {
-  currentIndex: number
-  flatDocsDirectories: Item[]
-}
-
-export function NavLinks({
-  flatDocsDirectories,
-  currentIndex,
-}: NavLinkProps): ReactElement | null {
-  const themeConfig = useThemeConfig()
-  const nav = themeConfig.navigation
-  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
-    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
-  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
-  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
-
-  if (prev && !prev.isUnderCurrentDocsTree) prev = false
-  if (next && !next.isUnderCurrentDocsTree) next = false
-
-  if (!prev && !next) return null
-
-  const displayPost = next || prev
-  const isNext = !!next
-
-  if (!displayPost) return null
-
-  const pageKey = displayPost.route.split("/").pop() as keyof typeof learnPages
-  const pageData = learnPages[pageKey]
-  const section = pageData?.section
-
-  return (
-    <div className="gql-container mb-8 print:hidden">
-      <NextLink
-        href={displayPost.route}
-        className="gql-focus-visible relative flex items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50"
-      >
-        <div
-          className={clsx(
-            "pointer-events-none absolute inset-0 left-4 overflow-hidden",
-            section === "getting-started" &&
-              "[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
-            section === "best-practices" &&
-              "[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
-          )}
-          style={{
-            maskImage: `url(${blurCorner.src})`,
-            WebkitMaskImage: `url(${blurCorner.src})`,
-            maskSize: "50% 50%",
-            WebkitMaskSize: "50% 50%",
-            maskPosition: "top right",
-            WebkitMaskPosition: "top right",
-            maskRepeat: "no-repeat",
-            WebkitMaskRepeat: "no-repeat",
-          }}
-        >
-          <StripesDecoration
-            oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
-            stripeWidth="12px"
-          />
-        </div>
-
-        <div className="flex flex-1 flex-col gap-6">
-          <p className="typography-menu text-pri-base dark:text-pri-light">
-            {isNext ? "next lesson" : "previous lesson"}
-          </p>
-
-          <div className="flex flex-col gap-4 text-neu-900">
-            <h2 className="typography-h2">{displayPost.title}</h2>
-            {pageData?.description && (
-              <p className="typography-body-lg max-w-[560px]">
-                {pageData.description}
-              </p>
-            )}
-          </div>
-
-          <div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
-            <span className="typography-button text-neu-0">
-              Go to {isNext ? "next" : "previous"} lesson
-            </span>
-          </div>
-        </div>
-
-        {pageData?.icon && (
-          <div className="relative flex size-[222px] bg-neu-0">
-            <div
-              className={clsx(
-                "shrink-0 items-center justify-center p-12",
-                section === "getting-started" &&
-                  "bg-pri-lightest dark:bg-pri-lighter/5",
-                section === "best-practices" &&
-                  "bg-sec-lighter dark:bg-sec-lighter/10",
-              )}
-            >
-              <img
-                src={pageData.icon}
-                alt=""
-                className="size-full object-contain"
-              />
-            </div>
-          </div>
-        )}
-      </NextLink>
-    </div>
-  )
-}
+export { LearnNavLinkCard } from "./learn-nav-link-card"
+export { ArrowNavLinks } from "./arrow-nav-links"
diff --git a/src/components/nav-links/learn-nav-link-card.tsx b/src/components/nav-links/learn-nav-link-card.tsx
new file mode 100644
index 0000000000..bd6e72de6f
--- /dev/null
+++ b/src/components/nav-links/learn-nav-link-card.tsx
@@ -0,0 +1,124 @@
+import NextLink from "next/link"
+import type { Item } from "nextra/normalize-pages"
+import type { ReactElement } from "react"
+import { useThemeConfig } from "nextra-theme-docs"
+import type { DocsThemeConfig } from "nextra-theme-docs"
+
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { learnPages } from "@/components/learn-aggregator/learn-pages"
+
+import blurCorner from "./blur-corner.webp"
+import clsx from "clsx"
+
+interface LearnNavLinkCardProps {
+  currentIndex: number
+  flatDocsDirectories: Item[]
+  className?: string
+}
+
+export function LearnNavLinkCard({
+  flatDocsDirectories,
+  currentIndex,
+  className,
+}: LearnNavLinkCardProps): ReactElement | null {
+  const themeConfig = useThemeConfig()
+  const nav = themeConfig.navigation
+  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
+    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
+  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
+  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
+
+  if (prev && !prev.isUnderCurrentDocsTree) prev = false
+  if (next && !next.isUnderCurrentDocsTree) next = false
+
+  if (!prev && !next) return null
+
+  const displayPost = next || prev
+  const isNext = !!next
+
+  if (!displayPost) return null
+
+  const pageKey = displayPost.route.split("/").pop() as keyof typeof learnPages
+  const pageData = learnPages[pageKey]
+  const section = pageData?.section
+
+  return (
+    <div
+      className={clsx(
+        "gql-container gql-section bg-neu-0 py-8 lg:py-16 xl:py-20 print:hidden",
+        className,
+      )}
+    >
+      <NextLink
+        href={displayPost.route}
+        className="gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50"
+      >
+        <div
+          className={clsx(
+            "pointer-events-none absolute inset-0 left-4 overflow-hidden",
+            section === "getting-started" &&
+              "[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
+            section === "best-practices" &&
+              "[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
+          )}
+          style={{
+            maskImage: `url(${blurCorner.src})`,
+            WebkitMaskImage: `url(${blurCorner.src})`,
+            maskSize: "50% 50%",
+            WebkitMaskSize: "50% 50%",
+            maskPosition: "top right",
+            WebkitMaskPosition: "top right",
+            maskRepeat: "no-repeat",
+            WebkitMaskRepeat: "no-repeat",
+          }}
+        >
+          <StripesDecoration
+            oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
+            stripeWidth="12px"
+          />
+        </div>
+
+        <div className="flex flex-1 flex-col gap-6">
+          <p className="typography-menu text-pri-base dark:text-pri-light">
+            {isNext ? "next lesson" : "previous lesson"}
+          </p>
+
+          <div className="flex flex-col gap-4 text-neu-900">
+            <h2 className="typography-h2">{displayPost.title}</h2>
+            {pageData?.description && (
+              <p className="typography-body-lg max-w-[560px]">
+                {pageData.description}
+              </p>
+            )}
+          </div>
+
+          <div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
+            <span className="typography-button text-neu-0">
+              Go to {isNext ? "next" : "previous"} lesson
+            </span>
+          </div>
+        </div>
+
+        {pageData?.icon && (
+          <div className="relative flex size-[222px] bg-neu-0">
+            <div
+              className={clsx(
+                "shrink-0 items-center justify-center p-12",
+                section === "getting-started" &&
+                  "bg-pri-lightest dark:bg-pri-lighter/5",
+                section === "best-practices" &&
+                  "bg-sec-lighter dark:bg-sec-lighter/10",
+              )}
+            >
+              <img
+                src={pageData.icon}
+                alt=""
+                className="size-full object-contain"
+              />
+            </div>
+          </div>
+        )}
+      </NextLink>
+    </div>
+  )
+}
diff --git a/src/components/nextra-mdx-wrapper.tsx b/src/components/nextra-mdx-wrapper.tsx
index 58d3ebc7c1..8b44f53f6a 100644
--- a/src/components/nextra-mdx-wrapper.tsx
+++ b/src/components/nextra-mdx-wrapper.tsx
@@ -4,7 +4,7 @@ import { Heading } from "nextra"
 import { useConfig, useThemeConfig, SkipNavContent } from "nextra-theme-docs"
 import { clsx } from "clsx"
 
-import { NavLinks } from "./nav-links"
+import { LearnNavLinkCard, ArrowNavLinks } from "./nav-links"
 import { Sidebar } from "./sidebar"
 import { renderComponent } from "./utils/render-component"
 import { TableOfContents } from "./table-of-contents"
@@ -50,28 +50,47 @@ export function NextraMdxWrapper({
       </nav>
     )
 
+  const isLearnPage = config.filePath.includes("/learn/")
+  const showLearnNavLinkCard =
+    activeType !== "page" && themeContext.pagination && isLearnPage
+
   return (
-    <div
-      className={clsx(
-        "mx-auto flex pb-8 xl:pb-12",
-        themeContext.layout !== "raw" && "max-w-[90rem]",
+    <>
+      <div
+        className={clsx(
+          "mx-auto flex pb-8",
+          themeContext.layout !== "raw" && "max-w-[90rem]",
+          !showLearnNavLinkCard && "xl:pb-12",
+        )}
+      >
+        <Sidebar
+          docsDirectories={docsDirectories}
+          fullDirectories={directories}
+          toc={toc}
+          asPopover={config.hideSidebar}
+          includePlaceholder={themeContext.layout === "default"}
+        />
+        {tocEl}
+        <SkipNavContent />
+        <Body isLearnPage={isLearnPage}>{children}</Body>
+      </div>
+      {showLearnNavLinkCard && (
+        <LearnNavLinkCard
+          flatDocsDirectories={config.normalizePagesResult.flatDocsDirectories}
+          currentIndex={config.normalizePagesResult.activeIndex}
+        />
       )}
-    >
-      <Sidebar
-        docsDirectories={docsDirectories}
-        fullDirectories={directories}
-        toc={toc}
-        asPopover={config.hideSidebar}
-        includePlaceholder={themeContext.layout === "default"}
-      />
-      {tocEl}
-      <SkipNavContent />
-      <Body>{children}</Body>
-    </div>
+    </>
   )
 }
 
-function Body({ children }: { children: ReactNode }): ReactElement {
+function Body({
+  children,
+  isLearnPage,
+}: {
+  children: ReactNode
+  isLearnPage: boolean
+}): ReactElement {
   const config = useConfig()
   const themeConfig = useThemeConfig()
   const mounted = useMounted()
@@ -108,8 +127,8 @@ function Body({ children }: { children: ReactNode }): ReactElement {
       {children}
       {gitTimestampEl}
       {renderComponent(themeContext.bottomContent)}
-      {activeType !== "page" && themeContext.pagination && (
-        <NavLinks
+      {activeType !== "page" && themeContext.pagination && !isLearnPage && (
+        <ArrowNavLinks
           flatDocsDirectories={flatDocsDirectories}
           currentIndex={activeIndex}
         />
diff --git a/src/components/tools-and-libraries.tsx b/src/components/tools-and-libraries.tsx
index 32c617f478..623a3630ef 100644
--- a/src/components/tools-and-libraries.tsx
+++ b/src/components/tools-and-libraries.tsx
@@ -346,7 +346,7 @@ function ToolsAndLibrariesSidebar({
       <SidebarFooter
         setSidebar={setSidebarShown}
         showSidebar={sidebarShown}
-        className="mt-4 max-md:hidden"
+        className="mt-4 !pl-4 max-md:hidden"
         hiddenOnMobile={false}
       />
     </div>

From 16ea30cb237db8213fc15d5d359761a3e03e958f Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:00:02 +0100
Subject: [PATCH 14/23] Render NavLinkCard inline

---
 .../nav-links/learn-nav-link-card.tsx         | 126 +++++++++---------
 src/components/nextra-mdx-wrapper.tsx         |  77 +++++------
 src/components/sidebar/index.tsx              |   2 +-
 3 files changed, 96 insertions(+), 109 deletions(-)

diff --git a/src/components/nav-links/learn-nav-link-card.tsx b/src/components/nav-links/learn-nav-link-card.tsx
index bd6e72de6f..d458a98937 100644
--- a/src/components/nav-links/learn-nav-link-card.tsx
+++ b/src/components/nav-links/learn-nav-link-card.tsx
@@ -43,82 +43,78 @@ export function LearnNavLinkCard({
   const section = pageData?.section
 
   return (
-    <div
+    <NextLink
+      href={displayPost.route}
       className={clsx(
-        "gql-container gql-section bg-neu-0 py-8 lg:py-16 xl:py-20 print:hidden",
+        "gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50",
         className,
       )}
     >
-      <NextLink
-        href={displayPost.route}
-        className="gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50"
+      <div
+        className={clsx(
+          "pointer-events-none absolute inset-0 left-4 overflow-hidden",
+          section === "getting-started" &&
+            "[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
+          section === "best-practices" &&
+            "[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
+        )}
+        style={{
+          maskImage: `url(${blurCorner.src})`,
+          WebkitMaskImage: `url(${blurCorner.src})`,
+          maskSize: "50% 50%",
+          WebkitMaskSize: "50% 50%",
+          maskPosition: "top right",
+          WebkitMaskPosition: "top right",
+          maskRepeat: "no-repeat",
+          WebkitMaskRepeat: "no-repeat",
+        }}
       >
-        <div
-          className={clsx(
-            "pointer-events-none absolute inset-0 left-4 overflow-hidden",
-            section === "getting-started" &&
-              "[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
-            section === "best-practices" &&
-              "[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
+        <StripesDecoration
+          oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
+          stripeWidth="12px"
+        />
+      </div>
+
+      <div className="flex flex-1 flex-col gap-4">
+        <p className="typography-menu text-pri-base dark:text-pri-light">
+          {isNext ? "next lesson" : "previous lesson"}
+        </p>
+
+        <div className="flex flex-col gap-4 text-neu-900">
+          <h2 className="typography-h2">{displayPost.title}</h2>
+          {pageData?.description && (
+            <p className="typography-body-md max-w-[560px]">
+              {pageData.description}
+            </p>
           )}
-          style={{
-            maskImage: `url(${blurCorner.src})`,
-            WebkitMaskImage: `url(${blurCorner.src})`,
-            maskSize: "50% 50%",
-            WebkitMaskSize: "50% 50%",
-            maskPosition: "top right",
-            WebkitMaskPosition: "top right",
-            maskRepeat: "no-repeat",
-            WebkitMaskRepeat: "no-repeat",
-          }}
-        >
-          <StripesDecoration
-            oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
-            stripeWidth="12px"
-          />
         </div>
 
-        <div className="flex flex-1 flex-col gap-6">
-          <p className="typography-menu text-pri-base dark:text-pri-light">
-            {isNext ? "next lesson" : "previous lesson"}
-          </p>
+        <div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
+          <span className="typography-button text-neu-0">
+            Go to {isNext ? "next" : "previous"} lesson
+          </span>
+        </div>
+      </div>
 
-          <div className="flex flex-col gap-4 text-neu-900">
-            <h2 className="typography-h2">{displayPost.title}</h2>
-            {pageData?.description && (
-              <p className="typography-body-lg max-w-[560px]">
-                {pageData.description}
-              </p>
+      {pageData?.icon && (
+        <div className="relative flex size-[222px] bg-neu-0">
+          <div
+            className={clsx(
+              "shrink-0 items-center justify-center p-12",
+              section === "getting-started" &&
+                "bg-pri-lightest dark:bg-pri-lighter/5",
+              section === "best-practices" &&
+                "bg-sec-lighter dark:bg-sec-lighter/10",
             )}
-          </div>
-
-          <div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
-            <span className="typography-button text-neu-0">
-              Go to {isNext ? "next" : "previous"} lesson
-            </span>
+          >
+            <img
+              src={pageData.icon}
+              alt=""
+              className="size-full object-contain"
+            />
           </div>
         </div>
-
-        {pageData?.icon && (
-          <div className="relative flex size-[222px] bg-neu-0">
-            <div
-              className={clsx(
-                "shrink-0 items-center justify-center p-12",
-                section === "getting-started" &&
-                  "bg-pri-lightest dark:bg-pri-lighter/5",
-                section === "best-practices" &&
-                  "bg-sec-lighter dark:bg-sec-lighter/10",
-              )}
-            >
-              <img
-                src={pageData.icon}
-                alt=""
-                className="size-full object-contain"
-              />
-            </div>
-          </div>
-        )}
-      </NextLink>
-    </div>
+      )}
+    </NextLink>
   )
 }
diff --git a/src/components/nextra-mdx-wrapper.tsx b/src/components/nextra-mdx-wrapper.tsx
index 8b44f53f6a..1b88021398 100644
--- a/src/components/nextra-mdx-wrapper.tsx
+++ b/src/components/nextra-mdx-wrapper.tsx
@@ -50,47 +50,28 @@ export function NextraMdxWrapper({
       </nav>
     )
 
-  const isLearnPage = config.filePath.includes("/learn/")
-  const showLearnNavLinkCard =
-    activeType !== "page" && themeContext.pagination && isLearnPage
-
   return (
-    <>
-      <div
-        className={clsx(
-          "mx-auto flex pb-8",
-          themeContext.layout !== "raw" && "max-w-[90rem]",
-          !showLearnNavLinkCard && "xl:pb-12",
-        )}
-      >
-        <Sidebar
-          docsDirectories={docsDirectories}
-          fullDirectories={directories}
-          toc={toc}
-          asPopover={config.hideSidebar}
-          includePlaceholder={themeContext.layout === "default"}
-        />
-        {tocEl}
-        <SkipNavContent />
-        <Body isLearnPage={isLearnPage}>{children}</Body>
-      </div>
-      {showLearnNavLinkCard && (
-        <LearnNavLinkCard
-          flatDocsDirectories={config.normalizePagesResult.flatDocsDirectories}
-          currentIndex={config.normalizePagesResult.activeIndex}
-        />
+    <div
+      className={clsx(
+        "mx-auto flex pb-8 xl:pb-12",
+        themeContext.layout !== "raw" && "max-w-[90rem]",
       )}
-    </>
+    >
+      <Sidebar
+        docsDirectories={docsDirectories}
+        fullDirectories={directories}
+        toc={toc}
+        asPopover={config.hideSidebar}
+        includePlaceholder={themeContext.layout === "default"}
+      />
+      {tocEl}
+      <SkipNavContent />
+      <Body>{children}</Body>
+    </div>
   )
 }
 
-function Body({
-  children,
-  isLearnPage,
-}: {
-  children: ReactNode
-  isLearnPage: boolean
-}): ReactElement {
+function Body({ children }: { children: ReactNode }): ReactElement {
   const config = useConfig()
   const themeConfig = useThemeConfig()
   const mounted = useMounted()
@@ -121,18 +102,27 @@ function Body({
       <div className="mt-16" />
     )
 
+  const isLearnPage = config.filePath.includes("/learn/")
+
   const content = (
     <>
       {renderComponent(themeContext.topContent)}
       {children}
       {gitTimestampEl}
       {renderComponent(themeContext.bottomContent)}
-      {activeType !== "page" && themeContext.pagination && !isLearnPage && (
-        <ArrowNavLinks
-          flatDocsDirectories={flatDocsDirectories}
-          currentIndex={activeIndex}
-        />
-      )}
+      {activeType !== "page" &&
+        themeContext.pagination &&
+        (isLearnPage ? (
+          <LearnNavLinkCard
+            flatDocsDirectories={flatDocsDirectories}
+            currentIndex={activeIndex}
+          />
+        ) : (
+          <ArrowNavLinks
+            flatDocsDirectories={flatDocsDirectories}
+            currentIndex={activeIndex}
+          />
+        ))}
     </>
   )
 
@@ -159,7 +149,8 @@ function Body({
     <article
       className={clsx(
         classes.main,
-        "nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+        "nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+        isLearnPage ? "pb-4" : "pb-8",
         themeContext.typesetting === "article" &&
           "nextra-body-typesetting-article",
       )}
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 9f01cb7605..bd126b6d5e 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -512,7 +512,7 @@ export function SidebarFooter({
   return (
     <div
       className={cn(
-        "nextra-sidebar-footer sticky bottom-0 mx-3 flex items-center gap-2 px-1 py-4 xl:-ml-1 xl:mr-0 xl:px-0",
+        "nextra-sidebar-footer sticky bottom-0 mx-3 flex items-center gap-2 px-1 py-4 xl:ml-0.5 xl:mr-0 xl:px-0",
         showSidebar
           ? hasI18n && "justify-end"
           : "flex-col flex-wrap justify-center py-4",

From cf429d5212f3267c6cadc0423b68819ed196a630 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:19:53 +0100
Subject: [PATCH 15/23] Unify layer

---
 src/components/nav-links/learn-nav-link-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/nav-links/learn-nav-link-card.tsx b/src/components/nav-links/learn-nav-link-card.tsx
index d458a98937..99d4ba366f 100644
--- a/src/components/nav-links/learn-nav-link-card.tsx
+++ b/src/components/nav-links/learn-nav-link-card.tsx
@@ -97,7 +97,7 @@ export function LearnNavLinkCard({
       </div>
 
       {pageData?.icon && (
-        <div className="relative flex size-[222px] bg-neu-0">
+        <div className="relative flex size-[222px] bg-neu-0/[.64] backdrop-blur-[6px]">
           <div
             className={clsx(
               "shrink-0 items-center justify-center p-12",

From b0d7f8fda4b76940d11058ccfaa36fceeffc060e Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:20:07 +0100
Subject: [PATCH 16/23] Update styles of old arrow navlinks

---
 src/components/nav-links/arrow-nav-links.tsx | 42 +++++++-------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/components/nav-links/arrow-nav-links.tsx b/src/components/nav-links/arrow-nav-links.tsx
index cbc818ec40..a3f94e4173 100644
--- a/src/components/nav-links/arrow-nav-links.tsx
+++ b/src/components/nav-links/arrow-nav-links.tsx
@@ -1,26 +1,17 @@
-import cn from "clsx"
+// eslint-disable-next-line no-restricted-imports -- since we don't need newWindow prop
 import NextLink from "next/link"
-import { ArrowRightIcon } from "nextra/icons"
 import type { Item } from "nextra/normalize-pages"
 import type { ReactElement } from "react"
 import { useThemeConfig } from "nextra-theme-docs"
 import type { DocsThemeConfig } from "nextra-theme-docs"
 
+import { ArrowDown } from "@/app/conf/_design-system/pixelarticons/arrow-down"
+
 interface NavLinkProps {
   currentIndex: number
   flatDocsDirectories: Item[]
 }
 
-const classes = {
-  link: cn(
-    "nextra-focus _text-gray-600 dark:_text-gray-400",
-    "hover:_text-gray-800 dark:hover:_text-gray-200",
-    "contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100",
-    "_flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg",
-  ),
-  icon: cn("_inline _h-5 _shrink-0"),
-}
-
 export function ArrowNavLinks({
   flatDocsDirectories,
   currentIndex,
@@ -38,34 +29,29 @@ export function ArrowNavLinks({
   if (!prev && !next) return null
 
   return (
-    <div
-      className={cn(
-        "_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800",
-        "contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400",
-        "print:_hidden",
-      )}
-    >
+    <div className="mb-8 flex items-center gap-4 border-t border-neu-200 pt-8 print:hidden">
       {prev && (
         <NextLink
           href={prev.route}
           title={prev.title}
-          className={cn(classes.link, "ltr:_pr-4 rtl:_pl-4")}
+          className="gql-focus-visible typography-link flex max-w-[50%] items-center gap-2 border border-neu-200 pr-2 text-left text-base no-underline hover:bg-neu-50 hover:ring hover:ring-neu-100 dark:border-neu-100 dark:hover:bg-neu-50/50 dark:hover:ring-neu-50"
         >
-          <ArrowRightIcon className={cn(classes.icon, "ltr:_rotate-180")} />
-          {prev.title}
+          <span className="border-r p-2">
+            <ArrowDown className="size-8 shrink-0 rotate-90" />
+          </span>
+          <span className="[word-break:break-word]">{prev.title}</span>
         </NextLink>
       )}
       {next && (
         <NextLink
           href={next.route}
           title={next.title}
-          className={cn(
-            classes.link,
-            "ltr:_ml-auto ltr:_pl-4 ltr:_text-right rtl:_mr-auto rtl:_pr-4 rtl:_text-left",
-          )}
+          className="gql-focus-visible typography-link ml-auto flex max-w-[50%] items-center gap-2 border border-neu-200 pl-2 text-left text-base no-underline hover:bg-neu-50 hover:ring hover:ring-neu-100 dark:border-neu-100 dark:hover:bg-neu-50/50 dark:hover:ring-neu-50"
         >
-          {next.title}
-          <ArrowRightIcon className={cn(classes.icon, "rtl:_rotate-180")} />
+          <span className="[word-break:break-word]">{next.title}</span>
+          <span className="border-l border-neu-200 p-2 dark:border-neu-100">
+            <ArrowDown className="size-8 shrink-0 -rotate-90" />
+          </span>
         </NextLink>
       )}
     </div>

From e76eeb6e61eda92b14f35be04b54c1a4078da9b1 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:20:19 +0100
Subject: [PATCH 17/23] Span full width on large screens

---
 src/components/learn-aggregator/teaser-section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/learn-aggregator/teaser-section.tsx b/src/components/learn-aggregator/teaser-section.tsx
index 7add47a590..d29c6fc87a 100644
--- a/src/components/learn-aggregator/teaser-section.tsx
+++ b/src/components/learn-aggregator/teaser-section.tsx
@@ -119,7 +119,7 @@ function TeaserSectionListItem({
     <li className={clsx("flex text-neu-900", className)} {...rest}>
       <a
         href={href}
-        className="gql-focus-visible grid border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"
+        className="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"
       >
         <span
           className={clsx(

From f4be6309ff31c80fd8a7e12f81197305e050c473 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:39:04 +0100
Subject: [PATCH 18/23] update cards to new style

---
 src/components/cards.tsx | 91 ++++++++++++++++++++++++++++------------
 1 file changed, 64 insertions(+), 27 deletions(-)

diff --git a/src/components/cards.tsx b/src/components/cards.tsx
index a04b9c5884..ab177cceac 100644
--- a/src/components/cards.tsx
+++ b/src/components/cards.tsx
@@ -1,45 +1,82 @@
-import { ReactElement } from "react"
-import { Card } from "./card"
 import { clsx } from "clsx"
-import NextLink from "next/link"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { learnPages } from "./learn-aggregator/learn-pages"
 
 export function Cards({
   items,
+  numbered = false,
 }: {
   items: {
-    icon: ReactElement
+    icon?: (({ className }: { className?: string }) => React.ReactNode) | React.ReactNode
     title: string
     description?: string
     link: string
   }[]
+  numbered?: boolean
 }) {
   return (
-    <div className="mt-6 grid grid-cols-2 gap-4">
-      {items.map(({ icon: Icon, title, link, description }) => {
-        const isExternal = link.startsWith("https://")
+    <ul className="grid grid-cols-1 justify-stretch gap-2 pt-6 sm:grid-cols-2 lg:gap-4">
+      {items.map((item, index) => {
+        // Try to get section from learn-pages
+        let section: "getting-started" | "best-practices" | undefined
+
+        const path = item.link.replace(/^\/learn\//, "").replace(/\/$/, "")
+        const learnPage = learnPages[path as keyof typeof learnPages]
+        if (learnPage) {
+          section = learnPage.section
+        }
+
         return (
-          <Card
-            key={title}
-            as={isExternal ? "a" : NextLink}
-            // @ts-expect-error
-            href={link}
-            className={clsx(
-              "flex flex-col items-center",
-              isExternal &&
-                "relative after:absolute after:right-4 after:top-4 after:font-sans after:content-['_↗']",
-            )}
-          >
-            {/* @ts-expect-error */}
-            {typeof Icon === "function" ? <Icon className="h-12" /> : Icon}
-            <b className="mb-2 mt-4 text-center text-lg">{title}</b>
-            <span
-              className={`text-xs md:text-sm text-center${description ? "" : "break-all"}`}
+          <li key={item.title} className="flex text-neu-900">
+            <a
+              href={item.link}
+              className={clsx(
+                "gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'header''desc'] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'header_header''desc_arrow'] lg:[grid-template-columns:1fr_64px]",
+                section === "getting-started" &&
+                  "bg-pri-lighter/10 dark:bg-pri-lighter/5",
+                section === "best-practices" &&
+                  "bg-sec-lighter/10 dark:bg-sec-lighter/5",
+              )}
             >
-              {description ? description : link.replace(/^https?:\/\//, "")}
-            </span>
-          </Card>
+              <span className="flex flex-col gap-1 [grid-area:header]">
+                {numbered && (
+                  <span className="typography-body-sm px-2 pt-2 text-neu-700 max-lg:typography-body-md lg:px-4 lg:pt-4">
+                    Lesson {index + 1}
+                  </span>
+                )}
+                <span
+                  className={clsx(
+                    "typography-h3 flex items-center gap-2 border-neu-200 text-neu-900 dark:border-neu-100",
+                    item.icon ? "border-b" : "pl-2 lg:pl-4",
+                  )}
+                >
+                  {item.icon && (
+                    <span className="flex items-center justify-center border-r border-neu-200 p-2 lg:p-4">
+                      {typeof item.icon === "function" ? <item.icon className="size-8 shrink-0" /> : item.icon}
+                    </span>
+                  )}
+                  {item.title}
+                </span>
+              </span>
+
+              <p className="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">
+                {item.description
+                  ? item.description
+                  : item.link.replace(/^https?:\/\//, "")}
+              </p>
+
+              <span
+                className={clsx(
+                  "hidden items-center justify-center place-self-end border-l border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex",
+                  item.icon ? "h-full" : "border-t",
+                )}
+              >
+                <ArrowDownIcon className="size-8 shrink-0 -rotate-90" />
+              </span>
+            </a>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }

From f6b8356b191e800ffc9362bef42471469ba0a3b4 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:39:13 +0100
Subject: [PATCH 19/23] Remove duplicate icon

---
 src/components/nav-links/arrow-nav-links.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/nav-links/arrow-nav-links.tsx b/src/components/nav-links/arrow-nav-links.tsx
index a3f94e4173..9e70684c1f 100644
--- a/src/components/nav-links/arrow-nav-links.tsx
+++ b/src/components/nav-links/arrow-nav-links.tsx
@@ -5,7 +5,7 @@ import type { ReactElement } from "react"
 import { useThemeConfig } from "nextra-theme-docs"
 import type { DocsThemeConfig } from "nextra-theme-docs"
 
-import { ArrowDown } from "@/app/conf/_design-system/pixelarticons/arrow-down"
+import ArrowDown from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 interface NavLinkProps {
   currentIndex: number

From 6a3c5205ddfcd3ad8a439463a0130a9cd4ea63a5 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:39:23 +0100
Subject: [PATCH 20/23] Don't show "X X"

---
 src/pages/community/resources/official-channels.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/community/resources/official-channels.mdx b/src/pages/community/resources/official-channels.mdx
index 192c3e1519..ff165c4be5 100644
--- a/src/pages/community/resources/official-channels.mdx
+++ b/src/pages/community/resources/official-channels.mdx
@@ -68,7 +68,7 @@ Please follow these channels for updates and information:
     },
     {
       icon: TwitterIcon,
-      title: "𝕏",
+      title: "x.com",
       link: "https://x.com/graphql",
       description: "@graphql",
     },

From 0b0a6f491675123afe09464a8696a11fbb720291 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:41:37 +0100
Subject: [PATCH 21/23] Respect ReactElements for backcompat, allow configuring
 counter name

---
 src/components/cards.tsx           | 16 +++++++++++-----
 src/pages/learn/best-practices.mdx |  1 +
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/cards.tsx b/src/components/cards.tsx
index ab177cceac..75f35b46dc 100644
--- a/src/components/cards.tsx
+++ b/src/components/cards.tsx
@@ -4,15 +4,17 @@ import { learnPages } from "./learn-aggregator/learn-pages"
 
 export function Cards({
   items,
-  numbered = false,
+  numbered,
 }: {
   items: {
-    icon?: (({ className }: { className?: string }) => React.ReactNode) | React.ReactNode
+    icon?:
+      | (({ className }: { className?: string }) => React.ReactNode)
+      | React.ReactNode
     title: string
     description?: string
     link: string
   }[]
-  numbered?: boolean
+  numbered?: string
 }) {
   return (
     <ul className="grid grid-cols-1 justify-stretch gap-2 pt-6 sm:grid-cols-2 lg:gap-4">
@@ -41,7 +43,7 @@ export function Cards({
               <span className="flex flex-col gap-1 [grid-area:header]">
                 {numbered && (
                   <span className="typography-body-sm px-2 pt-2 text-neu-700 max-lg:typography-body-md lg:px-4 lg:pt-4">
-                    Lesson {index + 1}
+                    {numbered} {index + 1}
                   </span>
                 )}
                 <span
@@ -52,7 +54,11 @@ export function Cards({
                 >
                   {item.icon && (
                     <span className="flex items-center justify-center border-r border-neu-200 p-2 lg:p-4">
-                      {typeof item.icon === "function" ? <item.icon className="size-8 shrink-0" /> : item.icon}
+                      {typeof item.icon === "function" ? (
+                        <item.icon className="size-8 shrink-0" />
+                      ) : (
+                        item.icon
+                      )}
                     </span>
                   )}
                   {item.title}
diff --git a/src/pages/learn/best-practices.mdx b/src/pages/learn/best-practices.mdx
index 7cf153a6af..4b667581c0 100644
--- a/src/pages/learn/best-practices.mdx
+++ b/src/pages/learn/best-practices.mdx
@@ -7,6 +7,7 @@ The GraphQL specification is intentionally silent on a handful of important issu
 The articles in this section should not be taken as gospel, and in some cases may rightfully be ignored in favor of some other approach. Some articles introduce some of the philosophy developed within Facebook around designing and deploying GraphQL services, while others are more tactical suggestions for solving common problems like serving over HTTP and performing authorization.
 
 <Cards
+  numbered="Lesson"
   items={[
     {
       title: "Thinking in Graphs",

From d12038350c31bfd156300340df8487e30b5b79e2 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 3 Dec 2025 00:48:39 +0100
Subject: [PATCH 22/23] Format icon

---
 .../learn-aggregator/assets/keyboard.svg        | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/learn-aggregator/assets/keyboard.svg b/src/components/learn-aggregator/assets/keyboard.svg
index 54e8029459..fd282902fe 100644
--- a/src/components/learn-aggregator/assets/keyboard.svg
+++ b/src/components/learn-aggregator/assets/keyboard.svg
@@ -1 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="138" height="138" fill="none" viewBox="0 0 138 138"><g fill="#83bd02" clip-path="url(#a)"><path d="M137.557 85.156h-6.534v45.867h6.534zM131.023 131.023H6.577v6.534h124.446zM111.378 104.801h-6.577v6.577h13.111V98.267h-6.534zM117.912 117.912h-13.111v6.577h13.111zM104.801 91.733h-6.534v6.534h6.534zM104.801 45.867h-6.534V52.4h6.534zM98.267 104.801H91.69v6.577h6.577zM98.267 52.4H91.69v6.577h6.577zM98.267 39.333H91.69v6.534h6.577zM98.267 117.912H39.29v6.577h58.977zM91.69 91.733h-6.534v6.534h6.534zM91.69 32.756H26.222v6.577H91.69zM85.156 104.801h-6.534v6.577h6.534zM85.156 0h-6.534v13.11h6.534zM78.622 91.733h-6.577v6.534h6.577zM72.045 104.801h-6.534v6.577h6.534zM65.511 91.733h-6.534v6.534h6.534zM91.69 58.977H52.4v6.534h39.29zM58.977 104.801H52.4v6.577h6.577zM52.4 91.733h-6.533v6.534H52.4zM45.867 104.801H39.29v6.577h6.577zM39.29 91.733h-6.534v6.534h6.534zM78.622 13.11h-52.4v6.578h52.4zM32.756 104.801h-6.534v6.577h6.534zM32.756 117.912H19.645v6.577h13.11zM26.222 91.733h-6.577v6.534h6.577zM26.222 19.688h-6.577v13.068h6.577zM19.645 104.801H13.11v6.577h6.534zM131.023 85.156v-6.534H52.4v-13.11h-6.533v13.11H6.577v6.534zM6.577 85.156H0v45.867h6.577z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h137.557v137.557H0z"/></clipPath></defs></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="138"
+  height="138"
+  fill="none"
+  viewBox="0 0 138 138"
+>
+  <g fill="#83bd02" clip-path="url(#a)">
+    <path
+      d="M137.557 85.156h-6.534v45.867h6.534zM131.023 131.023H6.577v6.534h124.446zM111.378 104.801h-6.577v6.577h13.111V98.267h-6.534zM117.912 117.912h-13.111v6.577h13.111zM104.801 91.733h-6.534v6.534h6.534zM104.801 45.867h-6.534V52.4h6.534zM98.267 104.801H91.69v6.577h6.577zM98.267 52.4H91.69v6.577h6.577zM98.267 39.333H91.69v6.534h6.577zM98.267 117.912H39.29v6.577h58.977zM91.69 91.733h-6.534v6.534h6.534zM91.69 32.756H26.222v6.577H91.69zM85.156 104.801h-6.534v6.577h6.534zM85.156 0h-6.534v13.11h6.534zM78.622 91.733h-6.577v6.534h6.577zM72.045 104.801h-6.534v6.577h6.534zM65.511 91.733h-6.534v6.534h6.534zM91.69 58.977H52.4v6.534h39.29zM58.977 104.801H52.4v6.577h6.577zM52.4 91.733h-6.533v6.534H52.4zM45.867 104.801H39.29v6.577h6.577zM39.29 91.733h-6.534v6.534h6.534zM78.622 13.11h-52.4v6.578h52.4zM32.756 104.801h-6.534v6.577h6.534zM32.756 117.912H19.645v6.577h13.11zM26.222 91.733h-6.577v6.534h6.577zM26.222 19.688h-6.577v13.068h6.577zM19.645 104.801H13.11v6.577h6.534zM131.023 85.156v-6.534H52.4v-13.11h-6.533v13.11H6.577v6.534zM6.577 85.156H0v45.867h6.577z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h137.557v137.557H0z" /></clipPath>
+  </defs>
+</svg>

From a70051f6540c870847c051960012edfdfd49d70e Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 4 Dec 2025 13:12:37 +0100
Subject: [PATCH 23/23] Tweak LearnNavLinkCard for mobiles with container
 queries

---
 .../nav-links/learn-nav-link-card.tsx         | 30 ++++++++++---------
 src/components/nextra-mdx-wrapper.tsx         |  1 +
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/nav-links/learn-nav-link-card.tsx b/src/components/nav-links/learn-nav-link-card.tsx
index 99d4ba366f..e9d0073f61 100644
--- a/src/components/nav-links/learn-nav-link-card.tsx
+++ b/src/components/nav-links/learn-nav-link-card.tsx
@@ -14,12 +14,14 @@ interface LearnNavLinkCardProps {
   currentIndex: number
   flatDocsDirectories: Item[]
   className?: string
+  articleNoun: string
 }
 
 export function LearnNavLinkCard({
   flatDocsDirectories,
   currentIndex,
   className,
+  articleNoun,
 }: LearnNavLinkCardProps): ReactElement | null {
   const themeConfig = useThemeConfig()
   const nav = themeConfig.navigation
@@ -46,7 +48,7 @@ export function LearnNavLinkCard({
     <NextLink
       href={displayPost.route}
       className={clsx(
-        "gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50",
+        "gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 @container hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50",
         className,
       )}
     >
@@ -75,29 +77,29 @@ export function LearnNavLinkCard({
         />
       </div>
 
-      <div className="flex flex-1 flex-col gap-4">
-        <p className="typography-menu text-pri-base dark:text-pri-light">
-          {isNext ? "next lesson" : "previous lesson"}
+      <div className="flex flex-1 flex-col gap-3 sm:gap-4">
+        <p className="typography-menu text-xs text-pri-base @[740px]:text-sm dark:text-pri-light">
+          {isNext ? `next ${articleNoun}` : `previous ${articleNoun}`}
         </p>
 
-        <div className="flex flex-col gap-4 text-neu-900">
-          <h2 className="typography-h2">{displayPost.title}</h2>
-          {pageData?.description && (
-            <p className="typography-body-md max-w-[560px]">
-              {pageData.description}
-            </p>
-          )}
-        </div>
+        <h2 className="typography-h2 md:typography-h3 md:@[700px]:typography-h2">
+          {displayPost.title}
+        </h2>
+        {pageData?.description && (
+          <p className="typography-body-md max-w-[560px]">
+            {pageData.description}
+          </p>
+        )}
 
         <div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
           <span className="typography-button text-neu-0">
-            Go to {isNext ? "next" : "previous"} lesson
+            Go to {isNext ? "next" : "previous"} {articleNoun}
           </span>
         </div>
       </div>
 
       {pageData?.icon && (
-        <div className="relative flex size-[222px] bg-neu-0/[.64] backdrop-blur-[6px]">
+        <div className="relative hidden size-[222px] bg-neu-0/[.64] backdrop-blur-[6px] @[680px]:flex">
           <div
             className={clsx(
               "shrink-0 items-center justify-center p-12",
diff --git a/src/components/nextra-mdx-wrapper.tsx b/src/components/nextra-mdx-wrapper.tsx
index 1b88021398..4e33dbc782 100644
--- a/src/components/nextra-mdx-wrapper.tsx
+++ b/src/components/nextra-mdx-wrapper.tsx
@@ -116,6 +116,7 @@ function Body({ children }: { children: ReactNode }): ReactElement {
           <LearnNavLinkCard
             flatDocsDirectories={flatDocsDirectories}
             currentIndex={activeIndex}
+            articleNoun="lesson"
           />
         ) : (
           <ArrowNavLinks