slight home page changes

thirdweb-dev · Jul 29, 2024 · fa0fd76 · fa0fd76
1 parent 590fd99
commit fa0fd76
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 55 deletions.
diff --git a/src/app/Header.tsx b/src/app/Header.tsx
@@ -21,14 +21,14 @@ import Image from "next/image";
 import { CustomAccordion } from "../components/others/CustomAccordion";
 
 const links = [
-	{
-		name: "Contracts",
-		href: "/contracts",
-	},
 	{
 		name: "Engine",
 		href: "/engine",
 	},
+	{
+		name: "Contracts",
+		href: "/contracts",
+	},
 ];
 
 const toolLinks = [

diff --git a/src/app/connect/blockchain-api/page.mdx b/src/app/connect/blockchain-api/page.mdx
@@ -1,5 +1,5 @@
 import { Stack, ArticleIconCard } from "@doc";
-import { TypeScriptIcon, ReactIcon, UnityIcon, DotNetIcon } from "@/icons";
+import { TypeScriptIcon, ReactIcon, UnityIcon, UnrealIcon, DotNetIcon } from "@/icons";
 
 # Blockchain API
 
@@ -27,6 +27,13 @@ Perfomant, reliable and type safe API to read write to any contract on any EVM c
 	description="React Native components and hooks"
 />
 
+<ArticleIconCard
+	title=".NET"
+	icon={DotNetIcon}
+	href="/dotnet"
+	description="Core C# API for .NET applications"
+/>
+
 <ArticleIconCard
 	title="Unity"
 	icon={UnityIcon}
@@ -35,9 +42,10 @@ Perfomant, reliable and type safe API to read write to any contract on any EVM c
 />
 
 <ArticleIconCard
-	title=".NET"
-	icon={DotNetIcon}
-	href="/dotnet"
-	description="Core C# API for .NET applications"
+	title="Unreal"
+	icon={UnrealIcon}
+	href="/unreal"
+	description="Unral blueprints and C++ API"
 />
+
 </Stack>
diff --git a/src/app/connect/sidebar.tsx b/src/app/connect/sidebar.tsx
@@ -5,15 +5,14 @@ import {
 	WalletsInAppIcon,
 	WalletsSmartIcon,
 	PayIcon,
-	ExternalLinkIcon,
 	EcosystemWalletsIcon,
 	TypeScriptIcon,
 	ReactIcon,
 	DotNetIcon,
 	UnityIcon,
 } from "@/icons";
 import { UnrealIcon } from "../../icons/sdks/UnrealIcon";
-import { ExternalLink, ZapIcon } from "lucide-react";
+import { CodeIcon, ExternalLink, ZapIcon } from "lucide-react";
 
 const connectSlug = "/connect/sign-in";
 const inAppSlug = "/connect/in-app-wallet";
@@ -51,7 +50,44 @@ export const sidebar: SideBar = {
 		},
 		{ separator: true },
 		{
-			name: "Features",
+			name: "Get Started",
+			isCollapsible: false,
+			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",
+					href: "/unreal",
+					icon: <UnrealIcon />,
+				},
+			],
+		},
+		{ separator: true },
+		{
+			name: "Learn",
 			isCollapsible: false,
 			links: [
 				// Connect
@@ -476,42 +512,43 @@ export const sidebar: SideBar = {
 						},
 					],
 				},
-			],
-		},
-		{ separator: true },
-		{
-			name: "Get Started",
-			isCollapsible: false,
-			links: [
-				{
-					name: "TypeScript",
-					href: "/typescript/v5",
-					icon: <TypeScriptIcon />,
-				},
-				{
-					name: "React",
-					href: "/react/v5",
-					icon: <ReactIcon />,
-				},
+				// Blockchain API
 				{
-					name: "React Native",
-					href: "/react-native/v5",
-					icon: <ReactIcon />,
-				},
-				{
-					name: "Dotnet",
-					href: "/dotnet",
-					icon: <DotNetIcon />,
-				},
-				{
-					name: "Unity",
-					href: "/unity",
-					icon: <UnityIcon />,
-				},
-				{
-					name: "Unreal",
-					href: "/unreal",
-					icon: <UnrealIcon />,
+					name: "Blockchain API",
+					icon: <CodeIcon />,
+					href: "/connect/blockchain-api",
+					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",
+							href: "/unreal",
+							icon: <UnrealIcon />,
+						},
+					],
 				},
 			],
 		},

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -34,14 +34,15 @@ import {
 	EcosystemWalletsIcon,
 } from "@/icons";
 import { UnrealIcon } from "../icons/sdks/UnrealIcon";
+import Head from "next/head";
 // import { LandingPageCTAs } from "./landing-page/CTAs";
 
 export default function Page() {
 	return (
 		<main className="container grow pb-20">
 			<Hero />
 			{/* <TutorialsSection /> */}
-			<SDKSection />
+			{/* <SDKSection /> */}
 			<WalletsSection />
 			<EngineSection />
 			<ContractsSection />
@@ -59,8 +60,8 @@ function Hero() {
 						thirdweb Documentation
 					</h1>
 					<p className="mb-8 max-w-md text-lg font-medium leading-relaxed text-f-300 md:text-xl">
-						Everything you need to connect your apps and games to decentralized
-						networks.
+						Frontend, backend, and onchain tools to build complete web3 apps —
+						on every EVM chain.
 					</p>
 					{/* <LandingPageCTAs /> */}
 				</div>
@@ -224,6 +225,25 @@ function WalletsSection() {
 	return (
 		<section className="my-12">
 			<SectionTitle id="connect" title="Connect" />
+			<div className="mb-6 border-b" />
+			<SectionTitle id="connect-quickstart" title="Get Started" level={5} />
+			<Grid>
+				<SDKCardIndex
+					href="/typescript/v5"
+					title="TypeScript"
+					icon={TypeScriptIcon}
+				/>
+				<SDKCardIndex href="/react/v5" title="React" icon={ReactIcon} />
+				<SDKCardIndex
+					href="/react-native/v5"
+					title="React Native"
+					icon={ReactIcon}
+				/>
+				<SDKCardIndex href="/dotnet" title=".NET" icon={DotNetIcon} />
+				<SDKCardIndex href="/unity" title="Unity" icon={UnityIcon} />
+				<SDKCardIndex href="/unreal" title="Unreal" icon={UnrealIcon} />
+			</Grid>
+			<SectionTitle id="connect-learn" title="Learn" level={5} />
 
 			<Grid>
 				<ArticleCardIndex
@@ -277,7 +297,7 @@ function ContractsSection() {
 	return (
 		<section className="my-12">
 			<SectionTitle id="contracts" title="Contracts" />
-
+			<div className="mb-6 border-b" />
 			<Grid>
 				<ArticleCardIndex
 					title="Deploy"
@@ -318,7 +338,7 @@ function EngineSection() {
 	return (
 		<section className="my-12">
 			<SectionTitle id="engine" title="Engine" />
-
+			<div className="mb-6 border-b" />
 			<Grid>
 				<ArticleCardIndex
 					href="/engine"
@@ -334,7 +354,7 @@ function EngineSection() {
 function SDKSection() {
 	return (
 		<section className="my-12">
-			<SectionTitle id="sdk" title="Get Started" />
+			<SectionTitle id="sdk" title="Connect" />
 
 			<Grid>
 				<SDKCardIndex
@@ -356,9 +376,13 @@ function SDKSection() {
 	);
 }
 
-function SectionTitle(props: { title: string; id: string }) {
+function SectionTitle(props: {
+	title: string;
+	id: string;
+	level?: number;
+}) {
 	return (
-		<Heading id={props.id} level={2} anchorClassName="mb-4 mt-0">
+		<Heading id={props.id} level={props.level || 2} anchorClassName="mb-4 mt-0">
 			{props.title}
 		</Heading>
 	);

diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -6,6 +6,7 @@ export { SolidityIcon } from "./sdks/SolidityIcon";
 export { TypeScriptIcon } from "./sdks/TypeScriptIcon";
 export { UnityIcon } from "./sdks/UnityIcon";
 export { DotNetIcon } from "./sdks/DotNetIcon";
+export { UnrealIcon } from "./sdks/UnrealIcon";
 // contracts
 export { ContractBuildIcon } from "./products/contracts/ContractBuildIcon";
 export { ContractDeployIcon } from "./products/contracts/ContractDeployIcon";