Re-jigged the landing and getting started pages

docs/components/Feature.tsx

@@ -11,23 +11,63 @@ const DetailedFeatureInner = (props: { feature: FeatureProps["feature"] }) => {
   const { Icon, name, description } = props.feature;
   return (
     <>
+      <div className="bg-circle-pink"></div>
+      <div className="bg-circle-blue"></div>
       <div className="inline-flex items-center space-x-3">
-        <Icon
-          className="h-8 w-8 dark:text-white  rounded-full p-1.5 dark:bg-white dark:bg-opacity-10 bg-black bg-opacity-5 text-black block"
-          aria-hidden="true"
-        />
-        <h3 className="m-0 text-lg font-medium dark:text-white">{name}</h3>
+        <div className="flex items-center justify-center bg-black rounded-full bg-opacity-5 w-9 h-9 icon-circle">
+          <Icon
+            className="h-8 w-8 dark:text-white flex-shrink-0 rounded-full p-1.5 text-black block dark:stroke-[url(#pink-gradient)]"
+            aria-hidden="true"
+          />
+        </div>
+        <h3 className="m-0 text-lg font-semibold leading-6 tracking-tighter text-gray-900 dark:text-white">
+          {name}
+        </h3>
       </div>
       <div>
-        <p className="mt-2 text-base font-medium text-gray-500 dark:text-gray-400">
+        <p className="mt-2 text-base font-medium leading-7 text-gray-500 dark:text-gray-400">
           {description}
         </p>
       </div>
+      <style jsx global>{`
+        html.dark .icon-circle {
+          background: linear-gradient(180deg, rgba(50, 134, 241, 0.2) 0%, rgba(195, 58, 195, 0.2) 100%);
+        }
+        .bg-circle-blue {
+          position: absolute;
+          width: 180px;
+          height: 180px;
+          top: 0;
+          left: calc(25% - 180px / 2); 
+          top: -90px;
+          z-index: -1;         
+
+          mix-blend-mode: normal;
+          filter: blur(90px);
+          opacity: 0.3;
+          background: linear-gradient(180deg, #4EBFFF 0%, #BD69FF 100%);
+        }
+
+        .bg-circle-pink {
+          position: absolute;
+          width: 180px;
+          height: 180px;
+          top: 0;
+          left: calc(75% - 180px / 2); 
+          top: -90px;
+          z-index: -1;         
+
+          background: linear-gradient(180deg, #FF3358 0%, #FF4FD8 100%);
+          mix-blend-mode: normal;
+          filter: blur(90px);
+          opacity: 0.3;
+        }
+      `}</style>
     </>
   );
 };
 
-const featureWrapperClasses = `block p-10 bg-white shadow-lg rounded-xl dark:bg-opacity-5 no-underline text-black dark:text-white`;
+const featureWrapperClasses = `relative block overflow-hidden p-10 bg-white shadow-lg rounded-xl dark:bg-opacity-5 no-underline text-black dark:text-white`;
 
 export const DetailedFeatureLink = (props: {
   href: string;

docs/components/Icons.tsx

@@ -21,7 +21,7 @@ export const TailwindIcon: IconType = (props) => {
   );
 };
 
-export const GitHubIcon: IconType = ({ height = 28 }) => {
+export const GitHubIcon: IconType = ({ height = 28, ...props }) => {
   return (
     <svg
       height={height}

docs/components/QuickStart.tsx

@@ -1,4 +1,10 @@
-import { ServerIcon, SparklesIcon } from "@heroicons/react/outline";
+import {
+  CloudDownloadIcon,
+  CloudUploadIcon,
+  LightningBoltIcon,
+  ServerIcon,
+  SparklesIcon,
+} from "@heroicons/react/outline";
 import { DetailedFeatureLink } from "./Feature";
 
 export const QuickStartArea = () => {
@@ -7,20 +13,61 @@ export const QuickStartArea = () => {
       <DetailedFeatureLink
         feature={{
           Icon: SparklesIcon,
-          description: `Build a
-          brand-new monorepo powered by Turborepo.`,
+          description: `Build a brand-new monorepo powered by Turborepo.`,
           name: "Create a new monorepo",
         }}
         href="/docs/getting-started/create-new"
       ></DetailedFeatureLink>
       <DetailedFeatureLink
         feature={{
           Icon: ServerIcon,
-          description: `Incrementally add Tuborepo to your existing monorepo codebase. `,
+          description: `Incrementally add Turborepo to your existing monorepo codebase.`,
           name: "Add to existing monorepo",
         }}
         href="/docs/getting-started/existing-monorepo"
       ></DetailedFeatureLink>
     </div>
   );
 };
+
+// const CloudUploadIcon = () => {
+//   return (
+//     <svg
+//       xmlns="http://www.w3.org/2000/svg"
+//       fill="none"
+//       viewBox="0 0 24 24"
+//       strokeWidth={1.5}
+//       className="w-6 h-6"
+//     >
+//       <path
+//         strokeLinecap="round"
+//         strokeLinejoin="round"
+//         stroke="url(#gradient)"
+//         d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
+//       />
+//     </svg>
+//   );
+// };
+
+export const LearnMoreArea = () => {
+  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">
+      <DetailedFeatureLink
+        feature={{
+          Icon: LightningBoltIcon,
+          description: `The way you run your tasks is probably not optimized. Turborepo speeds them up with smart scheduling, minimising idle CPU's.`,
+          name: "Maximum Multitasking",
+        }}
+        href="/docs/core-concepts/running-tasks"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: CloudUploadIcon,
+          description: `Turborepo remembers the output of any task you run - and can skip work that's already been done.`,
+          name: "Never do the same work twice",
+        }}
+        href="/docs/core-concepts/caching"
+      ></DetailedFeatureLink>
+    </div>
+  );
+};

docs/next.config.js

@@ -23,6 +23,11 @@ module.exports = withNextra({
         destination: "/docs/core-concepts/running-tasks",
         permanent: true,
       },
+      {
+        source: "/docs/getting-started",
+        destination: "/docs",
+        permanent: true,
+      },
       {
         source: "/discord{/}?",
         permanent: true,

docs/pages/_app.tsx

@@ -20,6 +20,25 @@ if (typeof window !== "undefined" && !("requestIdleCallback" in window)) {
 export default function Nextra({ Component, pageProps }: NextraAppProps) {
   return (
     <SSRProvider>
+      <>
+        {/**
+         * Globally defined svg linear gradient, for use in icons
+         */}
+        <svg height="0px" width="0px">
+          <defs>
+            <linearGradient
+              id="pink-gradient"
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="100%"
+            >
+              <stop offset="0%" stopColor="rgba(156, 81, 161, 1)" />
+              <stop offset="70%" stopColor="rgba(255, 30, 86, 1)" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </>
       <Component {...pageProps} />
     </SSRProvider>
   );

docs/pages/docs/_meta.json

@@ -1,5 +1,7 @@
 {
-  "index": "Introduction",
+  "index": {
+    "title": "Quickstart"
+  },
   "getting-started": "Getting Started",
   "core-concepts": "Core Concepts",
   "ci": "CI Recipes",

docs/pages/docs/core-concepts/_meta.json

@@ -1,4 +1,5 @@
 {
+  "why-turborepo": "Why Turborepo?",
   "running-tasks": "Running Tasks",
   "filtering": "Filtering Workspaces",
   "caching": "Caching",

docs/pages/docs/core-concepts/why-turborepo.mdx

@@ -0,0 +1,19 @@
+# Why Turborepo?
+
+## The problem
+
+Monorepos have many advantages - but **they struggle to scale**. Each workspace you add has its own test suite, its own linting and its own build process. A single monorepo might have **hundreds of tasks to perform**.
+
+## The solution
+
+**Turborepo solves your monorepo's scaling problem**. Our remote cache stores the result of all your tasks, meaning that **your CI never needs to do the same work twice**.
+
+Task scheduling can be difficult in a monorepo. Imagine `yarn build` needs to run before `yarn test`, across all your workspaces. Turborepo **can schedule your tasks for maximum speed**, across all available cores.
+
+Turborepo can be **adopted incrementally**. It uses the `package.json` scripts you've already written, the dependencies you've already declared, and a single `turbo.json` file. You can **use it with any package manager**, like `npm`, `yarn` or `pnpm`. You can add it to any monorepo in just a few minutes.
+
+## What turborepo is not
+
+Turborepo **doesn't handle package installation**. Tools like `npm`, `pnpm` or `yarn` already do that brilliantly. But they run tasks inefficiently, meaning slow CI builds.
+
+We recommend that **Turborepo runs your tasks**, and your favorite package manager installs your packages.

docs/pages/docs/index.mdx

@@ -1,39 +1,27 @@
 ---
-title: Documentation
-description: Turborepo is a high-performance build system for JavaScript and TypeScript codebases.
+title: Turborepo Quickstart
+description: Create your first monorepo or add Turborepo to an existing project.
 ---
 
-import { DocsFeatures } from "../../components/Features";
+import { QuickStartArea, LearnMoreArea } from "../../components/QuickStart";
+import { ExamplesArea } from "../../components/ExamplesArea";
 
-# Turborepo Documentation
+# Turborepo Quickstart
 
-<DocsFeatures detailed={false} />
+Turborepo is a smart **build system for JavaScript/TypeScript monorepos**: codebases containing multiple projects, often using multiple frameworks, in a single, unified code repository.
 
-Turborepo is a blazing fast build system for JavaScript/TypeScript _monorepos_: codebases containing multiple
-projects, often using multiple frameworks, in a single, unified
-code repository.
+Unlike other build systems, Turborepo is designed to be **incrementally adopted**, so you can add it to most codebases in a few minutes.
 
-## The problem
-
-Monorepos have many advantages - but **they struggle to scale**. Each workspace you add has its own test suite, its own linting and its own build process. A single monorepo might have **hundreds of tasks to perform**.
-
-## The solution
-
-**Turborepo solves your monorepo's scaling problem**. Our remote cache stores the result of all your tasks, meaning that **your CI never needs to do the same work twice**.
-
-Task scheduling can be difficult in a monorepo. Imagine `yarn build` needs to run before `yarn test`, across all your workspaces. Turborepo **can schedule your tasks for maximum speed**, across all available cores.
-
-Turborepo can be **adopted incrementally**. It uses the `package.json` scripts you've already written, the dependencies you've already declared, and a single `turbo.json` file. You can **use it with any package manager**, like `npm`, `yarn` or `pnpm`. You can add it to any monorepo in just a few minutes.
+<QuickStartArea />
 
 ## Features
 
-- **Never do the same work twice**: Turborepo will remember the output of tasks you (or your CI) ran and skip work that's already been done.
-- **Optimized scheduling**: Execute tasks using every core at maximum parallelism without wasting idle CPUs.
-- **Remote caching**: Share a remote cache across your organization for faster builds on CI/CD.
-- **Zero runtime overhead**: Turborepo doesn't interfere with your runtime code or touch your sourcemaps.
+Turborepo leverages advanced build system techniques to speed up development, **both on your local machine and your CI/CD**.
+
+<LearnMoreArea />
 
-## What turborepo is not
+## Examples
 
-Turborepo **doesn't handle package installation**. Tools like `npm`, `pnpm` or `yarn` already do that brilliantly. But they run tasks inefficiently, meaning slow CI builds.
+You can also clone a Turborepo starter repository to get a head start on your monorepo. For even more examples and starters, see the [Turborepo examples directory on GitHub](https://github.com/vercel/turborepo/tree/main/examples).
 
-We recommend that **Turborepo runs your tasks**, and your favorite package manager installs your packages.
+<ExamplesArea />