diff --git a/src/components/JourneyCards/JourneyCards.astro b/src/components/JourneyCards/JourneyCards.astro
new file mode 100644
index 00000000000..77735771660
--- /dev/null
+++ b/src/components/JourneyCards/JourneyCards.astro
@@ -0,0 +1,211 @@
+---
+import { Tag, Typography } from "@chainlink/blocks"
+
+const columns = [
+  {
+    title: "Learn & Explore",
+    items: [
+      {
+        title: "Explore Cross-Chain Interoperability with CCIP",
+        description: "Learn cross-chain concepts, workflows, and real-world use cases.",
+        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",
+        href: "/",
+      },
+      {
+        title: "Learn How Data Streams Deliver Real-Time Data",
+        description: "Understand how low-latency streams support time-sensitive applications.",
+        badge: "CCIP",
+        href: "/",
+      },
+      {
+        title: "Discover Off-Chain Compute with Functions",
+        description: "Learn how Functions connect smart contracts to APIs and custom logic.",
+        badge: "DATA FEEDS",
+        href: "/",
+      },
+    ],
+  },
+  {
+    title: "Build & Integrate",
+    items: [
+      {
+        title: "Build Cross-Chain Apps with CCIP Tutorials",
+        description: "Follow step-by-step guides with language switching (EVM, Rust, Move, etc.).",
+        badge: "CCIP",
+        href: "/",
+      },
+      {
+        title: "Integrate Data Feeds into Smart Contracts",
+        description: "Plug feeds into your apps with examples and addresses.",
+        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",
+        href: "/",
+      },
+      {
+        title: "Connect Contracts to APIs with Functions",
+        description: "Add external data and custom logic to your dApps.",
+        badge: "DATA FEEDS",
+        href: "/",
+      },
+    ],
+  },
+  {
+    title: "Operate & Scale",
+    items: [
+      {
+        title: "Monitor CCIP Transactions in Real Time",
+        description: "Track the progress and status of cross-chain transactions.",
+        badge: "CCIP",
+        href: "/",
+      },
+      {
+        title: "Stay Up to Date with Data Feeds",
+        description: "Rely on changelogs and schema updates for accuracy.",
+        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",
+        href: "/",
+      },
+      {
+        title: "Scale and Optimize Functions",
+        description: "Debug, manage workloads, and grow your applications.",
+        badge: "DATA FEEDS",
+        href: "/",
+      },
+    ],
+  },
+]
+---
+
+<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>
+
+<style>
+  .journey-cards {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .journey-column {
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid var(--border);
+  }
+
+  .journey-card {
+    gap: var(--space-6x);
+    padding: var(--space-6x);
+  }
+
+  .journey-card:hover {
+    background-color: var(--muted);
+
+    .footer-tag {
+      background-color: var(--background) !important;
+    }
+
+    .footer-icon {
+      opacity: 1;
+    }
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2x);
+    margin-bottom: var(--space-8x);
+  }
+
+  .journey-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .footer {
+    padding-top: var(--space-1x);
+  }
+  .footer-icon {
+    height: 12px;
+    width: 12px;
+    opacity: 0;
+  }
+
+  .card-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;
+    align-self: flex-start;
+  }
+
+  .column-header {
+    padding: var(--space-2x) var(--space-6x);
+    border-left: 3px solid var(--brand);
+  }
+
+  @media (min-width: 50em) {
+    .journey-cards {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .column-title {
+      font-size: 22px;
+      line-height: 26px;
+    }
+
+    .journey-card h4 {
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3cdc6ebef20..4e798f8a2fc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,10 @@
 ---
 import ProductTabs from "../features/landing/sections/ProductTabs.astro"
+import JourneyCards from "~/components/JourneyCards/JourneyCards.astro"
 import BaseLayout from "~/layouts/BaseLayout.astro"
 
 import * as CONFIG from "../config"
+import { Typography } from "@chainlink/blocks"
 
 const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}`
 ---
@@ -17,18 +19,26 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
         <ProductTabs />
       </div>
     </div>
-    <div class="recommended">
-      <h4>Recommended reading</h4>
-      <h2>We think you'd love to explore</h2>
-      <div>
-        <a href="/getting-started/conceptual-overview">General</a>
-        <a href="/resources/link-token-contracts">Link Token Contracts</a>
-        <a href="/ccip/getting-started">Getting Started with CCIP</a>
-        <a href="/ccip/directory">CCIP Directory</a>
-        <a href="/data-feeds/price-feeds/addresses">Data Feed Addresses</a>
-        <a href="/data-feeds/smartdata/addresses">SmartData Feed Addresses</a>
-        <a href="/data-streams/getting-started-hardhat">Getting Started with Data Streams</a>
-        <a href="/data-streams/crypto-streams">Data Streams Addresses</a>
+
+    <div class="wrapper">
+      <div class="section">
+        <Typography variant="h4" className="section-title">Start your Chainlink journey</Typography>
+        <JourneyCards />
+      </div>
+
+      <div class="recommended">
+        <h4>Recommended reading</h4>
+        <h2>We think you'd love to explore</h2>
+        <div>
+          <a href="/getting-started/conceptual-overview">General</a>
+          <a href="/resources/link-token-contracts">Link Token Contracts</a>
+          <a href="/ccip/getting-started">Getting Started with CCIP</a>
+          <a href="/ccip/directory">CCIP Directory</a>
+          <a href="/data-feeds/price-feeds/addresses">Data Feed Addresses</a>
+          <a href="/data-feeds/smartdata/addresses">SmartData Feed Addresses</a>
+          <a href="/data-streams/getting-started-hardhat">Getting Started with Data Streams</a>
+          <a href="/data-streams/crypto-streams">Data Streams Addresses</a>
+        </div>
       </div>
     </div>
   </main>
@@ -133,6 +143,23 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
     background-color: var(--blue-100);
   }
 
+  .section-title {
+    font-size: 32px;
+    margin-bottom: var(--space-10x);
+  }
+
+  .section {
+    margin: 0 var(--space-6x);
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 82px;
+    max-width: var(--fullwidth-max-width);
+    margin: 0 auto;
+  }
+
   @media (min-width: 50em) {
     .hero {
       max-width: var(--fullwidth-max-width);
@@ -158,11 +185,6 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
       font-weight: 600;
     }
 
-    .recommended {
-      margin: var(--space-16x) auto;
-      max-width: var(--fullwidth-max-width);
-    }
-
     .heroContainer {
       background: linear-gradient(180deg, #f1f5fe 0%, white 100%);
     }
@@ -177,14 +199,13 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
       line-height: var(--space-6x);
       margin-bottom: var(--space-2x);
     }
+    .wrapper {
+      margin-top: 60px;
+    }
   }
   @media (min-width: 72em) {
-    .hero {
-      max-width: min(1200px, calc(100% - 2 * var(--space-16x)));
-      padding: 0;
-    }
-
-    .recommended {
+    .hero,
+    .wrapper {
       max-width: min(1200px, calc(100% - 2 * var(--space-16x)));
       padding: 0;
     }