From 80faf3479e3cf9704557ef4fbf3a1d094fd1aae3 Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Thu, 19 Dec 2024 09:57:46 +1300 Subject: [PATCH] feat: Reorganize portal landing page sections (#5745) --- apps/portal/src/app/connect/page.mdx | 109 +++-- apps/portal/src/app/connect/sidebar.tsx | 98 ++--- apps/portal/src/app/page.tsx | 385 ++---------------- .../components/Document/Cards/ConnectCard.tsx | 7 +- apps/portal/src/components/Document/index.ts | 2 +- 5 files changed, 134 insertions(+), 467 deletions(-) diff --git a/apps/portal/src/app/connect/page.mdx b/apps/portal/src/app/connect/page.mdx index 5a1b1642153..fafdfaf0a9b 100644 --- a/apps/portal/src/app/connect/page.mdx +++ b/apps/portal/src/app/connect/page.mdx @@ -7,8 +7,10 @@ import { OpenSourceCard, Stack, ConnectCard, + SDKCard, Callout } from "@doc"; +import { TypeScriptIcon, ReactIcon, DotNetIcon, UnityIcon, UnrealEngineIcon } from "@/icons"; import { cn } from "@/lib/utils"; import Link from "next/link"; import { Button } from "@/components/ui/button"; @@ -36,24 +38,51 @@ Connect is the complete toolkit for connecting every user to your application. I title="Playground" href="https://playground.thirdweb.com" iconUrl="/icons/connect/intros/demo.svg" + isExternal={true} /> - {/* - */} -### With Connect, you can: + +### Quick starts + + + + + + + + + + +### With Connect, you can - **Connect to 350+ different wallet providers** with support for every EVM network - **Log in and authenticate your users** with customizable and secure [email, phone, passkeys and social login](https://portal.thirdweb.com/connect/in-app-wallet/overview) flows. @@ -82,59 +111,13 @@ Connect is the complete toolkit for connecting every user to your application. I Connect is supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist). -### Templates +### Starter Kits & demos - +View all available starter kits, demos and templates on Github. - - - - - - - - - - - - - - diff --git a/apps/portal/src/app/connect/sidebar.tsx b/apps/portal/src/app/connect/sidebar.tsx index 4585f769b00..425b1d927d4 100644 --- a/apps/portal/src/app/connect/sidebar.tsx +++ b/apps/portal/src/app/connect/sidebar.tsx @@ -1,6 +1,6 @@ import type { SideBar } from "@/components/Layouts/DocLayout"; import { DotNetIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons"; -import { ExternalLink, ZapIcon } from "lucide-react"; +import { ExternalLink } from "lucide-react"; import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon"; // TODO: move the following two slugs to walletSlug with updated docs @@ -23,11 +23,6 @@ export const sidebar: SideBar = { name: "Why thirdweb?", href: "/connect/why-thirdweb", }, - { - name: "Quickstart", - href: "/connect/quickstart", - icon: , - }, { name: "Playground", href: "https://playground.thirdweb.com/", @@ -188,29 +183,6 @@ export const sidebar: SideBar = { name: "Sponsorship rules", href: `${aAslug}/sponsorship-rules`, }, - // { - // name: "References", - // isCollapsible: true, - // expanded: true, - // links: [ - // { - // name: "React", - // href: `/references/typescript/v5/smartWallet`, - // }, - // { - // name: "React Native", - // href: `/react-native/v0/wallets/smartwallet`, - // }, - // { - // name: "TypeScript", - // href: `/references/wallets/v2/SmartWallet`, - // }, - // { - // name: "Unity", - // href: `/unity/wallets/providers/smart-wallet`, - // }, - // ], - // }, { name: "FAQs", href: `${aAslug}/faq`, @@ -375,40 +347,42 @@ export const sidebar: SideBar = { }, ], }, + ], + }, + { separator: true }, + { + name: "API References", + isCollapsible: false, + links: [ { - name: "API References", - links: [ - { - name: "TypeScript", - href: "/typescript/v5", - icon: , - }, - { - name: "React", - href: "/react/v5", - icon: , - }, - { - name: "React Native", - href: "/react-native/v5", - icon: , - }, - { - name: "Dotnet", - href: "/dotnet", - icon: , - }, - { - name: "Unity", - href: "/unity", - icon: , - }, - { - name: "Unreal Engine", - href: "/unreal-engine", - icon: , - }, - ], + name: "TypeScript", + href: "/typescript/v5", + icon: , + }, + { + name: "React", + href: "/react/v5", + icon: , + }, + { + name: "React Native", + href: "/react-native/v5", + icon: , + }, + { + name: "Dotnet", + href: "/dotnet", + icon: , + }, + { + name: "Unity", + href: "/unity", + icon: , + }, + { + name: "Unreal Engine", + href: "/unreal-engine", + icon: , }, ], }, diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx index 10bd74818dc..88e199f394d 100644 --- a/apps/portal/src/app/page.tsx +++ b/apps/portal/src/app/page.tsx @@ -1,51 +1,25 @@ import { Grid, Heading } from "@/components/Document"; import Image from "next/image"; -// import { Button } from "@/components/ui/button"; import Link from "next/link"; import DocsHero from "./_images/docs-hero.svg"; import { - ConnectOverviewIcon, ContractDeployIcon, - ContractExploreIcon, - ContractModularContractIcon, - ContractPublishIcon, - DotNetIcon, InfraEngineIcon, InfraInsightIcon, NebulaIcon, - PayIcon, - ReactIcon, - TypeScriptIcon, - UnityIcon, - WalletsAuthIcon, - WalletsInAppIcon, - WalletsSmartIcon, + WalletsConnectIcon, } from "@/icons"; -// icons -// import { -// ChevronRight, -// CircleDollarSign, -// Gamepad2, -// LucideIcon, -// MousePointerSquare, -// ShoppingBag, -// User, -// } from "lucide-react"; -import { CodeIcon } from "lucide-react"; -import { UnrealEngineIcon } from "../icons/sdks/UnrealEngineIcon"; -// import { LandingPageCTAs } from "./landing-page/CTAs"; export default function Page() { return (
- {/* */} - - - - - + + + + +
); } @@ -63,7 +37,6 @@ function Hero() { Frontend, backend, and onchain tools to build complete web3 apps — on every EVM chain.

- {/* */} @@ -75,310 +48,61 @@ function Hero() { ); } -// function TutorialsSection() { -// return ( -//
-// - -// -// - -// - -// - -// - -// -// -//
-// ); -// } - -// function TutorialCard(props: { -// title: string; -// links: Array<{ name: string; href: string }>; -// viewAllHref: string; -// icon: LucideIcon; -// }) { -// return ( -//
-//
-// -// -// {props.title} -// -//
- -//
-// {props.links.map((link) => { -// return ( -// -// {link.name} -// -// ); -// })} -//
- -// -// View all -// -// -//
-// ); -// } - -function WalletsSection() { +function FrontendSection() { return ( -
- +
+
- - - - - - - - - - - - - - - - - - - - -
); } function ContractsSection() { return ( -
- -
- - - - - - -
- ); -} - -function EngineSection() { - return ( -
- +
+
- - - -
- ); -} - -function InsightSection() { - return ( -
- -
- - - +
); } -function NebulaSection() { +function BackendSection() { return ( -
- +
+
- - - + +
+ +
+
); } @@ -417,22 +141,3 @@ function ArticleCardIndex(props: { ); } - -/** - * This component is only for the index page - */ -function SDKCardIndex(props: { - title: string; - href: string; - icon?: React.FC<{ className?: string }>; -}) { - return ( - - {props.icon && } -

{props.title}

- - ); -} diff --git a/apps/portal/src/components/Document/Cards/ConnectCard.tsx b/apps/portal/src/components/Document/Cards/ConnectCard.tsx index 2f6ca4a94c5..967e782fd7f 100644 --- a/apps/portal/src/components/Document/Cards/ConnectCard.tsx +++ b/apps/portal/src/components/Document/Cards/ConnectCard.tsx @@ -5,9 +5,14 @@ export function ConnectCard(props: { title: string; href: string; iconUrl: string; + isExternal?: boolean; }) { return ( - +
diff --git a/apps/portal/src/components/Document/index.ts b/apps/portal/src/components/Document/index.ts index be36d17a854..efacfd832d0 100644 --- a/apps/portal/src/components/Document/index.ts +++ b/apps/portal/src/components/Document/index.ts @@ -24,6 +24,6 @@ export { ExpandableGrid } from "./ExpandableGrid"; export { Stack } from "./Stack"; export { createMetadata } from "./metadata"; export { ConnectCard } from "./Cards/ConnectCard"; -export { FeatureCard } from "./FeatureCard"; export { AAChainList } from "./AAChainList"; export { AuthList } from "./AuthList"; +export { FeatureCard } from "./FeatureCard";