Add video

Author: adamwathan

src/app/course/page.tsx

@@ -5,36 +5,46 @@ import { HeroActions, SignUpForm } from "./call-to-action";
 function GridContainer({ children }: { children: React.ReactNode }) {
   return (
     <BaseContainer>
-      <div className="p-2">{children}</div>
+      <div className="px-0 py-2 sm:px-2">{children}</div>
     </BaseContainer>
   );
 }
 
 export default async function Course() {
   return (
-    <div className="dark py-8">
-      <GridContainer>
-        <div className="p-2">
-          <Logo className="h-7" />
+    <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">
+          <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" />
+            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-t from-gray-950 to-50%"></div>
         </div>
-      </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>
-          <h1 className="mt-2 text-5xl tracking-tighter text-balance text-white sm:text-8xl">
-            Build UIs that don't suck.
-          </h1>
-        </GridContainer>
-        <GridContainer>
-          <p className="max-w-2xl text-lg/7 font-medium text-gray-400">
-            <strong className="font-medium text-white">Short, tactical video lessons</strong> from the creator of
-            TailwindCSS, delivered directly to your inbox{" "}
-            <strong className="font-medium text-white">every day for a week</strong>.
-          </p>
-        </GridContainer>
-        <GridContainer>
-          <HeroActions />
+          <div className="p-2">
+            <Logo className="h-7" />
+          </div>
         </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>
+            <h1 className="mt-2 text-5xl tracking-tighter text-balance text-white sm:text-8xl">
+              Build UIs that don't suck.
+            </h1>
+          </GridContainer>
+          <GridContainer>
+            <p className="max-w-2xl text-lg/7 font-medium text-gray-400">
+              <strong className="font-medium text-white">Short, tactical video lessons</strong> from the creator of
+              TailwindCSS, delivered directly to your inbox{" "}
+              <strong className="font-medium text-white">every day for a week</strong>.
+            </p>
+          </GridContainer>
+          <GridContainer>
+            <HeroActions />
+          </GridContainer>
+        </div>
       </div>
       <div className="pt-14 pb-28">
         <div className="max-w-xl space-y-8 text-[0.9375rem]/7 text-gray-300">
@@ -66,7 +76,7 @@ export default async function Course() {
             well as the code so you can play with it yourself and adapt it for your own projects.
           </p>
         </div>
-        <div className="mt-32">
+        <div className="mt-8">
           <SignUpForm />
         </div>
       </div>