More course page crap

Author: adamwathan

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

@@ -7,12 +7,13 @@ import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
 
 export function SignUpForm() {
   return (
-    <div className="flex">
+    <form className="flex" method="POST" action="https://app.kit.com/forms/7712177/subscriptions">
       <div className="flex items-center rounded-full bg-white">
         <input
           autoFocus
           type="email"
           id="email"
+          name="email_address"
           className="w-3xs rounded-full bg-transparent px-4 py-2 text-sm/6 text-gray-950 focus:outline-none"
           placeholder="Enter your email"
           aria-label="Email address"
@@ -21,12 +22,12 @@ export function SignUpForm() {
           Sign up
         </button>
       </div>
-    </div>
+    </form>
   );
 }
 
 export function HeroActions() {
-  let [signUpState, setSignUpState] = useState<"closed" | "open" | "subscribed">("closed");
+  let [signUpState, setSignUpState] = useState<"closed" | "open">("closed");
   let input = useRef<HTMLInputElement>(null);
   let getCourseButton = useRef(null);
   let containerRef = useRef<HTMLInputElement>(null);
@@ -48,7 +49,7 @@ export function HeroActions() {
           ref={containerRef}
           layout
           transition={{ duration: signUpState === "open" ? 0.1 : 0.2, ease: "circOut" }}
-          className="relative flex items-center bg-white data-[state=open]:overflow-hidden data-[state=subscribed]:bg-gray-950"
+          className="relative flex items-center bg-white data-[state=open]:overflow-hidden"
           style={{ borderRadius: 20 }}
           data-state={signUpState}
         >
@@ -124,33 +125,6 @@ export function HeroActions() {
                 Get the free course &rarr;
               </motion.button>
             )}
-            {signUpState === "subscribed" && (
-              <motion.button
-                onClick={() => setSignUpState("closed")}
-                layout
-                transition={{ duration: 0.3 }}
-                className="inline-flex flex-nowrap items-baseline gap-1.5 self-center rounded-full bg-white/25 px-4 py-2 pl-3 text-sm/6 font-semibold whitespace-nowrap text-white hover:bg-white/30"
-                initial={{
-                  opacity: 0,
-                }}
-                animate={{
-                  opacity: 1,
-                }}
-                exit={{
-                  opacity: 0,
-                }}
-              >
-                <svg width={20} height={20} fill="none" className="self-center stroke-white">
-                  <path d="M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                  <path
-                    d="M13.91 9.67a.37.37 0 0 1 0 .66l-5.6 3.11a.38.38 0 0 1-.56-.33V6.9c0-.29.3-.47.56-.33l5.6 3.11Z"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                You're in
-              </motion.button>
-            )}
           </AnimatePresence>
         </motion.div>
       </div>
@@ -186,8 +160,8 @@ export function HeroActions() {
       <Dialog open={isDialogOpen} onClose={() => setIsDialogOpen(false)}>
         <DialogBackdrop className="fixed inset-0 bg-black/85" />
         <div className="fixed inset-0 grid place-items-center">
-          <DialogPanel>
-            <video controls className="rounded-2xl">
+          <DialogPanel className="max-w-7xl p-8">
+            <video autoPlay controls className="aspect-video rounded-2xl">
               <source src="https://assets.tailwindcss.com/build-uis-that-dont-suck/intro.mp4" type="video/mp4" />
             </video>
           </DialogPanel>

src/app/course/confirmed/page.tsx

@@ -0,0 +1,35 @@
+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>
+  );
+}
+
+export default async function Course() {
+  return (
+    <div className="dark relative grid min-h-dvh grid-cols-1 place-items-center px-4 py-8 sm:px-0">
+      <div>
+        <GridContainer>
+          <div className="flex justify-center p-2">
+            <Logo className="h-7" />
+          </div>
+        </GridContainer>
+        <div className="mt-6 space-y-4">
+          <GridContainer>
+            <h1 className="text-center text-5xl tracking-tighter text-balance text-white lg:text-8xl">You’re in!</h1>
+          </GridContainer>
+          <GridContainer>
+            <p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-gray-400">
+              Look for the first video in your inbox any minute, and check again every morning for the next one in the
+              series.
+            </p>
+          </GridContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/course/page.tsx

@@ -14,12 +14,15 @@ export default async function Course() {
   return (
     <div className="dark relative px-4 py-8 sm:px-0">
       <div>
-        <div className="absolute inset-x-0 top-0 -z-10 aspect-video opacity-75">
+        <div className="absolute inset-x-0 top-0 left-1/5 -z-10 aspect-video opacity-50">
           <video autoPlay loop muted playsInline className="absolute size-full object-right">
-            <source src="https://assets.tailwindcss.com/course-demos/background-video.mp4" type="video/mp4" />
+            <source
+              src="https://assets.tailwindcss.com/build-uis-that-dont-suck/background-loop.mp4"
+              type="video/mp4"
+            />
             Your browser does not support the video tag.
           </video>
-          <div className="absolute inset-0 size-full bg-linear-to-r from-gray-950 from-30%"></div>
+          <div className="absolute inset-0 size-full bg-linear-to-r from-gray-950 to-75%"></div>
           <div className="absolute inset-0 size-full bg-linear-to-t from-gray-950 to-50%"></div>
         </div>
         <GridContainer>

src/app/course/subscribed/page.tsx

@@ -0,0 +1,38 @@
+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>
+  );
+}
+
+export default async function Course() {
+  return (
+    <div className="dark relative grid min-h-dvh grid-cols-1 place-items-center px-4 py-8 sm:px-0">
+      <div>
+        <GridContainer>
+          <div className="flex justify-center p-2">
+            <Logo className="h-7" />
+          </div>
+        </GridContainer>
+        <div className="mt-6 space-y-4">
+          <GridContainer>
+            <h1 className="text-center text-5xl tracking-tighter text-balance text-white lg:text-8xl">
+              Check your email.
+            </h1>
+          </GridContainer>
+          <GridContainer>
+            <p className="mx-auto max-w-xl text-center text-lg/7 font-medium text-pretty text-gray-400">
+              You should get a confirmation email any minute —{" "}
+              <strong className="font-medium text-white">open it up</strong> and{" "}
+              <strong className="font-medium text-white">confirm your email</strong> and I'll send you the first video.
+            </p>
+          </GridContainer>
+        </div>
+      </div>
+    </div>
+  );
+}