diff --git a/public/images/ccip/ccip-hero-bg.png b/public/images/ccip/ccip-hero-bg.png new file mode 100644 index 00000000000..5f3bc5df559 Binary files /dev/null and b/public/images/ccip/ccip-hero-bg.png differ diff --git a/public/images/ccip/ccip-hero.png b/public/images/ccip/ccip-hero.png new file mode 100644 index 00000000000..306b8cb3ed3 Binary files /dev/null and b/public/images/ccip/ccip-hero.png differ diff --git a/src/components/LayoutHero/LayoutHero.astro b/src/components/LayoutHero/LayoutHero.astro new file mode 100644 index 00000000000..ee95ce616f9 --- /dev/null +++ b/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 +--- + +
+
+
+

{title}

+ {description} +
+ { + buttons.map((button, index) => ( + + {button.label} + + )) + } +
+
+
+ {title} +
+
+ + +
diff --git a/src/components/LayoutHero/LayoutHero.module.css b/src/components/LayoutHero/LayoutHero.module.css new file mode 100644 index 00000000000..56f1b8ce711 --- /dev/null +++ b/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; +} diff --git a/src/components/LayoutHero/README.md b/src/components/LayoutHero/README.md new file mode 100644 index 00000000000..fcc0c16e4d0 --- /dev/null +++ b/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" +--- + + +``` + +### 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 + +``` + +### With Image and Two Buttons + +```astro + +``` diff --git a/src/components/LeftSidebar/leftSidebar.module.css b/src/components/LeftSidebar/leftSidebar.module.css index 222d0b7f9db..d869aebd2a4 100644 --- a/src/components/LeftSidebar/leftSidebar.module.css +++ b/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 { diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 8169548be7a..4eb6a1b23fb 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/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 = [
+ @@ -181,11 +191,6 @@ const exampleTutorials = [ max-width: 1505px; } - #grid-left, - #left-bg { - background: #fafbfd; - } - #grid-left, #grid-right { display: flex; diff --git a/src/styles/index.css b/src/styles/index.css index d86b583557a..5d1f3ee074c 100644 --- a/src/styles/index.css +++ b/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