3 files changed, 57 insertions, 13 deletions
diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx
index 62467b6..6f858ba 100644
--- a/src/components/Frame.tsx
+++ b/src/components/Frame.tsx
@@ -6,6 +6,7 @@ type FrameType = {
   children?: ReactElement | ReactElement[];
   rainbow?: boolean;
   shadowClass?: string;
+  background?: string;
   width?: "fit" | "full" | "1/2" | "1/3";
 };
 
@@ -34,11 +35,14 @@ const Frame = ({
   children,
   width,
   shadowClass = "shadow-neoblack",
+  background = "bg-white",
 }: FrameType) => {
   const s = rainbow
     ? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow")
     : classes;
-  const cls = [...s, `${widthClasses[width]}`, shadowClass].join(" ");
+  const cls = [...s, `${widthClasses[width]}`, shadowClass, background].join(
+    " "
+  );
   return <div className={cls}>{children}</div>;
 };
 
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index a13fb23..f4471f3 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -4,6 +4,7 @@ import styles from "./styles.module.css";
 import CodeFrame from "../CodeFrame";
 import Button from "../Button";
 import CodeBlock from "@theme/CodeBlock";
+import Frame from "../Frame";
 
 type ShowCase =
   | { code: string; language: string }
@@ -81,13 +82,13 @@ const FeatureList: FeatureItem[] = [
 
 function Feature({ n, title, showcase, description, buttonText }: FeatureItem) {
   const k = n ?? 0;
-  const reverse = k % 2 === 0 ? "flex-row" : "flex-row-reverse";
+  const reverse = k % 2 === 0 ? "xl:flex-row" : "xl:flex-row-reverse";
   const showcaseComponent =
     "code" in showcase ? (
       // <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame>
       <CodeBlock
         showLineNumbers
-        className="!rounded-none !mb-0 "
+        className="!rounded-none !mb-0"
         language={showcase.language}
       >
         {showcase.code}
@@ -98,13 +99,15 @@ function Feature({ n, title, showcase, description, buttonText }: FeatureItem) {
   // <div className="bg-white -z-0 my-7 p-7 border-4 border-black"></div>
   return (
     <div
-      className={`bg-violet-200 shadow-neocyan border-4 border-black p-32 flex mx-32 gap-16 ${reverse}`}
+      className={`bg-violet-200 shadow-neocyan border-4 border-black xl:p-16 sm:p-8 p-0 flex sm:flex-col xl:flex-nowrap flex-wrap md:mx-32 sm:gap-16 gap-8 ${reverse}`}
     >
-      <div className="self-center bg-codeBg">{showcaseComponent}</div>
-      <div className="flex flex-col gap-4">
+      <div className="self-center bg-codeBg flex-grow ">
+        {showcaseComponent}
+      </div>
+      <div className="flex flex-col gap-4 sm:p-0 p-8">
         <h3 className="text-3xl">{title}</h3>
         <p className="text-lg">{description}</p>
-        <div>
+        <div className="xl:self-start self-center">
           <Button rounded="full" color="cyan">
             <h3>{buttonText}</h3>
           </Button>
@@ -117,8 +120,31 @@ function Feature({ n, title, showcase, description, buttonText }: FeatureItem) {
 export default function HomepageFeatures(): JSX.Element {
   return (
     <section>
-      <div className="container">
+      <div className="sm:container relative">
+        <span className="absolute left-1/2 w-4 h-full bg-violet-500 border-black border-2 -z-20" />
         <div className="flex flex-col gap-32">
+          <div className="relative mb-10">
+            {/* horrible hack to hide the vertical bar */}
+            <span className="absolute w-full h-full py-36 bg-lightbackground -z-20" />
+            <img
+              className="absolute sm:h-36 h-24 bottom-1/4 right-2/3 -z-10"
+              src="img/Star2.svg"
+            />
+            <img
+              className="absolute sm:h-36 h-24 top-1/4 left-2/3 -z-10 "
+              src="img/Star1.svg"
+            />
+            <h1 className="text-center">
+              <span className="text-4xl sm:text-6xl">Roadmap</span>
+            </h1>
+          </div>
+          <div className="mx-auto relative pb-10">
+            <Frame background="bg-yellow-400">
+              <h2 className="text-black sm:text-2xl text-lg">Coming Soon</h2>
+            </Frame>
+          </div>
+        </div>
+        <div className="flex flex-col gap-32 mb-24">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} n={idx} />
           ))}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ba6224c..60e7a7d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,6 +12,7 @@ import Button from "../components/Button";
 import CodeFrame from "../components/CodeFrame";
 import Dialog from "../components/Dialog";
 import Modal from "../components/Modal";
+import Disclaimer from "../components/Disclaimer";
 
 const dynC = (className: string, color: string) =>
   `dark:${className}-dark${color} ${className}-light${color}`;
@@ -48,10 +49,21 @@ function HomepageHeader() {
           </p>
         </Frame>
       </div>
+      <div className="width-full my-20">
+        <iframe
+          className="mx-auto"
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/VM-2OVNt-eQ?si=A7JKcVobgEpi1fvt"
+          title="YouTube video player"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        />
+      </div>
       <div className="relative text-center mx-auto my-24">
         <Link to="/docs/intro">
           <Button color="yellow" rounded="full" size="lg">
-            <h2 className="mx-4 my-2 text-2xl">Get Started!</h2>
+            <h2 className="mx-4 my-2 text-2xl">Read the Dogma</h2>
           </Button>
         </Link>
       </div>
@@ -62,13 +74,15 @@ function HomepageHeader() {
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <div className="container">
-      <Layout description={`${siteConfig.tagline}`}>
+    <Layout description={`${siteConfig.tagline}`}>
+      <div className="container">
+        <Disclaimer />
         <HomepageHeader />
+
         <main className="pt-32">
           <HomepageFeatures />
         </main>
-      </Layout>
-    </div>
+      </div>
+    </Layout>
   );
 }