Skip to content

Commit 03390c1

Browse files
MananTankMananTank
authored
Portal: homepage UI improvements (#7667)
1 parent 8d3b9c6 commit 03390c1

File tree

1 file changed

+122
-117
lines changed

1 file changed

+122
-117
lines changed

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

Lines changed: 122 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { MessageCircleIcon, WebhookIcon } from "lucide-react";
22
import Image from "next/image";
33
import Link from "next/link";
4-
import { Grid, Heading, SDKCard } from "@/components/Document";
4+
import { Heading } from "@/components/Document";
55
import { Button } from "@/components/ui/button";
66
import {
77
DotNetIcon,
8+
ExternalLinkIcon,
89
ReactIcon,
910
TypeScriptIcon,
1011
UnityIcon,
@@ -15,14 +16,13 @@ import { ConnectIcon } from "../icons/products/ConnectIcon";
1516
import { EngineIcon } from "../icons/products/EngineIcon";
1617
import { InsightIcon } from "../icons/products/InsightIcon";
1718
import { PlaygroundIcon } from "../icons/products/PlaygroundIcon";
18-
import { cn } from "../lib/utils";
1919
import DocsHeroDark from "./_images/docs-hero-dark.png";
2020
import DocsHeroLight from "./_images/docs-hero-light.png";
2121
export default function Page() {
2222
return (
23-
<main className="container max-w-[900px] grow pb-20" data-noindex>
23+
<main className="container max-w-5xl grow pb-20" data-noindex>
2424
<Hero />
25-
<div className="grid grid-cols-1 gap-8">
25+
<div className="space-y-8">
2626
<PlaygroundSection />
2727
<LearningResourcesSection />
2828
<ReferenceSection />
@@ -33,7 +33,7 @@ export default function Page() {
3333

3434
function Hero() {
3535
return (
36-
<section className="grid gap-4 py-14 lg:grid-cols-2 lg:py-0">
36+
<section className="grid gap-4 py-14 lg:grid-cols-[1fr_420px] lg:py-0">
3737
{/* Left */}
3838
<div className="flex flex-col justify-center">
3939
<div>
@@ -43,13 +43,14 @@ function Hero() {
4343
<p className="mb-8 max-w-md text-lg text-muted-foreground leading-normal">
4444
Development framework for building onchain apps, games, and agents.
4545
</p>
46-
47-
<Link href="/chat">
48-
<Button className="flex items-center gap-2">
49-
<MessageCircleIcon className="size-4" />
50-
Ask AI
46+
<div className="flex">
47+
<Button className="flex items-center gap-2" asChild>
48+
<Link href="/chat">
49+
<MessageCircleIcon className="size-4" />
50+
Ask AI
51+
</Link>
5152
</Button>
52-
</Link>
53+
</div>
5354
</div>
5455
</div>
5556

@@ -79,94 +80,75 @@ function PlaygroundSection() {
7980

8081
function ReferenceSection() {
8182
return (
82-
<section>
83-
<SectionTitle anchorId="reference" title="API Reference" />
84-
<SectionTitle
85-
anchorId="client"
86-
className="text-muted-foreground"
87-
level={4}
88-
title="Client libraries"
89-
/>
90-
<Grid>
91-
<SDKCard
92-
href="/references/typescript/v5"
93-
icon={TypeScriptIcon}
94-
title="TypeScript"
95-
/>
96-
<SDKCard
97-
href="/references/typescript/v5"
98-
icon={ReactIcon}
99-
title="React"
100-
/>
101-
<SDKCard
102-
href="/references/typescript/v5"
103-
icon={ReactIcon}
104-
title="React Native"
105-
/>
106-
<SDKCard href="/dotnet" icon={DotNetIcon} title="DotNet" />
107-
<SDKCard href="/unity" icon={UnityIcon} title="Unity" />
108-
<SDKCard
109-
href="/unreal-engine"
110-
icon={UnrealEngineIcon}
111-
title="Unreal Engine"
112-
/>
113-
</Grid>
114-
<SectionTitle
115-
anchorId="backend"
116-
className="text-muted-foreground"
117-
level={4}
118-
title="Backend APIs"
119-
/>
120-
<Grid>
121-
<SDKCard
122-
href="https://engine.thirdweb.com/reference"
123-
icon={EngineIcon}
124-
iconClassName="text-muted-foreground"
125-
isExternal
126-
title="Engine"
127-
/>
128-
<SDKCard
129-
href="https://insight.thirdweb.com/reference"
130-
icon={InsightIcon}
131-
iconClassName="text-muted-foreground"
132-
isExternal
133-
title="Insight"
134-
/>
135-
<SDKCard
136-
href="https://bridge.thirdweb.com/reference"
137-
icon={BridgeIcon}
138-
iconClassName="text-muted-foreground"
139-
isExternal
140-
title="Payments"
141-
/>
142-
<SDKCard
143-
href="/connect/wallet/get-users"
144-
icon={ConnectIcon} // TODO: actual openAPI docs
145-
iconClassName="text-muted-foreground"
146-
title="Wallets"
147-
/>
148-
<SDKCard
149-
href="/connect/account-abstraction/api"
150-
icon={ConnectIcon} // TODO: actual openAPI docs
151-
iconClassName="text-muted-foreground"
152-
title="Bundler"
153-
/>
154-
<SDKCard
155-
href="/webhooks"
156-
icon={WebhookIcon}
157-
iconClassName="text-muted-foreground"
158-
title="Webhooks"
159-
/>
160-
</Grid>
161-
</section>
83+
<>
84+
<section>
85+
<SectionTitle anchorId="client" title="Client libraries" />
86+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
87+
<SDKCard
88+
href="/references/typescript/v5"
89+
icon={TypeScriptIcon}
90+
title="TypeScript"
91+
/>
92+
<SDKCard
93+
href="/references/typescript/v5"
94+
icon={ReactIcon}
95+
title="React"
96+
/>
97+
<SDKCard
98+
href="/references/typescript/v5"
99+
icon={ReactIcon}
100+
title="React Native"
101+
/>
102+
<SDKCard href="/dotnet" icon={DotNetIcon} title="DotNet" />
103+
<SDKCard href="/unity" icon={UnityIcon} title="Unity" />
104+
<SDKCard
105+
href="/unreal-engine"
106+
icon={UnrealEngineIcon}
107+
title="Unreal Engine"
108+
/>
109+
</div>
110+
</section>
111+
112+
<section>
113+
<SectionTitle anchorId="backend" title="Backend APIs" />
114+
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
115+
<SDKCard
116+
href="https://engine.thirdweb.com/reference"
117+
icon={EngineIcon}
118+
title="Engine"
119+
/>
120+
<SDKCard
121+
href="https://insight.thirdweb.com/reference"
122+
icon={InsightIcon}
123+
title="Insight"
124+
/>
125+
<SDKCard
126+
href="https://bridge.thirdweb.com/reference"
127+
icon={BridgeIcon}
128+
title="Payments"
129+
/>
130+
<SDKCard
131+
href="/connect/wallet/get-users"
132+
icon={ConnectIcon} // TODO: actual openAPI docs
133+
title="Wallets"
134+
/>
135+
<SDKCard
136+
href="/connect/account-abstraction/api"
137+
icon={ConnectIcon} // TODO: actual openAPI docs
138+
title="Bundler"
139+
/>
140+
<SDKCard href="/webhooks" icon={WebhookIcon} title="Webhooks" />
141+
</div>
142+
</section>
143+
</>
162144
);
163145
}
164146

165147
function LearningResourcesSection() {
166148
return (
167149
<section>
168150
<SectionTitle anchorId="learning" title="Documentation" />
169-
<Grid className="md:grid-cols-1 lg:grid-cols-3">
151+
<div className="grid gap-4 md:grid-cols-1 lg:grid-cols-3">
170152
<ArticleCardIndex
171153
description="Create and manage crypto wallets"
172154
href="/wallets"
@@ -203,24 +185,14 @@ function LearningResourcesSection() {
203185
icon={ConnectIcon}
204186
title="Vault"
205187
/>
206-
</Grid>
188+
</div>
207189
</section>
208190
);
209191
}
210192

211-
function SectionTitle(props: {
212-
title: string;
213-
anchorId: string;
214-
level?: number;
215-
className?: string;
216-
}) {
193+
function SectionTitle(props: { title: string; anchorId: string }) {
217194
return (
218-
<Heading
219-
anchorClassName="mb-4 mt-0"
220-
anchorId={props.anchorId}
221-
className={cn(props.className)}
222-
level={props.level || 2}
223-
>
195+
<Heading anchorId={props.anchorId} anchorClassName="mb-2" level={2}>
224196
{props.title}
225197
</Heading>
226198
);
@@ -233,22 +205,55 @@ function ArticleCardIndex(props: {
233205
title: string;
234206
description: string;
235207
href: string;
236-
icon?: React.FC<{ className?: string }>;
208+
icon: React.FC<{ className?: string }>;
237209
external?: boolean;
238210
}) {
239211
return (
240-
<Link
241-
className="flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:border-active-border"
242-
href={props.href}
243-
target={props.external ? "_blank" : undefined}
244-
>
245-
<div className="flex items-start gap-3">
246-
{props.icon && <props.icon className="text-foreground size-6" />}
247-
<div className="flex flex-col gap-0.5">
248-
<h3 className="font-semibold text-foreground">{props.title}</h3>
249-
<p className="text-sm text-muted-foreground">{props.description}</p>
212+
<div className="rounded-lg border bg-card p-4 hover:border-active-border relative">
213+
<div className="flex mb-3">
214+
<div className="p-2 rounded-full border bg-background">
215+
<props.icon className="size-5 text-muted-foreground" />
250216
</div>
251217
</div>
252-
</Link>
218+
<h3 className="mb-0.5 font-medium text-lg tracking-tight">
219+
<Link
220+
className="before:absolute before:inset-0"
221+
href={props.href}
222+
target={props.external ? "_blank" : undefined}
223+
>
224+
{props.title}
225+
</Link>
226+
</h3>
227+
<p className="text-sm text-muted-foreground">{props.description}</p>
228+
</div>
229+
);
230+
}
231+
232+
function SDKCard(props: {
233+
title: string;
234+
href: string;
235+
icon: React.FC<{ className?: string }>;
236+
}) {
237+
return (
238+
<div className="relative flex items-center gap-3 rounded-lg border bg-card p-4 transition-colors hover:border-active-border text-foreground/80 hover:text-foreground">
239+
<div className="p-2 rounded-full border bg-background">
240+
<props.icon className="size-4 shrink-0" />
241+
</div>
242+
<div className="flex flex-col">
243+
<h3 className="font-medium text-base text-foreground mb-0.5">
244+
<Link
245+
href={props.href}
246+
target={props.href.includes("http") ? "_blank" : undefined}
247+
className="before:absolute before:inset-0"
248+
>
249+
{props.title}
250+
</Link>
251+
</h3>
252+
<p className="inline-flex items-center gap-1 text-muted-foreground text-xs">
253+
View docs
254+
<ExternalLinkIcon className="size-3.5 shrink-0 text-muted-foreground/50" />
255+
</p>
256+
</div>
257+
</div>
253258
);
254259
}

0 commit comments

Comments
 (0)