Feat/110 tools utilities

src/components/ToolsUtilitiesGrid/README.md

@@ -0,0 +1,82 @@
+# ToolsUtilitiesGrid
+
+## What it does
+
+This component displays a grid of clickable cards that showcase tools and utilities. Each card includes an icon, title, description, and link. It's perfect for creating a visual directory of resources, tools, or utilities that users can browse and click through to.
+
+## How to use it
+
+1. Import the component in your Astro layout or page:
+
+```astro
+import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro"
+```
+
+2. Create an array of links with the information for each tool/utility you want to display
+
+3. Add the component to your page and pass in the links:
+
+```astro
+<ToolsUtilitiesGrid links={yourLinksArray} />
+```
+
+## Example
+
+Here's a complete example showing how to use the component:
+
+```astro
+---
+import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro"
+
+const toolsAndUtilities = [
+  {
+    image: "/images/ccip-logo.svg",
+    imageAlt: "CCIP API icon",
+    label: "CCIP API",
+    link: "/ccip/api",
+    description: "An API for message retrieval and lane latency information.",
+  },
+  {
+    image: "/images/js-logo.svg",
+    imageAlt: "JavaScript SDK icon",
+    label: "Javascript SDK",
+    link: "https://github.com/smartcontractkit/ccip-javascript-sdk",
+    description: "Integrate CCIP functionality directly into your web applications for EVM-compatible chains.",
+  },
+  {
+    image: "/images/hardhat-logo.svg",
+    imageAlt: "Hardhat icon",
+    label: "Hardhat Starter Kit",
+    link: "https://github.com/smartcontractkit/hardhat-starter-kit",
+    description:
+      "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Hardhat.",
+  },
+]
+---
+
+<ToolsUtilitiesGrid links={toolsAndUtilities} />
+```
+
+## What you need to provide
+
+Each item in your `links` array needs these fields:
+
+| Field           | What it is                                                  | Example                                                        |
+| --------------- | ----------------------------------------------------------- | -------------------------------------------------------------- |
+| **image**       | The full path to the icon/logo image                        | `"/images/ccip-logo.svg"`                                      |
+| **imageAlt**    | Description of the image for accessibility                  | `"CCIP API icon"`                                              |
+| **label**       | The title/name of the tool or utility                       | `"CCIP API"`                                                   |
+| **link**        | Where the card should link to (can be internal or external) | `"/ccip/api"` or `"https://github.com/..."`                    |
+| **description** | A short description explaining what the tool does           | `"An API for message retrieval and lane latency information."` |
+
+## Where to put images
+
+Place your icon/logo images in the `/public/images/` directory, and reference them with the full path starting with `/images/`.
+
+For example, if you use `image: "/images/my-tool-logo.svg"`, the actual file should be at:
+
+```
+/public/images/my-tool-logo.svg
+```
+
+You can also use images from other locations by providing the full path (e.g., `"/assets/logos/my-logo.png"`).

src/components/ToolsUtilitiesGrid/ToolItem.astro

@@ -0,0 +1,28 @@
+---
+import { Typography } from "@chainlink/blocks"
+import styles from "./toolsUtilities.module.css"
+import { Link } from "./types"
+
+type Props = Link
+
+const { description, image, imageAlt, label, link } = Astro.props
+---
+
+<a href={link} class={styles.card}>
+  <div class={styles.imageContainer}><img src={image} alt={imageAlt} class={styles.image} /></div>
+
+  <div class={styles.content}>
+    <div>
+      <Typography
+        variant="body-semi"
+        style={{
+          fontWeight: 500,
+          fontSize: "18px",
+        }}>{label}</Typography
+      >
+      <Typography variant="body-s" color="muted">{description}</Typography>
+    </div>
+
+    <img src="/assets/icons/upper-right-arrow.svg" class={styles.arrow} />
+  </div>
+</a>

src/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro

@@ -0,0 +1,26 @@
+---
+import styles from "./toolsUtilities.module.css"
+
+import { Link } from "./types"
+import ToolItem from "./ToolItem.astro"
+import { Typography } from "@chainlink/blocks"
+
+interface Props {
+  links: Link[]
+}
+
+const { links } = Astro.props
+---
+
+<section class={styles.wrapper}>
+  <Typography
+    variant="h2"
+    style={{
+      fontSize: "32px",
+    }}>Tools & Utilities</Typography
+  >
+
+  <div class={styles.container}>
+    {links.map((link) => <ToolItem {...link} />)}
+  </div>
+</section>

src/components/ToolsUtilitiesGrid/toolsUtilities.module.css

@@ -0,0 +1,57 @@
+.wrapper {
+  padding: 56px 0;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  margin-top: var(--space-8x);
+}
+
+.card {
+  padding: var(--space-6x);
+  display: flex;
+  gap: var(--space-4x);
+  align-items: start;
+}
+
+.card:hover {
+  background: var(--muted);
+  & .arrow {
+    opacity: 1;
+  }
+}
+
+.imageContainer {
+  min-width: 48px;
+  height: 48px;
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--space-1x);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+
+  & > img {
+    align-self: end;
+  }
+}
+
+.arrow {
+  opacity: 0;
+}
+
+@media screen and (max-width: 1135px) {
+  .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 525px) {
+  .container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

src/components/ToolsUtilitiesGrid/types.ts

@@ -0,0 +1,7 @@
+export interface Link {
+  image: string
+  imageAlt: string
+  label: string
+  link: string
+  description: string
+}

src/layouts/DocsV3Layout/DocsV3Layout.astro

@@ -7,7 +7,7 @@ import * as CONFIG from "~/config"
 import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro"
 import PageContent from "~/components/PageContent/PageContent.astro"
 import { TabGrid } from "~/components/TabGrid/TabGrid"
-import LayoutHero from "~/components/LayoutHero/LayoutHero.astro"
+import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro"
 
 interface Props {
   frontmatter: BaseFrontmatter
@@ -30,6 +30,62 @@ const currentPage = new URL(Astro.request.url).pathname
 
 const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWallet
 
+const toolsAndUtilities = [
+  {
+    image: "ccip-logo.svg",
+    imageAlt: "CCIP API icon",
+    label: "CCIP API",
+    link: "/ccip/api",
+    description: "An API for message retrieval and lane latency information.",
+  },
+  {
+    image: "js-logo.svg",
+    imageAlt: "JavaScript SDK icon",
+    label: "Javascript SDK",
+    link: "https://github.com/smartcontractkit/ccip-javascript-sdk",
+    description: "Integrate CCIP functionality directly into your web applications for EVM-compatible chains.",
+  },
+  {
+    image: "ts-logo.svg",
+    imageAlt: "CLI icon",
+    label: "CLI",
+    link: "https://github.com/smartcontractkit/ccip-tools-ts",
+    description: "TypeScript command-line interface and library designed for interacting with deployed CCIP contracts.",
+  },
+  {
+    image: "hardhat-logo.svg",
+    imageAlt: "Hardhat icon",
+    label: "Hardhat Starter Kit",
+    link: "https://github.com/smartcontractkit/hardhat-starter-kit",
+    description:
+      "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Hardhat.",
+  },
+  {
+    image: "foundry-logo.svg",
+    imageAlt: "Foundry icon",
+    label: "Foundry Starter Kit",
+    link: "https://github.com/smartcontractkit/foundry-starter-kit",
+    description:
+      "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Foundry.",
+  },
+  {
+    image: "npm-logo.png",
+    imageAlt: "NPM icon",
+    label: "CCIP Contracts NPM",
+    link: "https://www.npmjs.com/package/@chainlink/contracts-ccip",
+    description:
+      "An npm package providing Solidity smart contract implementations to integrate CCIP into your EVM-based project.",
+  },
+  {
+    image: "direct-stacking-logo.svg",
+    imageAlt: "Direct Staking icon",
+    label: "Direct Staking",
+    link: "https://github.com/Aphyla/chainlink-csr",
+    description:
+      "Stake native tokens on supported L2 networks and receive liquid staked tokens directly on the same chain.",
+  },
+]
+
 // Example tutorial data
 const exampleTutorials = [
   {
@@ -135,15 +191,8 @@ const exampleTutorials = [
         <LeftSidebar currentPage={currentPage} section={frontmatter.section} />
       </aside>
       <div id="grid-main">
-        <LayoutHero
-          title="Build with CCIP"
-          description="CCIP makes it simple to move data, messages, and tokens across blockchains. Connect smart contracts on different networks as if they were one system, whether transferring stablecoins, powering cross-chain apps, or running multi-chain DeFi."
-          buttons={[
-            { label: "Get the SDK", link: "#" },
-            { label: "API Doc", link: "#" },
-          ]}
-          image="/images/ccip/ccip-hero.png"
-        />
+        <ToolsUtilitiesGrid links={toolsAndUtilities} />
+
         <PageContent {titleHeading}>
           <TabGrid header="Tutorials" client:visible tabs={exampleTutorials} />
           <slot />