1 files changed, 28 insertions, 0 deletions

diff --git a/docs/components/HydroRollTRPGQuickstart.tsx b/docs/components/HydroRollTRPGQuickstart.tsx
new file mode 100644
index 0000000..2e17d41
--- /dev/null
+++ b/docs/components/HydroRollTRPGQuickstart.tsx
@@ -0,0 +1,28 @@
+import {
+  LightBulbIcon,
+  QuestionMarkCircleIcon,
+} from "@heroicons/react/outline";
+import { DetailedFeatureLink } from "./Feature";
+
+export const HydroRollTRPGQuickstartArea = () => {
+  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: QuestionMarkCircleIcon,
+          description: `Learn why we created Turbopack, and why we think it’s the future of bundling for the web.`,
+          name: "Why Turbopack?",
+        }}
+        href="/TRPG/docs/why-turbopack"
+      ></DetailedFeatureLink>
+      <DetailedFeatureLink
+        feature={{
+          Icon: LightBulbIcon,
+          description: `Learn about the innovative architecture that powers Turbopack’s speed improvements.`,
+          name: "Core Concepts",
+        }}
+        href="/TRPG/docs/core-concepts"
+      ></DetailedFeatureLink>
+    </div>
+  );
+};