Add Modular Contracts docs

src/app/contracts/build/modular-contracts/page.mdx

@@ -0,0 +1,75 @@
+import { DocImage, Callout } from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import modularContractsAnalogyImage from "./assets/modular-contracts-analogy.png";
+import modularContractsFlowImage from "./assets/modular-contracts-flow.png";
+import { createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	title: "thirdweb Modular Contracts",
+	description:
+		"Build and deploy smart contracts for which you can add, remove or upgrade the exact parts you want, even after deployment.",
+	image: {
+		title: "thirdweb Modular Contracts",
+		icon: "solidity",
+	},
+});
+
+# Modular Contracts
+
+**Modular Contracts** are contracts for which you can add, remove, or upgrade the exact parts you want.
+
+## Getting started
+
+To get started, install the `modular-contracts` package in your existing Solidity project:
+
+<Tabs defaultValue="forge">
+
+<TabsList>
+	<TabsTrigger value="forge">Forge</TabsTrigger>
+</TabsList>
+
+<TabsContent value="forge">
+```bash
+forge install https://github.com/thirdweb-dev/modular-contracts
+```
+</TabsContent>
+<TabsContent value="hardhat">
+```bash
+npm i @thirdweb-dev/contracts
+```
+</TabsContent>
+</Tabs>
+
+A modular contract is made up of [1] a **Core** and [2] **Extension** contracts. Learn more about these, below.
+
+Follow this [end-to-end guide](https://blog.thirdweb.com/p/d45e40f7-e8f3-4bcd-be6b-f800beff963f/)
+to learn how to write, deploy and use your own custom modular contract.
+
+## Background
+
+A modular contract is made up of two kinds of contracts:
+
+1. **Core** contract: the foundational API that can be customized by installing Extensions.
+2. **Extension** contract: implements a set of functionality that is enabled on a Core when it is installed.
+
+<Callout variant="info">
+	As an analogy, think of the robot, below. The torso is the *Core* to which you
+	attach/detach *Extensions*. 
+
+    The torso has a particular shape and exposes sockets at fixed places -- all of which determine how extensions will be attached to it. Similarly,
+    a Core smart contract has a fixed API that determines what Extensions are compatible for installation.
+
+    The *Extensions* themselves e.g. a leg, arm, head, etc. give the robot (i.e. the modular contract as a whole) its various capabilities.
+
+    <DocImage src={modularContractsAnalogyImage} className="w-[500px]" />
+
+</Callout>
+
+Installing an Extension in a Core customizes the Core’s behaviour in two ways:
+
+1. New functions become callable on the Core contract (via its [fallback function](https://docs.soliditylang.org/en/v0.8.26/contracts.html#fallback-function)).
+2. Core contract’s fixed functions make callback function calls into the Extension.
+
+<DocImage src={modularContractsFlowImage} />
+
+You can read about the full technical design details of Modular Contracts in its [design document](/contracts/design-docs/modular-contracts).

src/app/contracts/sidebar.tsx

@@ -178,6 +178,11 @@ export const sidebar: SideBar = {
 					name: "Get Started",
 					href: `${buildSlug}/get-started`,
 				},
+				// modular contracts
+				{
+					name: "Modular Contracts",
+					href: `${buildSlug}/modular-contracts`,
+				},
 				// base contracts
 				{
 					name: "Base Contracts",
@@ -613,6 +618,10 @@ export const sidebar: SideBar = {
 				{
 					name: "Design Docs",
 					links: [
+						{
+							name: "Modular Contracts",
+							href: `${designDocs}/modular-contracts`,
+						},
 						{
 							name: "Drop",
 							href: `${designDocs}/drop`,