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/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..c1331668d75 --- /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..032a29adc02 --- /dev/null +++ b/src/components/Cards/CardLink.astro @@ -0,0 +1,27 @@ +--- +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/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..ac19502528d --- /dev/null +++ b/src/components/Cards/cards.module.css @@ -0,0 +1,65 @@ +.cardsWrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + border-left: 1px solid var(--border); + border-top: 1px solid var(--border); +} + +.cardsWrapper h6 { + font-size: 18px; + margin-bottom: var(--space-4x); +} + +:where(.cardsWrapper p) { + font-size: 14px; + line-height: 24px; /* 171.429% */ +} + +.card { + padding: var(--space-5x) var(--space-6x); + background: #fff; + border-right: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.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; + cursor: default; +} + +.link:hover span { + opacity: 0.7; +} + +.cardTitle { + font-weight: 525; + margin-bottom: var(--space-4x); + font-size: 18px; + color: var(--foreground); +} + +@media screen and (max-width: 768px) { + .cardsWrapper { + grid-template-columns: repeat(2, 1fr) !important; + } +} + +@media screen and (max-width: 425px) { + .cardsWrapper { + grid-template-columns: repeat(1, 1fr) !important; + } +} diff --git a/src/components/Cards/types.ts b/src/components/Cards/types.ts new file mode 100644 index 00000000000..20007518bc0 --- /dev/null +++ b/src/components/Cards/types.ts @@ -0,0 +1,12 @@ +export type IconType = "token" | "remix" + +export interface ILink { + icon: IconType + 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/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 0c08784a072..dabe7c18616 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,12 +1,61 @@ --- 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 type { ICard } from "~/components/Cards/types" const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.title}` + +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: "token", + href: "https://example.com", + label: "View Token Manager", + }, + { + icon: "remix", + 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: "token", + href: "https://example.com", + label: "View Token Manager", + }, + { + icon: "remix", + 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: "remix", + href: "https://example.com", + label: "Open in Remix", + }, + ], + }, +] --- @@ -15,6 +64,8 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl

Chainlink Developer Docs

What are you building?

+ +