Skip to content

Commit de158c2

Browse files
tyrelchamberstyrelchambers
committed
add layout hero
1 parent e506408 commit de158c2

File tree

7 files changed

+255
-2
lines changed

7 files changed

+255
-2
lines changed

‎public/images/ccip/ccip-hero-bg.png‎

148 KB
Loading

‎public/images/ccip/ccip-hero.png‎

19.3 KB
Loading

‎src/components/LayoutHero/LayoutHero.astro‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
import { Typography } from "@chainlink/blocks"
3+
import styles from "./LayoutHero.module.css"
4+
5+
interface Props {
6+
title: string
7+
description: string
8+
buttons: Array<{
9+
label: string
10+
link: string
11+
}>
12+
image: string
13+
}
14+
15+
const { title, description, buttons = [], image } = Astro.props as Props
16+
---
17+
18+
<section class={styles.layoutHero}>
19+
<div class={styles.heroContentWrapper}>
20+
<div class={styles.heroContent}>
21+
<h2 class={styles.heroTitle}>{title}</h2>
22+
<Typography variant="body-s">{description}</Typography>
23+
<div class={styles.heroButtons}>
24+
{
25+
buttons.map((button, index) => (
26+
<a href={button.link} class={`${styles.button} ${index === 0 ? styles.primary : styles.secondary}`}>
27+
{button.label}
28+
</a>
29+
))
30+
}
31+
</div>
32+
</div>
33+
<div class={styles.heroImage}>
34+
<img src={image} alt={title} />
35+
</div>
36+
</div>
37+
38+
<img class={styles.heroBackgroundImg} src="/images/ccip/ccip-hero-bg.png" />
39+
</section>

‎src/components/LayoutHero/LayoutHero.module.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.layoutHero {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--space-8x);
5+
margin: 0 auto;
6+
background-color: var(--gray-100);
7+
position: relative;
8+
width: 100%;
9+
height: 345px;
10+
border-left: 1px solid var(--border);
11+
border-right: 1px solid var(--border);
12+
border-bottom: 1px solid var(--border);
13+
}
14+
15+
.heroContent {
16+
display: flex;
17+
flex-direction: column;
18+
padding-left: 55px;
19+
width: 100%;
20+
height: 100%;
21+
justify-content: center;
22+
max-width: 600px;
23+
}
24+
25+
.heroContentWrapper {
26+
display: flex;
27+
position: relative;
28+
z-index: 2;
29+
width: 100%;
30+
height: 100%;
31+
}
32+
33+
.heroBackgroundImg {
34+
position: absolute;
35+
right: 0;
36+
z-index: 1;
37+
}
38+
.heroTitle {
39+
font-size: 3rem;
40+
line-height: 50px;
41+
color: var(--gray-950);
42+
margin-bottom: var(--space-3x);
43+
letter-spacing: -0.48px;
44+
font-weight: 300;
45+
}
46+
47+
.heroButtons {
48+
display: flex;
49+
flex-wrap: wrap;
50+
gap: var(--space-4x);
51+
margin-top: var(--space-2x);
52+
}
53+
54+
.heroButtons a.button {
55+
padding: var(--space-3x) var(--space-4x);
56+
border-radius: 2px;
57+
text-decoration: none;
58+
font-weight: 600;
59+
font-size: 14px;
60+
text-align: center;
61+
line-height: 16px;
62+
}
63+
64+
.heroButtons a.primary {
65+
background-color: var(--blue-600);
66+
color: white;
67+
border: 2px solid var(--blue-600);
68+
}
69+
70+
.heroButtons a.primary:hover {
71+
background-color: var(--blue-700);
72+
border-color: var(--blue-700);
73+
}
74+
75+
.heroButtons a.secondary {
76+
background-color: transparent;
77+
color: var(--theme-text);
78+
border: 2px solid var(--gray-300);
79+
}
80+
81+
.heroButtons a.secondary:hover {
82+
background-color: var(--gray-100);
83+
border-color: var(--gray-400);
84+
}
85+
86+
.heroImage {
87+
display: flex;
88+
position: absolute;
89+
bottom: 35px;
90+
right: 0;
91+
}
92+
93+
.heroImage img {
94+
max-width: 100%;
95+
height: auto;
96+
}
97+
98+
@media (min-width: 50em) {
99+
.layoutHero {
100+
flex-direction: row;
101+
align-items: center;
102+
gap: var(--space-12x);
103+
}
104+
105+
.heroContent {
106+
flex: 1;
107+
}
108+
109+
.heroImage {
110+
flex: 1;
111+
}
112+
113+
.heroTitle {
114+
font-size: 3rem;
115+
}
116+
117+
.heroDescription {
118+
font-size: 1.25rem;
119+
}
120+
}

‎src/components/LayoutHero/README.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# LayoutHero Component
2+
3+
## What is it?
4+
5+
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.
6+
7+
## How to Use It
8+
9+
### Basic Usage
10+
11+
To use the LayoutHero component in your page, you'll need to import it and provide some information:
12+
13+
```astro
14+
---
15+
import { LayoutHero } from "@components"
16+
---
17+
18+
<LayoutHero
19+
title="Welcome to Our Documentation"
20+
description="Learn how to build amazing applications with our platform"
21+
buttons={[
22+
{ label: "Get Started", link: "/quickstart" },
23+
{ label: "View Documentation", link: "/docs" },
24+
]}
25+
image="/images/hero-image.png"
26+
/>
27+
```
28+
29+
### What Each Part Does
30+
31+
**title** (Required)
32+
33+
- This is the main heading that appears at the top
34+
- Make it clear and attention-grabbing
35+
- Example: "Welcome to Chainlink Docs"
36+
37+
**description** (Required)
38+
39+
- A short paragraph explaining what this page or section is about
40+
- Keep it concise but informative
41+
- Example: "Learn how to connect your smart contracts to real-world data"
42+
43+
**buttons** (Required)
44+
45+
- An array of buttons that link to other pages
46+
- Each button needs two things:
47+
- `label`: The text shown on the button
48+
- `link`: Where the button takes you when clicked
49+
- The first button will be blue (primary action)
50+
- The second button will be white (secondary action)
51+
- You can have 0, 1, or 2 buttons
52+
53+
**image** (Required)
54+
55+
- The path to an image file you want to display
56+
- The image appears on the right side on larger screens
57+
- Below the text on mobile devices
58+
- Example: "/images/my-hero-image.png"
59+
60+
## Examples
61+
62+
### With Only One Button
63+
64+
```astro
65+
<LayoutHero
66+
title="Start Building Today"
67+
description="Get started with our comprehensive guides and tutorials"
68+
buttons={[{ label: "Get Started", link: "/quickstart" }]}
69+
/>
70+
```
71+
72+
### With Image and Two Buttons
73+
74+
```astro
75+
<LayoutHero
76+
title="CCIP Cross-Chain Protocol"
77+
description="Send tokens and messages across blockchains securely and reliably"
78+
buttons={[
79+
{ label: "Try CCIP", link: "/ccip/getting-started" },
80+
{ label: "Learn More", link: "/ccip/concepts" },
81+
]}
82+
image="/images/ccip-hero.png"
83+
/>
84+
```

‎src/layouts/DocsV3Layout/DocsV3Layout.astro‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { BaseFrontmatter } from "~/content.config"
66
import * as CONFIG from "~/config"
77
import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro"
88
import PageContent from "~/components/PageContent/PageContent.astro"
9+
import LayoutHero from "~/components/LayoutHero/LayoutHero.astro"
910
1011
interface Props {
1112
frontmatter: BaseFrontmatter
@@ -39,6 +40,15 @@ const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWall
3940
<LeftSidebar currentPage={currentPage} section={frontmatter.section} />
4041
</aside>
4142
<div id="grid-main">
43+
<LayoutHero
44+
title="Build with CCIP"
45+
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."
46+
buttons={[
47+
{ label: "Get the SDK", link: "#" },
48+
{ label: "API Doc", link: "#" },
49+
]}
50+
image="/images/ccip/ccip-hero.png"
51+
/>
4252
<PageContent {titleHeading}>
4353
<slot />
4454
</PageContent>

‎src/styles/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/*
1+
/*
22
* Global styles and CSS variables
3-
*
3+
*
44
* This file contains:
55
* 1. CSS reset and base styles
66
* 2. Global CSS variables for theming

0 commit comments

Comments
 (0)