Skip to content

Add chainlink journey #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 3, 2025
Merged

Add chainlink journey #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f90f257
add journey cards
tyrelchambers Oct 28, 2025
1aa22fc
move components
tyrelchambers Oct 28, 2025
d6fc4a0
Merge branch 'dev-3.0' into feat/126-chainlink-journey
Zelig880 Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 211 additions & 0 deletions src/components/JourneyCards/JourneyCards.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
67 changes: 44 additions & 23 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`
---
Expand All @@ -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>
Expand Down Expand Up @@ -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);
Expand All @@ -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%);
}
Expand All @@ -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;
}
Expand Down
Loading