diff --git a/src/components/CCIP/Token/Token.astro b/src/components/CCIP/Token/Token.astro
index 9cde2a10ca3..daa30944c7e 100644
--- a/src/components/CCIP/Token/Token.astro
+++ b/src/components/CCIP/Token/Token.astro
@@ -1,6 +1,5 @@
---
import CcipLayout from "~/layouts/CcipLayout.astro"
-import { getEntry } from "astro:content"
import {
getAllNetworks,
getAllSupportedTokens,
@@ -14,12 +13,25 @@ import {
import ChainHero from "~/components/CCIP/ChainHero/ChainHero"
import Table from "~/components/CCIP/Tables/TokenChainsTable"
import { directoryToSupportedChain, getChainIcon, getExplorer, getTitle, getTokenIconUrl } from "~/features/utils"
-import Drawer from "~/components/CCIP/Drawer/Drawer"
const { token, logo, environment } = Astro.props as { token: string; logo: string; environment: Environment }
-const entry = await getEntry("ccip", "index")
-const { headings } = await entry.render()
+const frontmatter = {
+ title: `CCIP Supported Tokens - ${token}`,
+ section: "ccip" as const,
+ metadata: {
+ description: `View supported blockchains and configurations for ${token} token on Chainlink CCIP.`,
+ },
+}
+
+const headings = [
+ {
+ depth: 1,
+ slug: "overview",
+ text: frontmatter.title,
+ },
+]
+
const networks = getAllNetworks({ filter: environment })
const supportedTokens = getAllSupportedTokens({
@@ -56,14 +68,7 @@ const tokenLanes = getAllTokenLanes({
const searchLanes = getSearchLanes({ environment })
---
-
+
= {
+ ccip: ccipRoles,
+ // Add other products here when they're ready for the role-based layout
+}
diff --git a/src/config/roles/types.ts b/src/config/roles/types.ts
new file mode 100644
index 00000000000..8b318a6c302
--- /dev/null
+++ b/src/config/roles/types.ts
@@ -0,0 +1,20 @@
+export type LinkType = "overview" | "concept" | "get-started" | "guide" | "reference"
+
+export interface RoleLink {
+ type: LinkType
+ title: string
+ url: string
+}
+
+export interface RoleConfig {
+ id: string
+ title: string
+ description: string
+ iconType: string
+ links: RoleLink[]
+}
+
+export interface ProductRoles {
+ productId: string
+ roles: RoleConfig[]
+}
diff --git a/src/config/sidebar.ts b/src/config/sidebar.ts
index 6b0a13ed1ac..0da19585e70 100644
--- a/src/config/sidebar.ts
+++ b/src/config/sidebar.ts
@@ -971,6 +971,10 @@ export const SIDEBAR: Partial> = {
title: "Overview",
url: "ccip",
},
+ {
+ title: "About CCIP",
+ url: "ccip/about",
+ },
{
title: "Getting Started",
url: "ccip/getting-started",
diff --git a/src/content/ccip/index.mdx b/src/content/ccip/about.mdx
similarity index 96%
rename from src/content/ccip/index.mdx
rename to src/content/ccip/about.mdx
index 65bcfb9be31..cee7d7bd56f 100644
--- a/src/content/ccip/index.mdx
+++ b/src/content/ccip/about.mdx
@@ -2,7 +2,8 @@
section: ccip
date: Last Modified
title: "Chainlink CCIP"
-isIndex: true
+metadata:
+ description: "Chainlink CCIP is a secure blockchain interoperability protocol enabling cross-chain token transfers and messaging. Built with defense-in-depth security, it powers Web3 applications across multiple networks with industry-leading oracle infrastructure."
whatsnext:
{
"Complete the Getting Started guide to learn the basics": "/ccip/getting-started",
diff --git a/src/features/landing/components/RoleCardGeneric.tsx b/src/features/landing/components/RoleCardGeneric.tsx
new file mode 100644
index 00000000000..14f55c4a8fe
--- /dev/null
+++ b/src/features/landing/components/RoleCardGeneric.tsx
@@ -0,0 +1,56 @@
+import React from "react"
+import type { RoleConfig } from "@config/roles/types"
+import { roleIconMap } from "@assets/role-icons"
+import styles from "./RoleCards.module.css"
+
+interface RoleCardGenericProps {
+ role: RoleConfig
+}
+
+export const RoleCardGeneric = ({ role }: RoleCardGenericProps) => {
+ const { title, description, iconType, links } = role
+
+ const groupedLinks = links.reduce((acc, link) => {
+ if (!acc[link.type]) {
+ acc[link.type] = []
+ }
+ acc[link.type].push(link)
+ return acc
+ }, {} as Record)
+
+ return (
+
+
+
+
+ {iconType && (
+
+ )}
+
+ {title}
+
+
+
+
{description}
+
+
+
+
+ {roles.map((role) => (
+
+ ))}
+
+