updated introduction and features

wasix-org · May 26, 2023 · 7c3f5b5 · 7c3f5b5
1 parent fa4ae8e
commit 7c3f5b5
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 20 deletions.
diff --git a/components/home/Features.tsx b/components/home/Features.tsx
@@ -14,63 +14,199 @@ import { classNames } from "../utils";
 const actions = [
   {
     title: "Networking",
+    Description: () => (
+      <p>
+        WASIX has full support for sockets (
+        <span className="bg-sky-100 dark:bg-sky-800 dark:bg-opacity-30 text-sky-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          socket
+        </span>
+        ,
+        <span className="bg-sky-100 dark:bg-sky-800 dark:bg-opacity-30 text-sky-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          bind
+        </span>
+        ,
+        <span className="bg-sky-100 dark:bg-sky-800 dark:bg-opacity-30 text-sky-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          connect
+        </span>
+        )
+        <ul className="list-disc pl-4 font-bold">
+          <li>IPv4, IPv6</li>
+          <li>UDP, TCP</li>
+          <li>Multicast, Anycast</li>
+          <li>RAW sockets</li>
+        </ul>
+      </p>
+    ),
     icon: BsGlobe2,
     iconForeground: "text-sky-500",
     iconBackground: "bg-sky-100 dark:bg-sky-800 dark:bg-opacity-30",
   },
   {
     title: "Multi-threading",
+    Description: () => (
+      <p>
+        Full Support for Efficient{" "}
+        <span className="bg-violet-100 dark:bg-violet-900 dark:bg-opacity-30 text-purple-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          Multithreading
+        </span>
+        enabling applications to better utilize system resources and achieve
+        superior performance.
+      </p>
+    ),
     icon: TbRocket,
     iconForeground: "text-purple-500",
-    iconBackground: " bg-violet-100 dark:bg-violet-900 dark:bg-opacity-30",
+    iconBackground: "bg-violet-100 dark:bg-violet-900 dark:bg-opacity-30",
   },
   {
     title: "Asynchronous Runtimes Support",
+    Description: () => (
+      <p>
+        <span className="bg-red-100 dark:bg-red-600 dark:bg-opacity-20 text-red-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          Asynchronous
+        </span>{" "}
+        polling of Sockets and Files for application responsiveness and
+        performance.
+      </p>
+    ),
     icon: FaSyncAlt,
     iconForeground: "text-red-500",
-    iconBackground: " bg-red-100 dark:bg-red-600 dark:bg-opacity-20",
+    iconBackground: "bg-red-100 dark:bg-red-600 dark:bg-opacity-20",
   },
   {
     title: "Filesystem Support",
+    Description: () => (
+      <p>
+        WASIX fully supports the POSIX Filesystem API (
+        <span className="bg-yellow-100 dark:bg-yellow-800 dark:bg-opacity-30 text-yellow-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          open
+        </span>
+        ,
+        <span className="bg-yellow-100 dark:bg-yellow-800 dark:bg-opacity-30 text-yellow-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          read
+        </span>
+        ,
+        <span className="bg-yellow-100 dark:bg-yellow-800 dark:bg-opacity-30 text-yellow-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          write
+        </span>
+        ,
+        <span className="bg-yellow-100 dark:bg-yellow-800 dark:bg-opacity-30 text-yellow-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          close
+        </span>
+        ) and more.
+      </p>
+    ),
     icon: VscFileSymlinkDirectory,
     iconForeground: "text-yellow-500",
-    iconBackground: " bg-yellow-100 dark:bg-yellow-800 dark:bg-opacity-30",
+    iconBackground: "bg-yellow-100 dark:bg-yellow-800 dark:bg-opacity-30",
   },
   {
-    title: "pthreads",
+    title: "Threading Support",
+    Description: () => (
+      <p>
+        WASIX supports threading in both Rust and C:
+        <ul className="list-disc pl-4 font-bold">
+          <li>
+            <span className="bg-rose-100 dark:bg-rose-800 dark:bg-opacity-30 text-rose-700 px-1 py-[2px] rounded-md font-bold text-xs">
+              Rayon
+            </span>{" "}
+            in Rust
+          </li>
+          <li>
+            <span className="bg-rose-100 dark:bg-rose-800 dark:bg-opacity-30 text-rose-700 px-1 py-[2px] rounded-md font-bold text-xs">
+              pthreads
+            </span>{" "}
+            in C
+          </li>
+        </ul>
+      </p>
+    ),
     icon: HiLightningBolt,
     iconForeground: "text-rose-700",
-    iconBackground: " bg-rose-100 dark:bg-rose-800 dark:bg-opacity-30",
+    iconBackground: "bg-rose-100 dark:bg-rose-800 dark:bg-opacity-30",
   },
   {
     title: "lngjmp & setjmp",
+    Description: () => (
+      <p>
+        WASIX has support for both
+        <span className="bg-indigo-100 dark:bg-indigo-800 dark:bg-opacity-40 text-indigo-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          lngjmp
+        </span>
+        {" and "}
+        <span className="bg-indigo-100 dark:bg-indigo-800 dark:bg-opacity-40 text-indigo-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          setjmp
+        </span>{" "}
+        using asyncify.
+      </p>
+    ),
     icon: TbJumpRope,
     iconForeground: "text-indigo-500",
-    iconBackground: " bg-indigo-100 dark:bg-indigo-800 dark:bg-opacity-40",
+    iconBackground: "bg-indigo-100 dark:bg-indigo-800 dark:bg-opacity-40",
   },
   {
     title: "Subprocesses",
+    Description: () => (
+      <p>
+        WASIX can create and wait for subprocesses using
+        <ul className="list-disc pl-4 font-bold">
+          <li>
+            <span className="bg-emerald-100 dark:bg-emerald-900 dark:bg-opacity-30 text-emerald-700 px-1 py-[2px] rounded-md font-bold text-xs">
+              exec
+            </span>{" "}
+          </li>
+          <li>
+            <span className="bg-emerald-100 dark:bg-emerald-900 dark:bg-opacity-30 text-emerald-700 px-1 py-[2px] rounded-md font-bold text-xs">
+              wait
+            </span>{" "}
+          </li>
+        </ul>
+      </p>
+    ),
     icon: GiSpawnNode,
     iconForeground: "text-emerald-700",
-    iconBackground: " bg-emerald-100 dark:bg-emerald-900 dark:bg-opacity-30",
+    iconBackground: "bg-emerald-100 dark:bg-emerald-900 dark:bg-opacity-30",
   },
   {
     title: "Process Forking",
+    Description: () => (
+      <p>
+        WASIX supports both
+        <span className="bg-fuchsia-100 dark:bg-fuchsia-800 dark:bg-opacity-30 text-fuchsia-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          fork
+        </span>
+        {" and "}
+        <span className="bg-fuchsia-100 dark:bg-fuchsia-800 dark:bg-opacity-30 text-fuchsia-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          vfork
+        </span>
+        . Allowing a process to create a copy of itself.
+      </p>
+    ),
     icon: MdForkRight,
     iconForeground: "text-fuchsia-500",
-    iconBackground: " bg-fuchsia-100 dark:bg-fuchsia-800 dark:bg-opacity-30",
+    iconBackground: "bg-fuchsia-100 dark:bg-fuchsia-800 dark:bg-opacity-30",
   },
   {
     title: "TTY Support",
+    Description: () => <p>WASIX provides functions to control Terminal I/O.</p>,
     icon: BiTerminal,
     iconForeground: "text-black dark:text-white",
-    iconBackground: " bg-gray-100 dark:bg-gray-700 dark:bg-opacity-50",
+    iconBackground: "bg-gray-100 dark:bg-gray-700 dark:bg-opacity-50",
   },
   {
     title: "Runtime Support",
+    Description: () => (
+      <p>
+        WASIX supports the{" "}
+        <span className="bg-violet-100 dark:bg-violet-800 dark:bg-opacity-40 text-violet-500 px-1 py-[2px] rounded-md font-bold text-xs">
+          Wasmer
+        </span>{" "}
+        runtime, with expectations for more runtimes to join soon. WASIX
+        provides toolchains for Rust and C, including support for Zig.
+      </p>
+    ),
     icon: BsGearFill,
     iconForeground: "text-violet-500",
-    iconBackground: " bg-violet-100 dark:bg-violet-800 dark:bg-opacity-40",
+    iconBackground: "bg-violet-100 dark:bg-violet-800 dark:bg-opacity-40",
   },
 ];
 
@@ -79,6 +215,11 @@ interface FeatureProps {
 }
 
 export default function Features({ id }: FeatureProps) {
+  const [hydrated, setHydrated] = React.useState(false);
+
+  React.useEffect(() => {
+    setHydrated(true);
+  }, []);
   return (
     <div id={id} className="h-[100slvh]">
       <h2 className="text-5xl md:text-7xl font-bold font-sans ml-4 mb-12 sm:ml-0 text-black dark:text-white">
@@ -107,11 +248,9 @@ export default function Features({ id }: FeatureProps) {
               <h3 className="text-base font-semibold leading-6 text-black dark:text-white">
                 {action.title}
               </h3>
-              <p className="mt-2 text-sm text-gray-700 dark:text-gray-300">
-                Doloribus dolores nostrum quia qui natus officia quod et
-                dolorem. Sit repellendus qui ut at blanditiis et quo et
-                molestiae.
-              </p>
+              <div className="mt-2 text-sm text-gray-700 dark:text-gray-300">
+                {hydrated && action.Description()}
+              </div>
             </div>
           </div>
         ))}

diff --git a/components/home/Introduction.tsx b/components/home/Introduction.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function Introduction() {
+  return (
+    <div className="my-28">
+      <h2 className="text-6xl sm:text-7xl whitespace-nowrap md:text-[108px] font-bold font-sans ml-4 mb-12 sm:ml-0 text-black dark:text-white">
+        Introduction
+      </h2>
+      <div className="flex flex-col mx-2 rounded-md relative text-xl md:text-2xl font-sans">
+        WASIX is the long term stabilization and support of the existing WASI
+        ABI plus additional non-invasive syscall extensions that complete the
+        missing gaps sufficiently enough to enable real, practical and useful
+        applications to be compiled and used now. It aims to speed up the
+        ecosystem around the WASI so that the Wasm’ification of code bases
+        around the world can really start today!
+      </div>
+    </div>
+  );
+}
diff --git a/components/home/WasixLogo.tsx b/components/home/WasixLogo.tsx
@@ -12,7 +12,6 @@ function WasixLogo({ className }: Props = {}) {
       viewBox="0 0 324 128"
       className={className}
     >
-      <path fill="#fff" d="m79.87 67.39-3.11 13.99h9.68l-3.57-13.99h-3Z" />
       <path
         className="text-black dark:text-white"
         d="M66.13 0c.01.193.01.387 0 .58a12.34 12.34 0 0 1-12.34 12.34A12.329 12.329 0 0 1 41.47.58a5.61 5.61 0 0 1 0-.58H0v107.62h107.62V0H66.13Zm69.62 60.23 3.11-13.99h-9.68l3.57 13.99h3Z"

diff --git a/components/home/index.tsx b/components/home/index.tsx
@@ -5,6 +5,7 @@ import Features from "./Features";
 import { AiFillCaretDown } from "react-icons/ai";
 import Apps from "./Apps";
 import CTA from "./CTA";
+import Introduction from "./Introduction";
 
 function Home() {
   const handleScrollToFeatures = useCallback(() => {
@@ -17,9 +18,13 @@ function Home() {
     <>
       <div className="h-[100lvh] w-[100lvw] flex flex-col items-center justify-center">
         <WasixLogo className="h-[100%] w-[100%] sm:h-[80%] sm:w-[50%] dark:shadow-xl dark:shadow-white text-black dark:text-white rounded-xl p-12" />
-        <div className=" -translate-y-48 text-center">
-          <h2 className="text-3xl md:text-5xl mb-4">Introducing WASIX</h2>
-          <h3 className="text-lg md:text-xl">The superset of WASI</h3>
+        <div className="-translate-y-60 text-center flex flex-col">
+          <h2 className="text-3xl md:text-5xl mb-4 justify-center items-center">
+            Introducing WASIX
+          </h2>
+          <p className="mx-auto text-center text-lg md:text-xl animate-typing overflow-hidden whitespace-nowrap">
+            The superset of WASI
+          </p>
         </div>
         <div
           className="absolute bottom-0 translate-y-2 animate-bounce ease-linear"
@@ -30,6 +35,7 @@ function Home() {
         </div>
       </div>
       <main className="mx-auto max-w-7xl sm:px-6 lg:px-8">
+        <Introduction />
         <Features id={"home-features"} />
         <Apps />
         <CTA />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,7 +6,22 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        typing: {
+          "0%": {
+            width: "0%",
+            visibility: "hidden",
+          },
+          "100%": {
+            width: "100%",
+          },
+        },
+      },
+      animation: {
+        typing: "typing 2s steps(500)",
+      },
+    },
   },
   plugins: [],
   darkMode: ["class", 'html[class~="dark"]'],