Skip to content

Commit 37d95c8

Browse files
aditya520aditya520
committed
chore(dev-hub) Integration Card First draft
1 parent 68d57ef commit 37d95c8

File tree

4 files changed

+401
-0
lines changed

4 files changed

+401
-0
lines changed

‎apps/developer-hub/src/components/Pages/Homepage/index.module.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,28 @@
22

33
.landing {
44
@include theme.max-width;
5+
6+
padding: 2rem 1rem;
7+
8+
@media (width >= 768px) {
9+
padding: 3rem 1.5rem;
10+
}
11+
}
12+
13+
.cards {
14+
display: grid;
15+
grid-template-columns: 1fr;
16+
gap: 1.5rem;
17+
margin-top: 2rem;
18+
19+
@media (width >= 768px) {
20+
grid-template-columns: repeat(auto-fit, minmax(20rem, 28rem));
21+
gap: 2rem;
22+
justify-content: center;
23+
}
24+
25+
@media (width >= 1024px) {
26+
grid-template-columns: repeat(auto-fit, minmax(20rem, 28rem));
27+
justify-content: flex-start;
28+
}
529
}

‎apps/developer-hub/src/components/Pages/Homepage/index.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,59 @@
1+
import { Lightning } from "@phosphor-icons/react/dist/ssr";
2+
13
import styles from "./index.module.scss";
4+
import { ProductCard } from "../../ProductCard";
25

36
export const Homepage = () => {
47
return (
58
<div className={styles.landing}>
69
<h2>Homepage Landing Page</h2>
10+
<div className={styles.cards}>
11+
<ProductCard
12+
title="Pyth Pro"
13+
description="Subscription-based price data for institutions and advanced use cases."
14+
features={[
15+
{ label: "Ultra-low latency", icon: <Lightning size={12.5} /> },
16+
{
17+
label: "Crypto, Equities & Indexes",
18+
icon: <Lightning size={12.5} />,
19+
},
20+
{
21+
label: "Customizable channels and latency",
22+
icon: <Lightning size={12.5} />,
23+
},
24+
{ label: "Dedicated support", icon: <Lightning size={12.5} /> },
25+
]}
26+
quickLinks={[
27+
{
28+
label: "Get Pyth Pro Access Token",
29+
href: "/docs/price-feeds/v2/acquire-an-access-token",
30+
},
31+
{ label: "Browse Supported Feeds", href: "/docs/price-feeds" },
32+
{ label: "Error Codes", href: "/docs/price-feeds" },
33+
]}
34+
buttonLabel="Get started"
35+
buttonHref="/docs/price-feeds"
36+
/>
37+
<ProductCard
38+
title="Entropy"
39+
description="Generate verifiable random numbers on-chain using Pyth's entropy service for your smart contracts."
40+
features={[
41+
{ label: "On-chain randomness", icon: <Lightning size={12.5} /> },
42+
{ label: "Verifiable results", icon: <Lightning size={12.5} /> },
43+
{ label: "Multiple chains", icon: <Lightning size={12.5} /> },
44+
]}
45+
quickLinks={[
46+
{
47+
label: "Getting Started",
48+
href: "/docs/entropy/create-your-first-entropy-app",
49+
},
50+
{ label: "Protocol Design", href: "/docs/entropy/protocol-design" },
51+
{ label: "Examples", href: "/docs/entropy/examples" },
52+
]}
53+
buttonLabel="Get started"
54+
buttonHref="/docs/entropy"
55+
/>
56+
</div>
757
</div>
858
);
959
};

‎apps/developer-hub/src/components/ProductCard/index.module.scss‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.card {
4+
position: relative;
5+
display: flex;
6+
flex-direction: column;
7+
height: 100%;
8+
max-width: 28rem; // 448px - prevents cards from being too wide
9+
padding: 1.5rem; // 24px
10+
border: 1px solid var(--color-fd-border);
11+
border-radius: 1.5rem; // 24px
12+
background-color: var(--color-fd-card);
13+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
14+
overflow: hidden;
15+
16+
&::after {
17+
content: "";
18+
position: absolute;
19+
inset: 0;
20+
pointer-events: none;
21+
box-shadow: inset 0 4px 5.8px 0 var(--color-fd-background, #f6f3f3);
22+
border-radius: 1.5rem; // 24px
23+
}
24+
}
25+
26+
.content {
27+
display: flex;
28+
flex-direction: column;
29+
gap: 2rem; // 32px
30+
height: 100%;
31+
flex: 1;
32+
overflow: hidden;
33+
}
34+
35+
.mainContent {
36+
display: flex;
37+
flex-direction: column;
38+
gap: 2.5rem; // 40px
39+
padding-top: 0;
40+
padding-bottom: 0;
41+
flex: 1;
42+
overflow: visible;
43+
}
44+
45+
.header {
46+
display: flex;
47+
flex-direction: column;
48+
gap: 0.75rem; // 12px
49+
min-height: 7rem; // 88px - fixed height to keep FEATURES at consistent position
50+
height: 7rem; // 88px - fixed height
51+
}
52+
53+
.decorativeIcon {
54+
position: absolute;
55+
right: 1.5rem; // 24px from right
56+
top: 1.5rem;
57+
pointer-events: none;
58+
z-index: 0;
59+
}
60+
61+
.barChart {
62+
position: relative;
63+
width: 30px; // Space for all bars
64+
height: 32px;
65+
}
66+
67+
.bar {
68+
position: absolute;
69+
width: 3px;
70+
border-radius: 1.5px;
71+
}
72+
73+
.title {
74+
margin: 0;
75+
font-size: 1.875rem; // 30px
76+
font-weight: 600;
77+
line-height: 1; // 30px
78+
letter-spacing: -0.03em; // -0.9px
79+
color: var(--color-fd-foreground);
80+
white-space: nowrap;
81+
overflow: hidden;
82+
text-overflow: ellipsis;
83+
flex-shrink: 0;
84+
}
85+
86+
.description {
87+
margin: 0;
88+
font-size: 1rem; // 16px
89+
font-weight: 400;
90+
line-height: 1.65;
91+
letter-spacing: -0.01em; // -0.16px
92+
color: var(--color-fd-foreground);
93+
opacity: 0.9;
94+
max-width: 20rem; // 320px
95+
overflow: hidden;
96+
display: -webkit-box;
97+
-webkit-line-clamp: 3; // Limit to 2 lines
98+
line-clamp: 3; // Standard property for compatibility
99+
-webkit-box-orient: vertical;
100+
flex: 1;
101+
}
102+
103+
.featuresSection {
104+
display: flex;
105+
flex-direction: column;
106+
gap: 1.5rem; // 24px
107+
min-height: 9rem; // 96px - fixed minimum height to keep QUICK LINKS at consistent position
108+
max-height: 9rem; // 96px - fixed maximum height
109+
overflow: hidden;
110+
}
111+
112+
.quickLinksSection {
113+
display: flex;
114+
flex-direction: column;
115+
gap: 1.5rem; // 24px
116+
}
117+
118+
.sectionLabel {
119+
margin: 0;
120+
font-size: 0.6875rem; // 11px
121+
font-weight: 500;
122+
line-height: 1.82; // 20px
123+
letter-spacing: -0.01em; // -0.11px
124+
color: var(--color-fd-foreground);
125+
opacity: 0.5;
126+
text-transform: uppercase;
127+
white-space: pre;
128+
}
129+
130+
.features {
131+
display: flex;
132+
flex-wrap: wrap;
133+
gap: 0.5rem; // 8px
134+
overflow: hidden;
135+
max-height: 8rem; // 128px - limit features container height
136+
}
137+
138+
.featureItem {
139+
position: relative;
140+
display: flex;
141+
align-items: center;
142+
gap: 0.5rem; // 8px
143+
padding: 0.3125rem 0.8125rem 0.3125rem 0.5rem; // 5px 13px 5px 8px
144+
border: 1px solid var(--color-fd-border);
145+
border-radius: 1.3125rem; // 21px
146+
background-color: var(--color-fd-card);
147+
}
148+
149+
.featureIcon {
150+
display: flex;
151+
align-items: center;
152+
justify-content: center;
153+
width: 0.781rem; // 12.5px
154+
height: 0.781rem; // 12.5px
155+
flex-shrink: 0;
156+
color: var(--color-fd-foreground);
157+
}
158+
159+
.featureLabel {
160+
font-size: 0.875rem; // 14px
161+
font-weight: 600;
162+
line-height: 1.65;
163+
letter-spacing: -0.01em; // -0.14px
164+
color: var(--color-fd-foreground);
165+
white-space: pre;
166+
}
167+
168+
.featureShadow {
169+
position: absolute;
170+
inset: 0;
171+
pointer-events: none;
172+
box-shadow: inset 0 0 4px 0 rgb(255 255 255 / 25%);
173+
border-radius: 1.3125rem; // 21px
174+
}
175+
176+
.quickLinks {
177+
display: flex;
178+
flex-direction: column;
179+
gap: 1rem; // 16px
180+
}
181+
182+
.quickLink {
183+
font-size: 1rem; // 16px
184+
font-weight: 500;
185+
line-height: 1.25; // 20px
186+
letter-spacing: -0.01em; // -0.16px
187+
color: var(--color-fd-foreground);
188+
text-decoration: underline;
189+
text-decoration-skip-ink: none;
190+
text-underline-position: from-font;
191+
text-underline-offset: 0.1875rem; // 3px
192+
transition: opacity 200ms ease-out;
193+
194+
&:hover {
195+
opacity: 0.7;
196+
}
197+
}
198+
199+
.buttonWrapper {
200+
margin-top: auto;
201+
flex-shrink: 0;
202+
display: flex;
203+
align-items: center;
204+
justify-content: flex-start;
205+
206+
:global(button) {
207+
padding: 0.625rem; // 10px
208+
border-radius: 0.5rem; // 8px
209+
background-color: #27253d;
210+
color: #f8f9fc;
211+
font-size: 1rem; // 16px
212+
font-weight: 500;
213+
line-height: 1.25; // 20px
214+
letter-spacing: -0.01em; // -0.16px
215+
width: auto;
216+
min-width: auto;
217+
}
218+
}

0 commit comments

Comments
 (0)