feat: Reorganize portal landing page sections

thirdweb-dev · Dec 18, 2024 · f6d5d10 · f6d5d10
1 parent ecb4571
commit f6d5d10
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 467 deletions.
diff --git 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}
 	/>
 	<ConnectCard
-		title="Quickstart"
-		href="https://portal.thirdweb.com/react/v5/getting-started"
+		title="Templates"
+		href="https://thirdweb.com/templates"
 		iconUrl="/icons/connect/intros/quickstart.svg"
 	/>
-	{/* <ConnectCard
-		title="Why Connect?"
-		href=""
-		iconUrl="/icons/connect/intros/why-connect.svg"
-	/>
-	<ConnectCard
-		title="Video Tutorial"
-		href=""
-		iconUrl="/icons/connect/intros/video-tutorial.svg"
-	/> */}
 </div>
-### With Connect, you can:
+
+### Quick starts
+
+<Grid>
+<SDKCard
+		title="TypeScript"
+		href="/typescript/v5/getting-started"
+		icon={TypeScriptIcon}
+	/>
+	<SDKCard
+		title="React"
+		href="/react/v5/getting-started"
+		icon={ReactIcon}
+	/>
+	<SDKCard
+		title="React Native"
+		href="/react-native/v5/getting-started"
+		icon={ReactIcon}
+	/>
+	<SDKCard
+		title="DotNet"
+		href="/dotnet/getting-started"
+		icon={DotNetIcon}
+	/>
+	<SDKCard
+		title="Unity"
+		href="/unity/v5/getting-started"
+		icon={UnityIcon}
+	/>
+	<SDKCard
+		title="Unreal Engine"
+		href="/unreal-engine/getting-started"
+		icon={UnrealEngineIcon}
+	/>
+</Grid>
+
+### 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
 
-<ExpandableGrid>
+View all available starter kits, demos and templates on Github.
 
 <GithubTemplateCard
-	title="Next Starter"
-	href="https://github.com/thirdweb-example/next-starter"
-	tag="Starter"
-/>
-<GithubTemplateCard
-	title="Vite Starter"
-	href="https://github.com/thirdweb-example/vite-starter"
+	title="View all templates"
+	href="https://github.com/thirdweb-example"
 	tag="Starter"
 />
-<GithubTemplateCard
-	title="Node Starter"
-	href="https://github.com/thirdweb-example/node-starter"
-	tag="Starter"
-/>
-<GithubTemplateCard
-	title="Expo Starter"
-	href="https://github.com/thirdweb-example/expo-starter"
-	tag="Starter"
-/>
-
-<GithubTemplateCard
-	title="NFT Marketplace"
-	href="https://github.com/thirdweb-example/marketplace-v3"
-	tag="Builds"
-/>
-
-<GithubTemplateCard
-	title="Auth - NextJS"
-	href="https://github.com/thirdweb-example/thirdweb-auth-next"
-	tag="Example"
-/>
-
-<GithubTemplateCard
-	title="Auth - Express"
-	href="https://github.com/thirdweb-example/thirdweb-auth-express"
-	tag="Example"
-/>
-
-<GithubTemplateCard
-	title="Account Abstraction"
-	href="https://github.com/thirdweb-example/account-abstraction"
-	tag="Example"
-/>
-
-<GithubTemplateCard
-	title="Sign in with Farcaster"
-	href="https://github.com/thirdweb-example/thirdweb-siwf"
-	tag="Example"
-/>
 
-</ExpandableGrid>
diff --git 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: <ZapIcon />,
-    },
     {
       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: <TypeScriptIcon />,
-            },
-            {
-              name: "React",
-              href: "/react/v5",
-              icon: <ReactIcon />,
-            },
-            {
-              name: "React Native",
-              href: "/react-native/v5",
-              icon: <ReactIcon />,
-            },
-            {
-              name: "Dotnet",
-              href: "/dotnet",
-              icon: <DotNetIcon />,
-            },
-            {
-              name: "Unity",
-              href: "/unity",
-              icon: <UnityIcon />,
-            },
-            {
-              name: "Unreal Engine",
-              href: "/unreal-engine",
-              icon: <UnrealEngineIcon />,
-            },
-          ],
+          name: "TypeScript",
+          href: "/typescript/v5",
+          icon: <TypeScriptIcon />,
+        },
+        {
+          name: "React",
+          href: "/react/v5",
+          icon: <ReactIcon />,
+        },
+        {
+          name: "React Native",
+          href: "/react-native/v5",
+          icon: <ReactIcon />,
+        },
+        {
+          name: "Dotnet",
+          href: "/dotnet",
+          icon: <DotNetIcon />,
+        },
+        {
+          name: "Unity",
+          href: "/unity",
+          icon: <UnityIcon />,
+        },
+        {
+          name: "Unreal Engine",
+          href: "/unreal-engine",
+          icon: <UnrealEngineIcon />,
         },
       ],
     },