Skip to content

Commit 03b02da

Browse files
tyrelchamberstyrelchambers
authored
add mobile journeys (#141)
* add mobile journeys * remove old grid card css
1 parent 131ea07 commit 03b02da

File tree

6 files changed

+289
-61
lines changed

6 files changed

+289
-61
lines changed

‎src/components/JourneyCards/JourneyCards.astro‎

Lines changed: 80 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import { Tag, Typography } from "@chainlink/blocks"
3+
import { JourneyTabGrid } from "./JourneyTabGrid"
34
45
const columns = [
56
{
@@ -8,25 +9,25 @@ const columns = [
89
{
910
title: "Explore Cross-Chain Interoperability with CCIP",
1011
description: "Learn cross-chain concepts, workflows, and real-world use cases.",
11-
badge: "CCIP",
12+
badge: "ccip",
1213
href: "/",
1314
},
1415
{
1516
title: "Understand How Data Feeds Power dApps",
1617
description: "See how oracle data feeds deliver price feeds and reference data.",
17-
badge: "DATA FEEDS",
18+
badge: "data feeds",
1819
href: "/",
1920
},
2021
{
2122
title: "Learn How Data Streams Deliver Real-Time Data",
2223
description: "Understand how low-latency streams support time-sensitive applications.",
23-
badge: "CCIP",
24+
badge: "data streams",
2425
href: "/",
2526
},
2627
{
2728
title: "Discover Off-Chain Compute with Functions",
2829
description: "Learn how Functions connect smart contracts to APIs and custom logic.",
29-
badge: "DATA FEEDS",
30+
badge: "functions",
3031
href: "/",
3132
},
3233
],
@@ -37,25 +38,25 @@ const columns = [
3738
{
3839
title: "Build Cross-Chain Apps with CCIP Tutorials",
3940
description: "Follow step-by-step guides with language switching (EVM, Rust, Move, etc.).",
40-
badge: "CCIP",
41+
badge: "ccip",
4142
href: "/",
4243
},
4344
{
4445
title: "Integrate Data Feeds into Smart Contracts",
4546
description: "Plug feeds into your apps with examples and addresses.",
46-
badge: "DATA FEEDS",
47+
badge: "data feeds",
4748
href: "/",
4849
},
4950
{
5051
title: "Implement Real-Time Use Cases with Data Streams",
5152
description: "Use low-latency data in trading, gaming, and other live applications.",
52-
badge: "CCIP",
53+
badge: "data streams",
5354
href: "/",
5455
},
5556
{
5657
title: "Connect Contracts to APIs with Functions",
5758
description: "Add external data and custom logic to your dApps.",
58-
badge: "DATA FEEDS",
59+
badge: "functions",
5960
href: "/",
6061
},
6162
],
@@ -66,70 +67,94 @@ const columns = [
6667
{
6768
title: "Monitor CCIP Transactions in Real Time",
6869
description: "Track the progress and status of cross-chain transactions.",
69-
badge: "CCIP",
70+
badge: "ccip",
7071
href: "/",
7172
},
7273
{
7374
title: "Stay Up to Date with Data Feeds",
7475
description: "Rely on changelogs and schema updates for accuracy.",
75-
badge: "DATA FEEDS",
76+
badge: "data feeds",
7677
href: "/",
7778
},
7879
{
7980
title: "Deliver Reliable Low-Latency Data with Streams",
8081
description: "Operate Data Streams at scale for critical, time-sensitive use cases.",
81-
badge: "CCIP",
82+
badge: "data streams",
8283
href: "/",
8384
},
8485
{
8586
title: "Scale and Optimize Functions",
8687
description: "Debug, manage workloads, and grow your applications.",
87-
badge: "DATA FEEDS",
88+
badge: "functions",
8889
href: "/",
8990
},
9091
],
9192
},
9293
]
94+
95+
// Transform columns to tabs format for JourneyTabGrid
96+
const tabs = columns.map((column) => ({
97+
name: column.title,
98+
items: column.items.map((item) => ({
99+
title: item.title,
100+
description: item.description,
101+
link: item.href,
102+
badge: item.badge,
103+
})),
104+
}))
93105
---
94106

95107
<section>
96-
<Typography variant="h4" className="section-title">Start your Chainlink journey</Typography>
97-
<div class="journey-cards">
98-
{
99-
columns.map((column) => (
100-
<div class="journey-column">
101-
<header class="column-header">
102-
<Typography variant="h5" className="column-title">
103-
{column.title}
104-
</Typography>
105-
</header>
106-
{column.items.map((item) => (
107-
<a href={item.href} class="journey-card">
108-
<div class="card-content">
109-
<Typography variant="body-semi">{item.title}</Typography>
110-
<Typography variant="body-s" color="muted">
111-
{item.description}
112-
</Typography>
113-
</div>
114-
115-
<footer class="journey-footer">
116-
<Tag size="sm" className="footer-tag">
117-
<Typography variant="code-s">{item.badge}</Typography>
118-
</Tag>
119-
<img src="/assets/icons/upper-right-arrow.svg" class="footer-icon" />
120-
</footer>
121-
</a>
122-
))}
123-
</div>
124-
))
125-
}
126-
</div>
108+
<section class="desktop">
109+
<Typography variant="h4" className="section-title">Start your Chainlink journey</Typography>
110+
<div class="journey-cards">
111+
{
112+
columns.map((column) => (
113+
<div class="journey-column">
114+
<header class="column-header">
115+
<Typography variant="h5" className="column-title">
116+
{column.title}
117+
</Typography>
118+
</header>
119+
{column.items.map((item) => (
120+
<a href={item.href} class="journey-card">
121+
<div class="card-content">
122+
<Typography variant="body-semi">{item.title}</Typography>
123+
<Typography variant="body-s" color="muted">
124+
{item.description}
125+
</Typography>
126+
</div>
127+
128+
<footer class="journey-footer">
129+
<Tag size="sm" className="footer-tag">
130+
<Typography variant="code-s">{item.badge}</Typography>
131+
</Tag>
132+
<img src="/assets/icons/upper-right-arrow.svg" class="footer-icon" />
133+
</footer>
134+
</a>
135+
))}
136+
</div>
137+
))
138+
}
139+
</div>
140+
</section>
141+
<section class="mobile">
142+
<JourneyTabGrid header="Start your Chainlink journey" tabs={tabs} client:only="react" />
143+
</section>
127144
</section>
128145

129146
<style>
147+
.desktop {
148+
display: none;
149+
}
150+
151+
.mobile {
152+
display: block;
153+
}
154+
130155
.journey-cards {
131156
display: grid;
132-
grid-template-columns: 1fr;
157+
grid-template-columns: repeat(3, 1fr);
133158
}
134159

135160
.journey-column {
@@ -143,6 +168,10 @@ const columns = [
143168
padding: var(--space-6x);
144169
}
145170

171+
.footer-tag {
172+
text-transform: uppercase;
173+
}
174+
146175
.journey-card:hover {
147176
background-color: var(--muted);
148177

@@ -201,9 +230,13 @@ const columns = [
201230
border-left: 3px solid var(--brand);
202231
}
203232

204-
@media (min-width: 50em) {
205-
.journey-cards {
206-
grid-template-columns: repeat(3, 1fr);
233+
@media (min-width: 769px) {
234+
.desktop {
235+
display: block;
236+
}
237+
238+
.mobile {
239+
display: none;
207240
}
208241

209242
.column-title {

‎src/components/JourneyCards/JourneyTabGrid.module.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
/* Tab styling - copied from TabGrid */
2+
.gridHeader {
3+
display: flex;
4+
justify-content: space-between;
5+
align-items: center;
6+
margin-bottom: var(--space-8x);
7+
flex-wrap: wrap;
8+
gap: var(--space-8x);
9+
}
10+
11+
.tabsTrigger {
12+
height: 32px;
13+
padding: var(--space-1x) var(--space-2x);
14+
justify-content: center;
15+
align-items: center;
16+
border-radius: var(--space-2x);
17+
background-color: var(--pill);
18+
border: 1px solid var(--pill-border);
19+
}
20+
21+
.tabsTrigger:hover {
22+
background-color: var(--pill-hover);
23+
}
24+
25+
.tabsTrigger[data-state="active"] {
26+
background-color: var(--pill-active);
27+
border-color: var(--pill-active);
28+
border-bottom: 1px solid var(--pill-active);
29+
30+
& h3 {
31+
color: var(--pill-active-foreground);
32+
}
33+
}
34+
35+
.tabTitle {
36+
color: var(--pill-foreground);
37+
font-weight: 400;
38+
}
39+
40+
.tabsList {
41+
display: flex;
42+
gap: var(--space-2x);
43+
border-bottom: 0;
44+
flex-wrap: wrap;
45+
justify-content: start !important;
46+
}
47+
48+
.journeyGrid {
49+
display: grid;
50+
grid-template-columns: 1fr;
51+
border-left: 1px solid var(--border);
52+
border-top: 1px solid var(--border);
53+
}
54+
55+
.journeyCard {
56+
display: flex;
57+
flex-direction: column;
58+
gap: var(--space-6x);
59+
padding: var(--space-6x);
60+
border-right: 1px solid var(--border);
61+
border-bottom: 1px solid var(--border);
62+
}
63+
64+
.journeyCard:hover {
65+
background-color: var(--muted);
66+
67+
.footerTag {
68+
background-color: var(--background);
69+
}
70+
71+
.footerIcon {
72+
opacity: 1;
73+
}
74+
}
75+
76+
.cardContent {
77+
display: flex;
78+
flex-direction: column;
79+
gap: var(--space-2x);
80+
}
81+
82+
.journeyFooter {
83+
display: flex;
84+
align-items: center;
85+
justify-content: space-between;
86+
margin-top: auto;
87+
flex: 1;
88+
width: 100%;
89+
}
90+
91+
.footerIcon {
92+
height: 12px;
93+
width: 12px;
94+
opacity: 0;
95+
}
96+
97+
.footerTag {
98+
text-transform: uppercase;
99+
}
100+
101+
@media (max-width: 768px) {
102+
.journeyGrid {
103+
grid-template-columns: repeat(2, 1fr);
104+
}
105+
.gridHeader > h2 {
106+
font-size: 28px;
107+
}
108+
}
109+
110+
@media screen and (max-width: 425px) {
111+
.journeyGrid {
112+
grid-template-columns: 1fr;
113+
}
114+
.gridHeader {
115+
margin-bottom: var(--space-6x);
116+
}
117+
}
118+
119+
@media screen and (max-width: 390px) {
120+
.gridHeader {
121+
flex-direction: column;
122+
align-items: start;
123+
}
124+
}

0 commit comments

Comments
 (0)