Update

6 files changed, 168 insertions, 88 deletions

diff --git a/src/components/HomepageFeatures/coming-soon-features.tsx b/src/components/HomepageFeatures/coming-soon-features.tsx
new file mode 100644
index 0000000..e2ff10a
--- /dev/null
+++ b/src/components/HomepageFeatures/coming-soon-features.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { FeatureItem } from "./feature-item";
+
+export const ComingSoonFeatures: FeatureItem[] = [
+  {
+    title: "Beautiful, Ready-to-Use Tools",
+    description: (
+      <>
+        NeoHaskell offers a clean and intuitive language design, complemented by
+        a core library that provides all the tools you need to start creating
+        amazing software right away.
+      </>
+    ),
+    buttonText: "Start Coding",
+    showcase: {
+      language: "haskell",
+      code: `processLogs rawLogs =
+  rawLogs
+  |> map parseLogs
+  |> collect
+  |> andThen (filter isImportant)
+  |> andThen (map toStructuredLog)`,
+    },
+  },
+  {
+    title: "Hassle-Free Development Environment",
+    description: (
+      <>
+        NeoHaskell's CLI tool installs all required utilities and makes
+        multi-platform support a breeze. Whether you're compiling to native code
+        or generating WebAssembly for browser compatibility, you'll enjoy error
+        messages that guide, not hinder.
+      </>
+    ),
+    buttonText: "Enjoy the Ride",
+    showcase: { code: "", language: "" },
+  },
+  {
+    title: "Focus-Driven, Event-Driven",
+    description: (
+      <>
+        In NeoHaskell, you work directly events and functions that react to
+        them. Say goodbye to the cognitive overhead of managing state or
+        wrestling with dependency injection. Your focus stays where it belongs:
+        on solving problems and crafting solutions.
+      </>
+    ),
+    buttonText: "Begin your Journey",
+    showcase: { code: "", language: "" },
+  },
+  {
+    title: "Naturally Full-Stack",
+    description: (
+      <>
+        Relish the ease of crafting full-stack applications in a unified
+        language environment. NeoHaskell takes care of frontend-backend
+        communication, allowing you to focus solely on your application's logic.
+      </>
+    ),
+    buttonText: "Experience Bliss",
+    showcase: { code: "", language: "" },
+  },
+];
diff --git a/src/components/HomepageFeatures/feature-item.ts b/src/components/HomepageFeatures/feature-item.ts
new file mode 100644
index 0000000..31a9268
--- /dev/null
+++ b/src/components/HomepageFeatures/feature-item.ts
@@ -0,0 +1,12 @@
+export type FeatureItem = {
+  n?: number;
+  title: string;
+  description: JSX.Element;
+  showcase: ShowCase;
+  buttonText: string;
+  shadowColor?: string;
+};
+
+export type ShowCase =
+  | { code: string; language: string }
+  | { img: React.ComponentType<React.ComponentProps<"img">> };
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index f273580..3e2a701 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -5,80 +5,9 @@ import CodeFrame from "../CodeFrame";
 import Button from "../Button";
 import CodeBlock from "@theme/CodeBlock";
 import Frame from "../Frame";
-
-type ShowCase =
-  | { code: string; language: string }
-  | { img: React.ComponentType<React.ComponentProps<"img">> };
-
-type FeatureItem = {
-  n?: number;
-  title: string;
-  description: JSX.Element;
-  showcase: ShowCase;
-  buttonText: string;
-  shadowColor?: string;
-};
-
-const FeatureList: FeatureItem[] = [
-  {
-    title: "Beautiful, Ready-to-Use Tools",
-    description: (
-      <>
-        NeoHaskell offers a clean and intuitive language design, complemented by
-        a core library that provides all the tools you need to start creating
-        amazing software right away.
-      </>
-    ),
-    buttonText: "Start Coding",
-    showcase: {
-      language: "haskell",
-      code: `processLogs rawLogs =
-  rawLogs
-  |> map parseLogs
-  |> collect
-  |> andThen (filter isImportant)
-  |> andThen (map toStructuredLog)`,
-    },
-  },
-  {
-    title: "Hassle-Free Development Environment",
-    description: (
-      <>
-        NeoHaskell's CLI tool installs all required utilities and makes
-        multi-platform support a breeze. Whether you're compiling to native code
-        or generating WebAssembly for browser compatibility, you'll enjoy error
-        messages that guide, not hinder.
-      </>
-    ),
-    buttonText: "Enjoy the Ride",
-    showcase: { code: "", language: "" },
-  },
-  {
-    title: "Focus-Driven, Event-Driven",
-    description: (
-      <>
-        In NeoHaskell, you work directly events and functions that react to
-        them. Say goodbye to the cognitive overhead of managing state or
-        wrestling with dependency injection. Your focus stays where it belongs:
-        on solving problems and crafting solutions.
-      </>
-    ),
-    buttonText: "Begin your Journey",
-    showcase: { code: "", language: "" },
-  },
-  {
-    title: "Naturally Full-Stack",
-    description: (
-      <>
-        Relish the ease of crafting full-stack applications in a unified
-        language environment. NeoHaskell takes care of frontend-backend
-        communication, allowing you to focus solely on your application's logic.
-      </>
-    ),
-    buttonText: "Experience Bliss",
-    showcase: { code: "", language: "" },
-  },
-];
+import { FeatureItem } from "./feature-item";
+import { ReadyFeatures } from "./ready-features";
+import { ComingSoonFeatures } from "./coming-soon-features";
 
 function Feature({ n, title, showcase, description, buttonText }: FeatureItem) {
   const k = n ?? 0;
@@ -135,9 +64,14 @@ export default function HomepageFeatures(): JSX.Element {
               src="img/Star1.svg"
             />
             <h1 className="text-center">
-              <span className="text-4xl sm:text-6xl">Roadmap</span>
+              <span className="text-4xl sm:text-6xl">Features</span>
             </h1>
           </div>
+          <div className="flex flex-col gap-32 mb-24">
+            {ReadyFeatures.map((props, idx) => (
+              <Feature key={idx} {...props} n={idx} />
+            ))}
+          </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>
@@ -145,7 +79,7 @@ export default function HomepageFeatures(): JSX.Element {
           </div>
         </div>
         <div className="flex flex-col gap-32 mb-24">
-          {FeatureList.map((props, idx) => (
+          {ComingSoonFeatures.map((props, idx) => (
             <Feature key={idx} {...props} n={idx} />
           ))}
         </div>
diff --git a/src/components/HomepageFeatures/ready-features.tsx b/src/components/HomepageFeatures/ready-features.tsx
new file mode 100644
index 0000000..d76adc9
--- /dev/null
+++ b/src/components/HomepageFeatures/ready-features.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { FeatureItem } from "./feature-item";
+
+export const ReadyFeatures: FeatureItem[] = [
+  {
+    title: "Static feels like Dynamic",
+    description: (
+      <>
+        NeoHaskell's type system is so powerful that you'll forget it's there.
+        With type inference, you'll spend less time annotating and more time
+        coding in a language that feels dynamic.
+      </>
+    ),
+    buttonText: "Start Coding",
+    showcase: {
+      language: "haskell",
+      code: `process = do
+  joe <- getPerson "Joe"
+  if joe.age > 18 then
+    print "Joe is an adult"
+  else
+    print "Joe is a child"`,
+    },
+  },
+  {
+    title: "Hassle-Free Development Environment",
+    description: (
+      <>
+        NeoHaskell's CLI tool installs all required utilities and makes
+        multi-platform support a breeze. Whether you're compiling to native code
+        or generating WebAssembly for browser compatibility, you'll enjoy error
+        messages that guide, not hinder.
+      </>
+    ),
+    buttonText: "Enjoy the Ride",
+    showcase: { code: "", language: "" },
+  },
+  {
+    title: "Focus-Driven, Event-Driven",
+    description: (
+      <>
+        In NeoHaskell, you work directly events and functions that react to
+        them. Say goodbye to the cognitive overhead of managing state or
+        wrestling with dependency injection. Your focus stays where it belongs:
+        on solving problems and crafting solutions.
+      </>
+    ),
+    buttonText: "Begin your Journey",
+    showcase: { code: "", language: "" },
+  },
+  {
+    title: "Naturally Full-Stack",
+    description: (
+      <>
+        Relish the ease of crafting full-stack applications in a unified
+        language environment. NeoHaskell takes care of frontend-backend
+        communication, allowing you to focus solely on your application's logic.
+      </>
+    ),
+    buttonText: "Experience Bliss",
+    showcase: { code: "", language: "" },
+  },
+];
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5def31f..862e05e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -49,18 +49,8 @@ function HomepageHeader() {
           </p>
         </Frame>
       </div>
-      <div className="mx-auto mt-24 width-full max-w-6xl">
-        <div className="relative overflow-hidden h-0 pb-16-9">
-          <iframe
-            className="absolute top-0 left-0 w-full h-full max-w-full"
-            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>
-      <div className="relative text-center mx-auto my-10">
+      <VideoPlayer />
+      <div className="relative text-center mx-auto mt-20 mb-10">
         <Link to="/docs/intro">
           <Button color="yellow" rounded="full" size="lg">
             <h2 className="mx-4 my-2 sm:text-2xl text-xl">Read the Dogma</h2>
@@ -71,6 +61,24 @@ function HomepageHeader() {
   );
 }
 
+function VideoPlayer({ enabled }: { enabled?: boolean }) {
+  return enabled ? (
+    <div className="mx-auto mt-24 width-full max-w-6xl">
+      <div className="relative overflow-hidden h-0 pb-16-9">
+        <iframe
+          className="absolute top-0 left-0 w-full h-full max-w-full"
+          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>
+  ) : (
+    <></>
+  );
+}
+
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
diff --git a/static/img/favicon.ico b/static/img/favicon.ico
index c01d54b..a31c5ac 100644
--- a/static/img/favicon.ico
+++ b/static/img/favicon.ico