Add vercel-tutor template

.github/CODEOWNERS

@@ -2,14 +2,16 @@
 # https://help.github.com/en/articles/about-code-owners
 
 # Solutions Eng and Dev Rel are the default owners of everything
-* @okbel @lfades @goncy @dominiksipowicz @leerob @steven-tey @lpalmes
+* @okbel @lfades @goncy @dominiksipowicz @leerob @lpalmes
 
 # For examples that are a Monorepo we add the Turbo team and some members
 # from Solutions and Dev Rel
-solutions/monorepo @vercel/turbo-oss @goncy @lfades @leerob @steven-tey @lpalmes
-solutions/microfrontends @vercel/turbo-oss @goncy @lfades @leerob @steven-tey @lpalmes
-solutions/testing @vercel/turbo-oss @goncy @lfades @leerob @steven-tey @lpalmes
+solutions/monorepo @vercel/turbo-oss @goncy @lfades @leerob @lpalmes
+solutions/microfrontends @vercel/turbo-oss @goncy @lfades @leerob @lpalmes
+solutions/testing @vercel/turbo-oss @goncy @lfades @leerob @lpalmes
 
 # For the build output API the engineering team takes care of it.
 # A member of Solutions and Dev Rel is also added
 build-output-api @tootallnate @EndangeredMassa @lfades @leerob @lpalmes
+
+vercel-tutor @chibicode

vercel-tutor/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

vercel-tutor/README.md

@@ -0,0 +1 @@
+# Vercel Tutor

vercel-tutor/app/globals.css

@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+  --secondary: #454545;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+    --secondary: #878787;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

vercel-tutor/app/helpful-links/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import Image from "next/image";
+import vercelSvg from "@/app/vercel.svg";
+
+function Circle() {
+  return (
+    <svg
+      aria-hidden="true"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8Z"
+        stroke="var(--secondary)"
+        strokeWidth="1.5"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default function Home() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
+      <main className="flex flex-col gap-10 row-start-2 max-w-2xl w-full font-[family-name:var(--font-geist-sans)]">
+        <Image
+          className="invert dark:invert-0"
+          src={vercelSvg}
+          alt="Vercel logo"
+          width={50}
+          height={50}
+          priority
+        />
+        <div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
+          <h1 className="mb-6 font-semibold">
+            Let&apos;s ship things on Vercel.
+          </h1>
+          <ul>
+            <li className="flex gap-3 items-start">
+              <span className="inline-flex mt-[0.3rem]">
+                <Circle />
+              </span>
+              <span className="text-secondary">
+                Explore our plans and documentation to learn more.
+              </span>
+            </li>
+          </ul>
+        </div>
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="w-full rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
+            href="https://vercel.com/pricing?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View Plans and Pricing
+          </a>
+          <a
+            className="w-full rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent h-12"
+            href="https://vercel.com/docs?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read Documentation
+          </a>
+        </div>
+      </main>
+      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-secondary"
+          href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Go to Dashboard →
+        </a>
+      </footer>
+    </div>
+  );
+}

vercel-tutor/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+import "./globals.css";
+import React from "react";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Vercel Tutor",
+  description: "Get started with Vercel.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} antialiased`}>{children}</body>
+    </html>
+  );
+}

vercel-tutor/app/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import Image from "next/image";
+import { useState, useEffect } from "react";
+import vercelSvg from "@/app/vercel.svg";
+
+function Circle() {
+  return (
+    <svg
+      aria-hidden="true"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8Z"
+        stroke="var(--secondary)"
+        strokeWidth="1.5"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default function Home() {
+  const [nextUrl, setNextUrl] = useState("#");
+
+  useEffect(() => {
+    const host = window.location.hostname;
+
+    if (host !== "localhost") {
+      setNextUrl(
+        `https://vercel.com/vercel-tutor/step?origin=${encodeURIComponent(
+          host,
+        )}&stepName=smaller-triangle`,
+      );
+    }
+  }, []);
+
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
+      <main className="flex flex-col gap-10 row-start-2 max-w-2xl w-full font-[family-name:var(--font-geist-sans)]">
+        <Image
+          className="invert dark:invert-0"
+          src={vercelSvg}
+          alt="Vercel logo"
+          width={150}
+          height={150}
+          priority
+        />
+        <div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
+          <h1 className="mb-6 font-semibold">
+            Congratulations! You&apos;ve created your first production
+            deployment.
+          </h1>
+          <ul>
+            <li className="flex gap-3 items-start">
+              <span className="inline-flex mt-[0.3rem]">
+                <Circle />
+              </span>
+              <span className="text-secondary">
+                Next, let&apos;s try to improve this page. Maybe the triangle
+                logo is too big. To make it easy for you, we&apos;ve already
+                created a pull request to make the triangle smaller. Check it
+                out:
+              </span>
+            </li>
+          </ul>
+        </div>
+        <div className="flex flex-col gap-4">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
+            href={nextUrl}
+          >
+            View Pull Request
+          </a>
+          <a
+            className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
+            href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Go to Dashboard
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}