WIP: CSS for video on quickstart (#687)

Co-authored-by: Rob Dominguez <[email protected]>

docs/getting-started/quickstart.mdx

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 2
 sidebar_label: Quickstart
-description: "Create your first supergraph in less than five minutes."
+description: "Create your first supergraph API with Hasura DDN in less than two minutes."
 keywords:
   - hasura ddn
   - graphql api
@@ -16,9 +16,22 @@ is_guide: true
 import Step from "@site/src/components/CodeStep";
 import InstallTheCli from "@site/docs/_install-the-cli.mdx";
 
-# Quickstart with DDN
-
-This guide will help you create a new cloud-deployed Hasura DDN supergraph in only a couple of minutes.
+# Quickstart a Supergraph API
+
+<div className="flex flex-col xl:flex-row gap-6 xl:gap-12">
+  <div className="xl:w-2/5">
+    <p className="text-[1.3rem]">In less than <em>2 minutes</em> and without needing a data source connection string, you can have a supergraph API deployed on Hasura DDN. 🚀</p>
+  </div>
+  <div className="xl:w-3/5">
+      <iframe
+         src="https://www.youtube.com/embed/OsO6TzwFb30"
+         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+         allowFullScreen
+         title="Quickstart video"
+         className="max-w-full"
+      />
+  </div>
+</div>
 
 ## Prerequisites
 

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ["./src/**/*.{js,jsx,ts,tsx}", "./docs/**/*.mdx"],
   theme: {
     extend: {},
   },