From 331e973c9a51cad58838e355b369246f270f9732 Mon Sep 17 00:00:00 2001
From: moldy <michael.moldoveanu@alchemy.com>
Date: Thu, 20 Jun 2024 16:59:05 -0400
Subject: [PATCH] docs: add skeleton for new docs

---
 site/pages/core/overview.mdx                  |   6 +
 site/pages/index.mdx                          |   4 +-
 site/pages/infra/overview.mdx                 |   6 +
 site/pages/intro/index.mdx                    |  89 +++++
 ...migrating-to-v3.md => migration-guide.mdx} |  20 +-
 site/pages/signer/overview.mdx                |   6 +
 site/pages/smart-contracts/overview.mdx       |   6 +
 site/sidebar/core.ts                          |  11 +
 site/sidebar/infra.ts                         |  11 +
 site/sidebar/intro.ts                         |  22 ++
 site/sidebar/old.ts                           | 324 ++++++++++++++++
 site/sidebar/react.ts                         | 136 +++++++
 site/sidebar/signer.ts                        |  11 +
 site/sidebar/smart-contracts.ts               |  11 +
 site/vocs.config.tsx                          | 364 +++---------------
 15 files changed, 690 insertions(+), 337 deletions(-)
 create mode 100644 site/pages/core/overview.mdx
 create mode 100644 site/pages/infra/overview.mdx
 create mode 100644 site/pages/intro/index.mdx
 rename site/pages/{migration-guides/migrating-to-v3.md => migration-guide.mdx} (91%)
 create mode 100644 site/pages/signer/overview.mdx
 create mode 100644 site/pages/smart-contracts/overview.mdx
 create mode 100644 site/sidebar/core.ts
 create mode 100644 site/sidebar/infra.ts
 create mode 100644 site/sidebar/intro.ts
 create mode 100644 site/sidebar/old.ts
 create mode 100644 site/sidebar/react.ts
 create mode 100644 site/sidebar/signer.ts
 create mode 100644 site/sidebar/smart-contracts.ts

diff --git a/site/pages/core/overview.mdx b/site/pages/core/overview.mdx
new file mode 100644
index 0000000000..222885f741
--- /dev/null
+++ b/site/pages/core/overview.mdx
@@ -0,0 +1,6 @@
+---
+title: TODO
+description: TODO
+---
+
+TODO
diff --git a/site/pages/index.mdx b/site/pages/index.mdx
index 68b52681a8..97ca310fa4 100644
--- a/site/pages/index.mdx
+++ b/site/pages/index.mdx
@@ -45,7 +45,7 @@ import { Button } from "vocs/components";
                 <Button href="./getting-started/introduction" className="flex items-center rounded-md px-[12px] py-[12px] text-[16px] font-semibold text-white transition duration-300 ease-in-out hover:scale-105 hover:opacity-90 bg-black dark:bg-white dark:text-black">
                     Quick start
                 </Button>
-                <Button rel="noopener noreferrer" href="./getting-started/overview" className="flex items-center rounded-md px-[12px] py-[12px] text-[16px] font-semibold transition duration-300 ease-in-out hover:scale-105 hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black">
+                <Button rel="noopener noreferrer" href="./intro" className="flex items-center rounded-md px-[12px] py-[12px] text-[16px] font-semibold transition duration-300 ease-in-out hover:scale-105 hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black">
                     Why Account Kit?
                 </Button>
               </div>
@@ -69,7 +69,7 @@ export const smartAccountClient = await createModularAccountAlchemyClient({
           </div>
         </div>
         <div className="flex max-lg:flex-wrap justify-center gap-[32px]">
-          <Button rel="noopener noreferrer" href="./getting-started/overview" className="flex-auto basis-1/3 max-lg:max-w-[370px] max-lg:min-w-[370px]">
+          <Button rel="noopener noreferrer" href="./intro" className="flex-auto basis-1/3 max-lg:max-w-[370px] max-lg:min-w-[370px]">
             <div
               className="flex flex-col flex-auto p-[24px] gap-[24px] rounded-md text-white overflow-auto bg-gradient-3 group hover:scale-105 hover:opacity-90 transition duration-300 ease-in-out"
             >
diff --git a/site/pages/infra/overview.mdx b/site/pages/infra/overview.mdx
new file mode 100644
index 0000000000..222885f741
--- /dev/null
+++ b/site/pages/infra/overview.mdx
@@ -0,0 +1,6 @@
+---
+title: TODO
+description: TODO
+---
+
+TODO
diff --git a/site/pages/intro/index.mdx b/site/pages/intro/index.mdx
new file mode 100644
index 0000000000..c67d3dc214
--- /dev/null
+++ b/site/pages/intro/index.mdx
@@ -0,0 +1,89 @@
+---
+outline: deep
+title: Overview
+description: Build Embedded Accounts with Account Kit. Build smart accounts powered by Account Abstraction (ERC-4337).
+---
+
+# Why Embedded Accounts?
+
+Web3 onboarding should be as simple as web2 sign up.
+
+With traditional wallets, your users have to download an extension, back up a seed phrase, and fund a wallet with ETH. Each of these steps adds friction and cause new users to drop off before they reach the magic moment in your app!
+
+**Embedded Accounts** make wallets invisible. Sign up for a non-custodial web3 account with no downloads, transact without gas, and recover without a seed phrase. Bring the next billion users onchain with embedded accounts.
+
+- **Your app, your UX:** Design every step natively in your app, from sign up to checkout.
+- **Familiar auth methods:** Sign up with email, social login, passkeys (i.e. biometrics), or self-custodial signers like Metamask.
+- **Sponsor gas:** increase engagement by [sponsoring gas](/using-smart-accounts/sponsoring-gas/gas-manager) fees through an ERC-4337 paymaster.
+- **Batch transactions:** streamline multi-step actions like approve+swap in a single transaction by [batching](/using-smart-accounts/batch-user-operations) with the Bundler API.
+- **Account recovery:** Never lose your keys again. Embedded accounts support private key export, email recovery, and onchain recovery plugins.
+
+# Built with Account Kit
+
+Embedded Accounts are built with **Account Kit**: a simple and powerful toolkit to build next-gen wallets with [Account Abstraction](https://www.youtube.com/watch?v=Vpk_MhY-EeE). It also supports lightweight [EOA accounts](/signers/alchemy-signer/introduction#using-the-signer-as-an-eoa) if you prefer, but AA unlocks superpowers like gas sponsorship, batch transactions, and more.
+
+Account Kit provides all the tools you need to build invisible web3 accounts. It includes:
+
+- **AA SDK**: A simple SDK to integrate and customize embedded accounts in your app. The `aa-sdk` orchestrates everything from wallet creation to authentication, transaction signing, gas sponsorship, and more.
+- **Signer API:** A secure, non-custodial Signer API to generate and store private keys, powered by Alchemy and [Turnkey](https://www.turnkey.com/). You can also [bring your own signer](/signers/choosing-a-signer) solution.
+- **Smart Contract Accounts:** Smart contract accounts designed from the ground up for ERC-4337, extensibility through [ERC-6900](https://eips.ethereum.org/EIPS/eip-6900), and low gas costs.
+- **Gas Manager API:** A programmable API to sponsor gas for UserOps that meet your criteria.
+- **Bundler API:** The most reliable ERC-4337 Bundler. Land your UserOps on-chain, batch operations, and sponsor gas at a massive scale.
+
+<img
+  src="/images/account-kit-overview.jpg"
+  width="400"
+  height="auto"
+  alt="Account Kit Overview"
+  style={{ display: "block", margin: "auto" }}
+/>
+
+Let's dive into each component.
+
+## aa-sdk
+
+The `aa-sdk` is a type-safe and performant TypeScript library built on top of [viem](https://viem.sh/) and fully compatible with ethers.js. It provides ergonomic methods for sending user operations, sponsoring gas, deploying smart accounts, and much more. It handles all the complexity of ERC-4337 under the hood to simplify your development.
+
+The SDK implements an EIP-1193 provider interface so embedded accounts can drop right into popular app frameworks and wallet connect libraries like RainbowKit, Wagmi, and Web3Modal. It also includes ethers.js adapters to provide full support for ethers.js apps.
+
+Get started with the [quick start](/getting-started/introduction) guide or browse the open source [aa-sdk github](https://github.com/alchemyplatform/aa-sdk).
+
+## Signer API
+
+Every smart account is controlled by an owner private key. A signer or WaaS provider securely stores the private key, authenticates access via email/passkey, and signs transactions on the smart account.
+
+Embedded Accounts are powered by the non-custodial Alchemy Signer API which uses Turnkey to securely store key material in a [Secure Enclave](https://docs.turnkey.com/security/our-approach) so that only the user can access it.
+
+Account Kit also makes it easy to [bring your own signer](/signers/choosing-a-signer).
+
+## Smart Contract Accounts
+
+The smart contract is the heart of the user's account. It secures their assets, executes every UserOp, and represents the user's public address onchain, so this is a foundational choice for your apps' security, feature set, and gas costs.
+
+Account Kit provides two smart contract accounts out of the box, and supports any custom contract of your own.
+
+- **Modular Account**: a secure, audited, and extensible 4337 smart account that supports multiple owners, session keys, onchain recovery, and more. ([learn more](https://www.alchemy.com/blog/hello-modular-account), [github](https://github.com/alchemyplatform/modular-account))
+
+- **Light Account**: a simple, secure, and audited 4337 smart account that supports a single owner ([github](https://github.com/alchemyplatform/light-account))
+
+- **Bring your own**: you can even build your own account or use another open source implementation of an ERC-4337 account. Follow this guide to [use your own account](/smart-accounts/custom/using-your-own) with Account Kit.
+
+## Gas Manager API
+
+The Gas Manager is a programmable API to sponsor gas for UserOps. You can create programmable gas policies to specify exactly which transactions should be sponsored, set strict spending limits per wallet or globally, and allow/blocklist particular wallet addresses. It's easy to create a gas policy in the Alchemy Dashboard or update the policy dynamically through a REST API.
+
+Learn how to [sponsor gas](/using-smart-accounts/sponsoring-gas/gas-manager) with the Gas Manager API.
+
+## Bundler API
+
+The Bundler submits UserOps to the blockchain for execution. This is a mission-critical operation: if your Bundler goes offline, then transactions will fail or get stuck and users will be unable to use your app.
+
+We built our [Bundler in Rust](https://www.alchemy.com/blog/open-sourcing-rundler/?a=embedded-accounts-get-started) to handle the highest loads at production scale. It's able to handle massive scale because we operate it alongside our fleet of nodes powering the biggest dapps in web3 from Opensea to Circle.
+
+Check out the open source code in our affectionately named [Rundler github repo](https://github.com/alchemyplatform/rundler) and start [sending UserOps](/using-smart-accounts/send-user-operations) today.
+
+# Start building
+
+Next, follow the [quick start](/getting-started/introduction) guide to build invisible wallets in your app.
+
+Embedded Accounts make web3 simple so that _anyone_ can use your app in seconds with no downloads, no gas tokens, and no seed phrases. It's time to bring the whole world onchain!
diff --git a/site/pages/migration-guides/migrating-to-v3.md b/site/pages/migration-guide.mdx
similarity index 91%
rename from site/pages/migration-guides/migrating-to-v3.md
rename to site/pages/migration-guide.mdx
index 1b837e4444..43467cd06e 100644
--- a/site/pages/migration-guides/migrating-to-v3.md
+++ b/site/pages/migration-guide.mdx
@@ -1,21 +1,7 @@
 ---
 outline: deep
-head:
-  - - meta
-    - property: og:title
-      content: Migrating to aa-sdk v3
-  - - meta
-    - name: description
-      content: How to upgrade through breaking changes of aa-sdk v3
-  - - meta
-    - property: og:description
-      content: How to upgrade through breaking changes of aa-sdk v3.
-  - - meta
-    - name: twitter:title
-      content: Migration Guide
-  - - meta
-    - name: twitter:description
-      content: How to upgrade through breaking changes of aa-sdk v3.
+title: Migration Guide
+description: How to upgrade through breaking changes of the aa-sdk and account-kit
 ---
 
 # Migration Guide
@@ -89,7 +75,7 @@ const client = createSmartAccountClient({ // [!code ++]
 
 ### Client: signature changes on methods
 
-To support [the various ways](/migration-guides/migrating-to-v3#account-connecting-to-a-smart-account) of connecting to a smart account, the signatures of the methods on `SmartAccountClient` have changed. Almost all methods now have an optional param for `account` and have been converted into single argument functions that take an object with the their properties instead.
+To support [the various ways](/migration-guide#account-connecting-to-a-smart-account) of connecting to a smart account, the signatures of the methods on `SmartAccountClient` have changed. Almost all methods now have an optional param for `account` and have been converted into single argument functions that take an object with the their properties instead.
 
 ### Account: `BaseSmartContractAccount` → `SmartContractAccount`
 
diff --git a/site/pages/signer/overview.mdx b/site/pages/signer/overview.mdx
new file mode 100644
index 0000000000..222885f741
--- /dev/null
+++ b/site/pages/signer/overview.mdx
@@ -0,0 +1,6 @@
+---
+title: TODO
+description: TODO
+---
+
+TODO
diff --git a/site/pages/smart-contracts/overview.mdx b/site/pages/smart-contracts/overview.mdx
new file mode 100644
index 0000000000..222885f741
--- /dev/null
+++ b/site/pages/smart-contracts/overview.mdx
@@ -0,0 +1,6 @@
+---
+title: TODO
+description: TODO
+---
+
+TODO
diff --git a/site/sidebar/core.ts b/site/sidebar/core.ts
new file mode 100644
index 0000000000..8f570e273e
--- /dev/null
+++ b/site/sidebar/core.ts
@@ -0,0 +1,11 @@
+import { SidebarItem } from "vocs";
+
+export const coreSidebar: SidebarItem[] = [
+  {
+    text: "Overview",
+    items: [
+      { text: "Introduction", link: "/core/overview" },
+      { text: "Getting started", link: "#TODO" },
+    ],
+  },
+];
diff --git a/site/sidebar/infra.ts b/site/sidebar/infra.ts
new file mode 100644
index 0000000000..5af1a00404
--- /dev/null
+++ b/site/sidebar/infra.ts
@@ -0,0 +1,11 @@
+import { SidebarItem } from "vocs";
+
+export const infraSidebar: SidebarItem[] = [
+  {
+    text: "Overview",
+    items: [
+      { text: "Introduction", link: "/infra/overview" },
+      { text: "Getting started", link: "#TODO" },
+    ],
+  },
+];
diff --git a/site/sidebar/intro.ts b/site/sidebar/intro.ts
new file mode 100644
index 0000000000..2d438f3108
--- /dev/null
+++ b/site/sidebar/intro.ts
@@ -0,0 +1,22 @@
+import { SidebarItem } from "vocs";
+
+export const introSidebar: SidebarItem[] = [
+  { text: "Introduction", link: "/intro" },
+  {
+    text: "Concepts",
+    items: [
+      {
+        text: "Smart Account Client",
+        link: "/intro/concepts/smart-account-client",
+      },
+      {
+        text: "Smart Contract Account",
+        link: "/intro/concepts/smart-contract-account",
+      },
+      {
+        text: "Smart Account Signer",
+        link: "/intro/concepts/smart-account-signer",
+      },
+    ],
+  },
+];
diff --git a/site/sidebar/old.ts b/site/sidebar/old.ts
new file mode 100644
index 0000000000..65e7e3dd27
--- /dev/null
+++ b/site/sidebar/old.ts
@@ -0,0 +1,324 @@
+import { aaAccountsSidebar } from "./aa-accounts.js";
+import { aaAlchemySidebar } from "./aa-alchemy.js";
+import { aaCoreSideBar } from "./aa-core.js";
+import { aaEthersSidebar } from "./aa-ethers.js";
+import { aaSignersSidebar } from "./aa-signers.js";
+
+export const oldSidebar = [
+  // old sidebar: TODO: delete this
+  {
+    text: "Getting started",
+    items: [
+      {
+        text: "Overview",
+        link: "/getting-started/overview",
+      },
+      {
+        text: "Quick start app",
+        items: [
+          { text: "Demo", link: "/getting-started/introduction" },
+          {
+            text: "Run locally",
+            link: "/getting-started/run-locally",
+          },
+          {
+            text: "Walkthrough",
+            link: "/getting-started/walkthrough",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    text: "Using Alchemy Signer",
+    items: [
+      {
+        text: "Introduction",
+        link: "/signers/alchemy-signer/introduction",
+      },
+      {
+        text: "Passkey signup",
+        link: "/signers/alchemy-signer/passkey-signup",
+      },
+      {
+        text: "Passkey authentication",
+        link: "/signers/alchemy-signer/passkey-auth",
+      },
+      {
+        text: "User sessions",
+        link: "/signers/alchemy-signer/manage-user-sessions",
+      },
+      {
+        text: "Export private key",
+        link: "/signers/alchemy-signer/export-private-key",
+      },
+    ],
+  },
+  {
+    text: "Using smart accounts",
+    items: [
+      {
+        text: "Send user operations",
+        link: "/using-smart-accounts/send-user-operations",
+      },
+      {
+        text: "Batch user operations",
+        link: "/using-smart-accounts/batch-user-operations",
+      },
+      {
+        text: "Sponsor gas",
+        collapsed: false,
+        items: [
+          {
+            text: "Use the Gas Manager",
+            link: "/using-smart-accounts/sponsoring-gas/gas-manager",
+          },
+          {
+            text: "Check eligibility",
+            link: "/using-smart-accounts/sponsoring-gas/checking-eligibility",
+          },
+        ],
+      },
+      {
+        text: "Simulate user operations",
+        link: "/using-smart-accounts/simulate-user-operations",
+      },
+      {
+        text: "Session keys",
+        collapsed: false,
+        items: [
+          {
+            text: "Overview",
+            link: "/using-smart-accounts/session-keys/",
+          },
+          {
+            text: "Getting started",
+            link: "/using-smart-accounts/session-keys/getting-started",
+          },
+          {
+            text: "Supported permissions",
+            link: "/using-smart-accounts/session-keys/supported-permissions",
+          },
+        ],
+      },
+      {
+        text: "Transfer ownership",
+        collapsed: false,
+        items: [
+          {
+            text: "Modular Account",
+            link: "/using-smart-accounts/transfer-ownership/modular-account",
+          },
+          {
+            text: "Light Account",
+            link: "/using-smart-accounts/transfer-ownership/light-account",
+          },
+          {
+            text: "Multi-Owner Light Account",
+            link: "/using-smart-accounts/transfer-ownership/multi-owner-light-account",
+          },
+        ],
+      },
+      {
+        text: "Alchemy enhanced APIs",
+        collapsed: false,
+        items: [
+          {
+            text: "Get account NFTs",
+            link: "/using-smart-accounts/enhanced-apis/nft",
+          },
+          {
+            text: "Get account tokens",
+            link: "/using-smart-accounts/enhanced-apis/token",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    text: "React Hooks",
+    items: [
+      { text: "Overview", link: "/react/overview" },
+      { text: "SSR", link: "/react/ssr" },
+      { text: "createConfig", link: "/react/createConfig" },
+      { text: "useAuthenticate", link: "/react/useAuthenticate" },
+      { text: "useSmartAccountClient", link: "/react/useSmartAccountClient" },
+      { text: "useClientActions", link: "/react/useClientActions" },
+      { text: "useAccount", link: "/react/useAccount" },
+      { text: "useSigner", link: "/react/useSigner" },
+      { text: "useSignerStatus", link: "/react/useSignerStatus" },
+      { text: "useUser", link: "/react/useUser" },
+      { text: "useBundlerClient", link: "/react/useBundlerClient" },
+      { text: "useAddPasskey", link: "/react/useAddPasskey" },
+      { text: "useLogout", link: "/react/useLogout" },
+      { text: "useExportAccount", link: "/react/useExportAccount" },
+      { text: "useSignMessage", link: "/react/useSignMessage" },
+      { text: "useSignTypedData", link: "/react/useSignTypedData" },
+      { text: "useSendUserOperation", link: "/react/useSendUserOperation" },
+      {
+        text: "useDropAndReplaceUserOperation",
+        link: "/react/useDropAndReplaceUserOperation",
+      },
+      {
+        text: "useWaitForUserOperationTransaction",
+        link: "/react/useWaitForUserOperationTransaction",
+      },
+      { text: "useSendTransaction", link: "/react/useSendTransaction" },
+      { text: "useSendTransactions", link: "/react/useSendTransactions" },
+      { text: "useChain", link: "/react/useChain" },
+    ],
+  },
+  {
+    text: "Choosing a smart account",
+    items: [
+      { text: "Introduction", link: "/smart-accounts/" },
+      {
+        text: "Modular Account",
+        collapsed: false,
+        items: [
+          { text: "Introduction", link: "/smart-accounts/modular-account/" },
+          {
+            text: "Getting started",
+            link: "/smart-accounts/modular-account/getting-started",
+          },
+          {
+            text: "Deployments",
+            link: "/smart-accounts/modular-account/deployments",
+          },
+          {
+            text: "Upgrading to Modular Account",
+            link: "/smart-accounts/modular-account/upgrade-la-to-ma",
+          },
+          {
+            text: "Multisig Plugin",
+            collapsed: true,
+            items: [
+              {
+                text: "Introduction",
+                link: "/smart-accounts/modular-account/multisig-plugin/",
+              },
+              {
+                text: "Getting started",
+                link: "/smart-accounts/modular-account/multisig-plugin/getting-started",
+              },
+              {
+                text: "Technical details",
+                link: "/smart-accounts/modular-account/multisig-plugin/technical-details",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        text: "Light Account",
+        collapsed: false,
+        items: [
+          { text: "Overview", link: "/smart-accounts/light-account/" },
+          {
+            text: "Getting started",
+            link: "/smart-accounts/light-account/getting-started",
+          },
+          {
+            text: "Deployments",
+            link: "/smart-accounts/light-account/deployments",
+          },
+        ],
+      },
+      {
+        text: "Custom accounts",
+        collapsed: true,
+        items: [
+          {
+            text: "Use your own",
+            link: "/smart-accounts/custom/using-your-own",
+          },
+          {
+            text: "Contribute your account",
+            link: "/smart-accounts/custom/contributing",
+          },
+        ],
+      },
+      { text: "Gas benchmarks", link: "/smart-accounts/gas-benchmarks" },
+    ],
+  },
+  {
+    text: "Extending smart accounts",
+    items: [
+      {
+        text: "Install plugins",
+        link: "/extending-smart-accounts/install-plugins",
+      },
+      {
+        text: "Get installed plugins",
+        link: "/extending-smart-accounts/get-installed-plugins",
+      },
+    ],
+  },
+  {
+    text: "Custom signers",
+    items: [
+      { text: "Introduction", link: "/signers/choosing-a-signer" },
+      {
+        text: "Third-party signers",
+        collapsed: true,
+        items: [
+          { text: "Magic", link: "/signers/guides/magic" },
+          { text: "Web3Auth", link: "/signers/guides/web3auth" },
+          { text: "Turnkey", link: "/signers/guides/turnkey" },
+          { text: "Privy", link: "/signers/guides/privy" },
+          { text: "Dynamic", link: "/signers/guides/dynamic" },
+          { text: "Fireblocks", link: "/signers/guides/fireblocks" },
+          { text: "Portal", link: "/signers/guides/portal" },
+          { text: "Capsule", link: "/signers/guides/capsule" },
+          { text: "Lit Protocol", link: "/signers/guides/lit" },
+          {
+            text: "Particle Network",
+            link: "/signers/guides/particle-network",
+          },
+          { text: "Arcana Auth", link: "/signers/guides/arcana-auth" },
+          { text: "Dfns", link: "/signers/guides/dfns" },
+          { text: "WalletKit", link: "/signers/guides/walletkit" },
+          { text: "Passport", link: "/signers/guides/passport" },
+        ],
+      },
+      { text: "EOA signer", link: "/signers/eoa" },
+      {
+        text: "Build your own",
+        link: "/signers/guides/custom-signer",
+      },
+      {
+        text: "Contribute your signer",
+        link: "/signers/contributing",
+      },
+    ],
+  },
+
+  {
+    text: "Custom infra",
+    items: [
+      { text: "Use custom bundler", link: "/third-party/bundlers" },
+      { text: "Use custom paymaster", link: "/third-party/paymasters" },
+    ],
+  },
+  {
+    text: "aa-sdk packages",
+    items: [
+      { text: "Overview", link: "/packages/" },
+      aaCoreSideBar,
+      aaAlchemySidebar,
+      aaAccountsSidebar,
+      aaSignersSidebar,
+      aaEthersSidebar,
+    ],
+  },
+  {
+    text: "Resources",
+    items: [
+      { text: "FAQs", link: "/resources/faqs" },
+      { text: "React Native", link: "/resources/react-native" },
+      { text: "Terms", link: "/resources/terms" },
+      { text: "Types", link: "/resources/types" },
+      { text: "Contact us", link: "/resources/contact-us" },
+    ],
+  },
+];
diff --git a/site/sidebar/react.ts b/site/sidebar/react.ts
new file mode 100644
index 0000000000..c3ad1e0c70
--- /dev/null
+++ b/site/sidebar/react.ts
@@ -0,0 +1,136 @@
+import { SidebarItem } from "vocs";
+
+export const reactSidebar: SidebarItem[] = [
+  {
+    text: "Overview",
+    items: [
+      { text: "Introduction", link: "/react/overview" },
+      { text: "Getting with components", link: "#TODO" },
+      { text: "Getting started with hooks", link: "#TODO" },
+    ],
+  },
+  {
+    text: "Using smart accounts (illustrative)",
+    items: [
+      {
+        text: "Send user operations",
+        link: "#TODO",
+      },
+      {
+        text: "Batch user operations",
+        link: "#TODO",
+      },
+      {
+        text: "Sponsor gas",
+        collapsed: false,
+        items: [
+          {
+            text: "Use the Gas Manager",
+            link: "#TODO",
+          },
+          {
+            text: "Check eligibility",
+            link: "#TODO",
+          },
+        ],
+      },
+      {
+        text: "Simulate user operations",
+        link: "#TODO",
+      },
+      {
+        text: "Session keys",
+        collapsed: false,
+        items: [
+          {
+            text: "Overview",
+            link: "#TODO",
+          },
+          {
+            text: "Getting started",
+            link: "#TODO",
+          },
+          {
+            text: "Supported permissions",
+            link: "#TODO",
+          },
+        ],
+      },
+      {
+        text: "Transfer ownership",
+        collapsed: false,
+        items: [
+          {
+            text: "Modular Account",
+            link: "#TODO",
+          },
+          {
+            text: "Light Account",
+            link: "#TODO",
+          },
+          {
+            text: "Multi-Owner Light Account",
+            link: "#TODO",
+          },
+        ],
+      },
+      {
+        text: "Alchemy enhanced APIs",
+        collapsed: false,
+        items: [
+          {
+            text: "Get account NFTs",
+            link: "#TODO",
+          },
+          {
+            text: "Get account tokens",
+            link: "#TODO",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    text: "React components",
+    items: [
+      { text: "createConfig", link: "/react/createConfig" },
+      { text: "SSR", link: "/react/ssr" },
+      { text: "Auth Modal", link: "#TODO" },
+    ],
+  },
+  {
+    text: "React hooks",
+    items: [
+      { text: "createConfig", link: "/react/createConfig" },
+      { text: "SSR", link: "/react/ssr" },
+      { text: "useAuthenticate", link: "/react/useAuthenticate" },
+      {
+        text: "useSmartAccountClient",
+        link: "/react/useSmartAccountClient",
+      },
+      { text: "useClientActions", link: "/react/useClientActions" },
+      { text: "useAccount", link: "/react/useAccount" },
+      { text: "useSigner", link: "/react/useSigner" },
+      { text: "useSignerStatus", link: "/react/useSignerStatus" },
+      { text: "useUser", link: "/react/useUser" },
+      { text: "useBundlerClient", link: "/react/useBundlerClient" },
+      { text: "useAddPasskey", link: "/react/useAddPasskey" },
+      { text: "useLogout", link: "/react/useLogout" },
+      { text: "useExportAccount", link: "/react/useExportAccount" },
+      { text: "useSignMessage", link: "/react/useSignMessage" },
+      { text: "useSignTypedData", link: "/react/useSignTypedData" },
+      { text: "useSendUserOperation", link: "/react/useSendUserOperation" },
+      {
+        text: "useDropAndReplaceUserOperation",
+        link: "/react/useDropAndReplaceUserOperation",
+      },
+      {
+        text: "useWaitForUserOperationTransaction",
+        link: "/react/useWaitForUserOperationTransaction",
+      },
+      { text: "useSendTransaction", link: "/react/useSendTransaction" },
+      { text: "useSendTransactions", link: "/react/useSendTransactions" },
+      { text: "useChain", link: "/react/useChain" },
+    ],
+  },
+];
diff --git a/site/sidebar/signer.ts b/site/sidebar/signer.ts
new file mode 100644
index 0000000000..cde8954d4b
--- /dev/null
+++ b/site/sidebar/signer.ts
@@ -0,0 +1,11 @@
+import { SidebarItem } from "vocs";
+
+export const signerSidebar: SidebarItem[] = [
+  {
+    text: "Overview",
+    items: [
+      { text: "Introduction", link: "/signer/overview" },
+      { text: "Getting started", link: "#TODO" },
+    ],
+  },
+];
diff --git a/site/sidebar/smart-contracts.ts b/site/sidebar/smart-contracts.ts
new file mode 100644
index 0000000000..bec2871969
--- /dev/null
+++ b/site/sidebar/smart-contracts.ts
@@ -0,0 +1,11 @@
+import { SidebarItem } from "vocs";
+
+export const smartContractsSidebar: SidebarItem[] = [
+  {
+    text: "Overview",
+    items: [
+      { text: "Introduction", link: "/infra/overview" },
+      { text: "Getting started", link: "#TODO" },
+    ],
+  },
+];
diff --git a/site/vocs.config.tsx b/site/vocs.config.tsx
index c76bb9abe6..83003f8fbf 100644
--- a/site/vocs.config.tsx
+++ b/site/vocs.config.tsx
@@ -1,9 +1,10 @@
 import { defineConfig } from "vocs";
-import { aaAccountsSidebar } from "./sidebar/aa-accounts.js";
-import { aaAlchemySidebar } from "./sidebar/aa-alchemy.js";
-import { aaCoreSideBar } from "./sidebar/aa-core.js";
-import { aaEthersSidebar } from "./sidebar/aa-ethers.js";
-import { aaSignersSidebar } from "./sidebar/aa-signers.js";
+import { coreSidebar } from "./sidebar/core.js";
+import { infraSidebar } from "./sidebar/infra.js";
+import { introSidebar } from "./sidebar/intro.js";
+import { reactSidebar } from "./sidebar/react.js";
+import { signerSidebar } from "./sidebar/signer.js";
+import { smartContractsSidebar } from "./sidebar/smart-contracts.js";
 
 const pkg = require("../lerna.json");
 
@@ -47,346 +48,73 @@ export default defineConfig({
     </>
   ),
   topNav: [
-    { text: "Docs", link: "/getting-started/introduction" },
+    { text: "React", link: "/react/overview" },
+    { text: "Core", link: "/core/overview" },
     {
-      text: "Examples",
-      link: "https://github.com/alchemyplatform/aa-sdk/tree/main/examples",
-    },
-    {
-      text: pkg.version,
-      items: [
-        {
-          text: "Migrating to 3.x.x",
-          link: "/migration-guides/migrating-to-v3",
-        },
-        {
-          text: "Changelog",
-          link: "https://github.com/alchemyplatform/aa-sdk/blob/main/CHANGELOG.md",
-        },
-        {
-          text: "Contributing",
-          link: "https://github.com/alchemyplatform/aa-sdk/blob/main/CONTRIBUTING.md",
-        },
-      ],
-    },
-  ],
-  sidebar: [
-    {
-      text: "Getting started",
-      items: [
-        {
-          text: "Overview",
-          link: "/getting-started/overview",
-        },
-        {
-          text: "Quick start app",
-          items: [
-            { text: "Demo", link: "/getting-started/introduction" },
-            {
-              text: "Run locally",
-              link: "/getting-started/run-locally",
-            },
-            {
-              text: "Walkthrough",
-              link: "/getting-started/walkthrough",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      text: "Using Alchemy Signer",
+      text: "More",
       items: [
         {
-          text: "Introduction",
-          link: "/signers/alchemy-signer/introduction",
-        },
-        {
-          text: "Passkey signup",
-          link: "/signers/alchemy-signer/passkey-signup",
+          text: "Infra",
+          link: "/infra/overview",
         },
         {
-          text: "Passkey authentication",
-          link: "/signers/alchemy-signer/passkey-auth",
+          text: "Signer",
+          link: "/signer/overview",
         },
         {
-          text: "User sessions",
-          link: "/signers/alchemy-signer/manage-user-sessions",
-        },
-        {
-          text: "Export private key",
-          link: "/signers/alchemy-signer/export-private-key",
+          text: "Smart Contracts",
+          link: "/smart-contracts/overview",
         },
       ],
     },
     {
-      text: "Using smart accounts",
+      text: "SDK Reference",
       items: [
+        { text: "@account-kit/react", link: "/reference/account-kit/react" },
+        { text: "@account-kit/core", link: "/reference/account-kit/core" },
+        { text: "@account-kit/infra", link: "/reference/account-kit/infra" },
+        { text: "@account-kit/signer", link: "/reference/account-kit/signer" },
         {
-          text: "Send user operations",
-          link: "/using-smart-accounts/send-user-operations",
-        },
-        {
-          text: "Batch user operations",
-          link: "/using-smart-accounts/batch-user-operations",
-        },
-        {
-          text: "Sponsor gas",
-          collapsed: false,
-          items: [
-            {
-              text: "Use the Gas Manager",
-              link: "/using-smart-accounts/sponsoring-gas/gas-manager",
-            },
-            {
-              text: "Check eligibility",
-              link: "/using-smart-accounts/sponsoring-gas/checking-eligibility",
-            },
-          ],
-        },
-        {
-          text: "Simulate user operations",
-          link: "/using-smart-accounts/simulate-user-operations",
-        },
-        {
-          text: "Session keys",
-          collapsed: false,
-          items: [
-            {
-              text: "Overview",
-              link: "/using-smart-accounts/session-keys/",
-            },
-            {
-              text: "Getting started",
-              link: "/using-smart-accounts/session-keys/getting-started",
-            },
-            {
-              text: "Supported permissions",
-              link: "/using-smart-accounts/session-keys/supported-permissions",
-            },
-          ],
-        },
-        {
-          text: "Transfer ownership",
-          collapsed: false,
-          items: [
-            {
-              text: "Modular Account",
-              link: "/using-smart-accounts/transfer-ownership/modular-account",
-            },
-            {
-              text: "Light Account",
-              link: "/using-smart-accounts/transfer-ownership/light-account",
-            },
-            {
-              text: "Multi-Owner Light Account",
-              link: "/using-smart-accounts/transfer-ownership/multi-owner-light-account",
-            },
-          ],
-        },
-        {
-          text: "Alchemy enhanced APIs",
-          collapsed: false,
-          items: [
-            {
-              text: "Get account NFTs",
-              link: "/using-smart-accounts/enhanced-apis/nft",
-            },
-            {
-              text: "Get account tokens",
-              link: "/using-smart-accounts/enhanced-apis/token",
-            },
-          ],
+          text: "@account-kit/smart-contracts",
+          link: "/reference/account-kit/smart-contracts",
         },
+        { text: "@aa-sdk/core", link: "/reference/aa-sdk/core" },
+        { text: "@aa-sdk/ethers", link: "/reference/aa-sdk/ethers" },
       ],
     },
     {
-      text: "React Hooks",
-      items: [
-        { text: "Overview", link: "/react/overview" },
-        { text: "SSR", link: "/react/ssr" },
-        { text: "createConfig", link: "/react/createConfig" },
-        { text: "useAuthenticate", link: "/react/useAuthenticate" },
-        { text: "useSmartAccountClient", link: "/react/useSmartAccountClient" },
-        { text: "useClientActions", link: "/react/useClientActions" },
-        { text: "useAccount", link: "/react/useAccount" },
-        { text: "useSigner", link: "/react/useSigner" },
-        { text: "useSignerStatus", link: "/react/useSignerStatus" },
-        { text: "useUser", link: "/react/useUser" },
-        { text: "useBundlerClient", link: "/react/useBundlerClient" },
-        { text: "useAddPasskey", link: "/react/useAddPasskey" },
-        { text: "useLogout", link: "/react/useLogout" },
-        { text: "useExportAccount", link: "/react/useExportAccount" },
-        { text: "useSignMessage", link: "/react/useSignMessage" },
-        { text: "useSignTypedData", link: "/react/useSignTypedData" },
-        { text: "useSendUserOperation", link: "/react/useSendUserOperation" },
-        {
-          text: "useDropAndReplaceUserOperation",
-          link: "/react/useDropAndReplaceUserOperation",
-        },
-        {
-          text: "useWaitForUserOperationTransaction",
-          link: "/react/useWaitForUserOperationTransaction",
-        },
-        { text: "useSendTransaction", link: "/react/useSendTransaction" },
-        { text: "useSendTransactions", link: "/react/useSendTransactions" },
-        { text: "useChain", link: "/react/useChain" },
-      ],
-    },
-    {
-      text: "Choosing a smart account",
-      items: [
-        { text: "Introduction", link: "/smart-accounts/" },
-        {
-          text: "Modular Account",
-          collapsed: false,
-          items: [
-            { text: "Introduction", link: "/smart-accounts/modular-account/" },
-            {
-              text: "Getting started",
-              link: "/smart-accounts/modular-account/getting-started",
-            },
-            {
-              text: "Deployments",
-              link: "/smart-accounts/modular-account/deployments",
-            },
-            {
-              text: "Upgrading to Modular Account",
-              link: "/smart-accounts/modular-account/upgrade-la-to-ma",
-            },
-            {
-              text: "Multisig Plugin",
-              collapsed: true,
-              items: [
-                {
-                  text: "Introduction",
-                  link: "/smart-accounts/modular-account/multisig-plugin/",
-                },
-                {
-                  text: "Getting started",
-                  link: "/smart-accounts/modular-account/multisig-plugin/getting-started",
-                },
-                {
-                  text: "Technical details",
-                  link: "/smart-accounts/modular-account/multisig-plugin/technical-details",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          text: "Light Account",
-          collapsed: false,
-          items: [
-            { text: "Overview", link: "/smart-accounts/light-account/" },
-            {
-              text: "Getting started",
-              link: "/smart-accounts/light-account/getting-started",
-            },
-            {
-              text: "Deployments",
-              link: "/smart-accounts/light-account/deployments",
-            },
-          ],
-        },
-        {
-          text: "Custom accounts",
-          collapsed: true,
-          items: [
-            {
-              text: "Use your own",
-              link: "/smart-accounts/custom/using-your-own",
-            },
-            {
-              text: "Contribute your account",
-              link: "/smart-accounts/custom/contributing",
-            },
-          ],
-        },
-        { text: "Gas benchmarks", link: "/smart-accounts/gas-benchmarks" },
-      ],
-    },
-    {
-      text: "Extending smart accounts",
-      items: [
-        {
-          text: "Install plugins",
-          link: "/extending-smart-accounts/install-plugins",
-        },
-        {
-          text: "Get installed plugins",
-          link: "/extending-smart-accounts/get-installed-plugins",
-        },
-      ],
-    },
-    {
-      text: "Custom signers",
+      text: pkg.version,
       items: [
-        { text: "Introduction", link: "/signers/choosing-a-signer" },
         {
-          text: "Third-party signers",
-          collapsed: true,
-          items: [
-            { text: "Magic", link: "/signers/guides/magic" },
-            { text: "Web3Auth", link: "/signers/guides/web3auth" },
-            { text: "Turnkey", link: "/signers/guides/turnkey" },
-            { text: "Privy", link: "/signers/guides/privy" },
-            { text: "Dynamic", link: "/signers/guides/dynamic" },
-            { text: "Fireblocks", link: "/signers/guides/fireblocks" },
-            { text: "Portal", link: "/signers/guides/portal" },
-            { text: "Capsule", link: "/signers/guides/capsule" },
-            { text: "Lit Protocol", link: "/signers/guides/lit" },
-            {
-              text: "Particle Network",
-              link: "/signers/guides/particle-network",
-            },
-            { text: "Arcana Auth", link: "/signers/guides/arcana-auth" },
-            { text: "Dfns", link: "/signers/guides/dfns" },
-            { text: "WalletKit", link: "/signers/guides/walletkit" },
-            { text: "Passport", link: "/signers/guides/passport" },
-          ],
+          text: "Migrating to 4.x.x",
+          link: "/migration-guide",
         },
-        { text: "EOA signer", link: "/signers/eoa" },
         {
-          text: "Build your own",
-          link: "/signers/guides/custom-signer",
+          text: "Changelog",
+          link: "https://github.com/alchemyplatform/aa-sdk/blob/main/CHANGELOG.md",
         },
         {
-          text: "Contribute your signer",
-          link: "/signers/contributing",
+          text: "Contributing",
+          link: "https://github.com/alchemyplatform/aa-sdk/blob/main/CONTRIBUTING.md",
         },
       ],
     },
-
-    {
-      text: "Custom infra",
-      items: [
-        { text: "Use custom bundler", link: "/third-party/bundlers" },
-        { text: "Use custom paymaster", link: "/third-party/paymasters" },
-      ],
-    },
-    {
-      text: "aa-sdk packages",
-      items: [
-        { text: "Overview", link: "/packages/" },
-        aaCoreSideBar,
-        aaAlchemySidebar,
-        aaAccountsSidebar,
-        aaSignersSidebar,
-        aaEthersSidebar,
-      ],
-    },
-    {
-      text: "Resources",
-      items: [
-        { text: "FAQs", link: "/resources/faqs" },
-        { text: "React Native", link: "/resources/react-native" },
-        { text: "Terms", link: "/resources/terms" },
-        { text: "Types", link: "/resources/types" },
-        { text: "Contact us", link: "/resources/contact-us" },
-      ],
-    },
   ],
+  sidebar: {
+    "/react": reactSidebar,
+    "/core": coreSidebar,
+    "/infra": infraSidebar,
+    "/signer": signerSidebar,
+    "/smart-contracts": smartContractsSidebar,
+    "/reference/account-kit/react": [],
+    "/reference/account-kit/core": [],
+    "/reference/account-kit/infra": [],
+    "/reference/account-kit/signer": [],
+    "/reference/account-kit/smart-contracts": [],
+    "/reference/aa-sdk/core": [],
+    "/reference/aa-sdk/ethers": [],
+    "/intro": introSidebar,
+  },
   socials: [
     { icon: "github", link: "https://github.com/alchemyplatform/aa-sdk" },
   ],