Skip to content

Portal: homepage UI improvements #7667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 21, 2025
Merged

Portal: homepage UI improvements #7667

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 122 additions & 117 deletions apps/portal/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { MessageCircleIcon, WebhookIcon } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Grid, Heading, SDKCard } from "@/components/Document";
import { Heading } from "@/components/Document";
import { Button } from "@/components/ui/button";
import {
DotNetIcon,
ExternalLinkIcon,
ReactIcon,
TypeScriptIcon,
UnityIcon,
Expand All @@ -15,14 +16,13 @@ import { ConnectIcon } from "../icons/products/ConnectIcon";
import { EngineIcon } from "../icons/products/EngineIcon";
import { InsightIcon } from "../icons/products/InsightIcon";
import { PlaygroundIcon } from "../icons/products/PlaygroundIcon";
import { cn } from "../lib/utils";
import DocsHeroDark from "./_images/docs-hero-dark.png";
import DocsHeroLight from "./_images/docs-hero-light.png";
export default function Page() {
return (
<main className="container max-w-[900px] grow pb-20" data-noindex>
<main className="container max-w-5xl grow pb-20" data-noindex>
<Hero />
<div className="grid grid-cols-1 gap-8">
<div className="space-y-8">
<PlaygroundSection />
<LearningResourcesSection />
<ReferenceSection />
Expand All @@ -33,7 +33,7 @@ export default function Page() {

function Hero() {
return (
<section className="grid gap-4 py-14 lg:grid-cols-2 lg:py-0">
<section className="grid gap-4 py-14 lg:grid-cols-[1fr_420px] lg:py-0">
{/* Left */}
<div className="flex flex-col justify-center">
<div>
Expand All @@ -43,13 +43,14 @@ function Hero() {
<p className="mb-8 max-w-md text-lg text-muted-foreground leading-normal">
Development framework for building onchain apps, games, and agents.
</p>

<Link href="/chat">
<Button className="flex items-center gap-2">
<MessageCircleIcon className="size-4" />
Ask AI
<div className="flex">
<Button className="flex items-center gap-2" asChild>
<Link href="/chat">
<MessageCircleIcon className="size-4" />
Ask AI
</Link>
</Button>
</Link>
</div>
</div>
</div>

Expand Down Expand Up @@ -79,94 +80,75 @@ function PlaygroundSection() {

function ReferenceSection() {
return (
<section>
<SectionTitle anchorId="reference" title="API Reference" />
<SectionTitle
anchorId="client"
className="text-muted-foreground"
level={4}
title="Client libraries"
/>
<Grid>
<SDKCard
href="/references/typescript/v5"
icon={TypeScriptIcon}
title="TypeScript"
/>
<SDKCard
href="/references/typescript/v5"
icon={ReactIcon}
title="React"
/>
<SDKCard
href="/references/typescript/v5"
icon={ReactIcon}
title="React Native"
/>
<SDKCard href="/dotnet" icon={DotNetIcon} title="DotNet" />
<SDKCard href="/unity" icon={UnityIcon} title="Unity" />
<SDKCard
href="/unreal-engine"
icon={UnrealEngineIcon}
title="Unreal Engine"
/>
</Grid>
<SectionTitle
anchorId="backend"
className="text-muted-foreground"
level={4}
title="Backend APIs"
/>
<Grid>
<SDKCard
href="https://engine.thirdweb.com/reference"
icon={EngineIcon}
iconClassName="text-muted-foreground"
isExternal
title="Engine"
/>
<SDKCard
href="https://insight.thirdweb.com/reference"
icon={InsightIcon}
iconClassName="text-muted-foreground"
isExternal
title="Insight"
/>
<SDKCard
href="https://bridge.thirdweb.com/reference"
icon={BridgeIcon}
iconClassName="text-muted-foreground"
isExternal
title="Payments"
/>
<SDKCard
href="/connect/wallet/get-users"
icon={ConnectIcon} // TODO: actual openAPI docs
iconClassName="text-muted-foreground"
title="Wallets"
/>
<SDKCard
href="/connect/account-abstraction/api"
icon={ConnectIcon} // TODO: actual openAPI docs
iconClassName="text-muted-foreground"
title="Bundler"
/>
<SDKCard
href="/webhooks"
icon={WebhookIcon}
iconClassName="text-muted-foreground"
title="Webhooks"
/>
</Grid>
</section>
<>
<section>
<SectionTitle anchorId="client" title="Client libraries" />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<SDKCard
href="/references/typescript/v5"
icon={TypeScriptIcon}
title="TypeScript"
/>
<SDKCard
href="/references/typescript/v5"
icon={ReactIcon}
title="React"
/>
<SDKCard
href="/references/typescript/v5"
icon={ReactIcon}
title="React Native"
/>
<SDKCard href="/dotnet" icon={DotNetIcon} title="DotNet" />
<SDKCard href="/unity" icon={UnityIcon} title="Unity" />
<SDKCard
href="/unreal-engine"
icon={UnrealEngineIcon}
title="Unreal Engine"
/>
</div>
</section>

<section>
<SectionTitle anchorId="backend" title="Backend APIs" />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<SDKCard
href="https://engine.thirdweb.com/reference"
icon={EngineIcon}
title="Engine"
/>
<SDKCard
href="https://insight.thirdweb.com/reference"
icon={InsightIcon}
title="Insight"
/>
<SDKCard
href="https://bridge.thirdweb.com/reference"
icon={BridgeIcon}
title="Payments"
/>
<SDKCard
href="/connect/wallet/get-users"
icon={ConnectIcon} // TODO: actual openAPI docs
title="Wallets"
/>
<SDKCard
href="/connect/account-abstraction/api"
icon={ConnectIcon} // TODO: actual openAPI docs
title="Bundler"
/>
<SDKCard href="/webhooks" icon={WebhookIcon} title="Webhooks" />
</div>
</section>
</>
);
}

function LearningResourcesSection() {
return (
<section>
<SectionTitle anchorId="learning" title="Documentation" />
<Grid className="md:grid-cols-1 lg:grid-cols-3">
<div className="grid gap-4 md:grid-cols-1 lg:grid-cols-3">
<ArticleCardIndex
description="Create and manage crypto wallets"
href="/wallets"
Expand Down Expand Up @@ -203,24 +185,14 @@ function LearningResourcesSection() {
icon={ConnectIcon}
title="Vault"
/>
</Grid>
</div>
</section>
);
}

function SectionTitle(props: {
title: string;
anchorId: string;
level?: number;
className?: string;
}) {
function SectionTitle(props: { title: string; anchorId: string }) {
return (
<Heading
anchorClassName="mb-4 mt-0"
anchorId={props.anchorId}
className={cn(props.className)}
level={props.level || 2}
>
<Heading anchorId={props.anchorId} anchorClassName="mb-2" level={2}>
{props.title}
</Heading>
);
Expand All @@ -233,22 +205,55 @@ function ArticleCardIndex(props: {
title: string;
description: string;
href: string;
icon?: React.FC<{ className?: string }>;
icon: React.FC<{ className?: string }>;
external?: boolean;
}) {
return (
<Link
className="flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:border-active-border"
href={props.href}
target={props.external ? "_blank" : undefined}
>
<div className="flex items-start gap-3">
{props.icon && <props.icon className="text-foreground size-6" />}
<div className="flex flex-col gap-0.5">
<h3 className="font-semibold text-foreground">{props.title}</h3>
<p className="text-sm text-muted-foreground">{props.description}</p>
<div className="rounded-lg border bg-card p-4 hover:border-active-border relative">
<div className="flex mb-3">
<div className="p-2 rounded-full border bg-background">
<props.icon className="size-5 text-muted-foreground" />
</div>
</div>
</Link>
<h3 className="mb-0.5 font-medium text-lg tracking-tight">
<Link
className="before:absolute before:inset-0"
href={props.href}
target={props.external ? "_blank" : undefined}
>
{props.title}
</Link>
</h3>
<p className="text-sm text-muted-foreground">{props.description}</p>
</div>
);
}

function SDKCard(props: {
title: string;
href: string;
icon: React.FC<{ className?: string }>;
}) {
return (
<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">
<div className="p-2 rounded-full border bg-background">
<props.icon className="size-4 shrink-0" />
</div>
<div className="flex flex-col">
<h3 className="font-medium text-base text-foreground mb-0.5">
<Link
href={props.href}
target={props.href.includes("http") ? "_blank" : undefined}
className="before:absolute before:inset-0"
>
{props.title}
</Link>
</h3>
<p className="inline-flex items-center gap-1 text-muted-foreground text-xs">
View docs
<ExternalLinkIcon className="size-3.5 shrink-0 text-muted-foreground/50" />
</p>
</div>
</div>
);
}
Loading