Feat/91 layout hero

src/components/LayoutHero/LayoutHero.astro

@@ -0,0 +1,45 @@
+---
+import { buttonVariants, Typography } from "@chainlink/blocks"
+import styles from "./LayoutHero.module.css"
+
+interface Props {
+  title: string
+  description: string
+  buttons: Array<{
+    label: string
+    link: string
+  }>
+  image: string
+}
+
+const { title, description, buttons = [], image } = Astro.props as Props
+---
+
+<section class={styles.layoutHero}>
+  <div class={styles.heroContentWrapper}>
+    <div class={styles.heroContent}>
+      <h2 class={styles.heroTitle}>{title}</h2>
+      <Typography variant="body-s" color="muted">{description}</Typography>
+      <div class={styles.heroButtons}>
+        {
+          buttons.map((button, index) => (
+            <a
+              href={button.link}
+              class={buttonVariants({
+                variant: index === 0 ? "primary" : "tertiary",
+                size: "sm",
+              })}
+            >
+              {button.label}
+            </a>
+          ))
+        }
+      </div>
+    </div>
+    <div class={styles.heroImage}>
+      <img src={image} alt={title} />
+    </div>
+  </div>
+
+  <img class={styles.heroBackgroundImg} src="/images/ccip/ccip-hero-bg.png" />
+</section>

src/components/LayoutHero/LayoutHero.module.css

@@ -0,0 +1,64 @@
+.layoutHero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8x);
+  margin: 0 auto;
+  background-color: var(--gray-100);
+  position: relative;
+  width: 100%;
+  height: 345px;
+  border-left: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.heroContent {
+  display: flex;
+  flex-direction: column;
+  padding-left: 55px;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  max-width: 540px;
+}
+
+.heroContentWrapper {
+  display: flex;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+}
+
+.heroBackgroundImg {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+.heroTitle {
+  font-size: 3rem;
+  line-height: 50px;
+  color: var(--gray-950);
+  margin-bottom: var(--space-3x);
+  letter-spacing: -0.48px;
+  font-weight: 400;
+}
+
+.heroButtons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4x);
+  margin-top: var(--space-8x);
+}
+
+.heroImage {
+  display: flex;
+  position: absolute;
+  bottom: 35px;
+  right: 0;
+}
+
+.heroImage img {
+  max-width: 100%;
+  height: auto;
+}

src/components/LayoutHero/README.md

@@ -0,0 +1,84 @@
+# LayoutHero Component
+
+## What is it?
+
+The LayoutHero component is a reusable hero section that displays a title, description, call-to-action buttons, and an optional image. It's perfect for landing pages or the top of important pages where you want to grab attention and guide users to take action.
+
+## How to Use It
+
+### Basic Usage
+
+To use the LayoutHero component in your page, you'll need to import it and provide some information:
+
+```astro
+---
+import { LayoutHero } from "@components"
+---
+
+<LayoutHero
+  title="Welcome to Our Documentation"
+  description="Learn how to build amazing applications with our platform"
+  buttons={[
+    { label: "Get Started", link: "/quickstart" },
+    { label: "View Documentation", link: "/docs" },
+  ]}
+  image="/images/hero-image.png"
+/>
+```
+
+### What Each Part Does
+
+**title** (Required)
+
+- This is the main heading that appears at the top
+- Make it clear and attention-grabbing
+- Example: "Welcome to Chainlink Docs"
+
+**description** (Required)
+
+- A short paragraph explaining what this page or section is about
+- Keep it concise but informative
+- Example: "Learn how to connect your smart contracts to real-world data"
+
+**buttons** (Required)
+
+- An array of buttons that link to other pages
+- Each button needs two things:
+  - `label`: The text shown on the button
+  - `link`: Where the button takes you when clicked
+- The first button will be blue (primary action)
+- The second button will be white (secondary action)
+- You can have 0, 1, or 2 buttons
+
+**image** (Required)
+
+- The path to an image file you want to display
+- The image appears on the right side on larger screens
+- Below the text on mobile devices
+- Example: "/images/my-hero-image.png"
+
+## Examples
+
+### With Only One Button
+
+```astro
+<LayoutHero
+  title="Start Building Today"
+  description="Get started with our comprehensive guides and tutorials"
+  buttons={[{ label: "Get Started", link: "/quickstart" }]}
+/>
+```
+
+### With Image and Two Buttons
+
+```astro
+<LayoutHero
+  title="CCIP Cross-Chain Protocol"
+  description="Send tokens and messages across blockchains securely and reliably"
+  buttons={[
+    { label: "Try CCIP", link: "/ccip/getting-started" },
+    { label: "Learn More", link: "/ccip/concepts" },
+  ]}
+  image="/images/ccip-hero.png"
+/>
+```

src/components/LeftSidebar/leftSidebar.module.css

@@ -120,6 +120,9 @@ details[open] > .navGroupTitle {
 
 .quickLinks {
   margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2x);
 }
 
 .headerLink {

src/layouts/DocsV3Layout/DocsV3Layout.astro

@@ -7,6 +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"
 
 interface Props {
   frontmatter: BaseFrontmatter
@@ -134,6 +135,15 @@ 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"
+        />
         <PageContent {titleHeading}>
           <TabGrid header="Tutorials" client:visible tabs={exampleTutorials} />
           <slot />
@@ -181,11 +191,6 @@ const exampleTutorials = [
         max-width: 1505px;
       }
 
-      #grid-left,
-      #left-bg {
-        background: #fafbfd;
-      }
-
       #grid-left,
       #grid-right {
         display: flex;

src/styles/index.css

@@ -1,6 +1,6 @@
-/* 
+/*
  * Global styles and CSS variables
- * 
+ *
  * This file contains:
  * 1. CSS reset and base styles
  * 2. Global CSS variables for theming