Add contribution cards + refactoring.

@theme/plugin.js

@@ -1,13 +1,15 @@
 import { indexPages } from './plugins/index-pages.js';
 import { codeSamples } from './plugins/code-samples.js';
 import { blogPosts } from './plugins/blog-posts.js';
-import { tutorialLanguages } from './plugins/tutorial-languages.js'
+import { tutorialLanguages } from './plugins/tutorial-languages.js';
+import { tutorialMetadata } from './plugins/tutorial-metadata.js';
 
 export default function customPlugin() {
   const indexPagesInst = indexPages();
   const codeSamplesInst = codeSamples();
   const blogPostsInst = blogPosts();
   const tutorialLanguagesInst = tutorialLanguages();
+  const tutorialMetadataInst = tutorialMetadata();
 
 
   /** @type {import("@redocly/realm/dist/server/plugins/types").PluginInstance } */
@@ -18,12 +20,14 @@ export default function customPlugin() {
       await codeSamplesInst.processContent?.(content, actions);
       await blogPostsInst.processContent?.(content, actions);
       await tutorialLanguagesInst.processContent?.(content, actions);
+      await tutorialMetadataInst.processContent?.(content, actions);
     },
     afterRoutesCreated: async (content, actions) => {
       await indexPagesInst.afterRoutesCreated?.(content, actions);
       await codeSamplesInst.afterRoutesCreated?.(content, actions);
       await blogPostsInst.afterRoutesCreated?.(content, actions);
       await tutorialLanguagesInst.processContent?.(content, actions);
+      await tutorialMetadataInst.processContent?.(content, actions);
     },
   };
 

@theme/plugins/tutorial-languages.js

@@ -1,7 +1,15 @@
 // @ts-check
 
+import { getInnerText } from '@redocly/realm/dist/server/plugins/markdown/markdoc/helpers/get-inner-text.js'
+
 /**
- * Plugin to detect languages supported in tutorial pages by scanning for tab labels.
+ * Plugin to detect languages supported in tutorial pages.
+ *
+ * Detection methods (in priority order):
+ * 1. Tab labels in the markdown (for multi-language tutorials)
+ * 2. Filename patterns like "-js.md", "-py.md" (for single-language tutorials)
+ * 3. Title containing language name (for single-language tutorials)
+ *
  * This creates shared data that maps tutorial paths to their supported languages.
  */
 export function tutorialLanguages() {
@@ -13,15 +21,28 @@ export function tutorialLanguages() {
         const tutorialLanguagesMap = {}
         const allFiles = await fs.scan()
 
-        // Find all markdown files in tutorials directory
+        // Find all markdown files in tutorials directory (excluding the main landing page)
         const tutorialFiles = allFiles.filter((file) =>
-          file.relativePath.match(/^docs[\/\\]tutorials[\/\\].*\.md$/)
+          file.relativePath.match(/^docs[\/\\]tutorials[\/\\].*\.md$/) &&
+          file.relativePath !== 'docs/tutorials/index.md' &&
+          file.relativePath !== 'docs\\tutorials\\index.md'
         )
 
         for (const { relativePath } of tutorialFiles) {
           try {
             const { data } = await cache.load(relativePath, 'markdown-ast')
-            const languages = extractLanguagesFromAst(data.ast)
+
+            // Try to detect languages from tab labels first
+            let languages = extractLanguagesFromAst(data.ast)
+
+            // Fallback: detect language from filename/title for single-language tutorials
+            if (languages.length === 0) {
+              const title = extractFirstHeading(data.ast) || ''
+              const fallbackLang = detectLanguageFromPathAndTitle(relativePath, title)
+              if (fallbackLang) {
+                languages = [fallbackLang]
+              }
+            }
 
             if (languages.length > 0) {
               // Convert file path to URL path
@@ -98,6 +119,70 @@ function normalizeLanguage(label) {
   return null
 }
 
+/**
+ * Detect language from file path and title for single-language tutorials.
+ * This is a fallback when no tab labels are found in the markdown.
+ */
+function detectLanguageFromPathAndTitle(relativePath, title) {
+  const pathLower = relativePath.toLowerCase()
+  const titleLower = (title || '').toLowerCase()
+
+  // Check filename suffixes like "-js.md", "-py.md"
+  if (pathLower.endsWith('-js.md') || pathLower.includes('-javascript.md') || pathLower.includes('-in-javascript.md')) {
+    return 'javascript'
+  }
+  if (pathLower.endsWith('-py.md') || pathLower.includes('-python.md') || pathLower.includes('-in-python.md')) {
+    return 'python'
+  }
+  if (pathLower.endsWith('-java.md') || pathLower.includes('-in-java.md')) {
+    return 'java'
+  }
+  if (pathLower.endsWith('-go.md') || pathLower.includes('-in-go.md') || pathLower.includes('-golang.md')) {
+    return 'go'
+  }
+  if (pathLower.endsWith('-php.md') || pathLower.includes('-in-php.md')) {
+    return 'php'
+  }
+
+  // Check title for language indicators
+  if (titleLower.includes('javascript') || titleLower.includes(' js ') || titleLower.endsWith(' js')) {
+    return 'javascript'
+  }
+  if (titleLower.includes('python')) {
+    return 'python'
+  }
+  if (titleLower.includes('java') && !titleLower.includes('javascript')) {
+    return 'java'
+  }
+  if (titleLower.includes('golang') || (titleLower.includes(' go ') || titleLower.endsWith(' go') || titleLower.includes('using go'))) {
+    return 'go'
+  }
+  if (titleLower.includes('php')) {
+    return 'php'
+  }
+
+  return null
+}
+
+const EXIT = Symbol('Exit visitor')
+
+/**
+ * Extract the first heading from the markdown AST
+ */
+function extractFirstHeading(ast) {
+  let heading = null
+
+  visit(ast, (node) => {
+    if (!isNode(node)) return
+    if (node.type === 'heading') {
+      heading = getInnerText([node])
+      return EXIT
+    }
+  })
+
+  return heading
+}
+
 function isNode(value) {
   return !!(value?.$$mdtype === 'Node')
 }
@@ -105,14 +190,16 @@ function isNode(value) {
 function visit(node, visitor) {
   if (!node) return
 
-  visitor(node)
+  const res = visitor(node)
+  if (res === EXIT) return res
 
   if (node.children) {
     for (const child of node.children) {
       if (!child || typeof child === 'string') {
         continue
       }
-      visit(child, visitor)
+      const res = visit(child, visitor)
+      if (res === EXIT) return res
     }
   }
 }

@theme/plugins/tutorial-metadata.js

@@ -0,0 +1,120 @@
+// @ts-check
+
+import { getInnerText } from '@redocly/realm/dist/server/plugins/markdown/markdoc/helpers/get-inner-text.js';
+
+/**
+ * Plugin to extract tutorial metadata including last modified dates.
+ * Uses Redocly's built-in git integration for dates (same as "Last updated" display).
+ * This creates shared data for displaying "What's New" tutorials and
+ * auto-generating tutorial sections on the landing page.
+ */
+export function tutorialMetadata() {
+  /** @type {import("@redocly/realm/dist/server/plugins/types").PluginInstance } */
+  const instance = {
+    processContent: async (actions, { fs, cache }) => {
+      try {
+        /** @type {Array<{path: string, title: string, description: string, lastModified: string, category: string}>} */
+        const tutorials = [];
+        const allFiles = await fs.scan();
+
+        // Find all markdown files in tutorials directory (excluding the main landing page)
+        const tutorialFiles = allFiles.filter((file) =>
+          file.relativePath.match(/^docs[\/\\]tutorials[\/\\].*\.md$/) &&
+          file.relativePath !== 'docs/tutorials/index.md' &&
+          file.relativePath !== 'docs\\tutorials\\index.md'
+        );
+
+        for (const { relativePath } of tutorialFiles) {
+          try {
+            const { data: { ast } } = await cache.load(relativePath, 'markdown-ast');
+            const { data: { frontmatter } } = await cache.load(relativePath, 'markdown-frontmatter');
+
+            // Get last modified date using Redocly's built-in git integration
+            const lastModified = await fs.getLastModified(relativePath);
+            if (!lastModified) continue; // Skip files without dates
+
+            // Extract title from first heading
+            const title = extractFirstHeading(ast) || '';
+            if (!title) continue;
+
+            // Get description from frontmatter or first paragraph
+            const description = frontmatter?.seo?.description || '';
+
+            // Extract category from path (e.g., "tokens", "payments", "defi")
+            const pathParts = relativePath.split(/[\/\\]/);
+            const category = pathParts.length > 2 ? pathParts[2] : 'general';
+
+            // Convert file path to URL path
+            // Handle index.md files - they should produce /path/to/folder/ not /path/to/folder/index/
+            const urlPath = '/' + relativePath
+              .replace(/[\/\\]index\.md$/, '/')
+              .replace(/\.md$/, '/')
+              .replace(/\\/g, '/');
+
+            tutorials.push({
+              path: urlPath,
+              title,
+              description,
+              lastModified,
+              category,
+            });
+          } catch (err) {
+            continue; // Skip files that can't be parsed
+          }
+        }
+
+        // Sort by last modified date (newest first) for "What's New"
+        const sortedTutorials = tutorials.sort((a, b) =>
+          new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
+        );
+
+        // Create shared data
+        actions.createSharedData('tutorial-metadata', { tutorials: sortedTutorials });
+        actions.addRouteSharedData('/docs/tutorials/', 'tutorial-metadata', 'tutorial-metadata');
+        actions.addRouteSharedData('/ja/docs/tutorials/', 'tutorial-metadata', 'tutorial-metadata');
+        actions.addRouteSharedData('/es-es/docs/tutorials/', 'tutorial-metadata', 'tutorial-metadata');
+      } catch (e) {
+        console.log('[tutorial-metadata] Error:', e);
+      }
+    },
+  };
+  return instance;
+}
+
+/**
+ * Extract the first heading from the markdown AST
+ */
+function extractFirstHeading(ast) {
+  let heading = null;
+
+  visit(ast, (node) => {
+    if (!isNode(node)) return;
+    if (node.type === 'heading') {
+      heading = getInnerText([node]);
+      return EXIT;
+    }
+  });
+
+  return heading;
+}
+
+function isNode(value) {
+  return !!(value?.$$mdtype === 'Node');
+}
+
+const EXIT = Symbol('Exit visitor');
+
+function visit(node, visitor) {
+  if (!node) return;
+
+  const res = visitor(node);
+  if (res === EXIT) return res;
+
+  if (node.children) {
+    for (const child of node.children) {
+      if (!child || typeof child === 'string') continue;
+      const res = visit(child, visitor);
+      if (res === EXIT) return res;
+    }
+  }
+}

docs/tutorials/index.page.tsx

@@ -1,5 +1,51 @@
 import { useThemeHooks } from "@redocly/theme/core/hooks"
 import { Link } from "@redocly/theme/components/Link/Link"
+import { useState } from "react"
+
+type TutorialLanguagesMap = Record<string, string[]>
+
+interface TutorialMetadataItem {
+  path: string
+  title: string
+  description: string
+  lastModified: string
+  category: string
+}
+
+interface Tutorial {
+  title: string
+  body?: string
+  path: string
+  // External community contribution fields (optional)
+  author?: { name: string; url: string }
+  github?: string
+  externalUrl?: string
+}
+
+interface TutorialSection {
+  id: string
+  title: string
+  description: string
+  tutorials: Tutorial[]
+}
+
+// External community contribution - manually curated with author/repo/demo info
+interface PinnedExternalTutorial {
+  title: string
+  description: string
+  author: { name: string; url: string }
+  github: string
+  url?: string
+}
+
+// Pinned tutorial entry:
+// - string: internal path (uses frontmatter title/description)
+// - object with `path`: internal path with optional description override
+// - PinnedExternalTutorial: external community contribution with author/repo/demo
+type PinnedTutorial = string | { path: string; description?: string } | PinnedExternalTutorial
+
+const MAX_WHATS_NEW = 3
+const MAX_TUTORIALS_PER_SECTION = 6
 
 export const frontmatter = {
   seo: {
@@ -19,243 +65,93 @@ const langIcons: Record<string, { src: string; alt: string }> = {
   xrpl: { src: "/img/logos/xrp-mark.svg", alt: "XRP Ledger" },
 }
 
-// Type for the tutorial languages map from the plugin
-type TutorialLanguagesMap = Record<string, string[]>
-
-interface Tutorial {
-  title: string
-  body?: string
-  path: string
-  icon?: string // Single language icon (for single-language tutorials)
-}
-
-interface TutorialSection {
-  id: string
-  title: string
-  description: string
-  tutorials: Tutorial[]
-}
-
-// Get Started tutorials -----------------
-const getStartedTutorials: Tutorial[] = [
+// Section configuration - defines display order, titles, and descriptions.
+// "whats-new" and "get-started" are rendered separately; the rest are auto-populated category sections.
+const sectionConfig: { id: string; title: string; description: string }[] = [
   {
-    title: "JavaScript",
-    body: "Using the xrpl.js client library.",
-    path: "/docs/tutorials/get-started/get-started-javascript/",
-    icon: "javascript",
+    id: "whats-new",
+    title: "What's New",
+    description: "Recently added/updated tutorials to help you build on the XRP Ledger.",
   },
   {
-    title: "Python",
-    body: "Using xrpl.py, a pure Python library.",
-    path: "/docs/tutorials/get-started/get-started-python/",
-    icon: "python",
+    id: "get-started",
+    title: "Get Started with SDKs",
+    description: "These tutorials walk you through the basics of building a very simple XRP Ledger-connected application using your favorite programming language.",
   },
-  {
-    title: "Go",
-    body: "Using xrpl-go, a pure Go library.",
-    path: "/docs/tutorials/get-started/get-started-go/",
-    icon: "go",
-  },
-  {
-    title: "Java",
-    body: "Using xrpl4j, a pure Java library.",
-    path: "/docs/tutorials/get-started/get-started-java/",
-    icon: "java",
-  },
-  {
-    title: "PHP",
-    body: "Using the XRPL_PHP client library.",
-    path: "/docs/tutorials/get-started/get-started-php/",
-    icon: "php",
-  },
-  {
-    title: "HTTP & WebSocket APIs",
-    body: "Access the XRP Ledger directly through the APIs of its core server.",
-    path: "/docs/tutorials/get-started/get-started-http-websocket-apis/",
-    icon: "http",
-  },
-]
-
-// Other tutorial sections -----------------
-// Languages are auto-detected from the markdown files by the tutorial-languages plugin.
-// Only specify `icon` for single-language tutorials without tabs.
-const sections: TutorialSection[] = [
   {
     id: "tokens",
     title: "Tokens",
     description: "Create and manage tokens on the XRP Ledger.",
-    tutorials: [
-      {
-        title: "Issue a Multi-Purpose Token",
-        body: "Issue new tokens using the v2 fungible token standard.",
-        path: "/docs/tutorials/tokens/mpts/issue-a-multi-purpose-token/",
-      },
-      {
-        title: "Issue a Fungible Token",
-        body: "Issue new tokens using the v1 fungible token standard.",
-        path: "/docs/tutorials/tokens/fungible-tokens/issue-a-fungible-token/",
-      },
-      {
-        title: "Mint and Burn NFTs Using JavaScript",
-        body: "Create new NFTs, retrieve existing tokens, and burn the ones you no longer need.",
-        path: "/docs/tutorials/tokens/nfts/mint-and-burn-nfts-js/",
-        icon: "javascript",
-      },
-    ],
   },
   {
     id: "payments",
     title: "Payments",
     description: "Transfer XRP and issued currencies using various payment types.",
-    tutorials: [
-      {
-        title: "Send XRP",
-        body: "Send a direct XRP payment to another account.",
-        path: "/docs/tutorials/payments/send-xrp/",
-      },
-      {
-        title: "Sending MPTs in JavaScript",
-        body: "Send a Multi-Purpose Token (MPT) to another account with the JavaScript SDK.",
-        path: "/docs/tutorials/tokens/mpts/sending-mpts-in-javascript/",
-        icon: "javascript",
-      },
-      {
-        title: "Create Trust Line and Send Currency in JavaScript",
-        body: "Set up trust lines and send issued currencies with the JavaScript SDK.",
-        path: "/docs/tutorials/payments/create-trust-line-send-currency-in-javascript/",
-        icon: "javascript",
-      },
-      {
-        title: "Create Trust Line and Send Currency in Python",
-        body: "Set up trust lines and send issued currencies with the Python SDK.",
-        path: "/docs/tutorials/payments/create-trust-line-send-currency-in-python/",
-        icon: "python",
-      },
-      {
-        title: "Send a Conditional Escrow",
-        body: "Send an escrow that can be released when a specific crypto-condition is fulfilled.",
-        path: "/docs/tutorials/payments/send-a-conditional-escrow/",
-      },
-      {
-        title: "Send a Timed Escrow",
-        body: "Send an escrow whose only condition for release is that a specific time has passed.",
-        path: "/docs/tutorials/payments/send-a-timed-escrow/",
-      },
-    ],
   },
   {
     id: "defi",
     title: "DeFi",
     description: "Trade, provide liquidity, and lend using native XRP Ledger DeFi features.",
-    tutorials: [
-      {
-        title: "Create an Automated Market Maker",
-        body: "Set up an AMM for a token pair and provide liquidity.",
-        path: "/docs/tutorials/defi/dex/create-an-automated-market-maker/",
-      },
-      {
-        title: "Trade in the Decentralized Exchange",
-        body: "Buy and sell tokens in the Decentralized Exchange (DEX).",
-        path: "/docs/tutorials/defi/dex/trade-in-the-decentralized-exchange/",
-      },
-      {
-        title: "Create a Loan Broker",
-        body: "Set up a loan broker to create and manage loans.",
-        path: "/docs/tutorials/defi/lending/use-the-lending-protocol/create-a-loan-broker/",
-      },
-      {
-        title: "Create a Loan",
-        body: "Create a loan on the XRP Ledger.",
-        path: "/docs/tutorials/defi/lending/use-the-lending-protocol/create-a-loan/",
-      },
-      {
-        title: "Create a Single Asset Vault",
-        body: "Create a single asset vault on the XRP Ledger.",
-        path: "/docs/tutorials/defi/lending/use-single-asset-vaults/create-a-single-asset-vault/",
-      },
-      {
-        title: "Deposit into a Vault",
-        body: "Deposit assets into a vault and receive shares.",
-        path: "/docs/tutorials/defi/lending/use-single-asset-vaults/deposit-into-a-vault/",
-      },
-    ],
   },
   {
     id: "best-practices",
     title: "Best Practices",
     description: "Learn recommended patterns for building reliable, secure applications on the XRP Ledger.",
-    tutorials: [
-      {
-        title: "API Usage",
-        body: "Best practices for using XRP Ledger APIs.",
-        path: "/docs/tutorials/best-practices/api-usage/",
-      },
-      {
-        title: "Use Tickets",
-        body: "Use tickets to send transactions out of the normal order.",
-        path: "/docs/tutorials/best-practices/transaction-sending/use-tickets/",
-      },
-      {
-        title: "Send a Single Account Batch Transaction",
-        body: "Group multiple transactions together and execute them as a single atomic operation.",
-        path: "/docs/tutorials/best-practices/transaction-sending/send-a-single-account-batch-transaction/",
-      },
-      {
-        title: "Assign a Regular Key Pair",
-        body: "Assign a regular key pair for signing transactions.",
-        path: "/docs/tutorials/best-practices/key-management/assign-a-regular-key-pair/",
-      },
-      {
-        title: "Set Up Multi-Signing",
-        body: "Configure multi-signing for enhanced security.",
-        path: "/docs/tutorials/best-practices/key-management/set-up-multi-signing/",
-      },
-      {
-        title: "Send a Multi-Signed Transaction",
-        body: "Send a transaction with multiple signatures.",
-        path: "/docs/tutorials/best-practices/key-management/send-a-multi-signed-transaction/",
-      },
-    ],
   },
   {
     id: "sample-apps",
     title: "Sample Apps",
     description: "Build complete, end-to-end applications like wallets and credential services.",
-    tutorials: [
-      {
-        title: "Build a Browser Wallet in JavaScript",
-        body: "Build a browser wallet for the XRP Ledger using JavaScript and various libraries.",
-        path: "/docs/tutorials/sample-apps/build-a-browser-wallet-in-javascript/",
-        icon: "javascript",
-      },
-      {
-        title: "Build a Desktop Wallet in JavaScript",
-        body: "Build a desktop wallet for the XRP Ledger using JavaScript, the Electron Framework, and various libraries.",
-        path: "/docs/tutorials/sample-apps/build-a-desktop-wallet-in-javascript/",
-        icon: "javascript",
-      },
-      {
-        title: "Build a Desktop Wallet in Python",
-        body: "Build a desktop wallet for the XRP Ledger using Python and various libraries.",
-        path: "/docs/tutorials/sample-apps/build-a-desktop-wallet-in-python/",
-        icon: "python",
-      },
-      {
-        title: "Credential Issuing Service in JavaScript",
-        body: "Build a credential issuing service using the JavaScript SDK.",
-        path: "/docs/tutorials/sample-apps/credential-issuing-service-in-javascript/",
-        icon: "javascript",
-      },
-      {
-        title: "Credential Issuing Service in Python",
-        body: "Build a credential issuing service using the Python SDK.",
-        path: "/docs/tutorials/sample-apps/credential-issuing-service-in-python/",
-        icon: "python",
-      },
-    ],
   },
 ]
 
+
+// Pinned tutorials - these always appear in their designated sections.
+// Use an object with `description` to override the frontmatter description.
+// Use an object with `github` for external community contributions.
+const pinnedTutorials: Record<string, PinnedTutorial[]> = {
+  "get-started": [
+    { path: "/docs/tutorials/get-started/get-started-javascript/", description: "Using the xrpl.js client library." },
+    { path: "/docs/tutorials/get-started/get-started-python/", description: "Using xrpl.py, a pure Python library." },
+    { path: "/docs/tutorials/get-started/get-started-go/", description: "Using xrpl-go, a pure Go library." },
+    { path: "/docs/tutorials/get-started/get-started-java/", description: "Using xrpl4j, a pure Java library." },
+    { path: "/docs/tutorials/get-started/get-started-php/", description: "Using the XRPL_PHP client library." },
+    { path: "/docs/tutorials/get-started/get-started-http-websocket-apis/", description: "Access the XRP Ledger directly through the APIs of its core server." },
+  ],
+  tokens: [
+    { path: "/docs/tutorials/tokens/mpts/issue-a-multi-purpose-token/", description: "Issue new tokens using the v2 fungible token standard." },
+    { path: "/docs/tutorials/tokens/fungible-tokens/issue-a-fungible-token/", description: "Issue new tokens using the v1 fungible token standard."},
+    { path: "/docs/tutorials/tokens/nfts/mint-and-burn-nfts-js/", description: "Create new NFTs, retrieve existing tokens, and burn the ones you no longer need." },
+  ],
+  payments: [
+    "/docs/tutorials/payments/send-xrp/",
+    "/docs/tutorials/tokens/mpts/sending-mpts-in-javascript/",
+    "/docs/tutorials/payments/create-trust-line-send-currency-in-javascript/",
+    "/docs/tutorials/payments/send-a-conditional-escrow/",
+    "/docs/tutorials/payments/send-a-timed-escrow/",
+  ],
+  defi: [
+    "/docs/tutorials/defi/dex/create-an-automated-market-maker/",
+    "/docs/tutorials/defi/dex/trade-in-the-decentralized-exchange/",
+    "/docs/tutorials/defi/lending/use-the-lending-protocol/create-a-loan/",
+    "/docs/tutorials/defi/lending/use-single-asset-vaults/create-a-single-asset-vault/",
+  ],
+  "best-practices": [
+    "/docs/tutorials/best-practices/api-usage/",
+  ],
+  "sample-apps": [
+    {
+      title: "XRPL Lending Protocol Demo",
+      description: "A full-stack web application that demonstrates the end-to-end flow of the Lending Protocol and Single Asset Vaults.",
+      author: { name: "Aaditya-T", url: "https://github.com/Aaditya-T" },
+      github: "https://github.com/Aaditya-T/lending_test",
+      url: "https://lending-test-lovat.vercel.app/",
+    },
+  ],
+}
+
+// ── Components ──────────────────────────────────────────────────────────────
+
 function TutorialCard({
   tutorial,
   detectedLanguages,
@@ -267,12 +163,10 @@ function TutorialCard({
   showFooter?: boolean
   translate: (text: string) => string
 }) {
-  // Get icons: manual icon takes priority, then auto-detected languages, then XRPL fallback
-  const icons = tutorial.icon && langIcons[tutorial.icon]
-      ? [langIcons[tutorial.icon]]
-      : detectedLanguages && detectedLanguages.length > 0
-        ? detectedLanguages.map((lang) => langIcons[lang]).filter(Boolean)
-        : [langIcons.xrpl]
+  // Get icons from auto-detected languages, fallback to XRPL icon
+  const icons = detectedLanguages && detectedLanguages.length > 0
+    ? detectedLanguages.map((lang) => langIcons[lang]).filter(Boolean)
+    : [langIcons.xrpl]
 
   return (
     <Link to={tutorial.path} className="card">
@@ -292,6 +186,188 @@ function TutorialCard({
   )
 }
 
+// Inline meta link used in ContributionCard
+function MetaLink({ href, icon, label }: {
+  href: string
+  icon: string
+  label: string
+}) {
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer" className="meta-link">
+      <i className={`fa fa-${icon}`} aria-hidden="true" />
+      {label}
+    </a>
+  )
+}
+
+// Community Contribution Card 
+function ContributionCard({
+  tutorial,
+  translate,
+}: {
+  tutorial: Tutorial
+  translate: (text: string) => string
+}) {
+  const primaryUrl = tutorial.externalUrl || tutorial.github!
+
+  const handleCardClick = (e: React.MouseEvent | React.KeyboardEvent) => {
+    if ((e.target as HTMLElement).closest(".card-meta-row")) return
+    window.open(primaryUrl, "_blank", "noopener,noreferrer")
+  }
+
+  return (
+    <div
+      className="card contribution-card"
+      onClick={handleCardClick}
+      onKeyDown={(e) => { if (e.key === "Enter") handleCardClick(e) }}
+      role="link"
+      tabIndex={0}
+    >
+      <div className="card-header contribution-header">
+        <span className="circled-logo contribution-icon">
+          <i className="fa fa-users" aria-hidden="true" />
+        </span>
+        <div className="card-meta-row">
+          {tutorial.author && (
+            <>
+              <MetaLink href={tutorial.author.url} icon="user" label={tutorial.author.name} />
+              <span className="meta-dot" aria-hidden="true">·</span>
+            </>
+          )}
+          <MetaLink href={tutorial.github!} icon="github" label={translate("GitHub")} />
+        </div>
+      </div>
+      <div className="card-body">
+        <h4 className="card-title h5">
+          {translate(tutorial.title)}
+          <span className="card-external-icon" aria-label={translate("External link")}>
+            <i className="fa fa-external-link" aria-hidden="true" />
+          </span>
+        </h4>
+        {tutorial.body && <p className="card-text">{translate(tutorial.body)}</p>}
+      </div>
+    </div>
+  )
+}
+
+// Reusable section block for rendering tutorial sections
+function TutorialSectionBlock({
+  id,
+  title,
+  description,
+  tutorials,
+  tutorialLanguages,
+  showFooter = false,
+  maxTutorials,
+  className = "",
+  translate,
+}: {
+  id: string
+  title: string
+  description: string
+  tutorials: Tutorial[]
+  tutorialLanguages: TutorialLanguagesMap
+  showFooter?: boolean
+  maxTutorials?: number
+  className?: string
+  translate: (text: string) => string
+}) {
+  const displayTutorials = maxTutorials ? tutorials.slice(0, maxTutorials) : tutorials
+
+  return (
+    <section className={`container-new pt-10 pb-14 ${className}`.trim()} id={id}>
+      <div className="col-12 col-xl-8 p-0">
+        <h3 className="h4 mb-3">{translate(title)}</h3>
+        <p className="mb-4">{translate(description)}</p>
+      </div>
+      <div className="row tutorial-cards">
+        {displayTutorials.map((tutorial) => (
+          <div key={tutorial.path} className="col-lg-4 col-md-6 mb-5">
+            {tutorial.github ? (
+              <ContributionCard tutorial={tutorial} translate={translate} />
+            ) : (
+              <TutorialCard
+                tutorial={tutorial}
+                detectedLanguages={tutorialLanguages[tutorial.path]}
+                showFooter={showFooter}
+                translate={translate}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+// Copyable URL component with click-to-copy functionality
+function CopyableUrl({ url, translate }: { url: string; translate: (text: string) => string }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error("Failed to copy:", err)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      className={`quick-ref-value-btn ${copied ? "copied" : ""}`}
+      onClick={handleCopy}
+      title={copied ? translate("Copied!") : translate("Click to copy")}
+    >
+      <code className="quick-ref-value">{url}</code>
+      <span className="copy-icon">{copied ? "✓" : ""}</span>
+    </button>
+  )
+}
+
+// Quick reference card showing public server URLs and faucet link
+function QuickReferenceCard({ translate }: { translate: (text: string) => string }) {
+  return (
+    <div className="quick-ref-card">
+      <div className="quick-ref-section">
+        <span className="quick-ref-label">{translate("PUBLIC SERVERS")}</span>
+        <div className="quick-ref-group">
+          <span className="quick-ref-key"><strong>{translate("Mainnet")}</strong></span>
+          <div className="quick-ref-urls">
+            <span className="quick-ref-protocol">{translate("WebSocket")}</span>
+            <CopyableUrl url="wss://xrplcluster.com" translate={translate} />
+            <span className="quick-ref-protocol">{translate("JSON-RPC")}</span>
+            <CopyableUrl url="https://xrplcluster.com" translate={translate} />
+          </div>
+        </div>
+        <div className="quick-ref-group">
+          <span className="quick-ref-key"><strong>{translate("Testnet")}</strong></span>
+          <div className="quick-ref-urls">
+            <span className="quick-ref-protocol">{translate("WebSocket")}</span>
+            <CopyableUrl url="wss://s.altnet.rippletest.net:51233" translate={translate} />
+            <span className="quick-ref-protocol">{translate("JSON-RPC")}</span>
+            <CopyableUrl url="https://s.altnet.rippletest.net:51234" translate={translate} />
+          </div>
+        </div>
+        <Link to="/docs/tutorials/public-servers/" className="quick-ref-link">
+          {translate("View all servers")} →
+        </Link>
+      </div>
+      <div className="quick-ref-divider"></div>
+      <div className="quick-ref-section">
+        <Link to="/resources/dev-tools/xrp-faucets/" className="quick-ref-faucet">
+          <span>{translate("Get Test XRP")}</span>
+          <span className="quick-ref-arrow">→</span>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+// ── Page Component ──────────────────────────────────────────────────────────
+
 export default function TutorialsIndex() {
   const { useTranslate, usePageSharedData } = useThemeHooks()
   const { translate } = useTranslate()
@@ -299,65 +375,166 @@ export default function TutorialsIndex() {
   // Get auto-detected languages from the plugin (maps tutorial paths to language arrays).
   const tutorialLanguages = usePageSharedData<TutorialLanguagesMap>("tutorial-languages") || {}
 
+  // Get tutorial metadata from the tutorial-metadata plugin.
+  const tutorialMetadata = usePageSharedData<{ tutorials: TutorialMetadataItem[] }>("tutorial-metadata")
+  const allTutorials = tutorialMetadata?.tutorials || []
+
+  // Build Get Started tutorials from pinned config.
+  const getStartedPinnedEntries = pinnedTutorials["get-started"] || []
+  const getStartedTutorials = buildPinnedTutorials(getStartedPinnedEntries, allTutorials)
+
+  // Get Started paths to exclude from "What's New".
+  const getStartedPaths = new Set(getStartedPinnedEntries.map(getPinnedPath))
+
+  // Get recent tutorials for "What's New" section.
+  // Shows the most recently modified tutorials (excluding only Get Started).
+  // Pinned tutorials in other sections CAN appear here if recently updated.
+  const whatsNewTutorials: Tutorial[] = allTutorials
+    .filter((t) => !getStartedPaths.has(t.path))
+    .slice(0, MAX_WHATS_NEW)
+    .map((t) => toTutorial(t))
+
+  // Build category sections: pinned tutorials first, then auto-populated.
+  const categorySectionIds = new Set(["whats-new", "get-started"])
+  const allPinnedPaths = new Set(
+    Object.values(pinnedTutorials).flat().map(getPinnedPath)
+  )
+  const sections: TutorialSection[] = sectionConfig
+    .filter((config) => !categorySectionIds.has(config.id))
+    .map((config) => {
+      const pinned = buildPinnedTutorials(pinnedTutorials[config.id] || [], allTutorials)
+      // allTutorials is already sorted by lastModified (newest first) from the plugin.
+      const autoTutorials = allTutorials
+        .filter((t) => t.category === config.id && !allPinnedPaths.has(t.path))
+        .map((t) => toTutorial(t))
+      return { ...config, tutorials: [...pinned, ...autoTutorials] }
+    })
+    .filter((section) => section.tutorials.length > 0)
+
+  const whatsNewConfig = getSectionConfig("whats-new")
+  const getStartedConfig = getSectionConfig("get-started")
+
   return (
     <main className="landing page-tutorials landing-builtin-bg">
-      <section className="container-new py-26">
-        <div className="col-lg-8 mx-auto text-lg-center">
-          <div className="d-flex flex-column-reverse">
-            <h1 className="mb-0">
-              {translate("Crypto Wallet and Blockchain Development Tutorials")}
-            </h1>
-            <h6 className="eyebrow mb-3">{translate("Tutorials")}</h6>
+      {/* Hero Section */}
+      <section className="container-new py-20">
+        <div className="row align-items-center">
+          <div className="col-lg-7">
+            <div className="d-flex flex-column-reverse">
+              <h1 className="mb-0">
+                {translate("Crypto Wallet and Blockchain Development Tutorials")}
+              </h1>
+              <h6 className="eyebrow mb-3">{translate("Tutorials")}</h6>
+            </div>
+            <nav className="mt-4">
+              <ul className="page-toc no-sideline d-flex flex-wrap gap-2 mb-0">
+                {whatsNewTutorials.length > 0 && (
+                  <li><a href={`#${whatsNewConfig.id}`}>{translate(whatsNewConfig.title)}</a></li>
+                )}
+                {getStartedTutorials.length > 0 && (
+                  <li><a href={`#${getStartedConfig.id}`}>{translate(getStartedConfig.title)}</a></li>
+                )}
+                {sections.map((section) => (
+                  <li key={section.id}><a href={`#${section.id}`}>{translate(section.title)}</a></li>
+                ))}
+              </ul>
+            </nav>
+          </div>
+          <div className="col-lg-5 mt-6 mt-lg-0">
+            <QuickReferenceCard translate={translate} />
           </div>
-          {/* Table of Contents */}
-          <nav className="mt-4">
-            <ul className="page-toc no-sideline d-flex flex-wrap justify-content-center gap-2 mb-0">
-              <li><a href="#get-started">{translate("Get Started with SDKs")}</a></li>
-              {sections.map((section) => (
-                <li key={section.id}><a href={`#${section.id}`}>{translate(section.title)}</a></li>
-              ))}
-            </ul>
-          </nav>
         </div>
       </section>
 
+      {/* What's New */}
+      {whatsNewTutorials.length > 0 && (
+        <TutorialSectionBlock
+          id={whatsNewConfig.id}
+          title={whatsNewConfig.title}
+          description={whatsNewConfig.description}
+          tutorials={whatsNewTutorials}
+          tutorialLanguages={tutorialLanguages}
+          showFooter
+          className="whats-new-section pb-20"
+          translate={translate}
+        />
+      )}
+
       {/* Get Started */}
-      <section className="container-new pt-10 pb-20" id="get-started">
-        <div className="col-12 col-xl-8 p-0">
-          <h3 className="h4 mb-3">{translate("Get Started with SDKs")}</h3>
-          <p className="mb-4">
-            {translate("These tutorials walk you through the basics of building a very simple XRP Ledger-connected application using your favorite programming language.")}
-          </p>
-        </div>
-        <div className="row tutorial-cards">
-          {getStartedTutorials.map((tutorial, idx) => (
-            <div key={idx} className="col-lg-4 col-md-6 mb-5">
-              <TutorialCard tutorial={tutorial} showFooter translate={translate} />
-            </div>
-          ))}
-        </div>
-      </section>
+      {getStartedTutorials.length > 0 && (
+        <TutorialSectionBlock
+          id={getStartedConfig.id}
+          title={getStartedConfig.title}
+          description={getStartedConfig.description}
+          tutorials={getStartedTutorials}
+          tutorialLanguages={tutorialLanguages}
+          showFooter
+          className="pb-20"
+          translate={translate}
+        />
+      )}
 
       {/* Other Tutorials */}
       {sections.map((section) => (
-        <section className="container-new pt-10 pb-10" key={section.id} id={section.id}>
-          <div className="col-12 col-xl-8 p-0">
-            <h3 className="h4 mb-3">{translate(section.title)}</h3>
-            <p className="mb-4">{translate(section.description)}</p>
-          </div>
-          <div className="row tutorial-cards">
-            {section.tutorials.slice(0, 6).map((tutorial, idx) => (
-              <div key={idx} className="col-lg-4 col-md-6 mb-5">
-                <TutorialCard
-                  tutorial={tutorial}
-                  detectedLanguages={tutorialLanguages[tutorial.path]}
-                  translate={translate}
-                />
-              </div>
-            ))}
-          </div>
-        </section>
+        <TutorialSectionBlock
+          key={section.id}
+          id={section.id}
+          title={section.title}
+          description={section.description}
+          tutorials={section.tutorials}
+          tutorialLanguages={tutorialLanguages}
+          maxTutorials={MAX_TUTORIALS_PER_SECTION}
+          translate={translate}
+        />
       ))}
     </main>
   )
 }
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Look up a section's config by id */
+function getSectionConfig(id: string) {
+  return sectionConfig.find((s) => s.id === id)!
+}
+
+/** Type guard for external community contributions */
+function isExternalContribution(entry: PinnedTutorial): entry is PinnedExternalTutorial {
+  return typeof entry !== "string" && "github" in entry
+}
+
+/** Get path from pinned tutorial entry (external contributions return their github URL) */
+function getPinnedPath(entry: PinnedTutorial): string {
+  return typeof entry === "string" ? entry : isExternalContribution(entry) ? entry.github : entry.path
+}
+
+/** Convert tutorial metadata to the common Tutorial type */
+function toTutorial(t: TutorialMetadataItem, descriptionOverride?: string): Tutorial {
+  return {
+    title: t.title,
+    body: descriptionOverride || t.description,
+    path: t.path,
+  }
+}
+
+/** Build Tutorial objects from pinned entries, resolving metadata for internal paths */
+function buildPinnedTutorials(entries: PinnedTutorial[], allTutorials: TutorialMetadataItem[]): Tutorial[] {
+  return entries
+    .map((entry): Tutorial | null => {
+      if (isExternalContribution(entry)) {
+        return {
+          title: entry.title,
+          body: entry.description,
+          path: entry.url || entry.github,
+          author: entry.author,
+          github: entry.github,
+          externalUrl: entry.url,
+        }
+      }
+      const path = getPinnedPath(entry)
+      const descOverride = typeof entry === "string" ? undefined : entry.description
+      const metadata = allTutorials.find((t) => t.path === path)
+      return metadata ? toTutorial(metadata, descOverride) : null
+    })
+    .filter((t): t is Tutorial => t !== null)
+}

styles/_cards.scss

@@ -320,128 +320,3 @@ main article .card-grid {
   margin-bottom: 0.25rem;
   margin-top: 0.5rem;
 }
-
-/* Tutorial cards */
-.page-tutorials .tutorial-cards {
-  > div {
-    display: flex;
-  }
-
-  .card {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    min-height: 280px;
-    transition: all 0.35s ease-out;
-    cursor: pointer;
-
-    &:hover {
-      transform: translateY(-16px);
-    }
-
-    .card-header {
-      border-bottom: none;
-      background: transparent;
-      padding: 1.5rem 1.5rem 0 2rem;
-    }
-
-    .circled-logo {
-      margin-left: -10px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .card-body {
-      padding: 1rem 1.5rem;
-      flex: 1;
-    }
-
-    .card-title {
-      font-weight: 700;
-      margin-bottom: 1rem;
-    }
-
-    .card-text {
-      font-size: 1rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .card-footer {
-      background-color: transparent;
-      border-top: none;
-      padding: 0;
-      height: 40px;
-      background-size: cover;
-      background-position: bottom;
-      background-repeat: no-repeat;
-      margin-top: auto;
-    }
-  }
-
-  // Apply colored footers to each card
-  > div:nth-child(1) .card .card-footer {
-    background-image: url("../img/cards/3-col-pink.svg");
-  }
-  > div:nth-child(2) .card .card-footer {
-    background-image: url("../img/cards/3col-blue-light-blue.svg");
-  }
-  > div:nth-child(3) .card .card-footer {
-    background-image: url("../img/cards/3-col-light-blue.svg");
-  }
-  > div:nth-child(4) .card .card-footer {
-    background-image: url("../img/cards/3col-blue-green.svg");
-  }
-  > div:nth-child(5) .card .card-footer {
-    background-image: url("../img/cards/3col-magenta.svg");
-  }
-  > div:nth-child(6) .card .card-footer {
-    background-image: url("../img/cards/3-col-orange.svg");
-  }
-}
-
-.light .page-tutorials .tutorial-cards .circled-logo img[alt="HTTP / WebSocket"] {
-  filter: invert(1);
-}
-
-// TOC buttons for tutorials page
-.page-tutorials .page-toc.no-sideline {
-  border-left: none;
-  gap: 0.75rem;
-
-  li {
-    a {
-      border-radius: 100px;
-      padding: 0.5rem 1rem;
-      margin: 0;
-      background-color: $gray-800;
-      color: $gray-200;
-      font-weight: 500;
-      transition: all 0.2s ease;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: $blue-purple-500;
-        color: $white;
-        border-left: none;
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-.light .page-tutorials .page-toc.no-sideline {
-  li a {
-    background-color: $gray-200;
-    color: $gray-800;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $blue-purple-500;
-      color: $white;
-    }
-  }
-}

styles/_tutorials.scss

@@ -0,0 +1,460 @@
+// Tutorials landing page styles
+
+// Card footer gradient images
+$card-footers: (
+  "3-col-pink",
+  "3col-blue-light-blue",
+  "3-col-light-blue",
+  "3col-blue-green",
+  "3col-magenta",
+  "3-col-orange"
+);
+
+$whats-new-footers: (
+  "3col-green-purple",
+  "3col-purple-blue-green",
+  "3col-green-blue"
+);
+
+// Tutorial cards
+.page-tutorials .tutorial-cards {
+  > div {
+    display: flex;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    min-height: 300px;
+    transition: all 0.35s ease-out;
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-16px);
+    }
+
+    .card-header {
+      border-bottom: none;
+      background: transparent;
+      padding: 1.5rem 1.5rem 0 2rem;
+    }
+
+    .circled-logo {
+      margin-left: -10px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .card-body {
+      padding: 1rem 1.5rem;
+      flex: 1;
+    }
+
+    .card-title {
+      font-weight: 700;
+      margin-bottom: 1rem;
+    }
+
+    .card-text {
+      font-size: 1rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .card-footer {
+      background-color: transparent;
+      border-top: none;
+      padding: 0;
+      height: 40px;
+      background-size: cover;
+      background-position: bottom;
+      background-repeat: no-repeat;
+      margin-top: auto;
+    }
+  }
+
+  // Apply colored footers to each card
+  @for $i from 1 through length($card-footers) {
+    > div:nth-child(#{$i}) .card .card-footer {
+      background-image: url("../img/cards/#{nth($card-footers, $i)}.svg");
+    }
+  }
+}
+
+// Light mode: invert HTTP/WebSocket icon
+.light .page-tutorials .tutorial-cards .circled-logo img[alt="HTTP / WebSocket"] {
+  filter: invert(1);
+}
+
+// Contribution Card - community contribution with meta links
+.page-tutorials .tutorial-cards .contribution-card {
+  .contribution-header {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+  }
+
+  .contribution-icon {
+    background: rgba($blue-purple-500, 0.15);
+    color: $blue-purple-300;
+    font-size: 26px;
+  }
+
+  .card-external-icon {
+    font-size: 0.85rem;
+    margin-left: 0.35rem;
+    color: $gray-500;
+    vertical-align: middle;
+  }
+
+  .card-meta-row {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.8rem;
+    flex-wrap: wrap;
+    margin-left: auto;
+    margin-top: -4px;
+
+    .meta-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.35rem;
+      color: $gray-300;
+      text-decoration: none;
+      transition: color 0.15s ease;
+
+      .fa {
+        font-size: 0.8rem;
+      }
+
+      &:hover {
+        color: $blue-purple-300;
+      }
+    }
+
+    .meta-dot {
+      color: $gray-500;
+      font-weight: bold;
+      user-select: none;
+    }
+  }
+}
+
+// Light mode: Contribution Card
+.light .page-tutorials .tutorial-cards .contribution-card {
+  .contribution-icon {
+    background: rgba($blue-purple-500, 0.1);
+    color: $blue-purple-600;
+  }
+
+  .card-meta-row {
+    .meta-link {
+      color: $gray-600;
+
+      &:hover {
+        color: $blue-purple-600;
+      }
+    }
+
+    .meta-dot {
+      color: $gray-500;
+    }
+  }
+}
+
+// TOC navigation buttons
+.page-tutorials .page-toc.no-sideline {
+  border-left: none;
+  gap: 0.75rem;
+
+  li {
+    a {
+      border-radius: 100px;
+      padding: 0.5rem 1rem;
+      margin: 0;
+      background-color: $gray-800;
+      color: $gray-200;
+      font-weight: 500;
+      transition: all 0.2s ease;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $blue-purple-500;
+        color: $white;
+        border-left: none;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+// Light mode: TOC buttons
+.light .page-tutorials .page-toc.no-sideline {
+  li a {
+    background-color: $gray-200;
+    color: $gray-800;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $blue-purple-500;
+      color: $white;
+    }
+  }
+}
+
+// What's New section
+.whats-new-section {
+  // Gradient underline on section title
+  h3 {
+    display: inline-block;
+    position: relative;
+    padding-bottom: 8px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 60px;
+      height: 3px;
+      background: linear-gradient(90deg, $blue-purple-500, $green-400);
+      border-radius: 2px;
+    }
+  }
+
+  // Different footer colors for What's New cards
+  .tutorial-cards {
+    @for $i from 1 through length($whats-new-footers) {
+      > div:nth-child(#{$i}) .card .card-footer {
+        background-image: url("../img/cards/#{nth($whats-new-footers, $i)}.svg");
+      }
+    }
+  }
+}
+
+// Quick Reference Card
+.page-tutorials .quick-ref-card {
+  background: rgba($gray-800, 0.7);
+  border: 1px solid $gray-700;
+  border-left: 3px solid $blue-purple-500;
+  border-radius: 12px;
+  padding: 1rem 1.5rem;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  margin-left: auto;
+  max-width: 480px;
+
+  @media (max-width: 991px) {
+    margin-left: 0;
+    max-width: 100%;
+  }
+
+  .quick-ref-section {
+    padding: 0.25rem 0;
+  }
+
+  .quick-ref-label {
+    display: block;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: $blue-purple-300;
+    margin-bottom: 0.75rem;
+  }
+
+  .quick-ref-group {
+    margin-bottom: 0.75rem;
+
+    &:last-of-type {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .quick-ref-key {
+    display: block;
+    font-size: 0.85rem;
+    color: $gray-300;
+    margin-bottom: 0.35rem;
+
+    strong {
+      font-weight: 700;
+      color: $white;
+    }
+  }
+
+  .quick-ref-urls {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 0.25rem 0.75rem;
+    align-items: center;
+    width: fit-content;
+    max-width: 100%;
+
+    @media (max-width: 576px) {
+      grid-template-columns: 1fr;
+      gap: 0.2rem;
+    }
+  }
+
+  .quick-ref-protocol {
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: $gray-500;
+    letter-spacing: 0.02em;
+  }
+
+  .quick-ref-value {
+    font-size: 0.75rem;
+    color: $blue-purple-300;
+    background: rgba($gray-900, 0.5);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .quick-ref-value-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+    max-width: 100%;
+    overflow: hidden;
+
+    &:hover {
+      opacity: 0.8;
+
+      .quick-ref-value {
+        background: rgba($gray-800, 0.8);
+      }
+    }
+
+    &.copied .quick-ref-value {
+      background: rgba($green-500, 0.2);
+      color: $green-400;
+    }
+
+    .copy-icon {
+      font-size: 0.7rem;
+      color: $green-400;
+      min-width: 0.8rem;
+      flex-shrink: 0;
+    }
+
+    @media (max-width: 576px) {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .quick-ref-link {
+    display: inline-block;
+    font-size: 0.8rem;
+    color: $blue-purple-300;
+    margin-top: 0.35rem;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .quick-ref-divider {
+    height: 1px;
+    background: $gray-700;
+    margin: 0.5rem 0;
+  }
+
+  .quick-ref-faucet {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: $white;
+    text-decoration: none;
+    padding: 0.25rem 0;
+
+    &:hover {
+      color: $blue-purple-300;
+    }
+
+    .quick-ref-arrow {
+      color: $blue-purple-400;
+    }
+  }
+}
+
+// Light mode: Quick Reference Card
+.light .page-tutorials .quick-ref-card {
+  background: rgba($white, 0.95);
+  border-color: $gray-300;
+  border-left: 3px solid $blue-purple-500;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+
+  .quick-ref-label {
+    color: $blue-purple-600;
+  }
+
+  .quick-ref-key {
+    color: $gray-700;
+
+    strong {
+      color: $gray-900;
+    }
+  }
+
+  .quick-ref-protocol {
+    color: $gray-500;
+  }
+
+  .quick-ref-value {
+    color: $blue-purple-600;
+    background: rgba($gray-300, 0.6);
+  }
+
+  .quick-ref-value-btn {
+    &:hover .quick-ref-value {
+      background: rgba($gray-400, 0.6);
+    }
+
+    &.copied .quick-ref-value {
+      background: rgba($green-500, 0.15);
+      color: $green-700;
+    }
+
+    .copy-icon {
+      color: $green-600;
+    }
+  }
+
+  .quick-ref-link {
+    color: $blue-purple-600;
+  }
+
+  .quick-ref-divider {
+    background: $gray-200;
+  }
+
+  .quick-ref-faucet {
+    color: $gray-900;
+
+    &:hover {
+      color: $blue-purple-600;
+    }
+
+    .quick-ref-arrow {
+      color: $blue-purple-500;
+    }
+  }
+}

styles/xrpl.scss

@@ -69,6 +69,7 @@ $line-height-base: 1.5;
 @import "_pages.scss";
 @import "_rpc-tool.scss";
 @import "_blog.scss";
+@import "_tutorials.scss";
 @import "_feedback.scss";
 @import "_video.scss";
 @import "_contribute.scss";