Dunno

Author: adamwathan

src/app/course/call-to-action.tsx

@@ -10,6 +10,7 @@ export function SignUpForm() {
     <form className="flex" method="POST" action="https://app.kit.com/forms/7712177/subscriptions">
       <div className="flex items-center rounded-full bg-white">
         <input
+          required
           autoFocus
           type="email"
           id="email"
@@ -19,7 +20,7 @@ export function SignUpForm() {
           aria-label="Email address"
         />
         <button className="mr-0.5 shrink-0 overflow-hidden rounded-full bg-gray-950 px-3 py-1.5 text-sm/6 font-semibold text-nowrap text-white hover:bg-gray-950/85">
-          Sign up
+          Get the course
         </button>
       </div>
     </form>
@@ -81,6 +82,7 @@ export function HeroActions() {
                 transition={{ duration: 0.1 }}
               >
                 <input
+                  required
                   autoFocus
                   ref={input}
                   onBlur={handleBlur}
@@ -153,7 +155,7 @@ export function HeroActions() {
                 strokeLinejoin="round"
               />
             </svg>
-            Watch intro video
+            Watch the first video
           </motion.button>
         )}
       </AnimatePresence>

src/app/course/confirmed/page.tsx

@@ -1,13 +1,5 @@
-import BaseContainer from "@/components/grid-container";
 import { Logo } from "@/components/logo";
-
-function GridContainer({ children }: { children: React.ReactNode }) {
-  return (
-    <BaseContainer>
-      <div className="px-0 py-2 sm:px-2">{children}</div>
-    </BaseContainer>
-  );
-}
+import { GridContainer } from "../layout";
 
 export default async function Course() {
   return (

src/app/course/layout.tsx

@@ -1,10 +1,18 @@
+import BaseContainer from "@/components/grid-container";
 import React from "react";
-import { Header } from "@/components/header";
+
+export function GridContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <BaseContainer>
+      <div className="px-0 py-2 sm:px-2">{children}</div>
+    </BaseContainer>
+  );
+}
 
 export default async function Layout({ children }: React.PropsWithChildren) {
   return (
     <div className="max-w-screen overflow-x-hidden [html:has(&)]:bg-gray-950">
-      <div className="grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center [--gutter-width:2.5rem] sm:grid-cols-[var(--gutter-width)_minmax(0,var(--breakpoint-2xl))_var(--gutter-width)]">
+      <div className="grid min-h-dvh grid-cols-1 grid-rows-[1fr_1px_auto_1px_auto] justify-center [--gutter-width:2.5rem] sm:grid-cols-[var(--gutter-width)_minmax(0,var(--breakpoint-xl))_var(--gutter-width)]">
         {/* Candy cane */}
         <div className="col-start-1 row-span-full row-start-1 hidden border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-white)]/10 sm:block"></div>
 

src/app/course/page.tsx

@@ -1,14 +1,20 @@
-import BaseContainer from "@/components/grid-container";
 import { Logo } from "@/components/logo";
 import { HeroActions, SignUpForm } from "./call-to-action";
+import { GridContainer } from "./layout";
 
-function GridContainer({ children }: { children: React.ReactNode }) {
-  return (
-    <BaseContainer>
-      <div className="px-0 py-2 sm:px-2">{children}</div>
-    </BaseContainer>
-  );
-}
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Build UIs that don't suck",
+  description: "A free videos series from the creator of Tailwind CSS.",
+  openGraph: {
+    type: "website",
+    title: "Build UIs that don't suck",
+    description: "A free video series from the creator of Tailwind CSS.",
+    images: "https://tailwindcss.com/api/og?path=/course",
+    url: "https://tailwindcss.com/course",
+  },
+};
 
 export default async function Course() {
   return (
@@ -32,7 +38,7 @@ export default async function Course() {
         </GridContainer>
         <div className="mt-20 flex flex-col gap-4 sm:mt-24">
           <GridContainer>
-            <p className="font-mono text-sm/6 tracking-wider text-gray-400 uppercase">5-day mini-course</p>
+            <p className="font-mono text-sm/6 tracking-wider text-gray-400 uppercase">5-part mini-course</p>
             <h1 className="mt-2 text-5xl tracking-tighter text-balance text-white sm:text-8xl">
               Build UIs that don’t suck.
             </h1>

src/app/course/subscribed/page.tsx

@@ -1,13 +1,5 @@
-import BaseContainer from "@/components/grid-container";
 import { Logo } from "@/components/logo";
-
-function GridContainer({ children }: { children: React.ReactNode }) {
-  return (
-    <BaseContainer>
-      <div className="px-0 py-2 sm:px-2">{children}</div>
-    </BaseContainer>
-  );
-}
+import { GridContainer } from "../layout";
 
 export default async function Course() {
   return (