From aea721d1cdcb1ecb433ff9bba18c3e747529e604 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Tue, 14 Oct 2025 12:21:34 -0400 Subject: [PATCH 1/5] add cards --- public/assets/icons/Arrow Right.svg | 3 + src/assets/icons/remix-logo.svg | 13 +++ src/assets/icons/remix-logo2.svg | 9 ++ src/assets/icons/token-icon.svg | 19 ++++ src/components/Cards/Card.astro | 17 +++ src/components/Cards/CardLink.astro | 17 +++ src/components/Cards/CardsWrapper.astro | 15 +++ src/components/Cards/cards.module.css | 103 +++++++++++++++++ src/components/Cards/types.ts | 10 ++ src/components/PageContent/PageContent.astro | 1 + src/layouts/DocsLayout.astro | 1 + src/pages/index.astro | 113 +++++++++++++++++++ 12 files changed, 321 insertions(+) create mode 100644 public/assets/icons/Arrow Right.svg create mode 100644 src/assets/icons/remix-logo.svg create mode 100644 src/assets/icons/remix-logo2.svg create mode 100644 src/assets/icons/token-icon.svg create mode 100644 src/components/Cards/Card.astro create mode 100644 src/components/Cards/CardLink.astro create mode 100644 src/components/Cards/CardsWrapper.astro create mode 100644 src/components/Cards/cards.module.css create mode 100644 src/components/Cards/types.ts diff --git a/public/assets/icons/Arrow Right.svg b/public/assets/icons/Arrow Right.svg new file mode 100644 index 00000000000..c73460f5326 --- /dev/null +++ b/public/assets/icons/Arrow Right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/remix-logo.svg b/src/assets/icons/remix-logo.svg new file mode 100644 index 00000000000..4580f3bf83b --- /dev/null +++ b/src/assets/icons/remix-logo.svg @@ -0,0 +1,13 @@ + +
 + + + + + + + + + + + diff --git a/src/assets/icons/remix-logo2.svg b/src/assets/icons/remix-logo2.svg new file mode 100644 index 00000000000..cfa796bbc42 --- /dev/null +++ b/src/assets/icons/remix-logo2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/token-icon.svg b/src/assets/icons/token-icon.svg new file mode 100644 index 00000000000..2b8c333d430 --- /dev/null +++ b/src/assets/icons/token-icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Cards/Card.astro b/src/components/Cards/Card.astro new file mode 100644 index 00000000000..b50629ebac1 --- /dev/null +++ b/src/components/Cards/Card.astro @@ -0,0 +1,17 @@ +--- +import CardLink from "./CardLink.astro" +import styles from "./cards.module.css" +import { ICard } from "./types" + +type Props = ICard + +const { title, description, links } = Astro.props +--- + +
+
{title}
+

{description}

+
+ {links && links.map((l) => )} +
+
diff --git a/src/components/Cards/CardLink.astro b/src/components/Cards/CardLink.astro new file mode 100644 index 00000000000..0b811a0d395 --- /dev/null +++ b/src/components/Cards/CardLink.astro @@ -0,0 +1,17 @@ +--- +import styles from "./cards.module.css" +import { ILink } from "./types" + +interface Props { + link: ILink +} + +const { link } = Astro.props +--- + + + + + {link.label} + arrow right + diff --git a/src/components/Cards/CardsWrapper.astro b/src/components/Cards/CardsWrapper.astro new file mode 100644 index 00000000000..cb91045a25d --- /dev/null +++ b/src/components/Cards/CardsWrapper.astro @@ -0,0 +1,15 @@ +--- +import Card from "./Card.astro" +import styles from "./cards.module.css" +import { ICard } from "./types.ts" + +interface Props { + links: ICard[] +} + +const { links } = Astro.props +--- + +
+ {links.map((link) => )} +
diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css new file mode 100644 index 00000000000..f9e97025698 --- /dev/null +++ b/src/components/Cards/cards.module.css @@ -0,0 +1,103 @@ +.cardsWrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.cardsWrapper h6 { + font-size: 18px; + margin-bottom: var(--space-4x); +} + +.cardsWrapper p { + font-size: 14px; + line-height: 24px; /* 171.429% */ +} + +.card { + padding: 20px var(--space-6x); + background: #fff; +} + +.card:hover { + background: var(--gray-100); +} + +.links { + display: flex; + flex-direction: column; + margin-top: var(--space-6x); + gap: var(--space-4x); +} + +.link { + color: var(--Color-Primary, #0e1119); + display: flex; + gap: var(--space-2x); + align-items: center; +} + +.link:hover span { + opacity: 0.7; +} + +@media screen and (min-width: 769px) { + .cardsWrapper { + grid-template-columns: repeat(3, 1fr); + } + + .card:first-child { + border: 1px solid rgba(22, 37, 65, 0.13); + } + + .card:not(:first-child) { + border-bottom: 1px solid rgba(22, 37, 65, 0.13); + border-right: 1px solid rgba(22, 37, 65, 0.13); + } + + .card:nth-child(-n + 3) { + border-top: 1px solid rgba(22, 37, 65, 0.13); + } + + .card:nth-child(3n + 1) { + border-left: 1px solid rgba(22, 37, 65, 0.13); + } +} + +@media screen and (max-width: 768px) { + .cardsWrapper { + grid-template-columns: repeat(2, 1fr); + } + + .card:first-child { + border: 1px solid rgba(22, 37, 65, 0.13); + } + + .card:not(:first-child) { + border-bottom: 1px solid rgba(22, 37, 65, 0.13); + border-right: 1px solid rgba(22, 37, 65, 0.13); + } + + .card:nth-child(-n + 2) { + border-top: 1px solid rgba(22, 37, 65, 0.13); + } + + .card:nth-child(2n + 1) { + border-left: 1px solid rgba(22, 37, 65, 0.13); + } +} + +@media screen and (max-width: 494px) { + .cardsWrapper { + grid-template-columns: 1fr; + } + + .card:first-child { + border: 1px solid rgba(22, 37, 65, 0.13); + } + + .card:not(:first-child) { + border-left: 1px solid rgba(22, 37, 65, 0.13); + border-right: 1px solid rgba(22, 37, 65, 0.13); + border-bottom: 1px solid rgba(22, 37, 65, 0.13); + } +} diff --git a/src/components/Cards/types.ts b/src/components/Cards/types.ts new file mode 100644 index 00000000000..8d29d5ea569 --- /dev/null +++ b/src/components/Cards/types.ts @@ -0,0 +1,10 @@ +export interface ILink { + icon: ImageMetadata + href: string + label: string +} +export interface ICard { + title: string + description: string + links?: ILink[] +} diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro index 7fa2c5880eb..104d4999267 100644 --- a/src/components/PageContent/PageContent.astro +++ b/src/components/PageContent/PageContent.astro @@ -9,6 +9,7 @@ const { titleHeading } = Astro.props

{titleHeading.text}

+
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro index 06235056e82..f94767ed5b0 100644 --- a/src/layouts/DocsLayout.astro +++ b/src/layouts/DocsLayout.astro @@ -10,6 +10,7 @@ import StickyHeader from "~/components/StickyHeader/StickyHeader" import BaseLayout from "./BaseLayout.astro" import { VersionSelector } from "~/components/VersionSelector/index.js" import { detectApiReference } from "@components/VersionSelector/utils/versions" +import CardsWrapper from "~/components/Cards/CardsWrapper.astro" interface Props { frontmatter: BaseFrontmatter diff --git a/src/pages/index.astro b/src/pages/index.astro index 0c08784a072..8a25eaa7247 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,8 +5,119 @@ import HeroCTA from "../features/landing/sections/HeroCTA.astro" import BaseLayout from "~/layouts/BaseLayout.astro" import * as CONFIG from "../config" +import CardsWrapper from "~/components/Cards/CardsWrapper.astro" + +import tokenIcon from "../assets/icons/token-icon.svg" +import remixIcon from "../assets/icons/remix-logo.svg" const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` + +const sample = [ + { + title: "Deploy/enable a token across multiple chains", + description: + "Create a new Cross-Chain-Token or enable an established one that can be launched on 50+ chains, providing unparalleled interoperability and reach.", + links: [ + { + icon: tokenIcon, + href: "https://example.com", + label: "View Token Manager", + }, + { + icon: remixIcon, + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, + { + title: "Bridge a token", + description: + "Securely transfer tokens - including ETH, USDC, LINK - and messages between different blockchain networks.", + links: [ + { + icon: tokenIcon, + href: "https://example.com", + label: "View Token Manager", + }, + { + icon: remixIcon, + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, + { + title: "Send a token with data", + description: + "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.", + links: [ + { + icon: remixIcon, + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, + { + title: "Deploy/enable a token across multiple chains", + description: + "Create a new Cross-Chain-Token or enable an established one that can be launched on 50+ chains, providing unparalleled interoperability and reach.", + links: [ + { + icon: tokenIcon, + href: "https://example.com", + label: "View Token Manager", + }, + { + icon: remixIcon, + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, + { + title: "Bridge a token", + description: + "Securely transfer tokens - including ETH, USDC, LINK - and messages between different blockchain networks.", + links: [ + { + icon: tokenIcon, + href: "https://example.com", + label: "View Token Manager", + }, + { + icon: remixIcon, + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, + { + title: "Send a token with data", + description: + "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.", + links: [ + { + icon: remixIcon, + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, + { + title: "Send a token with data", + description: + "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.", + links: [ + { + icon: remixIcon, + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, +] --- @@ -15,6 +126,8 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl

Chainlink Developer Docs

What are you building?

+ +
From 5b44ebaa721783ef29c2ea62f16f52ead0069c86 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Fri, 17 Oct 2025 14:23:05 -0400 Subject: [PATCH 2/5] update styling --- src/components/Cards/Card.astro | 3 ++- src/components/Cards/cards.module.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Cards/Card.astro b/src/components/Cards/Card.astro index b50629ebac1..af7e3e638d4 100644 --- a/src/components/Cards/Card.astro +++ b/src/components/Cards/Card.astro @@ -1,4 +1,5 @@ --- +import { Typography } from "@chainlink/blocks" import CardLink from "./CardLink.astro" import styles from "./cards.module.css" import { ICard } from "./types" @@ -9,7 +10,7 @@ const { title, description, links } = Astro.props ---
-
{title}
+ {title}

{description}

{links && links.map((l) => )} diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css index f9e97025698..530beb48f78 100644 --- a/src/components/Cards/cards.module.css +++ b/src/components/Cards/cards.module.css @@ -14,7 +14,7 @@ } .card { - padding: 20px var(--space-6x); + padding: var(--space-5x) var(--space-6x); background: #fff; } @@ -34,6 +34,7 @@ display: flex; gap: var(--space-2x); align-items: center; + cursor: default; } .link:hover span { From 8573dc16cdc00cdce64d8abdf9261838727ac8a5 Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Fri, 17 Oct 2025 14:39:17 -0400 Subject: [PATCH 3/5] adjust types --- src/assets/icons/remix-logo2.svg | 9 ---- src/components/Cards/CardLink.astro | 12 ++++- src/components/Cards/types.ts | 4 +- src/pages/ccip/index.astro | 4 +- src/pages/index.astro | 76 +++-------------------------- 5 files changed, 24 insertions(+), 81 deletions(-) delete mode 100644 src/assets/icons/remix-logo2.svg diff --git a/src/assets/icons/remix-logo2.svg b/src/assets/icons/remix-logo2.svg deleted file mode 100644 index cfa796bbc42..00000000000 --- a/src/assets/icons/remix-logo2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/components/Cards/CardLink.astro b/src/components/Cards/CardLink.astro index 0b811a0d395..032a29adc02 100644 --- a/src/components/Cards/CardLink.astro +++ b/src/components/Cards/CardLink.astro @@ -2,15 +2,25 @@ import styles from "./cards.module.css" import { ILink } from "./types" +import tokenIcon from "../../assets/icons/token-icon.svg" +import remixIcon from "../../assets/icons/remix-logo.svg" + interface Props { link: ILink } const { link } = Astro.props + +const iconMap = { + token: tokenIcon, + remix: remixIcon, +} + +const iconSrc = iconMap[link.icon] --- - + {link.label} arrow right diff --git a/src/components/Cards/types.ts b/src/components/Cards/types.ts index 8d29d5ea569..20007518bc0 100644 --- a/src/components/Cards/types.ts +++ b/src/components/Cards/types.ts @@ -1,5 +1,7 @@ +export type IconType = "token" | "remix" + export interface ILink { - icon: ImageMetadata + icon: IconType href: string label: string } diff --git a/src/pages/ccip/index.astro b/src/pages/ccip/index.astro index 9eacf7c22f4..cc8738a8ca7 100644 --- a/src/pages/ccip/index.astro +++ b/src/pages/ccip/index.astro @@ -11,4 +11,6 @@ if (!entry) { const { Content, headings } = await render(entry) --- - + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 8a25eaa7247..dabe7c18616 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,30 +1,26 @@ --- import ProductTabs from "../features/landing/sections/ProductTabs.astro" -import LandingLayout from "../layouts/LandingLayout.astro" -import HeroCTA from "../features/landing/sections/HeroCTA.astro" import BaseLayout from "~/layouts/BaseLayout.astro" import * as CONFIG from "../config" import CardsWrapper from "~/components/Cards/CardsWrapper.astro" - -import tokenIcon from "../assets/icons/token-icon.svg" -import remixIcon from "../assets/icons/remix-logo.svg" +import type { ICard } from "~/components/Cards/types" const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` -const sample = [ +const sample: ICard[] = [ { title: "Deploy/enable a token across multiple chains", description: "Create a new Cross-Chain-Token or enable an established one that can be launched on 50+ chains, providing unparalleled interoperability and reach.", links: [ { - icon: tokenIcon, + icon: "token", href: "https://example.com", label: "View Token Manager", }, { - icon: remixIcon, + icon: "remix", href: "https://example.com", label: "Open in Remix", }, @@ -36,70 +32,12 @@ const sample = [ "Securely transfer tokens - including ETH, USDC, LINK - and messages between different blockchain networks.", links: [ { - icon: tokenIcon, - href: "https://example.com", - label: "View Token Manager", - }, - { - icon: remixIcon, - href: "https://example.com", - label: "Open in Remix", - }, - ], - }, - { - title: "Send a token with data", - description: - "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.", - links: [ - { - icon: remixIcon, - href: "https://example.com", - label: "Open in Remix", - }, - ], - }, - { - title: "Deploy/enable a token across multiple chains", - description: - "Create a new Cross-Chain-Token or enable an established one that can be launched on 50+ chains, providing unparalleled interoperability and reach.", - links: [ - { - icon: tokenIcon, + icon: "token", href: "https://example.com", label: "View Token Manager", }, { - icon: remixIcon, - href: "https://example.com", - label: "Open in Remix", - }, - ], - }, - { - title: "Bridge a token", - description: - "Securely transfer tokens - including ETH, USDC, LINK - and messages between different blockchain networks.", - links: [ - { - icon: tokenIcon, - href: "https://example.com", - label: "View Token Manager", - }, - { - icon: remixIcon, - href: "https://example.com", - label: "Open in Remix", - }, - ], - }, - { - title: "Send a token with data", - description: - "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.", - links: [ - { - icon: remixIcon, + icon: "remix", href: "https://example.com", label: "Open in Remix", }, @@ -111,7 +49,7 @@ const sample = [ "Build token transfers that do more than move value, letting you embed business logic directly into your cross-chain workflows.", links: [ { - icon: remixIcon, + icon: "remix", href: "https://example.com", label: "Open in Remix", }, From 62faee8ed922b61758ade8ed28682f8ab8d6111d Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Mon, 20 Oct 2025 12:37:08 -0400 Subject: [PATCH 4/5] fix heading --- src/components/Cards/Card.astro | 2 +- src/components/Cards/cards.module.css | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Cards/Card.astro b/src/components/Cards/Card.astro index af7e3e638d4..f65dcdc4d3e 100644 --- a/src/components/Cards/Card.astro +++ b/src/components/Cards/Card.astro @@ -10,7 +10,7 @@ const { title, description, links } = Astro.props ---
- {title} +

{title}

{description}

{links && links.map((l) => )} diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css index 530beb48f78..5cc7b2bc7ae 100644 --- a/src/components/Cards/cards.module.css +++ b/src/components/Cards/cards.module.css @@ -8,7 +8,7 @@ margin-bottom: var(--space-4x); } -.cardsWrapper p { +:where(.cardsWrapper p) { font-size: 14px; line-height: 24px; /* 171.429% */ } @@ -41,6 +41,13 @@ opacity: 0.7; } +.cardTitle { + font-weight: 525; + margin-bottom: var(--space-4x); + font-size: 18px; + color: var(--foreground); +} + @media screen and (min-width: 769px) { .cardsWrapper { grid-template-columns: repeat(3, 1fr); From a1435ae53c3b4b599ee5166d7082b8929b62b17a Mon Sep 17 00:00:00 2001 From: Tyrel Chambers Date: Mon, 20 Oct 2025 14:07:40 -0400 Subject: [PATCH 5/5] cleanup grid styling --- src/components/Cards/Card.astro | 1 - src/components/Cards/cards.module.css | 60 ++++----------------------- 2 files changed, 7 insertions(+), 54 deletions(-) diff --git a/src/components/Cards/Card.astro b/src/components/Cards/Card.astro index f65dcdc4d3e..c1331668d75 100644 --- a/src/components/Cards/Card.astro +++ b/src/components/Cards/Card.astro @@ -1,5 +1,4 @@ --- -import { Typography } from "@chainlink/blocks" import CardLink from "./CardLink.astro" import styles from "./cards.module.css" import { ICard } from "./types" diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css index 5cc7b2bc7ae..ac19502528d 100644 --- a/src/components/Cards/cards.module.css +++ b/src/components/Cards/cards.module.css @@ -1,6 +1,8 @@ .cardsWrapper { display: grid; grid-template-columns: repeat(3, 1fr); + border-left: 1px solid var(--border); + border-top: 1px solid var(--border); } .cardsWrapper h6 { @@ -16,6 +18,8 @@ .card { padding: var(--space-5x) var(--space-6x); background: #fff; + border-right: 1px solid var(--border); + border-bottom: 1px solid var(--border); } .card:hover { @@ -48,64 +52,14 @@ color: var(--foreground); } -@media screen and (min-width: 769px) { - .cardsWrapper { - grid-template-columns: repeat(3, 1fr); - } - - .card:first-child { - border: 1px solid rgba(22, 37, 65, 0.13); - } - - .card:not(:first-child) { - border-bottom: 1px solid rgba(22, 37, 65, 0.13); - border-right: 1px solid rgba(22, 37, 65, 0.13); - } - - .card:nth-child(-n + 3) { - border-top: 1px solid rgba(22, 37, 65, 0.13); - } - - .card:nth-child(3n + 1) { - border-left: 1px solid rgba(22, 37, 65, 0.13); - } -} - @media screen and (max-width: 768px) { .cardsWrapper { - grid-template-columns: repeat(2, 1fr); - } - - .card:first-child { - border: 1px solid rgba(22, 37, 65, 0.13); - } - - .card:not(:first-child) { - border-bottom: 1px solid rgba(22, 37, 65, 0.13); - border-right: 1px solid rgba(22, 37, 65, 0.13); - } - - .card:nth-child(-n + 2) { - border-top: 1px solid rgba(22, 37, 65, 0.13); - } - - .card:nth-child(2n + 1) { - border-left: 1px solid rgba(22, 37, 65, 0.13); + grid-template-columns: repeat(2, 1fr) !important; } } -@media screen and (max-width: 494px) { +@media screen and (max-width: 425px) { .cardsWrapper { - grid-template-columns: 1fr; - } - - .card:first-child { - border: 1px solid rgba(22, 37, 65, 0.13); - } - - .card:not(:first-child) { - border-left: 1px solid rgba(22, 37, 65, 0.13); - border-right: 1px solid rgba(22, 37, 65, 0.13); - border-bottom: 1px solid rgba(22, 37, 65, 0.13); + grid-template-columns: repeat(1, 1fr) !important; } }