Add Templates section with x402 and EncryptedERC starter kits

  Added a new Templates section to the documentation with comprehensive
  guides for two Avalanche starter kits:

  1. x402 Starter Kit - Next.js template for payment-gated APIs and
     content services using the x402 protocol on Avalanche C-Chain

  2. EncryptedERC - Privacy-preserving ERC-20 token protocol with
     confidential transfers using zero-knowledge proofs

  Features:
  - New Templates tab in docs navigation bar
  - Templates landing page with overview
  - Detailed x402 Starter Kit guide with step-by-step setup
  - Complete EncryptedERC guide with ZK-proof implementation
  - Hamburger menu with quick links to both templates

  Files added:
  - content/docs/templates/index.mdx
  - content/docs/templates/meta.json
  - content/docs/templates/x402-starter-kit.mdx
  - content/docs/templates/encrypted-erc.mdx

  Files modified:
  - lib/source.ts
  - app/docs/layout.tsx
  - app/docs/docs-layout-wrapper.tsx
  - components/navigation/docs-subnav.tsx

Author: tomi204

app/docs/docs-layout-wrapper.tsx

@@ -8,7 +8,7 @@ import { DocsSubNav } from '@/components/navigation/docs-subnav';
 import { DocsNavbarToggle } from '@/components/navigation/docs-navbar-toggle';
 import { ForceMobileSidebar } from '@/components/navigation/force-mobile-sidebar';
 import { NavbarDropdownInjector } from '@/components/navigation/navbar-dropdown-injector';
-import { 
+import {
   BookOpen,
   Code,
   Layers,
@@ -22,7 +22,8 @@ import {
   CircleDollarSign,
   Terminal,
   Package,
-  Milestone
+  Milestone,
+  LayoutTemplate
 } from 'lucide-react';
 
 interface DocsLayoutWrapperProps {
@@ -32,6 +33,7 @@ interface DocsLayoutWrapperProps {
   rpcsTree: any;
   toolingTree: any;
   acpsTree: any;
+  templatesTree: any;
 }
 
 export function DocsLayoutWrapper({
@@ -41,6 +43,7 @@ export function DocsLayoutWrapper({
   rpcsTree,
   toolingTree,
   acpsTree,
+  templatesTree,
 }: DocsLayoutWrapperProps) {
   const pathname = usePathname();
 
@@ -61,6 +64,8 @@ export function DocsLayoutWrapper({
       document.body.setAttribute('data-docs-section', 'api-reference');
     } else if (pathname.startsWith('/docs/rpcs')) {
       document.body.setAttribute('data-docs-section', 'rpcs');
+    } else if (pathname.startsWith('/docs/templates')) {
+      document.body.setAttribute('data-docs-section', 'templates');
     } else if (pathname.startsWith('/docs')) {
       document.body.setAttribute('data-docs-section', 'documentation');
     }
@@ -228,6 +233,22 @@ export function DocsLayoutWrapper({
     },
   ];
 
+  // Templates hamburger menu options
+  const templatesOptions = [
+    {
+      title: 'x402 Starter Kit',
+      description: 'Payment-gated APIs with micropayments',
+      icon: <CircleDollarSign className="w-5 h-5" />,
+      url: '/docs/templates/x402-starter-kit',
+    },
+    {
+      title: 'EncryptedERC',
+      description: 'Private transactions with zero-knowledge proofs',
+      icon: <Code className="w-5 h-5" />,
+      url: '/docs/templates/encrypted-erc',
+    },
+  ];
+
   // Determine which section we're in and get the appropriate tree
   let pageTree;
   let sidebarOptions: any = {};
@@ -247,6 +268,11 @@ export function DocsLayoutWrapper({
     sidebarOptions = {
       tabs: toolingOptions,
     };
+  } else if (pathname.startsWith('/docs/templates')) {
+    pageTree = templatesTree;
+    sidebarOptions = {
+      tabs: templatesOptions,
+    };
   } else if (pathname.startsWith('/docs/acps')) {
     pageTree = acpsTree;
     // No hamburger menu for ACPs - explicitly disable tabs

app/docs/layout.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
 import { baseOptions } from '@/app/layout.config';
-import { 
+import {
   getDocumentationTree,
   getApiReferenceTree,
   getRpcsTree,
   getToolingTree,
-  getAcpsTree
+  getAcpsTree,
+  getTemplatesTree
 } from '@/lib/source';
 import { DocsLayoutWrapper } from './docs-layout-wrapper';
 import { LayoutWrapper } from '@/app/layout-wrapper.client';
@@ -19,6 +20,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   const rpcsTree = getRpcsTree();
   const toolingTree = getToolingTree();
   const acpsTree = getAcpsTree();
+  const templatesTree = getTemplatesTree();
 
   return (
     <LayoutWrapper baseOptions={baseOptions}>
@@ -28,6 +30,7 @@ export default function Layout({ children }: { children: ReactNode }) {
         rpcsTree={rpcsTree}
         toolingTree={toolingTree}
         acpsTree={acpsTree}
+        templatesTree={templatesTree}
       >
         {children}
       </DocsLayoutWrapper>

components/navigation/docs-subnav.tsx

@@ -14,7 +14,8 @@ const tabs = [
         !path.startsWith("/docs/api-reference") &&
         !path.startsWith("/docs/rpcs") &&
         !path.startsWith("/docs/tooling") &&
-        !path.startsWith("/docs/acps")),
+        !path.startsWith("/docs/acps") &&
+        !path.startsWith("/docs/templates")),
   },
   {
     label: "Node RPCs",
@@ -31,6 +32,11 @@ const tabs = [
     href: "/docs/tooling/avalanche-sdk",
     pathMatch: (path: string) => path.startsWith("/docs/tooling"),
   },
+  {
+    label: "Templates",
+    href: "/docs/templates",
+    pathMatch: (path: string) => path.startsWith("/docs/templates"),
+  },
   {
     label: "ACPs",
     href: "/docs/acps",