From 6001f2487ee746f69366718196f7a0d53831bcb0 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 3 Apr 2025 01:25:41 +0000
Subject: [PATCH] [TOOL-3909] Dashboard: Add footer links to project pages &
 header style adjustments (#6627)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the layout and structure of various components in the application, introducing new footer sections, and improving the user interface for better organization and navigation.

### Detailed summary
- Removed the `SupportedPlatformLink.tsx` file.
- Updated `href` in `react-native/v5/page.mdx` from `/installation` to `/getting-started`.
- Enhanced layout in multiple components with added `container` classes for better styling.
- Introduced new `FooterCard` component in various pages for documentation and tutorial links.
- Replaced `AAFooterSection` with `AAFooter` in `AccountAbstractionPage.tsx`.
- Updated `InAppWalletFooterSection` to `InAppWalletsFooter` with a new structure.
- Modified headers and added spacing in several components for improved visual hierarchy.
- Introduced new `InsightFooter` component with relevant links.
- Adjusted various components to use consistent `container` class for layout consistency.

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

<!-- end pr-codex -->
---
 .../src/@/components/blocks/SidebarLayout.tsx |  10 +-
 .../src/@/components/blocks/app-footer.tsx    |  10 +-
 apps/dashboard/src/@/components/ui/tabs.tsx   |   8 +-
 .../contracts/DeployedContractsPageHeader.tsx |   8 +-
 .../_components/DeployedContractsPage.tsx     |   3 +-
 .../components/ProjectSidebarLayout.tsx       |   2 -
 .../components/footer/FooterLinksSection.tsx  |  89 +++++++
 .../account-abstraction/AAFooterSection.tsx   | 176 +++++--------
 .../AccountAbstractionPage.tsx                | 106 ++++----
 .../in-app-wallets/_components/footer.tsx     | 246 ++++++------------
 .../in-app-wallets/_components/header.tsx     |  10 +-
 .../connect/in-app-wallets/layout.tsx         |  69 +++--
 .../[project_slug]/connect/page.tsx           |  14 -
 .../connect/universal-bridge/layout.tsx       | 112 ++++++--
 .../[project_slug]/contracts/page.tsx         |  72 ++++-
 .../[project_slug]/insight/page.tsx           |  82 +++++-
 .../analytics/nebula-analytics-page.tsx       |   4 +-
 .../nebula-waitlist-page-ui.client.tsx        |   6 +-
 .../[project_slug]/nebula/layout.tsx          |  72 +++++
 .../[project_slug]/nebula/page.tsx            |  19 +-
 .../team/[team_slug]/[project_slug]/page.tsx  |  25 +-
 .../wallets/SupportedPlatformLink.tsx         |  35 ---
 .../tools/python-sdk/installation/page.mdx    |   2 +-
 apps/portal/src/app/react-native/v5/page.mdx  |   2 +-
 24 files changed, 704 insertions(+), 478 deletions(-)
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx
 delete mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
 create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/layout.tsx
 delete mode 100644 apps/dashboard/src/components/wallets/SupportedPlatformLink.tsx

diff --git a/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx b/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx
index 6294dcf04be..cc5bba9f020 100644
--- a/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx
+++ b/apps/dashboard/src/@/components/blocks/SidebarLayout.tsx
@@ -17,6 +17,7 @@ import { NavLink } from "../ui/NavLink";
 import { Separator } from "../ui/separator";
 import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
 import { CustomSidebar, type SidebarLink } from "./Sidebar";
+import { AppFooter } from "./app-footer";
 
 export function SidebarLayout(props: {
   sidebarLinks: SidebarLink[];
@@ -54,7 +55,6 @@ export function FullWidthSidebarLayout(props: {
   footerSidebarLinks?: SidebarLink[];
   children: React.ReactNode;
   className?: string;
-  footer?: React.ReactNode;
 }) {
   const { contentSidebarLinks, children, footerSidebarLinks } = props;
   return (
@@ -65,7 +65,7 @@ export function FullWidthSidebarLayout(props: {
       )}
     >
       {/* left - sidebar */}
-      <Sidebar collapsible="icon" side="left">
+      <Sidebar collapsible="icon" side="left" className="pt-2">
         <SidebarContent>
           <SidebarGroup>
             <SidebarGroupContent>
@@ -95,10 +95,10 @@ export function FullWidthSidebarLayout(props: {
           links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
         />
 
-        <main className="container z-0 flex min-w-0 max-w-[1280px] grow flex-col pb-20 max-sm:w-full lg:pt-6">
+        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
           {children}
         </main>
-        {props.footer}
+        <AppFooter containerClassName="max-w-7xl" />
       </div>
     </div>
   );
@@ -156,7 +156,7 @@ function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
   const activeLink = useActiveSidebarLink(props.links);
 
   return (
-    <div className="mb-4 flex items-center gap-3 border-b px-4 py-4 lg:hidden">
+    <div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
       <SidebarTrigger className="size-4" />
       <Separator orientation="vertical" className="h-4" />
       {activeLink && <span className="text-sm">{activeLink.label}</span>}
diff --git a/apps/dashboard/src/@/components/blocks/app-footer.tsx b/apps/dashboard/src/@/components/blocks/app-footer.tsx
index 39cf386ede9..5f104b6d774 100644
--- a/apps/dashboard/src/@/components/blocks/app-footer.tsx
+++ b/apps/dashboard/src/@/components/blocks/app-footer.tsx
@@ -12,17 +12,23 @@ import Link from "next/link";
 
 type AppFooterProps = {
   className?: string;
+  containerClassName?: string;
 };
 
 export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-card py-6 md:py-8",
+        "w-full border-border border-t py-6 md:py-8",
         props.className,
       )}
     >
-      <div className="container flex flex-col gap-4 md:gap-6">
+      <div
+        className={cn(
+          "container flex flex-col gap-4 md:gap-6",
+          props.containerClassName,
+        )}
+      >
         {/* top row */}
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-row items-center gap-3">
diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index ffdd1e036ee..7bf4ab362b3 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -20,6 +20,7 @@ export function TabLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
@@ -30,7 +31,7 @@ export function TabLinks(props: {
       <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
 
       <ScrollShadow
-        scrollableClassName="pb-[8px] relative"
+        scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
         shadowColor={props.shadowColor}
       >
         <div
@@ -159,9 +160,11 @@ function useUnderline<El extends HTMLElement>() {
         const containerRect = containerRef.current.getBoundingClientRect();
         const lineEl = lineRef.current;
         const rect = activeTabEl.getBoundingClientRect();
+        const containerPaddingLeft =
+          containerRect.left - containerRef.current.offsetLeft;
         lineEl.style.width = `${rect.width}px`;
         lineEl.style.transform = `translateX(${
-          rect.left - containerRect.left
+          rect.left - containerPaddingLeft
         }px)`;
         setTimeout(() => {
           lineEl.style.transition = "transform 0.3s, width 0.3s";
@@ -205,6 +208,7 @@ export function TabPathLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const pathname = usePathname() || "";
   const { links, ...restProps } = props;
diff --git a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
index 5f39132cb32..51ee799b99a 100644
--- a/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
+++ b/apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx
@@ -13,7 +13,7 @@ export function DeployedContractsPageHeader(props: {
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   return (
-    <div>
+    <div className="border-b">
       <ImportModal
         isOpen={importModalOpen}
         onClose={() => {
@@ -23,9 +23,11 @@ export function DeployedContractsPageHeader(props: {
         projectId={props.projectId}
       />
 
-      <div className="flex flex-col gap-3 pt-2 pb-8 lg:flex-row lg:items-center lg:justify-between">
+      <div className="container flex max-w-7xl flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">
         <div>
-          <h1 className="font-semibold text-3xl tracking-tight">Contracts</h1>
+          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+            Contracts
+          </h1>
         </div>
         <div className="flex gap-3 [&>*]:grow">
           <Button
diff --git a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
index 2f64bd51f62..7d77a87d04b 100644
--- a/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
+++ b/apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx
@@ -17,7 +17,8 @@ export function DeployedContractsPage(props: {
         teamId={props.teamId}
         projectId={props.projectId}
       />
-      <div className="flex grow flex-col">
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col">
         <Suspense fallback={<Loading />}>
           <DeployedContractsPageAsync {...props} />
         </Suspense>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
index d9c7be639ee..42e28684de2 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { FullWidthSidebarLayout } from "@/components/blocks/SidebarLayout";
-import { AppFooter } from "@/components/blocks/app-footer";
 import {
   BookTextIcon,
   BoxIcon,
@@ -29,7 +28,6 @@ export function ProjectSidebarLayout(props: {
 
   return (
     <FullWidthSidebarLayout
-      footer={<AppFooter />}
       contentSidebarLinks={[
         {
           href: layoutPath,
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx
new file mode 100644
index 00000000000..14691da1407
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx
@@ -0,0 +1,89 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { LinkIcon } from "lucide-react";
+
+type FooterSectionProps = {
+  title: string;
+  links: {
+    href: string;
+    label: string;
+  }[];
+};
+
+type FooterCardProps = {
+  left: FooterSectionProps;
+  center: FooterSectionProps;
+  right: FooterSectionProps;
+  trackingCategory: string;
+};
+
+export function FooterLinksSection(props: FooterCardProps) {
+  return (
+    <div className="py-6">
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:gap-0 xl:divide-x xl:divide-border">
+        <div className="xl:pr-6">
+          <FooterSection
+            {...props.left}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+
+        <div className="xl:px-6">
+          <FooterSection
+            {...props.center}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+
+        <div className="xl:pl-6">
+          <FooterSection
+            {...props.right}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FooterSection(
+  props: FooterSectionProps & { trackingCategory: string },
+) {
+  return (
+    <div>
+      <h3 className="mb-2.5 font-medium">{props.title}</h3>
+      <div className="flex flex-col gap-2.5">
+        {props.links.map((link) => (
+          <FooterLink
+            key={link.label}
+            href={link.href}
+            trackingCategory={props.trackingCategory}
+            label={link.label}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FooterLink({
+  href,
+  label,
+  trackingCategory,
+}: {
+  href: string;
+  label: string;
+  trackingCategory: string;
+}) {
+  return (
+    <TrackedLinkTW
+      href={href}
+      category={trackingCategory}
+      label={label.replace(/ /g, "-").toLowerCase()}
+      target="_blank"
+      className="flex items-start gap-2 text-balance text-muted-foreground text-sm hover:text-foreground"
+    >
+      <LinkIcon className="mt-1 size-3 shrink-0 opacity-70" />
+      {label}
+    </TrackedLinkTW>
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
index e598ab027cc..b693307f30b 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AAFooterSection.tsx
@@ -1,108 +1,76 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { FooterLinksSection } from "../../components/footer/FooterLinksSection";
 
-type LinkInfo = { label: string; href: string; trackingLabel: string };
-
-export function AAFooterSection(props: {
-  trackingCategory: string;
-}) {
+export function AAFooter() {
   return (
-    <section className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-      <FooterCard
-        title="Docs"
-        links={docLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Guides"
-        links={guideLinks}
-        trackingCategory={props.trackingCategory}
-      />
-
-      <FooterCard
-        title="Templates"
-        links={templateLinks}
-        trackingCategory={props.trackingCategory}
-      />
-    </section>
+    <FooterLinksSection
+      trackingCategory="account-abstraction"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            href: "https://portal.thirdweb.com/connect/account-abstraction/overview",
+            label: "Overview",
+          },
+          {
+            href: "https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started",
+            label: "Typescript",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/account-abstraction/get-started",
+            label: "React Native",
+          },
+          {
+            href: "https://portal.thirdweb.com/dotnet/wallets/providers/account-abstraction",
+            label: ".NET",
+          },
+          {
+            href: "https://portal.thirdweb.com/unity/v5/wallets/account-abstraction",
+            label: "Unity",
+          },
+          {
+            href: "https://portal.thirdweb.com/unreal-engine/blueprints/smart-wallet",
+            label: "Unreal Engine",
+          },
+        ],
+      }}
+      right={{
+        title: "Tutorials",
+        links: [
+          {
+            label: "Web3 onboarding with in-app wallets and AA",
+            href: "https://www.youtube.com/watch?v=HP8wSH7gnQA",
+          },
+          {
+            label: "Multi-chain experience with account abstraction",
+            href: "https://www.youtube.com/watch?v=2wUtq-drxAk",
+          },
+          {
+            label: "Add AA to a web3 unity game",
+            href: "https://www.youtube.com/watch?v=04G4DLhqwgI",
+          },
+        ],
+      }}
+      center={{
+        title: "Demos",
+        links: [
+          {
+            label: "Connect Smart Accounts",
+            href: "https://playground.thirdweb.com/connect/account-abstraction/connect",
+          },
+          {
+            label: "Sponsor Gas Fees",
+            href: "https://playground.thirdweb.com/connect/account-abstraction/sponsor",
+          },
+          {
+            label: "Native Account Abstraction",
+            href: "https://playground.thirdweb.com/connect/account-abstraction/native-aa",
+          },
+        ],
+      }}
+    />
   );
 }
-
-function FooterCard(props: {
-  title: string;
-  links: LinkInfo[];
-  trackingCategory: string;
-}) {
-  return (
-    <div className="rounded-lg border border-border bg-card p-4">
-      <h3 className="mb-4 border-border border-b pt-1 pb-4 font-semibold text-lg leading-none tracking-tight">
-        {props.title}
-      </h3>
-
-      <div className="flex flex-col gap-2.5">
-        {props.links.map((link) => (
-          <TrackedLinkTW
-            key={link.href}
-            href={link.href}
-            category={props.trackingCategory}
-            label={link.trackingLabel}
-            target="_blank"
-            className="text-muted-foreground text-sm hover:text-foreground"
-          >
-            {link.label}
-          </TrackedLinkTW>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-const docLinks: LinkInfo[] = [
-  {
-    label: "Full Docs",
-    href: "https://portal.thirdweb.com/wallets/smart-wallet",
-    trackingLabel: "full-docs",
-  },
-  {
-    label: "Account Abstraction with React SDK",
-    href: "https://portal.thirdweb.com/wallets/smart-wallet/guides/react",
-    trackingLabel: "smart-wallet-react",
-  },
-  {
-    label: "Account Abstraction with TypeScript SDK",
-    href: "https://portal.thirdweb.com/wallets/smart-wallet/guides/typescript",
-    trackingLabel: "smart-wallet-typescript",
-  },
-];
-
-const guideLinks: LinkInfo[] = [
-  {
-    label: "Deploy a Smart Account (ERC-4337)",
-    href: "https://blog.thirdweb.com/guides/how-to-use-erc4337-smart-wallets/",
-    trackingLabel: "deploy-smart-wallet",
-  },
-  {
-    label:
-      "How to Extend the Base Account Abstraction Contracts Using the Solidity SDK",
-    href: "https://blog.thirdweb.com/guides/custom-smart-wallet-contracts/",
-    trackingLabel: "extend-base-smart-wallet",
-  },
-  {
-    label: "Batch Transactions with Account Abstraction",
-    href: "https://blog.thirdweb.com/guides/how-to-batch-transactions-with-the-thirdweb-sdk/",
-    trackingLabel: "batch-txns",
-  },
-];
-
-const templateLinks: LinkInfo[] = [
-  {
-    label: "Node.js template",
-    trackingLabel: "node-template",
-    href: "https://github.com/thirdweb-example/smart-wallet-script",
-  },
-  {
-    label: "React template",
-    trackingLabel: "react-template",
-    href: "https://github.com/thirdweb-example/smart-wallet-react",
-  },
-];
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx
index 92ff527d7b9..bde20aebb28 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx
@@ -10,7 +10,7 @@ import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { ArrowRightIcon } from "lucide-react";
 import { XIcon } from "lucide-react";
-import { AAFooterSection } from "./AAFooterSection";
+import { AAFooter } from "./AAFooterSection";
 
 const TRACKING_CATEGORY = "smart-wallet";
 
@@ -25,57 +25,71 @@ export function AccountAbstractionLayout(props: {
   const smartWalletsLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/connect/account-abstraction`;
 
   return (
-    <div>
-      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
-        Account Abstraction
-      </h1>
-      <p className="text-muted-foreground text-sm">
-        Integrate ERC-4337 compliant smart accounts for gasless sponsorships and
-        more. <br className="lg:hidden" />
-        <TrackedUnderlineLink
-          target="_blank"
-          label="docs-wallets"
-          category={TRACKING_CATEGORY}
-          href="https://portal.thirdweb.com/wallets/smart-wallet"
-        >
-          Learn more about Account Abstraction
-        </TrackedUnderlineLink>
-      </p>
-
-      <div className="h-6" />
-
-      <div className="flex flex-col gap-6">
-        {props.hasSmartWalletsWithoutBilling && <SmartWalletsBillingAlert />}
-        <GasCreditAlert teamSlug={props.teamSlug} projectId={props.projectId} />
-
-        <div>
-          <TabPathLinks
-            links={[
-              {
-                name: "Analytics",
-                path: `${smartWalletsLayoutSlug}`,
-                exactMatch: true,
-              },
-              {
-                name: "Account Factories",
-                path: `${smartWalletsLayoutSlug}/factories`,
-              },
-              {
-                name: "Sponsorship Rules",
-                path: `${smartWalletsLayoutSlug}/settings`,
-              },
-            ]}
+    <div className="flex grow flex-col">
+      {/* top */}
+      <div className="pt-4 lg:pt-6">
+        {/* header */}
+        <div className="container flex max-w-7xl flex-col gap-4">
+          <div>
+            <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
+              Account Abstraction
+            </h1>
+            <p className="text-muted-foreground text-sm">
+              Integrate ERC-4337 compliant smart accounts for gasless
+              sponsorships and more. <br className="lg:hidden" />
+              <TrackedUnderlineLink
+                target="_blank"
+                label="docs-wallets"
+                category={TRACKING_CATEGORY}
+                href="https://portal.thirdweb.com/wallets/smart-wallet"
+              >
+                Learn more about Account Abstraction
+              </TrackedUnderlineLink>
+            </p>
+          </div>
+          {props.hasSmartWalletsWithoutBilling && <SmartWalletsBillingAlert />}
+          <GasCreditAlert
+            teamSlug={props.teamSlug}
+            projectId={props.projectId}
           />
+        </div>
 
-          <div className="h-6" />
+        <div className="h-4" />
 
-          {props.children}
-        </div>
+        {/* Nav */}
+        <TabPathLinks
+          scrollableClassName="container max-w-7xl"
+          links={[
+            {
+              name: "Analytics",
+              path: `${smartWalletsLayoutSlug}`,
+              exactMatch: true,
+            },
+            {
+              name: "Account Factories",
+              path: `${smartWalletsLayoutSlug}/factories`,
+            },
+            {
+              name: "Sponsorship Rules",
+              path: `${smartWalletsLayoutSlug}/settings`,
+            },
+          ]}
+        />
       </div>
 
-      <div className="h-14" />
+      {/* content */}
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col gap-6">
+        <div>{props.children}</div>
+      </div>
+      <div className="h-20" />
 
-      <AAFooterSection trackingCategory={TRACKING_CATEGORY} />
+      {/* footer */}
+      <div className="border-border border-t">
+        <div className="container max-w-7xl">
+          <AAFooter />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
index 0b3bb4a5d68..e0b7b181efc 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer.tsx
@@ -1,176 +1,80 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { ArrowRightIcon } from "lucide-react";
-import { SupportedPlatformLink } from "../../../../../../../components/wallets/SupportedPlatformLink";
+import { FooterLinksSection } from "../../../components/footer/FooterLinksSection";
 
-export function InAppWalletFooterSection(props: {
-  trackingCategory: string;
-}) {
+export function InAppWalletsFooter() {
   return (
-    <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
-      <ViewDocs trackingCategory={props.trackingCategory} />
-      <Templates trackingCategory={props.trackingCategory} />
-    </div>
-  );
-}
-
-function ViewDocs(props: {
-  trackingCategory: string;
-}) {
-  const TRACKING_CATEGORY = props.trackingCategory;
-  return (
-    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
-      <div className="flex items-center gap-2">
-        <h3 className="font-semibold">View Docs</h3>
-        <ArrowRightIcon className="size-4" />
-      </div>
-
-      <div className="h-4" />
-
-      <div className="grid grid-cols-2 gap-4">
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="React"
-          href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
-        />
-
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="Unity"
-          href="https://portal.thirdweb.com/unity/wallets/providers/embedded-wallet"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="React Native"
-          href="https://portal.thirdweb.com/react/v5/in-app-wallet/get-started"
-        />
-        <SupportedPlatformLink
-          trackingCategory={TRACKING_CATEGORY}
-          platform="TypeScript"
-          href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
-        />
-      </div>
-
-      <div className="h-6" />
-
-      <div className="flex items-center gap-2">
-        <h3 className="font-semibold">Relevant Guides</h3>
-        <ArrowRightIcon className="size-4" />
-      </div>
-
-      <div className="h-4" />
-
-      <div className="flex flex-col gap-3">
-        <GuideLink
-          href="https://blog.thirdweb.com/what-are-embedded-wallets/"
-          label="what-is-an-embedded-wallet"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          What is an in-app wallet?
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/get-started"
-          label="sdks-get-started"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          Get started with In-App Wallets
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/how-to/connect-users"
-          label="how-to-connect-your-users"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          Using In-App Wallets with Connect
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/how-to/build-your-own-ui"
-          label="how-to-build-your-own-ui"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          How to Build Your Own UI
-        </GuideLink>
-
-        <GuideLink
-          href="https://portal.thirdweb.com/connect/in-app-wallet/custom-auth/custom-auth-server"
-          label="how-to-custom-auth-server"
-          trackingCategory={TRACKING_CATEGORY}
-        >
-          Create a custom auth server
-        </GuideLink>
-      </div>
-    </div>
-  );
-}
-
-function GuideLink(props: {
-  label: string;
-  children: React.ReactNode;
-  href: string;
-  trackingCategory: string;
-}) {
-  return (
-    <TrackedLinkTW
-      category={props.trackingCategory}
-      label="guide"
-      trackingProps={{
-        guide: props.label,
+    <FooterLinksSection
+      trackingCategory="in-app-wallets"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            href: "https://portal.thirdweb.com/connect/wallet/overview",
+            label: "Overview",
+          },
+          {
+            href: "https://portal.thirdweb.com/typescript/v5/in-app-wallet",
+            label: "Typescript",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/in-app-wallet/get-started",
+            label: "React",
+          },
+          {
+            href: "https://portal.thirdweb.com/react/v5/in-app-wallet/get-started",
+            label: "React Native",
+          },
+          {
+            href: "https://portal.thirdweb.com/dotnet/wallets/providers/in-app-wallet",
+            label: ".NET",
+          },
+          {
+            href: "https://portal.thirdweb.com/unity/v5/wallets/in-app-wallet",
+            label: "Unity",
+          },
+          {
+            href: "https://portal.thirdweb.com/unreal-engine/blueprints/in-app-wallet",
+            label: "Unreal Engine",
+          },
+        ],
       }}
-      href={props.href}
-      className="!text-muted-foreground hover:!text-foreground text-sm"
-      target="_blank"
-    >
-      {props.children}
-    </TrackedLinkTW>
-  );
-}
-
-function Templates(props: {
-  trackingCategory: string;
-}) {
-  return (
-    <div className="rounded-lg border border-border bg-card p-4 lg:p-6">
-      <div className="flex items-center gap-2">
-        <h3 className="font-semibold">Relevant Templates</h3>
-        <ArrowRightIcon className="size-4" />
-      </div>
-
-      <div className="h-6" />
-
-      <div className="flex flex-col gap-3">
-        <GuideLink
-          href="https://github.com/thirdweb-example/embedded-smart-wallet"
-          label="embedded-smart-wallet"
-          trackingCategory={props.trackingCategory}
-        >
-          In-App Wallet + Account Abstraction Starter Kit
-        </GuideLink>
-
-        <GuideLink
-          href="https://github.com/thirdweb-example/catattacknft"
-          label="embedded-cat-attack"
-          trackingCategory={props.trackingCategory}
-        >
-          Cat Attack [Demo Web Game]
-        </GuideLink>
-
-        <GuideLink
-          href="https://github.com/thirdweb-example/embedded-wallet-custom-ui"
-          label="embedded-wallet-with-custom-ui-react"
-          trackingCategory={props.trackingCategory}
-        >
-          In-App Wallet With Custom UI [React]
-        </GuideLink>
-
-        <GuideLink
-          href="https://github.com/thirdweb-example/embedded-wallet-custom-ui-react-native"
-          label="embedded-wallet-with-custom-ui-react-native"
-          trackingCategory={props.trackingCategory}
-        >
-          In-App Wallet With Custom UI [ReactNative]
-        </GuideLink>
-      </div>
-    </div>
+      center={{
+        title: "Tutorials",
+        links: [
+          {
+            href: "https://www.youtube.com/watch?v=9s3Z-MvPv2I",
+            label: "Build your own custom connect component",
+          },
+          {
+            label: "Learn to create wallets inside a Unity game",
+            href: "https://www.youtube.com/watch?v=oUouNueoVFU",
+          },
+          {
+            href: "https://www.youtube.com/watch?v=xEp-fKba_cI",
+            label: "Pre-generate wallets for users",
+          },
+          {
+            label: "Sign-in with guest mode",
+            href: "https://portal.thirdweb.com/connect/wallet/sign-in-methods/guest",
+          },
+        ],
+      }}
+      right={{
+        title: "Demos",
+        links: [
+          {
+            href: "https://playground.thirdweb.com/connect/in-app-wallet/ecosystem",
+            label: "Ecosystems",
+          },
+          {
+            href: "https://playground.thirdweb.com/connect/in-app-wallet/sponsor",
+            label: "Signless Sponsored Transactions",
+          },
+          {
+            href: "https://playground.thirdweb.com/connect/in-app-wallet",
+            label: "Customized UI",
+          },
+        ],
+      }}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx
index 4630e251eb4..14a1d6e7237 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx
@@ -3,14 +3,14 @@ import { TRACKING_CATEGORY } from "../_constants";
 
 export async function InAppWalletsHeader() {
   return (
-    <div>
-      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
+    <div className="">
+      <h1 className="mb-2 font-semibold text-2xl tracking-tighter lg:text-3xl">
         In-App Wallets
       </h1>
-      <p className="mb-7 max-w-[700px] text-muted-foreground text-sm leading-relaxed">
+      <p className="max-w-2xl text-muted-foreground text-sm leading-relaxed">
         A wallet infrastructure that enables apps to create, manage, and control
-        their users wallets. Email login, social login, and bring-your-own auth
-        supported.{" "}
+        their users wallets. <br /> Email login, social login, and
+        bring-your-own auth supported.{" "}
         <TrackedUnderlineLink
           target="_blank"
           href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
index 4c1cdce9a3b..ea7cb0d9449 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
@@ -1,9 +1,8 @@
 import { getProject } from "@/api/projects";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { redirect } from "next/navigation";
-import { InAppWalletFooterSection } from "./_components/footer";
+import { InAppWalletsFooter } from "./_components/footer";
 import { InAppWalletsHeader } from "./_components/header";
-import { TRACKING_CATEGORY } from "./_constants";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -22,32 +21,48 @@ export default async function Layout(props: {
   const { team_slug, project_slug } = params;
 
   return (
-    <div>
-      <InAppWalletsHeader />
-      <TabPathLinks
-        links={[
-          {
-            name: "Analytics",
-            path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets`,
-            exactMatch: true,
-          },
-          {
-            name: "Users",
-            path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/users`,
-            exactMatch: true,
-          },
-          {
-            name: "Settings",
-            path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/settings`,
-            exactMatch: true,
-          },
-        ]}
-      />
+    <div className="flex grow flex-col">
+      {/* header */}
+      <div className="pt-4 lg:pt-6">
+        <div className="container max-w-7xl">
+          <InAppWalletsHeader />
+        </div>
+        <div className="h-3" />
+        <TabPathLinks
+          scrollableClassName="container max-w-7xl"
+          links={[
+            {
+              name: "Analytics",
+              path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets`,
+              exactMatch: true,
+            },
+            {
+              name: "Users",
+              path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/users`,
+              exactMatch: true,
+            },
+            {
+              name: "Settings",
+              path: `/team/${team_slug}/${project_slug}/connect/in-app-wallets/settings`,
+              exactMatch: true,
+            },
+          ]}
+        />
+      </div>
 
-      <div className="h-8" />
-      {props.children}
-      <div className="h-8" />
-      <InAppWalletFooterSection trackingCategory={TRACKING_CATEGORY} />
+      {/* content */}
+      <div className="container flex max-w-7xl grow flex-col">
+        <div className="h-6" />
+        {props.children}
+        <div className="h-20" />
+      </div>
+
+      {/* footer */}
+      <div className="border-t">
+        <div className="container max-w-7xl">
+          <InAppWalletsFooter />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
deleted file mode 100644
index 1b134327574..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default async function Page(props: {
-  params: Promise<{
-    team_slug: string;
-    project_slug: string;
-  }>;
-}) {
-  const params = await props.params;
-
-  redirect(
-    `/team/${params.team_slug}/${params.project_slug}/connect/in-app-wallets`,
-  );
-}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx
index abf03ae42af..217d3d474e5 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx
@@ -1,7 +1,8 @@
 import { getProject } from "@/api/projects";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { redirect } from "next/navigation";
-import { UnderlineLink } from "../../../../../../@/components/ui/UnderlineLink";
+import { FooterLinksSection } from "../../components/footer/FooterLinksSection";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -20,13 +21,13 @@ export default async function Layout(props: {
   const payLayoutPath = `/team/${params.team_slug}/${params.project_slug}/connect/universal-bridge`;
 
   return (
-    <div className="flex w-full flex-col gap-6">
-      <div className="flex flex-col items-start justify-between gap-6 lg:flex-row">
-        <div className="max-w-[700px]">
+    <div className="flex grow flex-col">
+      <div className="pt-4 lg:pt-6">
+        <div className="container max-w-7xl">
           <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
             Universal Bridge
           </h1>
-          <p className="text-muted-foreground text-sm leading-relaxed">
+          <p className="max-w-3xl text-muted-foreground text-sm leading-relaxed">
             Universal Bridge allows your users to bridge, swap, and purchase
             cryptocurrencies and execute transactions with any fiat options or
             tokens via cross-chain routing.{" "}
@@ -38,28 +39,99 @@ export default async function Layout(props: {
             </UnderlineLink>
           </p>
         </div>
+
+        <div className="h-4" />
+        <TabPathLinks
+          scrollableClassName="container max-w-7xl"
+          className="w-full"
+          links={[
+            {
+              name: "Analytics",
+              path: payLayoutPath,
+              exactMatch: true,
+            },
+            {
+              name: "Webhooks",
+              path: `${payLayoutPath}/webhooks`,
+            },
+            {
+              name: "Settings",
+              path: `${payLayoutPath}/settings`,
+            },
+          ]}
+        />
+      </div>
+
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col">
+        {props.children}
+      </div>
+
+      <div className="h-20" />
+      <div className="border-border border-t">
+        <div className="container max-w-7xl">
+          <UBFooter />
+        </div>
       </div>
+    </div>
+  );
+}
 
-      <TabPathLinks
-        className="w-full"
-        links={[
+function UBFooter() {
+  return (
+    <FooterLinksSection
+      trackingCategory="universal-bridge"
+      left={{
+        title: "Documentation",
+        links: [
           {
-            name: "Analytics",
-            path: payLayoutPath,
-            exactMatch: true,
+            href: "https://portal.thirdweb.com/connect/pay/overview",
+            label: "Overview",
           },
           {
-            name: "Webhooks",
-            path: `${payLayoutPath}/webhooks`,
+            href: "https://portal.thirdweb.com/typescript/v5/convertCryptoToFiat",
+            label: "TypeScript",
           },
           {
-            name: "Settings",
-            path: `${payLayoutPath}/settings`,
+            href: "https://portal.thirdweb.com/react/v5/pay/fund-wallets",
+            label: "React",
           },
-        ]}
-      />
-
-      {props.children}
-    </div>
+          {
+            href: "https://portal.thirdweb.com/dotnet/universal-bridge/quickstart",
+            label: ".NET",
+          },
+        ],
+      }}
+      right={{
+        title: "Tutorials",
+        links: [
+          {
+            label: "Implement cross-chain payments in any app",
+            href: "https://www.youtube.com/watch?v=aBu175-VsNY",
+          },
+        ],
+      }}
+      center={{
+        title: "Demos",
+        links: [
+          {
+            label: "UI Component",
+            href: "https://playground.thirdweb.com/connect/pay",
+          },
+          {
+            label: "Buy Crypto",
+            href: "https://playground.thirdweb.com/connect/pay/fund-wallet",
+          },
+          {
+            label: "Commerce",
+            href: "https://playground.thirdweb.com/connect/pay/commerce",
+          },
+          {
+            label: "Transactions",
+            href: "https://playground.thirdweb.com/connect/pay/transactions",
+          },
+        ],
+      }}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
index b6f1c60c24c..aa287ba5597 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx
@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { DeployedContractsPage } from "../../../../account/contracts/_components/DeployedContractsPage";
 import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../login/loginRedirect";
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -29,10 +30,71 @@ export default async function Page(props: {
   }
 
   return (
-    <DeployedContractsPage
-      teamId={team.id}
-      projectId={project.id}
-      authToken={authToken}
-    />
+    <div className="flex grow flex-col">
+      <DeployedContractsPage
+        teamId={team.id}
+        projectId={project.id}
+        authToken={authToken}
+      />
+      <div className="h-20" />
+      <ContractsFooter />
+    </div>
+  );
+}
+
+function ContractsFooter() {
+  return (
+    <div className="border-t">
+      <div className="container max-w-7xl">
+        <FooterLinksSection
+          trackingCategory="contracts"
+          left={{
+            title: "Documentation",
+            links: [
+              {
+                label: "Deployment Tools",
+                href: "https://portal.thirdweb.com/contracts/deploy/overview",
+              },
+              {
+                label: "Modular Contracts",
+                href: "https://portal.thirdweb.com/contracts/modular-contracts/overview",
+              },
+              {
+                label: "Pre-built Contracts",
+                href: "https://portal.thirdweb.com/contracts/explore/overview",
+              },
+            ],
+          }}
+          center={{
+            title: "Templates",
+            links: [
+              {
+                label: "Hardhat Starter",
+                href: "https://thirdweb.com/templates/hardhat-starter",
+              },
+              {
+                href: "https://thirdweb.com/templates/forge-starter",
+                label: "Forge Starter",
+              },
+            ],
+          }}
+          right={{
+            title: "Tutorials",
+            links: [
+              {
+                label:
+                  "Everything you need to know about upgradeable smart contracts",
+                href: "https://www.youtube.com/watch?v=cZt-CkzxrNM",
+              },
+              {
+                label:
+                  "Modular Contracts SDK: Build Core & Modules from Scratch (Advanced Guide)",
+                href: "https://www.youtube.com/watch?v=ZoOk41y4f_k",
+              },
+            ],
+          }}
+        />
+      </div>
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
index e410796b5fd..b5143024cfc 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx
@@ -2,6 +2,7 @@ import { isProjectActive } from "@/api/analytics";
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { notFound } from "next/navigation";
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
 import { BlueprintCard } from "./blueprint-card";
 import { InsightFTUX } from "./insight-ftux";
 
@@ -32,23 +33,78 @@ export default async function Page(props: {
   return (
     <div className="flex grow flex-col">
       {/* header */}
-      <div>
-        <h1 className="mb-0.5 font-semibold text-3xl tracking-tight">
-          Insight
-        </h1>
-        <p className="text-muted-foreground">
-          APIs to retrieve blockchain data from any EVM chain, enrich it with
-          metadata, and transform it using custom logic
-        </p>
+      <div className="border-b py-10">
+        <div className="container max-w-7xl">
+          <h1 className="mb-1 font-semibold text-3xl tracking-tight">
+            Insight
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            APIs to retrieve blockchain data from any EVM chain, enrich it with
+            metadata, and transform it using custom logic
+          </p>
+        </div>
       </div>
 
       <div className="h-6" />
 
-      {showFTUX ? (
-        <InsightFTUX clientId={project.publishableKey} />
-      ) : (
-        <BlueprintCard />
-      )}
+      <div className="container flex max-w-7xl grow flex-col">
+        {showFTUX ? (
+          <InsightFTUX clientId={project.publishableKey} />
+        ) : (
+          <BlueprintCard />
+        )}
+      </div>
+
+      <div className="h-20" />
+      <div className="border-t">
+        <div className="container max-w-7xl">
+          <InsightFooter />
+        </div>
+      </div>
     </div>
   );
 }
+
+function InsightFooter() {
+  return (
+    <FooterLinksSection
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            label: "Overview",
+            href: "https://portal.thirdweb.com/insight",
+          },
+          {
+            label: "API Reference",
+            href: "https://insight-api.thirdweb.com/reference",
+          },
+        ],
+      }}
+      center={{
+        title: "Tutorials",
+        links: [
+          {
+            label:
+              "Blockchain Data on Any EVM - Quick and Easy REST APIs for Onchain Data",
+            href: "https://www.youtube.com/watch?v=U2aW7YIUJVw",
+          },
+          {
+            label: "Build a Whale Alerts Telegram Bot with Insight",
+            href: "https://www.youtube.com/watch?v=HvqewXLVRig",
+          },
+        ],
+      }}
+      right={{
+        title: "Demos",
+        links: [
+          {
+            label: "API Playground",
+            href: "https://playground.thirdweb.com/insight",
+          },
+        ],
+      }}
+      trackingCategory="insight"
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx
index 0759a1a4a52..f15523d8d38 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/analytics/nebula-analytics-page.tsx
@@ -24,7 +24,7 @@ export function NebulaAnalyticsPage(props: {
   return (
     <ResponsiveSearchParamsProvider value={props.searchParams}>
       <header className="border-b">
-        <div className="flex flex-col items-start gap-4 pt-2 pb-6 md:flex-row md:items-center md:justify-between lg:pt-4 lg:pb-10">
+        <div className="container flex max-w-7xl flex-col items-start gap-4 py-10 md:flex-row md:items-center md:justify-between">
           <h1 className="font-semibold text-3xl tracking-tight">Nebula</h1>
 
           <div className="flex gap-3">
@@ -45,7 +45,7 @@ export function NebulaAnalyticsPage(props: {
         </div>
       </header>
 
-      <div className="pt-8">
+      <div className="container max-w-7xl pt-8">
         <div className="mb-4 flex flex-col justify-between gap-3 md:flex-row md:items-end">
           <h2 className="font-semibold text-2xl tracking-tight">Analytics</h2>
           <NebulaAnalyticsFilter />
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
index d9903649a79..9c28e36478e 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
@@ -13,8 +13,8 @@ export function NebulaWaitListPageUI(props: {
     <div className={cn("flex grow flex-col", props.className)}>
       {/* Header */}
       {!props.hideHeader && (
-        <div className="border-b pt-4 pb-10">
-          <div className="flex items-center justify-between">
+        <div className="border-b py-10">
+          <div className="container flex max-w-7xl items-center justify-between">
             <h1 className="font-semibold text-3xl tracking-tight"> Nebula </h1>
             <Button asChild variant="outline">
               <Link href="/contact-us" target="_blank">
@@ -25,7 +25,7 @@ export function NebulaWaitListPageUI(props: {
         </div>
       )}
 
-      <div className="flex grow flex-col overflow-hidden py-32">
+      <div className="container flex max-w-7xl grow flex-col overflow-hidden py-32">
         <CenteredCard
           title="You're on the waitlist"
           description="You should receive access to Nebula soon!"
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/layout.tsx
new file mode 100644
index 00000000000..c8df508369e
--- /dev/null
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/layout.tsx
@@ -0,0 +1,72 @@
+import { FooterLinksSection } from "../components/footer/FooterLinksSection";
+
+export default function Layout(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <div className="flex grow flex-col">{props.children}</div>
+      <div className="h-20" />
+      <div className="border-t">
+        <div className="container max-w-7xl">
+          <NebulaFooter />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function NebulaFooter() {
+  return (
+    <FooterLinksSection
+      trackingCategory="nebula"
+      left={{
+        title: "Documentation",
+        links: [
+          {
+            label: "API Reference",
+            href: "https://portal.thirdweb.com/nebula/get-started",
+          },
+          {
+            label: "Python SDK",
+            href: "https://portal.thirdweb.com/nebula/tools/python-sdk/installation",
+          },
+          {
+            label: "MCP Server",
+            href: "https://portal.thirdweb.com/nebula/mcp-server/get-started",
+          },
+        ],
+      }}
+      center={{
+        title: "Tutorials",
+        links: [
+          {
+            href: "https://www.youtube.com/watch?v=xrm0emiRGMk",
+            label: "Build a Telegram Mini App ERC20 deployer, powered by AI",
+          },
+          {
+            label: "Build an AI Powered Blockchain Explorer",
+            href: "https://www.youtube.com/watch?v=vBooJytkXa4",
+          },
+        ],
+      }}
+      right={{
+        title: "Templates",
+        links: [
+          {
+            label: "Bouncer Eliza Agent",
+            href: "https://github.com/thirdweb-example/bouncer-eliza-agent",
+          },
+          {
+            label: "Block Explorer",
+            href: "https://github.com/thirdweb-example/nebula-block-explorer",
+          },
+          {
+            label: "ERC20 Telegram Mini-app Token Deployer",
+            href: "https://github.com/thirdweb-example/erc20-token-deployer",
+          },
+        ],
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
index f7854db2ab4..059430bccc7 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
@@ -54,12 +54,19 @@ export default async function Page(props: {
   if (hasNebulaAccess) {
     if (showFTUX) {
       return (
-        <div>
-          <h1 className="mb-5 font-semibold text-3xl tracking-tight">Nebula</h1>
-          <NebulaFTUX
-            secretKeyMasked={project.secretKeys[0]?.masked || ""}
-            projectId={project.id}
-          />
+        <div className="flex grow flex-col">
+          <div className="border-b py-10">
+            <div className="container max-w-7xl">
+              <h1 className="font-semibold text-3xl tracking-tight">Nebula</h1>
+            </div>
+          </div>
+
+          <div className="container mt-6 max-w-7xl">
+            <NebulaFTUX
+              secretKeyMasked={project.secretKeys[0]?.masked || ""}
+              projectId={project.id}
+            />
+          </div>
         </div>
       );
     }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
index b62b254b309..78dc7d4be97 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
@@ -76,26 +76,29 @@ export default async function ProjectOverviewPage(props: PageProps) {
     projectId: project.id,
   });
 
-  // is any analytics data active?
   const isActive = Object.values(activeStatus).some((v) => !!v);
 
   return (
     <div className="flex grow flex-col">
-      <div className="w-full">
-        <Header
-          title={project.name}
-          interval={interval}
-          range={range}
-          showRangeSelector={isActive}
-        />
+      <div className="w-full border-b py-10">
+        <div className="container max-w-7xl">
+          <Header
+            title={project.name}
+            interval={interval}
+            range={range}
+            showRangeSelector={isActive}
+          />
+        </div>
       </div>
 
+      <div className="h-6" />
+
       {!isActive ? (
-        <div className="pt-6">
+        <div className="container max-w-7xl">
           <ProjectFTUX project={project} teamSlug={params.team_slug} />
         </div>
       ) : (
-        <div className="flex grow flex-col pt-6">
+        <div className="container flex max-w-7xl grow flex-col">
           <Suspense fallback={<GenericLoadingPage />}>
             <ProjectAnalytics
               project={project}
@@ -106,6 +109,8 @@ export default async function ProjectOverviewPage(props: PageProps) {
           </Suspense>
         </div>
       )}
+
+      <div className="h-20" />
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/wallets/SupportedPlatformLink.tsx b/apps/dashboard/src/components/wallets/SupportedPlatformLink.tsx
deleted file mode 100644
index b1dc235a58c..00000000000
--- a/apps/dashboard/src/components/wallets/SupportedPlatformLink.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { cn } from "@/lib/utils";
-import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
-import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
-import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
-
-export function SupportedPlatformLink(props: {
-  platform: "React" | "React Native" | "Unity" | "TypeScript";
-  href: string;
-  trackingCategory: string;
-  className?: string;
-}) {
-  let icon = ReactIcon;
-  if (props.platform === "Unity") {
-    icon = UnityIcon;
-  } else if (props.platform === "TypeScript") {
-    icon = TypeScriptIcon;
-  }
-
-  return (
-    <TrackedLinkTW
-      category={props.trackingCategory}
-      label={`platform-${props.platform.replace(" ", "-").toLowerCase()}`}
-      href={props.href}
-      target="_blank"
-      className={cn(
-        "flex items-center gap-2 text-muted-foreground text-sm hover:text-foreground",
-        props.className,
-      )}
-    >
-      {icon({ className: "size-4" })}
-      {props.platform}
-    </TrackedLinkTW>
-  );
-}
diff --git a/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx b/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx
index f8151ce12ab..c4448a8e40c 100644
--- a/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx
+++ b/apps/portal/src/app/nebula/tools/python-sdk/installation/page.mdx
@@ -1,4 +1,4 @@
-### Python SDK
+# Python SDK
 
 #### Installation
 
diff --git a/apps/portal/src/app/react-native/v5/page.mdx b/apps/portal/src/app/react-native/v5/page.mdx
index 757d8f4e907..30a535d9c6d 100644
--- a/apps/portal/src/app/react-native/v5/page.mdx
+++ b/apps/portal/src/app/react-native/v5/page.mdx
@@ -28,7 +28,7 @@ Many of the components and hooks in the React Native SDK use a [`client`](/types
 <ArticleIconCard
 	title="Getting started"
 	icon={ZapIcon}
-	href="/react-native/v5/installation"
+	href="/react-native/v5/getting-started"
 	description="Get started with the React Native SDK"
 />