1 files changed, 142 insertions, 0 deletions
diff --git a/docs/components/MonorepoHandbook.tsx b/docs/components/MonorepoHandbook.tsx
new file mode 100644
index 0000000..d7e2fe5
--- /dev/null
+++ b/docs/components/MonorepoHandbook.tsx
@@ -0,0 +1,142 @@
+import {
+  BanIcon,
+  ChatAlt2Icon,
+  CloudDownloadIcon,
+  CloudUploadIcon,
+  CodeIcon,
+  CubeIcon,
+  LibraryIcon,
+  PencilAltIcon,
+  ShareIcon,
+  ShieldExclamationIcon,
+  StarIcon,
+} from "@heroicons/react/outline";
+import React from "react";
+import { DetailedFeatureLink } from "./Feature";
+import { DockerIcon } from "./Icons";
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="grid grid-cols-1 mt-12 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:gap-x-8 lg:gap-y-12">
+      {children}
+    </div>
+  );
+};
+
+export const FundamentalsArea = () => {
+  return (
+    <Wrapper>
+      <DetailedFeatureLink
+        feature={{
+          Icon: CubeIcon,
+          description: `Understand how a monorepo compares to a polyrepo, and what problems it solves.`,
+          name: "What is a Monorepo?",
+        }}
+        href="/docs/handbook/what-is-a-monorepo"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: CloudDownloadIcon,
+          description: `Learn how to install and manage packages in your monorepo.`,
+          name: "Package Installation",
+        }}
+        href="/docs/handbook/package-installation"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: ChatAlt2Icon,
+          description:
+            "Understand how workspaces help you develop packages locally.",
+          name: "Workspaces",
+        }}
+        href="/docs/handbook/workspaces"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: LibraryIcon,
+          description:
+            "Step-by-step guide on migrating from a multi-repo to a monorepo.",
+          name: "Migrating to a Monorepo",
+        }}
+        href="/docs/handbook/migrating-to-a-monorepo"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: ShareIcon,
+          description:
+            "Learn how to share code easily using either internal or external packages.",
+          name: "Sharing Code",
+        }}
+        href="/docs/handbook/sharing-code"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: BanIcon,
+          description:
+            "Learn the common monorepo pain points, and how to fix them.",
+          name: "Troubleshooting",
+        }}
+        href="/docs/handbook/troubleshooting"
+      ></DetailedFeatureLink>
+    </Wrapper>
+  );
+};
+
+export const TasksArea = () => {
+  return (
+    <Wrapper>
+      <DetailedFeatureLink
+        feature={{
+          Icon: PencilAltIcon,
+          description: `Learn how to set up your dev scripts using Turborepo.`,
+          name: "Development Tasks",
+        }}
+        href="/docs/handbook/dev"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: CodeIcon,
+          description:
+            "Get framework-specific guides for building your apps with Turborepo.",
+          name: "Building your App",
+        }}
+        href="/docs/handbook/building-your-app"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: ShieldExclamationIcon,
+          description:
+            "Learn how to share linting configs and co-ordinate tasks across your repo.",
+          name: "Linting",
+        }}
+        href="/docs/handbook/linting"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: StarIcon,
+          description: "Configure your integration or end-to-end tests easily.",
+          name: "Testing",
+        }}
+        href="/docs/handbook/testing"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: DockerIcon,
+          description:
+            "Make use of Turborepo's prune command to keep your Docker deploys fast.",
+          name: "Deploying with Docker",
+        }}
+        href="/docs/handbook/deploying-with-docker"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: CloudUploadIcon,
+          description:
+            "Bundle, version and publish packages to npm from your monorepo.",
+          name: "Publishing Packages",
+        }}
+        href="/docs/handbook/publishing-packages"
+      ></DetailedFeatureLink>
+    </Wrapper>
+  );
+};