Skip to content

Commit 0993fdd

Browse files
stevedylandevstevedylandev
committed
feat: added landing page design
1 parent 1e2d284 commit 0993fdd

6 files changed

Lines changed: 308 additions & 9 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"check:fix": "biome check --write src/"
1616
},
1717
"dependencies": {
18+
"@radix-ui/react-separator": "^1.1.7",
1819
"class-variance-authority": "^0.7.1",
1920
"clsx": "^2.1.1",
2021
"fumadocs-core": "15.6.9",

‎pnpm-lock.yaml‎

Lines changed: 25 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/page.tsx‎

Lines changed: 114 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,128 @@
1-
import { Card } from "fumadocs-ui/components/card";
21
import { HomeLayout } from "fumadocs-ui/layouts/home";
32
import { baseOptions } from "./layout.config";
3+
import { Card, Cards } from "fumadocs-ui/components/card";
4+
import { SmallCard } from "@/components/ui/small-card";
5+
import {
6+
ActivityIcon,
7+
AnvilIcon,
8+
ArrowRightLeftIcon,
9+
LibraryIcon,
10+
MoonStarIcon,
11+
PlayIcon,
12+
RocketIcon,
13+
SatelliteDishIcon,
14+
SquareAsteriskIcon,
15+
StarsIcon,
16+
TriangleIcon,
17+
WallpaperIcon,
18+
WandSparklesIcon,
19+
} from "lucide-react";
20+
import { Separator } from "@/components/ui/separator";
421

522
export default function HomePage() {
623
return (
724
<HomeLayout {...baseOptions}>
8-
<main className="container py-8">
25+
<main className="container max-w-6xl py-8 flex flex-col gap-12">
926
<div className="text-center mb-12">
10-
<h1 className="text-4xl font-bold mb-4">Documentation</h1>
27+
<h1 className="text-4xl font-bold mb-4">
28+
Welcome to the OpenZeppelin Docs
29+
</h1>
1130
<p className="text-lg text-muted-foreground">
1231
The official documentation for OpenZeppelin Libraries and Tools
1332
</p>
1433
</div>
15-
16-
<Card
17-
className="max-w-sm mx-auto text-center"
18-
href="/contracts"
19-
title="Get Started"
20-
/>
34+
<Cards>
35+
<Card
36+
icon={<LibraryIcon />}
37+
href="/contracts"
38+
title="OpenZeppelin Contracts"
39+
description="First class, secure, and gas optimized smart contract library for Solidity"
40+
/>
41+
<Card
42+
title="Open Source Tools"
43+
description="Tools for building, testing, and using contracts in production"
44+
icon={<AnvilIcon />}
45+
href="/tools"
46+
/>
47+
</Cards>
48+
<div className="flex flex-col gap-4">
49+
Tools
50+
<Separator />
51+
<Cards>
52+
<SmallCard
53+
icon={<WandSparklesIcon />}
54+
title="Wizard"
55+
description="Scaffold contracts with standards in multiple blockchains"
56+
href="/tools/wizard"
57+
/>
58+
<SmallCard
59+
icon={<WallpaperIcon />}
60+
title="UI Builder"
61+
description="Create user friendly UI forms for deployed smart contracts"
62+
href="/tools/contracts-ui-builder"
63+
/>
64+
<SmallCard
65+
icon={<ActivityIcon />}
66+
title="Monitor"
67+
description="Get alerted and act on smart contract events"
68+
href="/tools/openzeppelin-monitor"
69+
/>
70+
<SmallCard
71+
icon={<SatelliteDishIcon />}
72+
title="Relayer"
73+
description="Securely interact and manage deployed smart contracts "
74+
href="/tools/openzeppelin-relayer/v1.x"
75+
/>
76+
</Cards>
77+
</div>
78+
<div className="flex flex-col gap-4">
79+
Ecosystems
80+
<Separator />
81+
<Cards>
82+
<SmallCard
83+
icon={<RocketIcon />}
84+
title="Starknet Contracts"
85+
description="Essential contracts library written in Cairo for Starknet"
86+
href="/cairo-contracts/v3.x"
87+
/>
88+
<SmallCard
89+
icon={<StarsIcon />}
90+
title="Stellar Contracts"
91+
description="Soroban contracts library for Stellar"
92+
href="/stellar-contracts/v0.x"
93+
/>
94+
<SmallCard
95+
icon={<ArrowRightLeftIcon />}
96+
title="Uniswap Hooks"
97+
description="Advance Uniswap V4 hooks in Solidity"
98+
href="/uniswap-hooks/v1.x"
99+
/>
100+
<SmallCard
101+
icon={<TriangleIcon />}
102+
title="Arbitrum Stylus Contracts"
103+
description="Essential contracts library for Arbitrum Stylus written in Rust"
104+
href="/contracts-stylus/v0.x"
105+
/>
106+
<SmallCard
107+
icon={<MoonStarIcon />}
108+
title="Midnight Contracts"
109+
description="Smart contract library written in Compact for Midnight"
110+
href="/compact-contracts/v0.x"
111+
/>
112+
<SmallCard
113+
icon={<SquareAsteriskIcon />}
114+
title="Zama Contracts"
115+
description="Confidential contracts for the Zama fhEVM"
116+
href="/confidential-contracts/v0.x"
117+
/>
118+
<SmallCard
119+
icon={<PlayIcon />}
120+
title="Polkadot Substrate Runtimes"
121+
description="A collection of secure runtime templates to build parachains more easily on Polkadot"
122+
href="/substrate-runtimes/v3.x"
123+
/>
124+
</Cards>
125+
</div>
21126
</main>
22127
</HomeLayout>
23128
);

‎src/components/ui/card.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
function Card({ className, ...props }: React.ComponentProps<"div">) {
6+
return (
7+
<div
8+
data-slot="card"
9+
className={cn(
10+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11+
className
12+
)}
13+
{...props}
14+
/>
15+
)
16+
}
17+
18+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19+
return (
20+
<div
21+
data-slot="card-header"
22+
className={cn(
23+
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24+
className
25+
)}
26+
{...props}
27+
/>
28+
)
29+
}
30+
31+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32+
return (
33+
<div
34+
data-slot="card-title"
35+
className={cn("leading-none font-semibold", className)}
36+
{...props}
37+
/>
38+
)
39+
}
40+
41+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42+
return (
43+
<div
44+
data-slot="card-description"
45+
className={cn("text-muted-foreground text-sm", className)}
46+
{...props}
47+
/>
48+
)
49+
}
50+
51+
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52+
return (
53+
<div
54+
data-slot="card-action"
55+
className={cn(
56+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57+
className
58+
)}
59+
{...props}
60+
/>
61+
)
62+
}
63+
64+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65+
return (
66+
<div
67+
data-slot="card-content"
68+
className={cn("px-6", className)}
69+
{...props}
70+
/>
71+
)
72+
}
73+
74+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75+
return (
76+
<div
77+
data-slot="card-footer"
78+
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79+
{...props}
80+
/>
81+
)
82+
}
83+
84+
export {
85+
Card,
86+
CardHeader,
87+
CardFooter,
88+
CardTitle,
89+
CardAction,
90+
CardDescription,
91+
CardContent,
92+
}

‎src/components/ui/separator.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as SeparatorPrimitive from "@radix-ui/react-separator"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
function Separator({
9+
className,
10+
orientation = "horizontal",
11+
decorative = true,
12+
...props
13+
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14+
return (
15+
<SeparatorPrimitive.Root
16+
data-slot="separator"
17+
decorative={decorative}
18+
orientation={orientation}
19+
className={cn(
20+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21+
className
22+
)}
23+
{...props}
24+
/>
25+
)
26+
}
27+
28+
export { Separator }

‎src/components/ui/small-card.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Link, { type LinkProps } from "fumadocs-core/link";
2+
import type { ReactNode } from "react";
3+
import { cn } from "@/lib/utils";
4+
5+
export type CardProps = {
6+
icon?: ReactNode;
7+
title: string;
8+
description: string;
9+
innerClassName?: string;
10+
variant?: "default" | "secondary";
11+
} & Omit<LinkProps, "title">;
12+
13+
export type SmallCardProps = {
14+
icon: ReactNode;
15+
title: string;
16+
description: string;
17+
} & Omit<LinkProps, "title">;
18+
19+
export function SmallCard({
20+
icon,
21+
title,
22+
description,
23+
...props
24+
}: CardProps): React.ReactElement {
25+
return (
26+
<Link
27+
{...props}
28+
className={cn(
29+
"not-prose block transition-all duration-100 ease-linear space-y-3",
30+
props.className,
31+
)}
32+
>
33+
<div className="group flex space-x-4 px-3 py-4 rounded-lg hover:bg-card transition-all duration-100 ease-linear">
34+
{icon && (
35+
<div className="h-fit w-fit rounded-md border bg-card group-hover:bg-background transition-all duration-100 ease-linear p-2 text-muted-foreground [&_svg]:size-4">
36+
{icon}
37+
</div>
38+
)}
39+
<div className="flex flex-col w-full">
40+
<h3 className="mb-1 font-inter font-medium text-md text-foreground dark:text-[#f6f5f3]">
41+
{title}
42+
</h3>
43+
<p className="text-sm text-muted-foreground">{description}</p>
44+
</div>
45+
</div>
46+
</Link>
47+
);
48+
}

0 commit comments

Comments
 (0)