[Portal] Cosmetic Changes (#6218)

CORE-0000

---

## PR-Codex overview
This PR focuses on updating content and structure across various pages in the `apps/portal` application, including the addition of new features, improved descriptions, and adjustments to the sidebar navigation.

### Detailed summary
- Deleted `supported-chains.png` and `context-filters.png`.
- Added new content for `faqs`, `troubleshoot`, and `Nebula` guides.
- Updated the sidebar with new links and icons.
- Changed import paths for images.
- Enhanced descriptions in `Deploy`, `Contracts`, and `Insight` pages.
- Added a new section for "Supported Chains" in `Contracts` and `Insight` pages.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the documentation and content for the `thirdweb` platform, particularly for the `Insight` and `Nebula` sections, while also restructuring some sidebar links and enhancing the user interface with new images.

### Detailed summary
- Deleted `supported-chains` image and `page.mdx` files.
- Added new content for `Insight FAQs` and `Troubleshoot Guide`.
- Updated `Nebula` description and added a support link.
- Changed sidebar items for `Insight` and `Contracts`.
- Introduced new features and layout in `Insight` and `Contracts` pages.
- Added support for displaying `Supported Chains` images in relevant sections.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updates to the `insight` and `nebula` sections of the application, including the addition of new content, restructuring of sidebar navigation, and changes to image imports. It also enhances the user interface with improved documentation and guidance.

### Detailed summary
- Deleted `apps/portal/src/app/insight/supported-chains/page.mdx`.
- Added new content for `Insight FAQs`, `Insight Troubleshoot Guide`, and `Nebula Troubleshoot Guide`.
- Updated sidebar navigation in `apps/portal/src/app/insight/sidebar.tsx`.
- Changed the name and href for several sidebar items.
- Reorganized `Supported Chains` references and added a new image import in multiple files.
- Enhanced content descriptions in `apps/portal/src/app/contracts/deploy/overview/page.mdx`.
- Added new features and video tutorials in `apps/portal/src/app/insight/page.mdx`.
- Updated layout and structure of `Contracts` section in `apps/portal/src/app/contracts/page.mdx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

Author: saminacodes

apps/portal/src/app/nebula/assets/supported-chains.png renamed to apps/portal/src/app/_images/supported-chains.png

@@ -10,6 +10,7 @@ import {
 	SDKCard,
 	Callout,
 	ArticleIconCard,
+	DocImage
 } from "@doc";
 import { ExternalLink } from "lucide-react";
 import {
@@ -22,6 +23,7 @@ import {
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
+import SupportedChains from "../_images/supported-chains.png";
 
 export const metadata = createMetadata({
 	title: "thirdweb Connect",
@@ -102,12 +104,13 @@ Get started with Connect in your preferred language.
 
 Connect is supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist).
 
+<DocImage src={SupportedChains} />
+
 ## Starter Kits & demos
 
 View all available starter kits, demos and templates on Github.
 
 <GithubTemplateCard
 	title="View all templates"
 	href="https://github.com/thirdweb-example"
-	tag="Starter"
 />

apps/portal/src/app/connect/page.mdx

@@ -12,7 +12,7 @@ export const metadata = createMetadata({
 
 # Deploy
 
-Deploy is a tool to deploy any contract to any EVM compatible chain through one simple command and an easy-to-use interface. Deploy reduces the complexities of deploying a contract by eliminating steps such as hardcoding private keys, managing RPC URLs, or running scripts to deploy your contracts.
+Deployment tools allow you to deploy any contract to any EVM compatible chain through one simple command and an easy-to-use interface. Deploy reduces the complexities of deploying a contract by eliminating steps such as hardcoding private keys, managing RPC URLs, or running scripts to deploy your contracts.
 
 Simply run the following command at the root of your contract directory:
 
@@ -31,24 +31,14 @@ npx thirdweb deploy
 	description="Contracts are automatically verified on Sourcify"
 	iconUrl="/icons/feature-cards/verified.svg"
 />
-<FeatureCard
-	title="Deploy to any EVM"
-	description="Deploy to over 2,000+ available EVM chains"
-	iconUrl="/icons/feature-cards/evm.svg"
-/>
 <FeatureCard
 	title="Increased security"
 	description="Avoid exporting private keys with client-side deployment"
 		iconUrl="/icons/feature-cards/security.svg"
 />
-<FeatureCard
-	title="Streamlined deployment"
-	description="Avoid writing scripts, setting up RPCs, copying ABIs, etc."
-	iconUrl="/icons/feature-cards/streamlined-deployment.svg"
-/>
 <FeatureCard
 	title="Support for frameworks"
-	description="Works with contracts built with Hardhat and Foundry"
+	description="Works with any contract built with Hardhat and Foundry"
 	iconUrl="/icons/feature-cards/frameworks.svg"
 />
 <FeatureCard
@@ -58,7 +48,7 @@ npx thirdweb deploy
 />
 <FeatureCard
 	title="Dashboard"
-	description="Unlock a management dashboard"
+	description="Unlock a management dashboard to interact with contracts and view analytics"
 	iconUrl="/icons/feature-cards/dashboard.svg"
 />
 <FeatureCard

apps/portal/src/app/contracts/deploy/overview/page.mdx

@@ -1,4 +1,6 @@
-import { GithubTemplateCard, ExpandableGrid, createMetadata, OpenSourceCard } from "@doc";
+import { GithubTemplateCard, ExpandableGrid, createMetadata, OpenSourceCard, DocImage, ArticleIconCard, Grid } from "@doc";
+import SupportedChains from "../_images/supported-chains.png";
+import { ExternalLink } from "lucide-react";
 
 export const metadata = createMetadata({
 	title: "thirdweb Contracts",
@@ -8,13 +10,31 @@ export const metadata = createMetadata({
 
 # What are Contracts?
 
-Contracts is an end-to-end development suite which provides tools to develop, deploy, and manage smart contracts
+Contracts is an end-to-end development suite which provides tools to develop, deploy, and manage smart contracts.
 
-### Features
+<Grid>
 
-- [Explore (Contract Library)](/contracts/explore/overview): Audited and expansive library of contracts deployable with one-click
-- [Modular Contracts](/contracts/modular-contracts/overview): Framework to build highly customizable and secure smart contracts
-- [Deployment Tool](/contracts/deploy/overview): Client-side deploy tool to securely deploy any contract to any EVM compatible chain
+<ArticleIconCard
+	title="Deployment Tool"
+	icon={ExternalLink}
+	href="/contracts/deploy/overview"
+	description="Securely deploy any smart contract."
+/>
+<ArticleIconCard
+	title="Explore"
+	icon={ExternalLink}
+	href="/contracts/explore/overview"
+	description="Audited and expansive library of contracts."
+/>
+
+<ArticleIconCard
+	title="Modular Contracts"
+	icon={ExternalLink}
+	href="/contracts/explore/overview"
+	description="Build customizable smart contracts."
+/>
+
+</Grid>
 
 <OpenSourceCard title="Contracts" href="https://github.com/thirdweb-dev/contracts" />
 
@@ -91,3 +111,9 @@ Contracts is an end-to-end development suite which provides tools to develop, de
 />
 
 </ExpandableGrid>
+
+## Supported Chains
+Contracts is supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=contracts).
+
+<DocImage src={SupportedChains} />
+

apps/portal/src/app/contracts/page.mdx

@@ -1,10 +1,5 @@
 import type { SideBar } from "@/components/Layouts/DocLayout";
-import {
-  ContractDeployIcon,
-  ContractExploreIcon,
-  ContractModularContractIcon,
-  ContractPublishIcon,
-} from "@/icons";
+import { ContractModularContractIcon } from "@/icons";
 
 const prebuiltSlug = "/contracts/explore/pre-built-contracts";
 const prebuiltModular = "/contracts/explore/pre-built-modular";
@@ -28,10 +23,35 @@ export const sidebar: SideBar = {
       href: "/contracts",
     },
     { separator: true },
+    {
+      name: "Deployment Tools",
+      isCollapsible: false,
+      links: [
+        {
+          name: "Overview",
+          href: `${deploySlug}/overview`,
+        },
+        {
+          name: "Deploy Contract",
+          href: `${deploySlug}/deploy-contract`,
+        },
+        {
+          name: "Publish Contract",
+          href: `${publishSlug}/publish-contract`,
+        },
+        {
+          name: "CLI Reference",
+          href: `${deploySlug}/reference`,
+        },
+        {
+          name: "Publish Options",
+          href: `${publishSlug}/publish-options`,
+        },
+      ],
+    },
     // explore
     {
-      name: "Explore",
-      icon: <ContractExploreIcon />,
+      name: "Explore (Contract Library)",
       isCollapsible: false,
       links: [
         {
@@ -219,8 +239,7 @@ export const sidebar: SideBar = {
     // modular contracts
 
     {
-      name: "Modular Contracts",
-      icon: <ContractModularContractIcon />,
+      name: "Modular Contract Framework",
       isCollapsible: false,
       links: [
         {
@@ -774,52 +793,6 @@ export const sidebar: SideBar = {
       ],
     },
     { separator: true },
-    // deploy
-    {
-      name: "Deploy",
-      icon: <ContractDeployIcon />,
-      isCollapsible: false,
-      links: [
-        {
-          name: "Overview",
-          href: `${deploySlug}/overview`,
-        },
-        {
-          name: "Deploy Contract",
-          href: `${deploySlug}/deploy-contract`,
-        },
-        {
-          name: "CLI Reference",
-          href: `${deploySlug}/reference`,
-        },
-      ],
-    },
-    { separator: true },
-    // publish
-    {
-      name: "Publish",
-      icon: <ContractPublishIcon />,
-      isCollapsible: false,
-      links: [
-        {
-          name: "Overview",
-          href: `${publishSlug}/overview`,
-        },
-        {
-          name: "Publish Contract",
-          href: `${publishSlug}/publish-contract`,
-        },
-        {
-          name: "Publish Options",
-          href: `${publishSlug}/publish-options`,
-        },
-        {
-          name: "CLI Reference",
-          href: `${publishSlug}/reference`,
-        },
-      ],
-    },
-    { separator: true },
     // resources
     {
       name: "Resources",

apps/portal/src/app/contracts/sidebar.tsx

@@ -0,0 +1,3 @@
+# Insight FAQs
+
+More information coming soon.

apps/portal/src/app/insight/faqs/page.mdx

@@ -1,5 +1,8 @@
-import { OpenSourceCard } from "@doc";
+import { OpenSourceCard, DocImage, Grid, ArticleCard, FeatureCard } from "@doc";
 import { createMetadata } from "@/components/Document";
+import SupportedChains from "../_images/supported-chains.png";
+import { Wallet, File, MessageCircle, Braces, Bot, Blocks, Album, Server, Zap } from "lucide-react";
+
 
 export const metadata = createMetadata({
 	title: "thirdweb Insight",
@@ -12,17 +15,61 @@ export const metadata = createMetadata({
 
 # Insight
 
-Insight is a powerful tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic. Whether you're building a gaming inventory system, tracking DeFi metrics, or analyzing NFT collections, Insight makes it easy to get the data you need with simple API calls.
+Insight is a tool that lets you retrieve blockchain data from any EVM chain, enrich it with metadata, and transform it using custom logic. 
+
+<OpenSourceCard title="Insight" href="https://github.com/thirdweb-dev/insight" />
 
-## Why use Insight?
+## Features
 
-- It gives developers an easily understandable data API to query blockchain data.
-- No need to index blockchains yourself or manage infrastructure and RPC costs.
-- Transform and enrich data with custom Blueprints.
-- Insight is open source.
+<div
+	className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2 "
+>
+	<FeatureCard
+		title="Easy-to-Use API"
+		description="Easily understandable data API to query blockchain data."
+		iconUrl={<Braces />}
+	/>
 
-<OpenSourceCard title="Insight" href="https://github.com/thirdweb-dev/insight" />
+    <FeatureCard
+    	title="Managed Infrastructure"
+    	description="No need to index blockchains yourself or manage infrastructure and RPC costs."
+		iconUrl={<Server />}
+    />
+
+	<FeatureCard
+    	title="Custom Blueprints"
+    	description="Transform and enrich data easily to suit your needs."
+		iconUrl={<Album/>}
+    />
+
+    	<FeatureCard
+    	title="Lightning-Fast Queries"
+    	description="Access any transaction, event or token API data"
+		iconUrl={<Zap/>}
+    />
+
+
+</div>
+
+## Video Tutorials
+
+<Grid>
+
+<ArticleCard
+	title="Blockchain Explorer"
+	description="Create your own custom schemas and data to get specific data."
+	href="https://www.youtube.com/watch?v=U2aW7YIUJVw"
+  />
+
+  <ArticleCard
+	title="Telegram Bot"
+	description="Build an on-chain Telegram bot that fetches live blockchain data"
+	href="https://m.youtube.com/watch?v=HvqewXLVRig"
+  />
+
+</Grid>
 
-## Get in touch
+## Supported Chains
+Insight is supported on select EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=insight).
 
-For dedicated support and feature requests, [contact Sales](https://thirdweb.com/contact-us).
+<DocImage src={SupportedChains} />

apps/portal/src/app/insight/page.mdx

@@ -1,4 +1,14 @@
 import type { SideBar } from "@/components/Layouts/DocLayout";
+import {
+  Album,
+  Box,
+  Braces,
+  Brain,
+  MessageCircleQuestionIcon,
+  Rocket,
+  StickyNote,
+  Wrench,
+} from "lucide-react";
 
 const insightSlug = "/insight";
 
@@ -8,26 +18,27 @@ export const sidebar: SideBar = {
     {
       name: "Overview",
       href: "/insight",
+      icon: <Box />,
     },
     {
-      name: "Get Started",
-      href: `${insightSlug}/get-started`,
+      name: "Use Cases",
+      href: `${insightSlug}/use-cases`,
+      icon: <StickyNote />,
     },
     {
-      name: "Supported Chains",
-      href: `${insightSlug}/supported-chains`,
+      name: "Get Started",
+      href: `${insightSlug}/get-started`,
+      icon: <Rocket />,
     },
     {
       name: "Blueprints",
       href: `${insightSlug}/blueprints`,
-    },
-    {
-      name: "Use cases",
-      href: `${insightSlug}/use-cases`,
+      icon: <Album />,
     },
     {
       name: "Agents & LLMs",
       href: `${insightSlug}/agents-and-llms`,
+      icon: <Brain />,
       links: [
         {
           name: "llms.txt",
@@ -38,6 +49,17 @@ export const sidebar: SideBar = {
     {
       name: "API Reference",
       href: "https://insight-api.thirdweb.com/reference",
+      icon: <Braces />,
+    },
+    {
+      name: "Troubleshoot",
+      href: `${insightSlug}/troubleshoot`,
+      icon: <Wrench />,
+    },
+    {
+      name: "FAQs",
+      href: `${insightSlug}/faqs`,
+      icon: <MessageCircleQuestionIcon />,
     },
   ],
 };