vercel · jaredpalmer · Sep 1, 2022 · Aug 26, 2022 · Aug 26, 2022 · Aug 30, 2022
@@ -0,0 +1,45 @@
+import { DetailedFeatureLink } from "./Feature";
+import { GitHubIcon } from "./Icons";
+
+export const ExamplesArea = () => {
+  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: GitHubIcon,
+          description: `Minimal Turborepo example for learning the
+              fundamentals.`,
+          name: "Basic",
+        }}
+        href="https://github.com/vercel/turborepo/tree/main/examples/basic"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: GitHubIcon,
+          description:
+            "Unify your site's look and feel by sharing a design system across multiple apps.",
+          name: "Design System",
+        }}
+        href="https://github.com/vercel/turborepo/tree/main/examples/design-system"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: GitHubIcon,
+          description:
+            "Learn how to integrate with Tailwind, the popular CSS framework.",
+          name: "With Tailwind CSS",
+        }}
+        href="https://github.com/vercel/turborepo/tree/main/examples/with-tailwind"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: GitHubIcon,
+          description:
+            "Want to see a super-complex, kitchen-sink example? Includes multiple frameworks, both frontend and backend.",
+          name: "Kitchen Sink",
+        }}
+        href="https://github.com/vercel/turborepo/blob/main/examples/kitchen-sink"
+      ></DetailedFeatureLink>
+    </div>
+  );
+};
@@ -1,30 +1,55 @@
+import Link from "next/link";
 import type { Feature } from "../content/features";
 
 type FeatureProps = {
-  feature: Feature;
+  feature: Omit<Feature, "page">;
   // include feature description
   detailed?: boolean;
 };
 
+const DetailedFeatureInner = (props: { feature: FeatureProps["feature"] }) => {
+  const { Icon, name, description } = props.feature;
+  return (
+    <>
+      <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>
+      <div>
+        <p className="mt-2 text-base font-medium text-gray-500 dark:text-gray-400">
+          {description}
+        </p>
+      </div>
+    </>
+  );
+};
+
+const featureWrapperClasses = `block 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;
+  feature: FeatureProps["feature"];
+}) => {
+  return (
+    <Link href={props.href}>
+      <a className={featureWrapperClasses}>
+        <DetailedFeatureInner feature={props.feature}></DetailedFeatureInner>
+      </a>
+    </Link>
+  );
+};
+
 export default function Feature(props: FeatureProps) {
   const { feature, detailed = false } = props;
   const { Icon, name, description } = feature;
 
   if (detailed) {
     return (
-      <div className="p-10 bg-white shadow-lg rounded-xl dark:bg-opacity-5 ">
-        <div>
-          <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"
-            aria-hidden="true"
-          />
-        </div>
-        <div className="mt-4">
-          <h3 className="text-lg font-medium dark:text-white">{name}</h3>
-          <p className="mt-2 text-base font-medium text-gray-500 dark:text-gray-400">
-            {description}
-          </p>
-        </div>
+      <div className={featureWrapperClasses}>
+        <DetailedFeatureInner feature={feature} />
       </div>
     );
   }
@@ -33,7 +58,7 @@ export default function Feature(props: FeatureProps) {
     <div className="flex items-center space-x-4">
       <div>
         <Icon
-          className="block w-8 h-8"
+          className="block w-8 h-8 text-black dark:text-white"
           style={{ height: 24, width: 24 }}
           aria-hidden="true"
         />

@@ -0,0 +1,97 @@
+import React, { ComponentProps } from "react";
+
+type IconType = (props: ComponentProps<"svg">) => JSX.Element;
+
+export const TailwindIcon: IconType = (props) => {
+  return (
+    <svg
+      width="30"
+      height="18"
+      viewBox="0 0 30 18"
+      fill="currentColor"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15 0c-4 0-6.5 2-7.5 6 1.5-2 3.25-2.75 5.25-2.25 1.141.285 1.957 1.113 2.86 2.03C17.08 7.271 18.782 9 22.5 9c4 0 6.5-2 7.5-6-1.5 2-3.25 2.75-5.25 2.25-1.141-.285-1.957-1.113-2.86-2.03C20.42 1.728 18.718 0 15 0ZM7.5 9C3.5 9 1 11 0 15c1.5-2 3.25-2.75 5.25-2.25 1.141.285 1.957 1.113 2.86 2.03C9.58 16.271 11.282 18 15 18c4 0 6.5-2 7.5-6-1.5 2-3.25 2.75-5.25 2.25-1.141-.285-1.957-1.113-2.86-2.03C12.92 10.729 11.218 9 7.5 9Z"
+      ></path>
+    </svg>
+  );
+};
+
+export const GitHubIcon: IconType = ({ height = 28 }) => {
+  return (
+    <svg
+      height={height}
+      viewBox="2 2 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="currentColor"
+        d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"
+      />
+    </svg>
+  );
+};
+
+export const RectangleGroupIcon: IconType = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z"
+      />
+    </svg>
+  );
+};
+
+export const FaceSmileIcon: IconType = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"
+      />
+    </svg>
+  );
+};
+
+export const RectangleStackIcon: IconType = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,26 @@
+import { ServerIcon, SparklesIcon } from "@heroicons/react/outline";
+import { DetailedFeatureLink } from "./Feature";
+
+export const QuickStartArea = () => {
+  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: SparklesIcon,
+          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. `,
+          name: "Add to existing monorepo",
+        }}
+        href="/docs/getting-started/existing-monorepo"
+      ></DetailedFeatureLink>
+    </div>
+  );
+};
@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import React, { ComponentProps } from "react";
 import {
   ArrowsExpandIcon,
   BeakerIcon,
@@ -13,7 +13,7 @@ import {
 
 export type Feature = {
   name: string;
-  description: string;
+  description: React.ReactNode;
   Icon: (props: ComponentProps<"svg">) => JSX.Element;
   page: "all" | "home" | "docs";
 };