diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx index 29c18906d8d..6d4264fe24e 100644 --- a/apps/portal/src/app/page.tsx +++ b/apps/portal/src/app/page.tsx @@ -1,17 +1,29 @@ -import { Heading } from "@/components/Document"; +import { Grid, Heading, SDKCard } from "@/components/Document"; import Image from "next/image"; import Link from "next/link"; +import { UnityIcon } from "../icons"; +import { DotNetIcon } from "../icons"; +import { UnrealEngineIcon } from "../icons"; +import { ReactIcon } from "../icons"; +import { TypeScriptIcon } from "../icons"; +import { BridgeIcon } from "../icons/products/BridgeIcon"; +import { ConnectIcon } from "../icons/products/ConnectIcon"; +import { ContractsIcon } from "../icons/products/ContractsIcon"; +import { EngineIcon } from "../icons/products/EngineIcon"; +import { InsightIcon } from "../icons/products/InsightIcon"; +import { NebulaIcon } from "../icons/products/NebulaIcon"; +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 (
- - - + + +
); @@ -42,53 +54,139 @@ function Hero() { ); } -function FrontendSection() { +function PlaygroundSection() { return (
- +
); } -function ContractsSection() { +function ReferenceSection() { return (
- - + + + + + + + + + + + + + + + + + +
); } -function BackendSection() { +function LearningResourcesSection() { return (
- -
+ + + -
+ +
); } @@ -97,9 +195,15 @@ function SectionTitle(props: { title: string; id: string; level?: number; + className?: string; }) { return ( - + {props.title} ); @@ -112,15 +216,23 @@ function ArticleCardIndex(props: { title: string; description: string; href: string; + icon?: React.FC<{ className?: string }>; + external?: boolean; }) { return ( -
-

{props.title}

-

{props.description}

+
+ {props.icon && } +
+

+ {props.title} +

+

{props.description}

+
); diff --git a/apps/portal/src/components/Document/SDKCard.tsx b/apps/portal/src/components/Document/SDKCard.tsx index 73aa2388dc9..8d0062be67d 100644 --- a/apps/portal/src/components/Document/SDKCard.tsx +++ b/apps/portal/src/components/Document/SDKCard.tsx @@ -1,16 +1,24 @@ import Link from "next/link"; +import { cn } from "../../lib/utils"; export function SDKCard(props: { title: string; href: string; + isExternal?: boolean; icon?: React.FC<{ className?: string }>; + iconClassName?: string; }) { return ( - {props.icon && } + {props.icon && ( + + )}

{props.title}

diff --git a/apps/portal/src/icons/products/BridgeIcon.tsx b/apps/portal/src/icons/products/BridgeIcon.tsx new file mode 100644 index 00000000000..00f88f67e48 --- /dev/null +++ b/apps/portal/src/icons/products/BridgeIcon.tsx @@ -0,0 +1,24 @@ +export function BridgeIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/portal/src/icons/products/ConnectIcon.tsx b/apps/portal/src/icons/products/ConnectIcon.tsx new file mode 100644 index 00000000000..d17a2f8fcb9 --- /dev/null +++ b/apps/portal/src/icons/products/ConnectIcon.tsx @@ -0,0 +1,21 @@ +export function ConnectIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/apps/portal/src/icons/products/ContractsIcon.tsx b/apps/portal/src/icons/products/ContractsIcon.tsx new file mode 100644 index 00000000000..849a9fc6fcd --- /dev/null +++ b/apps/portal/src/icons/products/ContractsIcon.tsx @@ -0,0 +1,21 @@ +export function ContractsIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/portal/src/icons/products/EngineIcon.tsx b/apps/portal/src/icons/products/EngineIcon.tsx new file mode 100644 index 00000000000..7e99d6b3c68 --- /dev/null +++ b/apps/portal/src/icons/products/EngineIcon.tsx @@ -0,0 +1,21 @@ +export function EngineIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/apps/portal/src/icons/products/InsightIcon.tsx b/apps/portal/src/icons/products/InsightIcon.tsx new file mode 100644 index 00000000000..bdea8080daf --- /dev/null +++ b/apps/portal/src/icons/products/InsightIcon.tsx @@ -0,0 +1,21 @@ +export function InsightIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/portal/src/icons/products/NebulaIcon.tsx b/apps/portal/src/icons/products/NebulaIcon.tsx new file mode 100644 index 00000000000..a66ec07c35b --- /dev/null +++ b/apps/portal/src/icons/products/NebulaIcon.tsx @@ -0,0 +1,24 @@ +export function NebulaIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/portal/src/icons/products/PlaygroundIcon.tsx b/apps/portal/src/icons/products/PlaygroundIcon.tsx new file mode 100644 index 00000000000..129bd4e3bd3 --- /dev/null +++ b/apps/portal/src/icons/products/PlaygroundIcon.tsx @@ -0,0 +1,21 @@ +export function PlaygroundIcon(props: React.SVGProps) { + return ( + + + + ); +}