Skip to content

Commit 98d3d7b

Browse files
joaquim-vergesjoaquim-verges
committed
[Portal] Redesign documentation homepage with SDK cards and product icons
1 parent cff2481 commit 98d3d7b

File tree

9 files changed

+299
-26
lines changed

9 files changed

+299
-26
lines changed

‎apps/portal/src/app/page.tsx‎

Lines changed: 137 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
1-
import { Heading } from "@/components/Document";
1+
import { Grid, Heading, SDKCard } from "@/components/Document";
22
import Image from "next/image";
33
import Link from "next/link";
4+
import { UnityIcon } from "../icons";
5+
import { DotNetIcon } from "../icons";
6+
import { UnrealEngineIcon } from "../icons";
7+
import { ReactIcon } from "../icons";
8+
import { TypeScriptIcon } from "../icons";
9+
import { BridgeIcon } from "../icons/products/BridgeIcon";
10+
import { ConnectIcon } from "../icons/products/ConnectIcon";
11+
import { ContractsIcon } from "../icons/products/ContractsIcon";
12+
import { EngineIcon } from "../icons/products/EngineIcon";
13+
import { InsightIcon } from "../icons/products/InsightIcon";
14+
import { NebulaIcon } from "../icons/products/NebulaIcon";
15+
import { PlaygroundIcon } from "../icons/products/PlaygroundIcon";
16+
import { cn } from "../lib/utils";
417
import DocsHeroDark from "./_images/docs-hero-dark.png";
518
import DocsHeroLight from "./_images/docs-hero-light.png";
6-
719
export default function Page() {
820
return (
921
<main className="container max-w-[900px] grow pb-20" data-noindex>
1022
<Hero />
1123
<div className="grid grid-cols-1 gap-8">
12-
<FrontendSection />
13-
<BackendSection />
14-
<ContractsSection />
24+
<PlaygroundSection />
25+
<LearningResourcesSection />
26+
<ReferenceSection />
1527
</div>
1628
</main>
1729
);
@@ -42,53 +54,139 @@ function Hero() {
4254
);
4355
}
4456

45-
function FrontendSection() {
57+
function PlaygroundSection() {
4658
return (
4759
<section>
48-
<SectionTitle id="frontend" title="Frontend" />
60+
<SectionTitle id="playground" title="Live Demos" />
4961
<ArticleCardIndex
50-
href="/connect"
51-
title="Connect"
52-
description="Wallets, auth, and onchain interactions"
62+
href="https://playground.thirdweb.com"
63+
title="Playground"
64+
external
65+
description="Try out our interactive playground to get started"
66+
icon={PlaygroundIcon}
5367
/>
5468
</section>
5569
);
5670
}
5771

58-
function ContractsSection() {
72+
function ReferenceSection() {
5973
return (
6074
<section>
61-
<SectionTitle id="onchain" title="Onchain" />
62-
<ArticleCardIndex
63-
title="Contracts"
64-
description="Solidity contracts and deployment tools"
65-
href="/contracts"
75+
<SectionTitle id="reference" title="API Reference" />
76+
<SectionTitle
77+
id="client"
78+
title="Client libraries"
79+
level={4}
80+
className="text-muted-foreground"
81+
/>
82+
<Grid>
83+
<SDKCard
84+
title="TypeScript"
85+
href="/typescript/v5"
86+
icon={TypeScriptIcon}
87+
/>
88+
<SDKCard title="React" href="/react/v5" icon={ReactIcon} />
89+
<SDKCard
90+
title="React Native"
91+
href="/react-native/v5"
92+
icon={ReactIcon}
93+
/>
94+
<SDKCard title="DotNet" href="/dotnet" icon={DotNetIcon} />
95+
<SDKCard title="Unity" href="/unity" icon={UnityIcon} />
96+
<SDKCard
97+
title="Unreal Engine"
98+
href="/unreal-engine"
99+
icon={UnrealEngineIcon}
100+
/>
101+
</Grid>
102+
<SectionTitle
103+
id="backend"
104+
title="Backend APIs"
105+
level={4}
106+
className="text-muted-foreground"
66107
/>
108+
<Grid>
109+
<SDKCard
110+
title="Engine"
111+
href="https://thirdweb-engine.apidocumentation.com/"
112+
icon={EngineIcon}
113+
isExternal
114+
iconClassName="text-muted-foreground"
115+
/>
116+
<SDKCard
117+
title="Insight"
118+
href="https://insight-api.thirdweb.com/reference"
119+
icon={InsightIcon}
120+
isExternal
121+
iconClassName="text-muted-foreground"
122+
/>
123+
<SDKCard
124+
title="Universal Bridge"
125+
href="https://bridge.thirdweb.com/reference"
126+
icon={BridgeIcon}
127+
isExternal
128+
iconClassName="text-muted-foreground"
129+
/>
130+
<SDKCard
131+
title="Contracts"
132+
href="https://contracts.thirdweb.com/reference"
133+
icon={ContractsIcon}
134+
isExternal
135+
iconClassName="text-muted-foreground"
136+
/>
137+
<SDKCard
138+
title="Wallets"
139+
href="/connect/wallet/get-users" // TODO: actual openAPI docs
140+
icon={ConnectIcon}
141+
iconClassName="text-muted-foreground"
142+
/>
143+
<SDKCard
144+
title="Nebula"
145+
href="/nebula/api-reference" // TODO: actual openAPI docs
146+
icon={NebulaIcon}
147+
iconClassName="text-muted-foreground"
148+
/>
149+
</Grid>
67150
</section>
68151
);
69152
}
70153

71-
function BackendSection() {
154+
function LearningResourcesSection() {
72155
return (
73156
<section>
74-
<SectionTitle id="backend" title="Backend" />
75-
<div className="flex flex-col gap-4">
157+
<SectionTitle id="learning" title="Learning Resources" />
158+
<Grid className="md:grid-cols-1 lg:grid-cols-2">
159+
<ArticleCardIndex
160+
href="/connect"
161+
title="Connect"
162+
description="Wallets, auth, and onchain interactions"
163+
icon={ConnectIcon}
164+
/>
76165
<ArticleCardIndex
77166
href="/engine"
78167
title="Engine"
79168
description="Reliable transactions and monitoring"
169+
icon={EngineIcon}
80170
/>
81171
<ArticleCardIndex
82172
href="/insight"
83173
title="Insight"
84174
description="Blockchain data queries and transformations"
175+
icon={InsightIcon}
85176
/>
86177
<ArticleCardIndex
87178
href="/nebula"
88-
title="AI"
179+
title="Nebula"
89180
description="API interface for LLMs"
181+
icon={NebulaIcon}
90182
/>
91-
</div>
183+
<ArticleCardIndex
184+
title="Contracts"
185+
description="Solidity contracts and deployment tools"
186+
href="/contracts"
187+
icon={ContractsIcon}
188+
/>
189+
</Grid>
92190
</section>
93191
);
94192
}
@@ -97,9 +195,15 @@ function SectionTitle(props: {
97195
title: string;
98196
id: string;
99197
level?: number;
198+
className?: string;
100199
}) {
101200
return (
102-
<Heading id={props.id} level={props.level || 2} anchorClassName="mb-4 mt-0">
201+
<Heading
202+
id={props.id}
203+
level={props.level || 2}
204+
anchorClassName="mb-4 mt-0"
205+
className={cn(props.className)}
206+
>
103207
{props.title}
104208
</Heading>
105209
);
@@ -112,15 +216,23 @@ function ArticleCardIndex(props: {
112216
title: string;
113217
description: string;
114218
href: string;
219+
icon?: React.FC<{ className?: string }>;
220+
external?: boolean;
115221
}) {
116222
return (
117223
<Link
118224
href={props.href}
225+
target={props.external ? "_blank" : undefined}
119226
className="flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:border-active-border"
120227
>
121-
<div className="flex flex-col gap-0.5">
122-
<h3 className="font-semibold text-foreground text-lg">{props.title}</h3>
123-
<p className="text-muted-foreground">{props.description}</p>
228+
<div className="flex items-center gap-3">
229+
{props.icon && <props.icon className="text-muted-foreground" />}
230+
<div className="flex flex-col gap-0.5">
231+
<h3 className="font-semibold text-foreground text-lg">
232+
{props.title}
233+
</h3>
234+
<p className="text-muted-foreground">{props.description}</p>
235+
</div>
124236
</div>
125237
</Link>
126238
);

‎apps/portal/src/components/Document/SDKCard.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
import Link from "next/link";
2+
import { cn } from "../../lib/utils";
23

34
export function SDKCard(props: {
45
title: string;
56
href: string;
7+
isExternal?: boolean;
68
icon?: React.FC<{ className?: string }>;
9+
iconClassName?: string;
710
}) {
811
return (
912
<Link
1013
href={props.href}
14+
target={props.isExternal ? "_blank" : undefined}
1115
className="flex items-center gap-2 rounded-lg border bg-card p-4 transition-colors hover:border-active-border"
1216
>
13-
{props.icon && <props.icon className="size-6 shrink-0 text-foreground" />}
17+
{props.icon && (
18+
<props.icon
19+
className={cn("size-6 shrink-0 text-foreground", props.iconClassName)}
20+
/>
21+
)}
1422
<h3 className="font-semibold text-base text-foreground tracking-tight">
1523
{props.title}
1624
</h3>

‎apps/portal/src/icons/products/BridgeIcon.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export function BridgeIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
role="presentation"
10+
className={className}
11+
>
12+
<path
13+
d="M13.8939 12.5808L16.5342 13.7124C16.6642 13.768 16.8143 13.8323 16.9397 13.8995C17.0808 13.9751 17.2866 14.1025 17.4539 14.3273C17.6655 14.6116 17.7696 14.9617 17.7477 15.3155C17.7304 15.5951 17.6276 15.8143 17.5506 15.9547C17.4823 16.0795 17.3917 16.2153 17.3132 16.3329C16.8225 17.0692 16.381 18.0866 15.6848 18.6588C15.5325 18.784 15.357 18.878 15.1683 18.9353C14.2961 19.2002 12.7076 19.2484 11.8114 18.8959C11.5777 18.804 11.3708 18.6549 11.2097 18.4623C10.6052 17.7393 10.4447 16.4969 10.1561 15.6306L10.1484 15.6079C10.12 15.5246 10.0614 15.3527 10.0454 15.1674C10.0318 15.0106 10.0431 14.8526 10.0787 14.6993C10.2262 14.0637 10.6368 13.4001 10.9664 12.8503C11.0351 12.7356 11.1415 12.581 11.3119 12.4437C11.5359 12.2631 11.8071 12.1507 12.0932 12.12C12.3108 12.0967 12.4953 12.1308 12.625 12.1633C13.051 12.2699 13.4916 12.4084 13.8939 12.5808Z"
14+
fill="currentColor"
15+
/>
16+
<path
17+
fillRule="evenodd"
18+
clipRule="evenodd"
19+
d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3.50553 9.01869C3.17808 9.95174 3 10.9551 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 8.1675 18.6045 4.89451 15.2291 3.59664C15.1462 4.84217 15.5812 6.80831 14.5371 7.76943C13.4421 8.77736 11.4822 9.2136 10.1439 9.8083L9.25538 10.993C9.18549 11.0863 9.10167 11.1981 9.01972 11.2908C8.92445 11.3984 8.77813 11.544 8.56315 11.6514C8.284 11.7907 7.96834 11.8396 7.66013 11.7911C7.42276 11.7538 7.23928 11.6592 7.11593 11.5854C7.00979 11.5218 6.89611 11.4406 6.80129 11.3728L3.50553 9.01869Z"
20+
fill="currentColor"
21+
/>
22+
</svg>
23+
);
24+
}

‎apps/portal/src/icons/products/ConnectIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function ConnectIcon(props: React.SVGProps<SVGSVGElement>) {
2+
return (
3+
<svg
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
role="presentation"
10+
{...props}
11+
>
12+
<path
13+
d="M16 7.99983V4.50048C16 3.66874 16 3.25287 15.8248 2.9973C15.6717 2.77401 15.4346 2.62232 15.1678 2.57691C14.8623 2.52493 14.4847 2.6992 13.7295 3.04775L4.85901 7.14182C4.18551 7.45267 3.84875 7.6081 3.60211 7.84915C3.38406 8.06225 3.21762 8.32238 3.1155 8.60966C3 8.93462 3 9.30551 3 10.0473V14.9998M16.5 14.4998H16.51M3 11.1998L3 17.7998C3 18.9199 3 19.48 3.21799 19.9078C3.40973 20.2841 3.71569 20.5901 4.09202 20.7818C4.51984 20.9998 5.07989 20.9998 6.2 20.9998H17.8C18.9201 20.9998 19.4802 20.9998 19.908 20.7818C20.2843 20.5901 20.5903 20.2841 20.782 19.9078C21 19.48 21 18.9199 21 17.7998V11.1998C21 10.0797 21 9.51967 20.782 9.09185C20.5903 8.71552 20.2843 8.40956 19.908 8.21782C19.4802 7.99983 18.9201 7.99983 17.8 7.99983L6.2 7.99983C5.0799 7.99983 4.51984 7.99983 4.09202 8.21781C3.7157 8.40956 3.40973 8.71552 3.21799 9.09185C3 9.51967 3 10.0797 3 11.1998ZM17 14.4998C17 14.776 16.7761 14.9998 16.5 14.9998C16.2239 14.9998 16 14.776 16 14.4998C16 14.2237 16.2239 13.9998 16.5 13.9998C16.7761 13.9998 17 14.2237 17 14.4998Z"
14+
stroke="currentColor"
15+
strokeWidth={2}
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
</svg>
20+
);
21+
}

‎apps/portal/src/icons/products/ContractsIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function ContractsIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
role="presentation"
10+
className={className}
11+
>
12+
<path
13+
d="M14 11H8M10 15H8M16 7H8M20 6.8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H15.2C16.8802 2 17.7202 2 18.362 2.32698C18.9265 2.6146 19.3854 3.07354 19.673 3.63803C20 4.27976 20 5.11984 20 6.8Z"
14+
stroke="currentColor"
15+
strokeWidth={2}
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
</svg>
20+
);
21+
}

‎apps/portal/src/icons/products/EngineIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function EngineIcon(props: React.SVGProps<SVGSVGElement>) {
2+
return (
3+
<svg
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
role="presentation"
10+
{...props}
11+
>
12+
<path
13+
d="M6.5 19C4.01472 19 2 16.9853 2 14.5C2 12.1564 3.79151 10.2313 6.07974 10.0194C6.54781 7.17213 9.02024 5 12 5C14.9798 5 17.4522 7.17213 17.9203 10.0194C20.2085 10.2313 22 12.1564 22 14.5C22 16.9853 19.9853 19 17.5 19C13.1102 19 10.3433 19 6.5 19Z"
14+
stroke="currentColor"
15+
strokeWidth={2}
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
</svg>
20+
);
21+
}

‎apps/portal/src/icons/products/InsightIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function InsightIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
role="presentation"
10+
className={className}
11+
>
12+
<path
13+
d="M20.5 7.27783L12 12.0001M12 12.0001L3.49997 7.27783M12 12.0001L12 21.5001M21 12.0001V7.94153C21 7.59889 21 7.42757 20.9495 7.27477C20.9049 7.13959 20.8318 7.01551 20.7354 6.91082C20.6263 6.79248 20.4766 6.70928 20.177 6.54288L12.777 2.43177C12.4934 2.27421 12.3516 2.19543 12.2015 2.16454C12.0685 2.13721 11.9315 2.13721 11.7986 2.16454C11.6484 2.19543 11.5066 2.27421 11.223 2.43177L3.82297 6.54288C3.52345 6.70928 3.37368 6.79248 3.26463 6.91082C3.16816 7.01551 3.09515 7.13959 3.05048 7.27477C3 7.42757 3 7.59889 3 7.94153V16.0586C3 16.4013 3 16.5726 3.05048 16.7254C3.09515 16.8606 3.16816 16.9847 3.26463 17.0893C3.37368 17.2077 3.52346 17.2909 3.82297 17.4573L11.223 21.5684C11.5066 21.726 11.6484 21.8047 11.7986 21.8356C11.9315 21.863 12.0685 21.863 12.2015 21.8356C12.3516 21.8047 12.4934 21.726 12.777 21.5684L13 21.4445M7.5 4.50008L16.5 9.50008M22 21.5001L21 20.5001M22 18.0001C22 19.6569 20.6569 21.0001 19 21.0001C17.3431 21.0001 16 19.6569 16 18.0001C16 16.3432 17.3431 15.0001 19 15.0001C20.6569 15.0001 22 16.3432 22 18.0001Z"
14+
stroke="currentColor"
15+
strokeWidth={2}
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
/>
19+
</svg>
20+
);
21+
}

‎apps/portal/src/icons/products/NebulaIcon.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export function NebulaIcon({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
width="24"
5+
height="24"
6+
viewBox="0 0 24 24"
7+
fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
role="presentation"
10+
className={className}
11+
>
12+
<path
13+
d="M12.0005 10.4661C12.8477 10.4661 13.5344 11.1529 13.5344 12C13.5344 12.8472 12.8477 13.5339 12.0005 13.5339C11.1534 13.5339 10.4666 12.8472 10.4666 12C10.4666 11.1529 11.1534 10.4661 12.0005 10.4661Z"
14+
fill="currentColor"
15+
/>
16+
<path
17+
fillRule="evenodd"
18+
clipRule="evenodd"
19+
d="M6.37637 9.10092C6.76715 8.60917 7.19621 8.12726 7.66198 7.6615C11.6555 3.66799 16.8353 2.37304 19.2314 4.76914C20.3274 5.86517 20.6512 7.54363 20.2976 9.42458C21.1404 9.97137 21.6979 10.9206 21.6979 12C21.6979 13.6943 20.3244 15.0678 18.6301 15.0678C18.2779 15.0678 17.9396 15.0085 17.6246 14.8993C17.2338 15.391 16.8048 15.8728 16.339 16.3386C12.3455 20.3321 7.16573 21.627 4.76963 19.2309C3.67365 18.1349 3.34989 16.4566 3.70338 14.5757C2.8604 14.029 2.30273 13.0796 2.30273 12C2.30273 10.3057 3.67624 8.93223 5.37054 8.93223C5.72284 8.93223 6.06127 8.99161 6.37637 9.10092ZM8.74661 8.74613C10.5806 6.91216 12.6367 5.75258 14.4177 5.30732C16.2333 4.85342 17.4794 5.18639 18.1468 5.85377C18.732 6.43903 19.0601 7.46927 18.8259 8.93838C18.7611 8.9343 18.6958 8.93223 18.6301 8.93223C16.9358 8.93223 15.5622 10.3057 15.5622 12C15.5622 12.7857 15.8576 13.5024 16.3434 14.0452C16.0118 14.4551 15.6487 14.8596 15.2544 15.2539C13.4204 17.0879 11.3643 18.2475 9.58328 18.6927C7.76768 19.1466 6.52164 18.8137 5.85426 18.1463C5.26901 17.561 4.94093 16.5308 5.17513 15.0617C5.23974 15.0658 5.3049 15.0678 5.37054 15.0678C7.06484 15.0678 8.43835 13.6943 8.43835 12C8.43835 11.2145 8.14307 10.4978 7.65744 9.95512C7.98905 9.54515 8.35224 9.1405 8.74661 8.74613ZM5.37076 13.5339C4.87982 13.5339 4.44277 13.3032 4.16205 12.9443C4.16201 12.9444 4.1621 12.9441 4.16205 12.9443C3.95826 12.6839 3.83664 12.3563 3.83664 12C3.83664 11.1529 4.52339 10.4661 5.37054 10.4661C6.21769 10.4661 6.90444 11.1529 6.90444 12C6.90444 12.8391 6.23074 13.5208 5.39476 13.5338C5.38685 13.5339 5.3787 13.5339 5.37076 13.5339ZM18.5973 13.5336C18.6082 13.5338 18.6191 13.5339 18.6301 13.5339C19.4772 13.5339 20.164 12.8472 20.164 12C20.164 11.6439 20.0426 11.3161 19.839 11.0558C19.5758 10.7193 19.1751 10.4955 18.7215 10.4688C18.6912 10.467 18.6607 10.4661 18.63 10.4661C18.5574 10.4661 18.486 10.4712 18.416 10.4809C17.6702 10.5851 17.0962 11.2255 17.0962 12C17.0962 12.2677 17.1647 12.5194 17.2853 12.7384C17.5412 13.2037 18.0316 13.5218 18.5973 13.5336Z"
20+
fill="currentColor"
21+
/>
22+
</svg>
23+
);
24+
}

0 commit comments

Comments
 (0)