thisdot · Zelig880 · Nov 4, 2025 · Oct 28, 2025 · Oct 28, 2025 · Oct 28, 2025
diff --git a/public/images/code-sample.png b/public/images/code-sample.png
diff --git a/src/components/TechnicalStandards/TechnicalStandards.astro b/src/components/TechnicalStandards/TechnicalStandards.astro
@@ -0,0 +1,109 @@
+---
+import { Typography } from "@chainlink/blocks"
+
+const cards = [
+  {
+    title: "Digital Transfer Agent (DTA)",
+    description: "You might be interested in this end-to-end solution. It can solve your problems.",
+    image: "/images/ccip/ccip-hero-bg.png",
+    href: "/",
+  },
+  {
+    title: "Delivery vs. Payment (DvP)",
+    description: "You might be interested in this end-to-end solution. It can solve your problems.",
+    image: "/images/code-sample.png",
+    href: "/",
+  },
+]
+---
+
+<div class="technical-standards">
+  {
+    cards.map((card) => (
+      <a href={card.href} class="standard-card">
+        <div class="card-image" style={`background-image: url(${card.image})`} />
+        <div class="card-body">
+          <div class="card-text">
+            <Typography variant="h5">{card.title}</Typography>
+            <Typography variant="body-l" color="muted">
+              {card.description}
+            </Typography>
+          </div>
+        </div>
+        <img src="/assets/icons/upper-right-arrow.svg" class="card-arrow" />
+      </a>
+    ))
+  }
+</div>
+
+<style>
+  .technical-standards {
+    display: grid;
+    grid-template-columns: 1fr;
+    border: 1px solid var(--border);
+  }
+
+  .standard-card {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-6x);
+    gap: var(--space-6x);
+    align-items: start;
+  }
+
+  .standard-card:hover {
+    background-color: var(--muted);
+  }
+
+  .standard-card:hover .card-arrow {
+    opacity: 1;
+  }
+
+  .card-image {
+    width: 140px;
+    height: 140px;
+    background-repeat: no-repeat;
+  }
+  .standard-card:first-child {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .standard-card:first-child .card-image {
+  }
+
+  .card-body,
+  .card-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4x);
+    flex: 1;
+  }
+
+  .card-arrow {
+    height: 12px;
+    width: 12px;
+    opacity: 0;
+    align-self: flex-end;
+  }
+
+  @media (min-width: 50em) {
+    .technical-standards {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .standard-card {
+      flex-direction: row;
+    }
+
+    .standard-card:first-child {
+      border-right: 1px solid var(--border);
+      border-bottom: 0;
+    }
+
+    .card-body,
+    .card-text {
+      flex: 1;
+      justify-content: space-between;
+    }
+  }
+</style>
diff --git a/src/features/landing/sections/JourneyCards.astro b/src/features/landing/sections/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
@@ -1,6 +1,7 @@
 ---
 import ProductTabs from "../features/landing/sections/ProductTabs.astro"
 import JourneyCards from "~/components/JourneyCards/JourneyCards.astro"
+import TechnicalStandards from "~/components/TechnicalStandards/TechnicalStandards.astro"
 import BaseLayout from "~/layouts/BaseLayout.astro"
 
 import * as CONFIG from "../config"
@@ -26,6 +27,11 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
         <JourneyCards />
       </div>
 
+      <div class="section">
+        <Typography variant="h4" className="section-title">Technical Standards</Typography>
+        <TechnicalStandards />
+      </div>
+
       <div class="recommended">
         <h4>Recommended reading</h4>
         <h2>We think you'd love to explore</h2>