From 269cfabdef6cef32f1683826ac1c6bc55d508d65 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Tue, 4 Nov 2025 15:52:32 -0500
Subject: [PATCH 1/2] add mobile journeys

---
 .../JourneyCards/JourneyCards.astro           | 127 +++++++++++-------
 .../JourneyCards/JourneyTabGrid.module.css    | 124 +++++++++++++++++
 .../JourneyCards/JourneyTabGrid.tsx           |  71 ++++++++++
 src/components/TabGrid/GridCard.module.css    |  20 ++-
 src/components/TabGrid/GridCard.tsx           |   4 +-
 src/components/TabGrid/README.md              |  11 +-
 6 files changed, 303 insertions(+), 54 deletions(-)
 create mode 100644 src/components/JourneyCards/JourneyTabGrid.module.css
 create mode 100644 src/components/JourneyCards/JourneyTabGrid.tsx

diff --git a/src/components/JourneyCards/JourneyCards.astro b/src/components/JourneyCards/JourneyCards.astro
index db9f8a7075a..4bcab29d6f9 100644
--- a/src/components/JourneyCards/JourneyCards.astro
+++ b/src/components/JourneyCards/JourneyCards.astro
@@ -1,5 +1,6 @@
 ---
 import { Tag, Typography } from "@chainlink/blocks"
+import { JourneyTabGrid } from "./JourneyTabGrid"
 
 const columns = [
   {
@@ -8,25 +9,25 @@ const columns = [
       {
         title: "Explore Cross-Chain Interoperability with CCIP",
         description: "Learn cross-chain concepts, workflows, and real-world use cases.",
-        badge: "CCIP",
+        badge: "ccip",
         href: "/",
       },
       {
         title: "Understand How Data Feeds Power dApps",
         description: "See how oracle data feeds deliver price feeds and reference data.",
-        badge: "DATA FEEDS",
+        badge: "data feeds",
         href: "/",
       },
       {
         title: "Learn How Data Streams Deliver Real-Time Data",
         description: "Understand how low-latency streams support time-sensitive applications.",
-        badge: "CCIP",
+        badge: "data streams",
         href: "/",
       },
       {
         title: "Discover Off-Chain Compute with Functions",
         description: "Learn how Functions connect smart contracts to APIs and custom logic.",
-        badge: "DATA FEEDS",
+        badge: "functions",
         href: "/",
       },
     ],
@@ -37,25 +38,25 @@ const columns = [
       {
         title: "Build Cross-Chain Apps with CCIP Tutorials",
         description: "Follow step-by-step guides with language switching (EVM, Rust, Move, etc.).",
-        badge: "CCIP",
+        badge: "ccip",
         href: "/",
       },
       {
         title: "Integrate Data Feeds into Smart Contracts",
         description: "Plug feeds into your apps with examples and addresses.",
-        badge: "DATA FEEDS",
+        badge: "data feeds",
         href: "/",
       },
       {
         title: "Implement Real-Time Use Cases with Data Streams",
         description: "Use low-latency data in trading, gaming, and other live applications.",
-        badge: "CCIP",
+        badge: "data streams",
         href: "/",
       },
       {
         title: "Connect Contracts to APIs with Functions",
         description: "Add external data and custom logic to your dApps.",
-        badge: "DATA FEEDS",
+        badge: "functions",
         href: "/",
       },
     ],
@@ -66,70 +67,94 @@ const columns = [
       {
         title: "Monitor CCIP Transactions in Real Time",
         description: "Track the progress and status of cross-chain transactions.",
-        badge: "CCIP",
+        badge: "ccip",
         href: "/",
       },
       {
         title: "Stay Up to Date with Data Feeds",
         description: "Rely on changelogs and schema updates for accuracy.",
-        badge: "DATA FEEDS",
+        badge: "data feeds",
         href: "/",
       },
       {
         title: "Deliver Reliable Low-Latency Data with Streams",
         description: "Operate Data Streams at scale for critical, time-sensitive use cases.",
-        badge: "CCIP",
+        badge: "data streams",
         href: "/",
       },
       {
         title: "Scale and Optimize Functions",
         description: "Debug, manage workloads, and grow your applications.",
-        badge: "DATA FEEDS",
+        badge: "functions",
         href: "/",
       },
     ],
   },
 ]
+
+// Transform columns to tabs format for JourneyTabGrid
+const tabs = columns.map((column) => ({
+  name: column.title,
+  items: column.items.map((item) => ({
+    title: item.title,
+    description: item.description,
+    link: item.href,
+    badge: item.badge,
+  })),
+}))
 ---
 
 <section>
-  <Typography variant="h4" className="section-title">Start your Chainlink journey</Typography>
-  <div class="journey-cards">
-    {
-      columns.map((column) => (
-        <div class="journey-column">
-          <header class="column-header">
-            <Typography variant="h5" className="column-title">
-              {column.title}
-            </Typography>
-          </header>
-          {column.items.map((item) => (
-            <a href={item.href} class="journey-card">
-              <div class="card-content">
-                <Typography variant="body-semi">{item.title}</Typography>
-                <Typography variant="body-s" color="muted">
-                  {item.description}
-                </Typography>
-              </div>
-
-              <footer class="journey-footer">
-                <Tag size="sm" className="footer-tag">
-                  <Typography variant="code-s">{item.badge}</Typography>
-                </Tag>
-                <img src="/assets/icons/upper-right-arrow.svg" class="footer-icon" />
-              </footer>
-            </a>
-          ))}
-        </div>
-      ))
-    }
-  </div>
+  <section class="desktop">
+    <Typography variant="h4" className="section-title">Start your Chainlink journey</Typography>
+    <div class="journey-cards">
+      {
+        columns.map((column) => (
+          <div class="journey-column">
+            <header class="column-header">
+              <Typography variant="h5" className="column-title">
+                {column.title}
+              </Typography>
+            </header>
+            {column.items.map((item) => (
+              <a href={item.href} class="journey-card">
+                <div class="card-content">
+                  <Typography variant="body-semi">{item.title}</Typography>
+                  <Typography variant="body-s" color="muted">
+                    {item.description}
+                  </Typography>
+                </div>
+
+                <footer class="journey-footer">
+                  <Tag size="sm" className="footer-tag">
+                    <Typography variant="code-s">{item.badge}</Typography>
+                  </Tag>
+                  <img src="/assets/icons/upper-right-arrow.svg" class="footer-icon" />
+                </footer>
+              </a>
+            ))}
+          </div>
+        ))
+      }
+    </div>
+  </section>
+  <section class="mobile">
+    <JourneyTabGrid header="Start your Chainlink journey" tabs={tabs} client:only="react" />
+  </section>
 </section>
 
 <style>
+  .desktop {
+    display: none;
+  }
+
+  .mobile {
+    display: block;
+  }
+
   .journey-cards {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 
   .journey-column {
@@ -143,6 +168,10 @@ const columns = [
     padding: var(--space-6x);
   }
 
+  .footer-tag {
+    text-transform: uppercase;
+  }
+
   .journey-card:hover {
     background-color: var(--muted);
 
@@ -201,9 +230,13 @@ const columns = [
     border-left: 3px solid var(--brand);
   }
 
-  @media (min-width: 50em) {
-    .journey-cards {
-      grid-template-columns: repeat(3, 1fr);
+  @media (min-width: 769px) {
+    .desktop {
+      display: block;
+    }
+
+    .mobile {
+      display: none;
     }
 
     .column-title {
diff --git a/src/components/JourneyCards/JourneyTabGrid.module.css b/src/components/JourneyCards/JourneyTabGrid.module.css
new file mode 100644
index 00000000000..39bc9c5012e
--- /dev/null
+++ b/src/components/JourneyCards/JourneyTabGrid.module.css
@@ -0,0 +1,124 @@
+/* Tab styling - copied from TabGrid */
+.gridHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-8x);
+  flex-wrap: wrap;
+  gap: var(--space-8x);
+}
+
+.tabsTrigger {
+  height: 32px;
+  padding: var(--space-1x) var(--space-2x);
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--space-2x);
+  background-color: var(--pill);
+  border: 1px solid var(--pill-border);
+}
+
+.tabsTrigger:hover {
+  background-color: var(--pill-hover);
+}
+
+.tabsTrigger[data-state="active"] {
+  background-color: var(--pill-active);
+  border-color: var(--pill-active);
+  border-bottom: 1px solid var(--pill-active);
+
+  & h3 {
+    color: var(--pill-active-foreground);
+  }
+}
+
+.tabTitle {
+  color: var(--pill-foreground);
+  font-weight: 400;
+}
+
+.tabsList {
+  display: flex;
+  gap: var(--space-2x);
+  border-bottom: 0;
+  flex-wrap: wrap;
+  justify-content: start !important;
+}
+
+.journeyGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  border-left: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+
+.journeyCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6x);
+  padding: var(--space-6x);
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.journeyCard:hover {
+  background-color: var(--muted);
+
+  .footerTag {
+    background-color: var(--background);
+  }
+
+  .footerIcon {
+    opacity: 1;
+  }
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2x);
+}
+
+.journeyFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  flex: 1;
+  width: 100%;
+}
+
+.footerIcon {
+  height: 12px;
+  width: 12px;
+  opacity: 0;
+}
+
+.footerTag {
+  text-transform: uppercase;
+}
+
+@media (max-width: 768px) {
+  .journeyGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .gridHeader > h2 {
+    font-size: 28px;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .journeyGrid {
+    grid-template-columns: 1fr;
+  }
+  .gridHeader {
+    margin-bottom: var(--space-6x);
+  }
+}
+
+@media screen and (max-width: 390px) {
+  .gridHeader {
+    flex-direction: column;
+    align-items: start;
+  }
+}
diff --git a/src/components/JourneyCards/JourneyTabGrid.tsx b/src/components/JourneyCards/JourneyTabGrid.tsx
new file mode 100644
index 00000000000..ab44a3b0fba
--- /dev/null
+++ b/src/components/JourneyCards/JourneyTabGrid.tsx
@@ -0,0 +1,71 @@
+import styles from "./JourneyTabGrid.module.css"
+import { Tabs, TabsContent, TabsList, TabsTrigger, Typography, Tag } from "@chainlink/blocks"
+
+export interface JourneyItem {
+  title: string
+  description: string
+  link: string
+  badge?: string
+}
+
+export interface JourneyTab {
+  name: string
+  items: JourneyItem[]
+}
+
+interface JourneyTabGridProps {
+  tabs: JourneyTab[]
+  header: string
+}
+
+export const JourneyTabGrid = ({ tabs, header }: JourneyTabGridProps) => {
+  return (
+    <Tabs defaultValue={tabs[0].name} className={styles.tabGridWrapper}>
+      <header className={styles.gridHeader}>
+        <Typography
+          variant="h2"
+          style={{
+            fontSize: "32px",
+          }}
+        >
+          {header}
+        </Typography>
+        <TabsList className={styles.tabsList}>
+          {tabs.map((tab) => (
+            <TabsTrigger key={tab.name} value={tab.name} className={styles.tabsTrigger}>
+              <h3 className={styles.tabTitle}>{tab.name}</h3>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </header>
+
+      {tabs.map((tab) => (
+        <TabsContent key={tab.name} value={tab.name}>
+          <div className={styles.gridContent}>
+            <div className={styles.journeyGrid}>
+              {tab.items.map((item, index) => (
+                <a key={`${item.title}-${index}`} href={item.link} className={styles.journeyCard}>
+                  <div className={styles.cardContent}>
+                    <Typography variant="body-semi">{item.title}</Typography>
+                    <Typography variant="body-s" color="muted">
+                      {item.description}
+                    </Typography>
+                  </div>
+
+                  <footer className={styles.journeyFooter}>
+                    {item.badge && (
+                      <Tag size="sm" className={styles.footerTag}>
+                        <Typography variant="code-s">{item.badge}</Typography>
+                      </Tag>
+                    )}
+                    <img src="/assets/icons/upper-right-arrow.svg" className={styles.footerIcon} alt="" />
+                  </footer>
+                </a>
+              ))}
+            </div>
+          </div>
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}
diff --git a/src/components/TabGrid/GridCard.module.css b/src/components/TabGrid/GridCard.module.css
index 4c4e1b2626e..1107c7bff45 100644
--- a/src/components/TabGrid/GridCard.module.css
+++ b/src/components/TabGrid/GridCard.module.css
@@ -6,7 +6,7 @@
   gap: var(--space-6x);
   border-right: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
-
+  flex-direction: column;
   &:hover .cardFooter {
     opacity: 1;
   }
@@ -61,6 +61,10 @@
   margin-top: auto;
   /* enforcing a width */
   min-width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .cardFooter img {
@@ -68,6 +72,20 @@
   height: 10px;
 }
 
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1x) var(--space-2x);
+  background-color: var(--gray-100);
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: var(--gray-600);
+  letter-spacing: 0.5px;
+  opacity: 1;
+}
+
 .cardTitle {
   font-size: 16px;
   font-weight: 525;
diff --git a/src/components/TabGrid/GridCard.tsx b/src/components/TabGrid/GridCard.tsx
index e83883d8426..e6d4281a267 100644
--- a/src/components/TabGrid/GridCard.tsx
+++ b/src/components/TabGrid/GridCard.tsx
@@ -5,9 +5,10 @@ export interface GridItem {
   title: string
   description: string
   link: string
+  badge?: string
 }
 
-export const GridCard = ({ title, description, link }: GridItem) => {
+export const GridCard = ({ title, description, link, badge }: GridItem) => {
   return (
     <a href={link} className={styles.card}>
       <div>
@@ -18,6 +19,7 @@ export const GridCard = ({ title, description, link }: GridItem) => {
       </div>
 
       <div className={styles.cardFooter}>
+        {badge && <span className={styles.badge}>{badge}</span>}
         <img src="/assets/icons/upper-right-arrow.svg" alt="arrow" />
       </div>
     </a>
diff --git a/src/components/TabGrid/README.md b/src/components/TabGrid/README.md
index 0edc1934c0c..52445286fe8 100644
--- a/src/components/TabGrid/README.md
+++ b/src/components/TabGrid/README.md
@@ -76,11 +76,12 @@ Each grid item needs three pieces of information:
 
 ### `GridItem`
 
-| Property      | Type     | Required | Description                                  |
-| ------------- | -------- | -------- | -------------------------------------------- |
-| `title`       | `string` | Yes      | The item's heading                           |
-| `description` | `string` | Yes      | A brief explanation of what users will learn |
-| `link`        | `string` | Yes      | The URL path to the item page                |
+| Property      | Type     | Required | Description                                       |
+| ------------- | -------- | -------- | ------------------------------------------------- |
+| `title`       | `string` | Yes      | The item's heading                                |
+| `description` | `string` | Yes      | A brief explanation of what users will learn      |
+| `link`        | `string` | Yes      | The URL path to the item page                     |
+| `badge`       | `string` | No       | Optional badge label (e.g., "CCIP", "DATA FEEDS") |
 
 ## Components
 

From 44f809b7ad0f54ffad5fd572a4ccc1ebd9be9bd8 Mon Sep 17 00:00:00 2001
From: Tyrel Chambers <tychambers3@gmail.com>
Date: Tue, 4 Nov 2025 16:01:42 -0500
Subject: [PATCH 2/2] remove old grid card css

---
 src/components/TabGrid/GridCard.module.css | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/components/TabGrid/GridCard.module.css b/src/components/TabGrid/GridCard.module.css
index 1107c7bff45..655ffb7cd16 100644
--- a/src/components/TabGrid/GridCard.module.css
+++ b/src/components/TabGrid/GridCard.module.css
@@ -72,30 +72,9 @@
   height: 10px;
 }
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--space-1x) var(--space-2x);
-  background-color: var(--gray-100);
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: var(--gray-600);
-  letter-spacing: 0.5px;
-  opacity: 1;
-}
-
 .cardTitle {
   font-size: 16px;
   font-weight: 525;
   color: var(--foreground);
   margin-bottom: var(--space-2x);
 }
-
-.cardDescription {
-  color: var(--color-text-secondary);
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin: 0;
-}