Feat: Add cards

src/components/Cards/Card.astro

@@ -0,0 +1,18 @@
+---
+import { Typography } from "@chainlink/blocks"
+import CardLink from "./CardLink.astro"
+import styles from "./cards.module.css"
+import { ICard } from "./types"
+
+type Props = ICard
+
+const { title, description, links } = Astro.props
+---
+
+<div class={styles.card}>
+  <Typography variant="h6">{title}</Typography>
+  <p>{description}</p>
+  <div class={styles.links}>
+    {links && links.map((l) => <CardLink link={l} />)}
+  </div>
+</div>

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]
+---
+
+<a href={link.href} class={styles.link}>
+  <img src={iconSrc.src} alt="" />
+
+  <span>{link.label}</span>
+  <img src="/assets/icons/Arrow Right.svg" alt="arrow right" />
+</a>

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
+---
+
+<section class={styles.cardsWrapper}>
+  {links.map((link) => <Card title={link.title} description={link.description} links={link.links} />)}
+</section>

src/components/Cards/cards.module.css

@@ -0,0 +1,104 @@
+.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: var(--space-5x) 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;
+  cursor: default;
+}
+
+.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);
+  }
+}

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[]
+}

src/components/PageContent/PageContent.astro

@@ -9,6 +9,7 @@ const { titleHeading } = Astro.props
 
 <article id="article">
   <h1 id={titleHeading.slug}>{titleHeading.text}</h1>
+
   <slot />
 </article>
 

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

src/pages/ccip/index.astro

@@ -11,4 +11,6 @@ if (!entry) {
 const { Content, headings } = await render(entry)
 ---
 
-<DocsV3Layout frontmatter={entry.data} {headings} />
+<DocsV3Layout frontmatter={entry.data} {headings}>
+  <Content />
+</DocsV3Layout>

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",
+      },
+    ],
+  },
+]
 ---
 
 <BaseLayout title={formattedContentTitle}>
@@ -15,6 +64,8 @@ const formattedContentTitle = `${CONFIG.PAGE.titleFallback} | ${CONFIG.SITE.titl
       <div class="hero">
         <h1>Chainlink Developer Docs</h1>
         <h2>What are you building?</h2>
+        <CardsWrapper links={sample} />
+
         <ProductTabs />
       </div>
     </div>