From 0142811ec9466ef64d2335c5c9c978b2999f949c Mon Sep 17 00:00:00 2001
From: amarantha-k <akulkarni@ripple.com>
Date: Wed, 19 Aug 2026 16:38:49 -0700
Subject: [PATCH] Update panel stack to have one heading for the section and
 remove obsolete slide heading

---
 community/developer-funding.page.tsx       |  9 +++--
 docs/use-cases/tokenization/index.page.tsx |  5 +--
 shared/patterns/PanelStack/PanelStack.tsx  | 45 ++++++++++++++++------
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/community/developer-funding.page.tsx b/community/developer-funding.page.tsx
index 1d7a0208b..fc82ad600 100644
--- a/community/developer-funding.page.tsx
+++ b/community/developer-funding.page.tsx
@@ -25,7 +25,6 @@ export default function Funding() {
   const carouselSlides: PanelStackPanel[] = [
     {
       id: "xrpl-grants-accelerator",
-      heading: translate("Explore XRPL Funding and Builders Programs"),
       features: [
         {
           title: translate("XRPL Grants & XRPL Accelerator"),
@@ -61,7 +60,6 @@ export default function Funding() {
     },
     {
       id: "xrpl-student-builder-residency",
-      heading: translate("Explore XRPL Funding and Builders Programs"),
       features: [
         {
           title: translate("XRPL Student Builder Residency"),
@@ -96,7 +94,6 @@ export default function Funding() {
     },
     {
       id: "xrpl-commons",
-      heading: translate("Explore XRPL Funding and Builders Programs"),
       features: [
         {
           title: translate("XRPL Commons"),
@@ -156,7 +153,11 @@ export default function Funding() {
         }}
       />
 
-      <PanelStack slides={carouselSlides} background="yellow" />
+      <PanelStack 
+        heading={translate("Explore XRPL Funding and Builders Programs")}
+        slides={carouselSlides} 
+        background="yellow" 
+      />
 
       <LogoSquareGrid
         variant="gray"
diff --git a/docs/use-cases/tokenization/index.page.tsx b/docs/use-cases/tokenization/index.page.tsx
index 42f289fe4..bc623d082 100644
--- a/docs/use-cases/tokenization/index.page.tsx
+++ b/docs/use-cases/tokenization/index.page.tsx
@@ -118,10 +118,10 @@ export default function Tokenization() {
       {/* 5. Token Utility and Market Integration — Carousel Featured (4 slides from Assets frame) */}
       <PanelStack
         background="neutral"
+        heading={translate('Token Utility and Market Integration')}
         slides={[
           {
             id: 'token-utility-trading',
-            heading: translate('Token Utility and Market Integration'),
             features: [
               {
                 title: translate('Trading'),
@@ -141,7 +141,6 @@ export default function Tokenization() {
           },
           {
             id: 'token-utility-collateral',
-            heading: translate('Token Utility and Market Integration'),
             features: [
               {
                 title: translate('Collateral Mobility'),
@@ -161,7 +160,6 @@ export default function Tokenization() {
           },
           {
             id: 'token-utility-delegated',
-            heading: translate('Token Utility and Market Integration'),
             features: [
               {
                 title: translate('Delegated Distribution'),
@@ -181,7 +179,6 @@ export default function Tokenization() {
           },
           {
             id: 'token-utility-crosschain',
-            heading: translate('Token Utility and Market Integration'),
             features: [
               {
                 title: translate('Cross-Chain Markets'),
diff --git a/shared/patterns/PanelStack/PanelStack.tsx b/shared/patterns/PanelStack/PanelStack.tsx
index 95be79edb..166aa909e 100644
--- a/shared/patterns/PanelStack/PanelStack.tsx
+++ b/shared/patterns/PanelStack/PanelStack.tsx
@@ -11,9 +11,13 @@ import type {
 
 /**
  * Props for a single panel in the PanelStack component.
- * Same shape as a CarouselFeatured slide.
+ * Extends CarouselSlide but makes heading optional since PanelStack
+ * can display a single heading above all panels.
  */
-export type PanelStackPanel = CarouselSlide;
+export interface PanelStackPanel extends Omit<CarouselSlide, 'heading'> {
+  /** Optional heading for this specific panel. If omitted, only the component-level heading is shown. */
+  heading?: string;
+}
 
 /**
  * Background color options for PanelStack.
@@ -25,11 +29,15 @@ export type PanelStackBackground = CarouselFeaturedBackground;
  * Props for the PanelStack pattern component.
  * Matches CarouselFeatured, minus carousel-only behavior.
  */
-export interface PanelStackProps extends CarouselFeaturedProps {
-  /** Array of panels to display. Same shape as CarouselFeatured slides. */
-  slides: readonly CarouselSlide[];
+export interface PanelStackProps extends Omit<CarouselFeaturedProps, 'slides'> {
+  /** Array of panels to display. Heading is optional for each panel. */
+  slides: readonly PanelStackPanel[];
   /** Background color variant. Defaults to 'grey'. */
   background?: PanelStackBackground;
+  /** Optional heading text displayed above all panels */
+  heading?: string;
+  /** Optional description text displayed below the heading */
+  description?: string;
 }
 
 /**
@@ -64,7 +72,7 @@ export interface PanelStackProps extends CarouselFeaturedProps {
  */
 export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
   (props, ref) => {
-    const { slides, background = "grey", className, children, ...rest } = props;
+    const { slides, background = "grey", heading, description, className, children, ...rest } = props;
 
     if (slides.length === 0) {
       console.warn("PanelStack: No slides provided");
@@ -77,6 +85,18 @@ export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
         className={clsx("bds-panel-stack", className)}
         {...rest}
       >
+        {heading && (
+          <PageGrid className="bds-panel-stack__header">
+            <PageGridRow>
+              <PageGridCol span={{ base: 4, md: 6, lg: 8 }}>
+                <div className="bds-panel-stack__header-text">
+                  <h4 className="h-md mb-0">{heading}</h4>
+                  {description && <p className="body-l mb-0">{description}</p>}
+                </div>
+              </PageGridCol>
+            </PageGridRow>
+          </PageGrid>
+        )}
         {slides.map((slide, index) => (
           <PageGrid
             key={slide.id}
@@ -92,11 +112,13 @@ export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
                 className="bds-carousel-featured__content-col order-1 order-lg-2"
               >
                 <div className="bds-carousel-featured__content">
-                  <div className="bds-carousel-featured__header">
-                    <h2 className="bds-carousel-featured__heading h-md">
-                      {slide.heading}
-                    </h2>
-                  </div>
+                  {slide.heading && (
+                    <div className="bds-carousel-featured__header">
+                      <h2 className="bds-carousel-featured__heading h-md">
+                        {slide.heading}
+                      </h2>
+                    </div>
+                  )}
 
                   <div className="bds-carousel-featured__bottom">
                     <ul className="bds-carousel-featured__features">
@@ -105,7 +127,6 @@ export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
                           key={featureIndex}
                           className="bds-carousel-featured__feature"
                         >
-                          <Divider color="base" weight="regular" />
                           <div className="bds-carousel-featured__feature-title body-r">
                             {feature.title}
                           </div>