Start roadmap

5 files changed, 63 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>
   );
 }
diff --git a/static/img/Star1.svg b/static/img/Star1.svg
new file mode 100644
index 0000000..12f4349
--- /dev/null
+++ b/static/img/Star1.svg
@@ -0,0 +1,3 @@
+<svg width="400" height="397" viewBox="0 0 400 397" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M229.536 54.8131L269.915 19.5285L275.984 72.807L276.415 76.5862L279.99 75.287L330.388 56.9716L316.8 108.845L315.837 112.524L319.639 112.604L373.251 113.731L341.842 157.193L339.614 160.276L343.132 161.725L392.715 182.142L347.728 211.323L344.536 213.393L347.293 216.014L386.153 252.965L333.661 263.924L329.938 264.701L331.561 268.141L354.449 316.634L301.543 307.891L297.791 307.271L298.062 311.065L301.886 364.552L255.712 337.288L252.436 335.354L251.319 338.989L235.563 390.245L202.356 348.142L200 345.156L197.644 348.142L164.437 390.245L148.681 338.989L147.564 335.354L144.288 337.288L98.1139 364.552L101.938 311.065L102.209 307.271L98.4565 307.891L45.5511 316.634L68.4385 268.141L70.062 264.701L66.3386 263.924L13.8474 252.965L52.7071 216.014L55.4636 213.393L52.2724 211.323L7.28476 182.142L56.8684 161.725L60.3856 160.276L58.1577 157.193L26.7493 113.731L80.3605 112.604L84.1633 112.524L83.1995 108.845L69.6124 56.9716L120.01 75.287L123.585 76.5862L124.016 72.807L130.085 19.5285L170.464 54.8131L173.328 57.3159L175.094 53.9474L200 6.45914L224.906 53.9474L226.672 57.3159L229.536 54.8131Z" fill="#FB923C" stroke="black" stroke-width="6"/>
+</svg>
diff --git a/static/img/Star2.svg b/static/img/Star2.svg
new file mode 100644
index 0000000..a9e4384
--- /dev/null
+++ b/static/img/Star2.svg
@@ -0,0 +1,3 @@
+<svg width="326" height="314" viewBox="0 0 326 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M136.674 295.976L105.84 246.385C100.747 238.193 92.6547 232.314 83.2892 230.001L26.5973 216.001C4.29515 210.494 -4.4789 183.49 10.3268 165.925L47.9626 121.277C54.1801 113.901 57.2709 104.388 56.5764 94.7662L52.3722 36.5229C50.7183 13.6104 73.689 -3.07883 94.9691 5.57446L149.063 27.5711C157.999 31.2049 168.001 31.2049 176.937 27.5711L231.031 5.57444C252.311 -3.07885 275.282 13.6104 273.628 36.5229L269.424 94.7662C268.729 104.388 271.82 113.901 278.037 121.277L315.673 165.925C330.479 183.49 321.705 210.494 299.403 216.001L242.711 230.001C233.345 232.314 225.253 238.193 220.16 246.385L189.326 295.976C177.197 315.485 148.803 315.485 136.674 295.976Z" fill="#818CF8" stroke="black" stroke-width="6"/>
+</svg>