Improving interfaces landing page

2023-10-18 00:53:21 +07:00 · 2023-10-18 00:53:21 +07:00 · 57dcde2a70
commit 57dcde2a70
parent c220d7cd68
30 changed files with 1109 additions and 771 deletions
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@ -34,6 +34,7 @@ const config = {

  // Plugins we added
  plugins: [
+    "docusaurus-plugin-sass",
    async function myPlugin(context, options) {
      return {
        name: "docusaurus-tailwindcss",
@ -75,7 +76,7 @@ const config = {
        blog: false,
        // Will be passed to @docusaurus/theme-classic.
        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve("./src/styles/main.scss"),
        },
        // Will be passed to @docusaurus/plugin-content-pages (false to disable)
        // pages: {},
@ -153,87 +154,13 @@ const config = {
          //   label: "API",
          //   to: "/api",
          // },
-          {
-            href: "https://github.com/janhq/jan",
-            label: "GitHub",
-            position: "right",
-          },
+          // {
+          //   href: "https://github.com/janhq/jan",
+          //   label: "GitHub",
+          //   position: "right",
+          // },
        ],
      },
-      footer: {
-        style: "dark",
-        links: [
-          {
-            title: "Jan",
-            items: [
-              {
-                label: "Home",
-                to: "/",
-              },
-              {
-                label: "Platform",
-                to: "/platform",
-              },
-              {
-                label: "Solutions",
-                to: "/solutions",
-              },
-            ],
-          },
-          {
-            title: "Docs",
-            items: [
-              {
-                label: "Docs",
-                to: "/docs",
-              },
-              {
-                label: "Hardware",
-                to: "/hardware",
-              },
-              {
-                label: "API",
-                to: "/api",
-              },
-              {
-                label: "Changelog",
-                to: "/changelog",
-              },
-            ],
-          },
-          {
-            title: "Community",
-            items: [
-              {
-                label: "Discord",
-                href: "https://discord.gg/FTk2MvZwJH",
-              },
-              {
-                label: "Twitter",
-                href: "https://twitter.com/jan_dotai",
-              },
-            ],
-          },
-          {
-            title: "Company",
-            items: [
-              {
-                label: "About",
-                to: "/about",
-              },
-              {
-                label: "Careers",
-                href: "https://janai.bamboohr.com/careers",
-              },
-              {
-                label: "GitHub",
-                href: "https://github.com/janhq/jan",
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} Jan AI Pte Ltd.`,
-      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
@ -241,7 +168,7 @@ const config = {
      },
      colorMode: {
        disableSwitch: false,
-        respectPrefersColorScheme: false,
+        respectPrefersColorScheme: true,
      },
    }),
 };
--- a/docs/package.json
+++ b/docs/package.json
@ -23,12 +23,15 @@
    "autoprefixer": "^10.4.16",
    "axios": "^1.5.1",
    "clsx": "^1.2.1",
+    "docusaurus-plugin-sass": "^0.2.5",
    "js-yaml": "^4.1.0",
    "postcss": "^8.4.30",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-icons": "^4.11.0",
    "redocusaurus": "^1.6.3",
+    "sass": "^1.69.3",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
--- a/docs/src/components/Announcement/index.js
+++ b/docs/src/components/Announcement/index.js
@ -0,0 +1,78 @@
+import React from "react";
+
+import { useAppStars } from "@site/src/hooks/useAppStars";
+import { useAppRelease } from "@site/src/hooks/useAppRelease";
+
+import { AiOutlineGithub, AiOutlineTwitter } from "react-icons/ai";
+import { BiLogoDiscordAlt } from "react-icons/bi";
+
+const socials = [
+  {
+    icon: <AiOutlineTwitter className="text-xl text-white" />,
+    href: "https://twitter.com/jan_dotai",
+  },
+  {
+    icon: <BiLogoDiscordAlt className="text-xl text-white" />,
+    href: "https://discord.com/invite/FTk2MvZwJH",
+  },
+  {
+    icon: <AiOutlineGithub className="text-lg text-white" />,
+    href: "https://github.com/janhq/jan",
+  },
+];
+
+export default function AnnoncementBanner() {
+  const { stargazers } = useAppStars();
+  const { release } = useAppRelease();
+
+  return (
+    <div className="h-10 w-full flex-shrink-0 bg-blue-600">
+      <div className="container flex h-full items-center justify-between py-0.5">
+        <div className="flex h-6 items-center shadow-sm">
+          <a
+            href="https://github.com/janhq/jan"
+            target="_blank"
+            className="flex h-full items-center gap-x-1 rounded-l-sm bg-indigo-50 px-1 py-0.5"
+          >
+            <AiOutlineGithub className="text-lg text-gray-800" />
+            <span className="text-xs font-bold tracking-tight text-gray-800">
+              Stars
+            </span>
+          </a>
+          <a
+            href="https://github.com/janhq/jan/stargazers"
+            target="_blank"
+            className="flex h-full items-center rounded-r-sm border-l border-gray-100 bg-white px-1 py-0.5 font-medium"
+          >
+            <span className="text-xs font-bold text-gray-700">
+              {stargazers.count}
+            </span>
+          </a>
+        </div>
+        <a
+          href="https://github.com/janhq/jan/releases"
+          target="_blank"
+          className="hidden items-center gap-x-2 lg:flex"
+        >
+          ✨
+          <div className="flex items-center rounded bg-white px-2">
+            <span className="font-bold uppercase text-blue-600">new</span>
+          </div>
+          <p className="text-white">
+            <span className="font-bold capitalize">{release.tagVersion}</span>
+            &nbsp;is now live on GitHub. Check it out
+          </p>
+        </a>
+        <div className="flex items-center gap-x-3">
+          {socials.map((social, i) => {
+            return (
+              <a key={i} href={social.href} target="_blank">
+                {social.icon}
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/docs/src/components/Elements/dropdown.js
+++ b/docs/src/components/Elements/dropdown.js
@ -57,21 +57,24 @@ export default function Dropdown() {
    const updateDownloadLinks = async () => {
      try {
        const releaseInfo = await getLatestReleaseInfo("janhq", "jan");
-        
+
        // Extract appname from the first asset name
        const firstAssetName = releaseInfo.assets[0].name;
        const appname = extractAppName(firstAssetName);
-  
+
        if (!appname) {
-          console.error("Failed to extract appname from file name:", firstAssetName);
+          console.error(
+            "Failed to extract appname from file name:",
+            firstAssetName
+          );
          return;
        }
-  
+
        // Remove 'v' at the start of the tag_name
        const tag = releaseInfo.tag_name.startsWith("v")
          ? releaseInfo.tag_name.substring(1)
          : releaseInfo.tag_name;
-  
+
        const updatedSystems = systems.map((system) => {
          const downloadUrl = system.fileFormat
            .replace("{appname}", appname)
@ -81,21 +84,21 @@ export default function Dropdown() {
            href: `https://github.com/janhq/jan/releases/download/${releaseInfo.tag_name}/${downloadUrl}`,
          };
        });
-  
+
        setSystems(updatedSystems);
        setDefaultSystem(updatedSystems[0]);
      } catch (error) {
        console.error("Failed to update download links:", error);
      }
    };
-  
+
    updateDownloadLinks();
  }, []);

  return (
    <div className="inline-flex align-items-stretch">
      <a
-        className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-3.5 py-2.5 text-base font-semibold text-white bg-blue-600 dark:bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-400 hover:text-white"
+        className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-3.5 py-2.5 text-base font-semibold text-white bg-blue-600 hover:bg-blue-500 hover:text-white"
        href={defaultSystem.href}
      >
        <img
@ -106,9 +109,9 @@ export default function Dropdown() {
        {defaultSystem.name}
      </a>
      <Menu as="div" className="relative -ml-px block">
-        <Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-0 border-l border-gray-300 active:border-l active:border-white h-full text-white bg-blue-600 dark:bg-blue-500 hover:bg-blue-500 dark:hover:bg-blue-400">
+        <Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-l border-blue-500 h-full text-white bg-blue-600 w-8 justify-center">
          <span className="sr-only">Open OS options</span>
-          <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+          <ChevronDownIcon className="h-6 w-6" aria-hidden="true" />
        </Menu.Button>
        <Transition
          as={Fragment}
@ -119,26 +122,24 @@ export default function Dropdown() {
          leaveFrom="transform opacity-100 scale-100"
          leaveTo="transform opacity-0 scale-95"
        >
-          <Menu.Items className="absolute right-0 z-10 mt-2 w-72 text-left origin-top-right rounded-md bg-blue-600 dark:bg-blue-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="py-1">
+          <Menu.Items className="absolute right-0 z-10 mt-2 w-72 text-left origin-top-right rounded-md bg-blue-600 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden">
+            <div className="overflow-hidden">
              {systems.map((system) => (
                <Menu.Item key={system.name}>
                  {({ active }) => (
                    <a
                      href={system.href}
                      className={classNames(
-                        active
-                          ? "bg-blue-500 dark:hover:bg-blue-400 hover:text-white"
-                          : "text-white",
-                        "block px-4 py-2"
+                        active ? "bg-blue-500 hover:text-white" : "text-white",
+                        "flex px-4 py-3 items-center text-white hover:text-white"
                      )}
                    >
                      <img
                        src={system.logo}
                        alt="Logo"
-                        className="w-3 mr-3 -mt-1"
+                        className="w-3 mr-3 -mt-1 flex-shrink-0"
                      />
-                      {system.name}
+                      <span className="text-white">{system.name}</span>
                    </a>
                  )}
                </Menu.Item>
--- a/docs/src/components/Footer/index.js
+++ b/docs/src/components/Footer/index.js
@ -0,0 +1,123 @@
+import React from "react";
+
+const menus = [
+  {
+    name: "Resources",
+    child: [
+      {
+        menu: "Home",
+        path: "/",
+      },
+      {
+        menu: "Platform",
+        path: "/platform",
+      },
+      {
+        menu: "Solutions",
+        path: "/solutions",
+      },
+    ],
+  },
+  {
+    name: "For Developers",
+    child: [
+      {
+        menu: "Documentations",
+        path: "/docs",
+      },
+      {
+        menu: "Hardware",
+        path: "/hardware",
+      },
+      {
+        menu: "API",
+        path: "/api",
+      },
+      {
+        menu: "Changelog",
+        path: "/changelog",
+      },
+    ],
+  },
+  {
+    name: "Community",
+    child: [
+      {
+        menu: "Github",
+        path: "https://github.com/janhq/jan",
+        external: true,
+      },
+      {
+        menu: "Discord",
+        path: "https://discord.gg/FTk2MvZwJH",
+        external: true,
+      },
+      {
+        menu: "Twitter",
+        path: "https://twitter.com/jan_dotai",
+        external: true,
+      },
+    ],
+  },
+  {
+    name: "Company",
+    child: [
+      {
+        menu: "About",
+        path: "/about",
+      },
+      {
+        menu: "Careers",
+        path: "https://janai.bamboohr.com/careers",
+        external: true,
+      },
+    ],
+  },
+];
+
+const getCurrentYear = new Date().getFullYear();
+
+export default function Footer() {
+  return (
+    <footer className="flex-shrink-0 border-t dark:border-gray-800 border-gray-200 py-10">
+      <div className="container">
+        <div className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-5">
+          <div className="col-span-2 lg:col-span-1">
+            <h6 className="mb-3">Jan</h6>
+            <p className="dark:text-gray-400 text-gray-600">
+              is a source-available, cross device, and privacy focused AI engine
+              and Desktop app that runs locally on your machine.
+            </p>
+          </div>
+          {menus.map((menu, i) => {
+            return (
+              <div key={i} className="lg:text-right">
+                <h6 className="mb-3">{menu.name}</h6>
+                <ul>
+                  {menu.child.map((child, i) => {
+                    return (
+                      <li key={i}>
+                        <a
+                          href={child.path}
+                          target={child.external ? "_blank" : "_self"}
+                          className="inline-block py-1 dark:text-gray-400 text-gray-600"
+                        >
+                          {child.menu}
+                        </a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="container mt-8">
+        <span className="dark:text-gray-300 text-gray-700">
+          &copy;{getCurrentYear}&nbsp;Jan AI Pte Ltd.
+        </span>
+      </div>
+    </footer>
+  );
+}
--- a/docs/src/components/Homepage/banner.js
+++ b/docs/src/components/Homepage/banner.js
@ -1,32 +0,0 @@
-import React from "react";
-import { XMarkIcon } from "@heroicons/react/20/solid";
-import { useColorMode } from "@docusaurus/theme-common";
-
-export default function HomepageBanner() {
-  const { colorMode } = useColorMode();
-  const bannerText =
-    "🚧 This site is under construction - expect breaking changes! 🚧";
-  return colorMode === "dark" ? (
-    <div className="relative isolate flex items-center justify-center overflow-hidden px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
-      <strong className="font-semibold text-sm text-white">{bannerText}</strong>
-    </div>
-  ) : (
-    <div className="relative isolate flex items-center justify-center overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
-      <div
-        className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
-        aria-hidden="true"
-      >
-        <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
-          style={{
-            clipPath:
-              "polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
-          }}
-        />
-      </div>
-      <strong className="font-semibold text-sm text-gray-900">
-        {bannerText}
-      </strong>
-    </div>
-  );
-}
--- a/docs/src/components/Homepage/downloads.js
+++ b/docs/src/components/Homepage/downloads.js
@ -1,77 +0,0 @@
-import React from "react";
-import {
-  ArrowPathIcon,
-  CloudArrowUpIcon,
-  LockClosedIcon,
-} from "@heroicons/react/20/solid";
-
-const systems = [
-  {
-    name: "Mac",
-    description:
-      "Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu. Phasellus praesent ligula sit faucibus.",
-    href: "#",
-    icon: CloudArrowUpIcon,
-  },
-  {
-    name: "Windows",
-    description:
-      "Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.",
-    href: "#",
-    icon: LockClosedIcon,
-  },
-  {
-    name: "Linux",
-    description:
-      "Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod ut condimentum.",
-    href: "#",
-    icon: ArrowPathIcon,
-  },
-];
-
-export default function HomepageDownloads() {
-  return (
-    <div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl lg:text-center">
-          <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
-            Run AI on any OS
-          </h2>
-          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-            Downloads
-          </p>
-          <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-            Jan is compatible with all major operating systems. Download the
-            latest stable versions here.
-          </p>
-        </div>
-        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
-          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
-            {systems.map((system) => (
-              <div key={system.name} className="flex flex-col">
-                <dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark: text-white">
-                  <system.icon
-                    className="h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
-                    aria-hidden="true"
-                  />
-                  {system.name}
-                </dt>
-                <dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300">
-                  <p className="flex-auto">{system.description}</p>
-                  <p className="mt-6">
-                    <a
-                      href={system.href}
-                      className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400"
-                    >
-                      Learn more <span aria-hidden="true">→</span>
-                    </a>
-                  </p>
-                </dd>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/docs/src/components/Homepage/hero.js
+++ b/docs/src/components/Homepage/hero.js
@ -1,102 +0,0 @@
-import React from "react";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
-import { useColorMode } from "@docusaurus/theme-common";
-import Dropdown from "@site/src/components/Elements/dropdown";
-
-export default function HomepageHero() {
-  const { colorMode } = useColorMode();
-
-  return (
-    <div className="bg-white dark:bg-gray-900">
-      <div className="relative isolate md:pt-14 pt-0">
-        {/* Background top gradient styling */}
-        {colorMode === "dark" ? (
-          <div
-            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-            aria-hidden="true"
-          >
-            <div
-              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-              style={{
-                clipPath:
-                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-              }}
-            />
-          </div>
-        ) : (
-          <div
-            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-            aria-hidden="true"
-          >
-            <div
-              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-              style={{
-                clipPath:
-                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-              }}
-            />
-          </div>
-        )}
-
-        {/* Main hero block */}
-        <div className="py-24 lg:pb-40 animate-in fade-in zoom-in-50 duration-1000 ">
-          <div className="mx-auto max-w-7xl px-6 lg:px-8">
-            {/* Hero text and buttons */}
-            <div className="mx-auto max-w-2xl text-center">
-              <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
-                Run your own AI
-              </h1>
-              <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-                Run Large Language Models locally on Mac, Windows or Linux.
-              </p>
-              <div className="mt-10 flex items-center justify-center gap-x-6">
-                {/* TODO: handle mobile model download app instead */}
-                <Dropdown />
-                <button
-                  type="button"
-                  className="cursor-pointer relative inline-flex items-center rounded px-3.5 py-2 dark:py-2.5 text-base font-semibold text-blue-600 bg-white border-blue-600 dark:border-0 hover:bg-blue-600 dark:hover:bg-blue-500 hover:text-white"
-                  onClick={() =>
-                    window.open(
-                      "https://github.com/janhq/jan",
-                      "_blank",
-                      "noreferrer"
-                    )
-                  }
-                >
-                  View Github
-                  <ArrowTopRightOnSquareIcon className="h-5 w-5 ml-2" />
-                </button>
-              </div>
-            </div>
-            {/* Desktop screenshot image full width */}
-            <img
-              src={
-                colorMode === "dark"
-                  ? require("@site/static/img/desktop-llm-chat-dark.png")
-                      .default
-                  : require("@site/static/img/desktop-llm-chat-light.png")
-                      .default
-              }
-              alt="App screenshot"
-              width={2432}
-              className="mt-16 rounded-lg md:rounded-2xl lg:rounded-3xl bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
-            />
-          </div>
-        </div>
-        {/* Background top gradient styling */}
-        <div
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-          aria-hidden="true"
-        >
-          <div
-            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/docs/src/components/Homepage/index.js
+++ b/docs/src/components/Homepage/index.js
@ -1,6 +0,0 @@
-export { default as HomepageBanner } from "./banner";
-export { default as HomepageHero } from "./hero";
-export { default as HomepageSectionOne } from "./sectionOne";
-export { default as HomepageSectionTwo } from "./sectionTwo";
-export { default as HomepageSectionThree } from "./sectionThree";
-export { default as HomepageDownloads } from "./downloads";
--- a/docs/src/components/Homepage/sectionOne.js
+++ b/docs/src/components/Homepage/sectionOne.js
@ -1,86 +0,0 @@
-import React from "react";
-import {
-  CircleStackIcon,
-  CloudArrowUpIcon,
-  CursorArrowRaysIcon,
-  HomeIcon,
-  LockClosedIcon,
-  RocketLaunchIcon,
-  ServerIcon,
-} from "@heroicons/react/20/solid";
-import { useColorMode } from "@docusaurus/theme-common";
-
-const features = [
-  {
-    name: "1 Click Installs.",
-    description:
-      "Llama2, MPT, CodeLlama, and more. 1 click to install the latest and greatest models directly from HuggingFace. Or easily upload your own models.",
-    icon: CursorArrowRaysIcon,
-  },
-  {
-    name: "Model Management.",
-    description:
-      "Configure advanced settings for each model. Manage your model versions. Easily switch between models. Get visibility into hardware performance.",
-    icon: HomeIcon,
-  },
-  {
-    name: "Cloud AI Compatible. (Coming Soon)",
-    description:
-      "Connect to ChatGPT, Claude via an API key. Alternatively, host your own AI server on any GPU cloud and use it from the app.",
-    icon: CloudArrowUpIcon,
-  },
-];
-
-export default function HomepageSectionOne() {
-  const { colorMode } = useColorMode();
-  return (
-    <div className="overflow-hidden bg-white dark:bg-gray-900 py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
-          <div className="lg:ml-auto lg:pl-4 lg:pt-4">
-            <div className="lg:max-w-lg">
-              <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
-                Jan supports
-              </h2>
-              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-                Powerful Foundational Models
-              </p>
-              <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-                Open source foundational models are supported.
-              </p>
-              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 dark:text-gray-300 lg:max-w-none">
-                {features.map((feature) => (
-                  <div key={feature.name} className="relative pl-9">
-                    <dt className="inline font-semibold text-gray-900 dark:text-gray-300">
-                      <feature.icon
-                        className="absolute left-1 top-1 h-5 w-5 text-indigo-600 dark:text-indigo-400"
-                        aria-hidden="true"
-                      />
-                      {feature.name}
-                    </dt>{" "}
-                    <dt>{feature.description}</dt>
-                  </div>
-                ))}
-              </dl>
-            </div>
-          </div>
-          <div className="flex items-start justify-end lg:order-first">
-            <img
-              src={
-                colorMode === "dark"
-                  ? // TODO replace with darkmode image
-                    require("@site/static/img/desktop-explore-models-dark.png")
-                      .default
-                  : require("@site/static/img/desktop-explore-models-light.png")
-                      .default
-              }
-              alt="Product screenshot"
-              className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
-              width={2432}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/docs/src/components/Homepage/sectionThree.js
+++ b/docs/src/components/Homepage/sectionThree.js
@ -1,174 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import { RadioGroup } from "@headlessui/react";
-import { CheckIcon } from "@heroicons/react/20/solid";
-
-const frequencies = [
-  { value: "monthly", label: "Monthly", priceSuffix: "/1Mn tokens" },
-  { value: "annually", label: "Annually", priceSuffix: "/year" },
-];
-const tiers = [
-  {
-    name: "Pay per API call",
-    id: "tier-freelancer",
-    href: "#",
-    price: { monthly: "$75", annually: "$144" },
-    description: "The essentials to provide your best work for clients.",
-    features: [
-      "5 products",
-      "Up to 1,000 subscribers",
-      "Basic analytics",
-      "48-hour support response time",
-    ],
-    mostPopular: false,
-  },
-  {
-    name: "Run it yourself",
-    id: "tier-startup",
-    href: "#",
-    price: { monthly: "$0", annually: "$288" },
-    description: "A plan that scales with your rapidly growing business.",
-    features: [
-      "25 products",
-      "Up to 10,000 subscribers",
-      "Advanced analytics",
-      "24-hour support response time",
-      "Marketing automations",
-    ],
-    mostPopular: true,
-  },
-  {
-    name: "Rent Cloud GPUs",
-    id: "tier-enterprise",
-    href: "#",
-    price: { monthly: "$40", annually: "$576" },
-    description: "Dedicated support and infrastructure for your company.",
-    features: [
-      "Unlimited products",
-      "Unlimited subscribers",
-      "Advanced analytics",
-      "1-hour, dedicated support response time",
-      "Marketing automations",
-      "Custom reporting tools",
-    ],
-    mostPopular: false,
-  },
-];
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
-export default function Example() {
-  const [frequency, setFrequency] = useState(frequencies[0]);
-
-  return (
-    <div className="bg-white py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-4xl text-center">
-          <h2 className="text-base font-semibold leading-7 text-indigo-600">
-            AI on your own hardware means
-          </h2>
-          <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
-            Unlimited Use
-          </p>
-        </div>
-        <p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
-          No uncontrolled cloud spending. No hidden fees. No limits.
-        </p>
-        {/* <div className="mt-16 flex justify-center">
-          <RadioGroup
-            value={frequency}
-            onChange={setFrequency}
-            className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200"
-          >
-            <RadioGroup.Label className="sr-only">
-              Payment frequency
-            </RadioGroup.Label>
-            {frequencies.map((option) => (
-              <RadioGroup.Option
-                key={option.value}
-                value={option}
-                className={({ checked }) =>
-                  classNames(
-                    checked ? "bg-indigo-600 text-white" : "text-gray-500",
-                    "cursor-pointer rounded-full px-2.5 py-1"
-                  )
-                }
-              >
-                <span>{option.label}</span>
-              </RadioGroup.Option>
-            ))}
-          </RadioGroup>
-        </div> */}
-        <div className="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-          {tiers.map((tier) => (
-            <div
-              key={tier.id}
-              className={classNames(
-                tier.mostPopular
-                  ? "ring-2 ring-indigo-600"
-                  : "ring-1 ring-gray-200",
-                "rounded-3xl p-8 xl:p-10"
-              )}
-            >
-              <div className="flex items-center justify-between gap-x-4">
-                <h3
-                  id={tier.id}
-                  className={classNames(
-                    tier.mostPopular ? "text-indigo-600" : "text-gray-900",
-                    "text-lg font-semibold leading-8"
-                  )}
-                >
-                  {tier.name}
-                </h3>
-                {tier.mostPopular ? (
-                  <p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600">
-                    Fully private
-                  </p>
-                ) : null}
-              </div>
-              <p className="mt-4 text-sm leading-6 text-gray-600">
-                {tier.description}
-              </p>
-              <p className="mt-6 flex items-baseline gap-x-1">
-                <span className="text-4xl font-bold tracking-tight text-gray-900">
-                  {tier.price[frequency.value]}
-                </span>
-                <span className="text-sm font-semibold leading-6 text-gray-600">
-                  {frequency.priceSuffix}
-                </span>
-              </p>
-              {/* <a
-                href={tier.href}
-                aria-describedby={tier.id}
-                className={classNames(
-                  tier.mostPopular
-                    ? "bg-indigo-600 text-white shadow-sm hover:bg-indigo-500"
-                    : "text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300",
-                  "mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                )}
-              >
-                Buy plan
-              </a> */}
-              <ul
-                role="list"
-                className="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10"
-              >
-                {tier.features.map((feature) => (
-                  <li key={feature} className="flex gap-x-3">
-                    <CheckIcon
-                      className="h-6 w-5 flex-none text-indigo-600"
-                      aria-hidden="true"
-                    />
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/docs/src/components/Homepage/sectionTwo.js
+++ b/docs/src/components/Homepage/sectionTwo.js
@ -1,82 +0,0 @@
-import React from "react";
-import {
-  CircleStackIcon,
-  CloudArrowUpIcon,
-  CursorArrowRaysIcon,
-  HomeIcon,
-  LockClosedIcon,
-  RocketLaunchIcon,
-  ServerIcon,
-} from "@heroicons/react/20/solid";
-import { useColorMode } from "@docusaurus/theme-common";
-
-const features = [
-  {
-    name: "Data Security and Privacy.",
-    description:
-      "Jan runs locally on your machine. Your data never leaves your computer. You can even run Jan offline.",
-    icon: CloudArrowUpIcon,
-  },
-  {
-    name: "Cross Device Compatible.",
-    description:
-      "Jan runs Nitro, a C++ inference engine, that is compatible with all major operating systems (CPU and GPU).",
-    icon: LockClosedIcon,
-  },
-  {
-    name: "Audit & compliance.",
-    description: "Coming soon.",
-    icon: ServerIcon,
-  },
-];
-
-export default function sectionTwo() {
-  const { colorMode } = useColorMode();
-  return (
-    <div className="overflow-hidden bg-white dark:bg-gray-900 py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
-          <div className="lg:pr-8 lg:pt-4">
-            <div className="lg:max-w-lg">
-              <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
-                Jan gives you
-              </h2>
-              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-                AI that you control
-              </p>
-              <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-                Jan is a source-available, cross device, and privacy focused AI
-                engine and Desktop app that runs locally on your machine.
-              </p>
-              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 dark:text-gray-300 lg:max-w-none">
-                {features.map((feature) => (
-                  <div key={feature.name} className="relative pl-9">
-                    <dt className="inline font-semibold text-gray-900 dark:text-white">
-                      <feature.icon
-                        className="absolute left-1 top-1 h-5 w-5 text-indigo-600 dark:text-indigo-400"
-                        aria-hidden="true"
-                      />
-                      {feature.name}
-                    </dt>{" "}
-                    <dt>{feature.description}</dt>
-                  </div>
-                ))}
-              </dl>
-            </div>
-          </div>
-          <img
-            src={
-              colorMode === "dark"
-                ? // TODO replace with darkmode image
-                  require("@site/static/img/desktop-model-settings-dark.png").default
-                : require("@site/static/img/desktop-model-settings-light.png").default
-            }
-            alt="Product screenshot"
-            className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:-ml-0"
-            width={2432}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/docs/src/components/Homepage/styles.module.css
+++ b/docs/src/components/Homepage/styles.module.css
@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@ -1,46 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. 
-   Full list of Infima variables: https://github.com/facebook/docusaurus/issues/3955#issuecomment-1521944593
-*/
-:root {
-  --ifm-color-primary: #2563EB;            /* New Primary Blue */
-  --ifm-color-primary-dark: #204FCF;       /* Darker Blue */
-  --ifm-color-primary-darker: #1B45B7;     /* Even Darker Blue */
-  --ifm-color-primary-darkest: #163C9D;    /* Darkest Blue */
-  --ifm-color-primary-light: #2974FF;      /* Light Blue */
-  --ifm-color-primary-lighter: #3280FF;    /* Lighter Blue */
-  --ifm-color-primary-lightest: #3A8BFF;   /* Lightest Blue */
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-color-primary: #ffffff;            /* New Primary Blue */
-  --ifm-color-primary-dark: #204FCF;       /* Darker Blue */
-  --ifm-color-primary-darker: #1B45B7;     /* Even Darker Blue */
-  --ifm-color-primary-darkest: #163C9D;    /* Darkest Blue */
-  --ifm-color-primary-light: #2974FF;      /* Light Blue */
-  --ifm-color-primary-lighter: #3280FF;    /* Lighter Blue */
-  --ifm-color-primary-lightest: #3A8BFF;   /* Lightest Blue */
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
-
-.footer.footer--dark {
-  --ifm-footer-background-color: #1a212f;
-  --ifm-footer-color: var(--ifm-footer-link-color);
-  --ifm-footer-link-color: var(--ifm-color-secondary);
-  --ifm-footer-title-color: var(--ifm-color-white);
-
-  background-color: var(--ifm-footer-background-color);
-  color: var(--ifm-footer-color)
-}
--- a/docs/src/hooks/useAppRelease.js
+++ b/docs/src/hooks/useAppRelease.js
@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+
+import axios from "axios";
+
+import { isAxiosError } from "axios";
+
+export const useAppRelease = () => {
+  const [release, setRelease] = useState({
+    tagVersion: "",
+  });
+
+  useEffect(() => {
+    const updateStargazers = async () => {
+      try {
+        const { data } =
+          (await axios.get) <
+          {
+            tag_name: string,
+          } >
+          "https://api.github.com/repos/janhq/jan/releases/latest";
+        setRelease({
+          tagVersion: data.tag_name,
+        });
+      } catch (error) {
+        if (isAxiosError(error)) {
+          console.error("Failed to get stargazers:", error);
+        }
+      }
+    };
+    updateStargazers();
+  }, []);
+
+  return { release };
+};
--- a/docs/src/hooks/useAppStars.js
+++ b/docs/src/hooks/useAppStars.js
@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+
+import axios from "axios";
+import { isAxiosError } from "axios";
+
+export const useAppStars = () => {
+  const [stargazers, setStargazers] = useState({
+    count: 0,
+  });
+
+  useEffect(() => {
+    const updateStargazers = async () => {
+      try {
+        const { data } = await axios.get(
+          "https://api.github.com/repos/janhq/jan"
+        );
+        setStargazers({
+          count: data.stargazers_count,
+        });
+      } catch (error) {
+        if (isAxiosError(error)) {
+          console.error("Failed to get stargazers:", error);
+        }
+      }
+    };
+    updateStargazers();
+  }, []);
+
+  return { stargazers };
+};
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@ -1,32 +1,160 @@
 import React from "react";
+import Dropdown from "@site/src/components/Elements/dropdown";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
-import {
-  HomepageHero,
-  HomepageBanner,
-  HomepageSectionOne,
-  HomepageSectionTwo,
-  HomepageSectionThree,
-  HomepageDownloads,
-} from "@site/src/components/Homepage";

-import styles from "./index.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Layout from "@theme/Layout";
+import AnnoncementBanner from "@site/src/components/Announcement";
+import {
+  CloudArrowUpIcon,
+  CursorArrowRaysIcon,
+  ShieldCheckIcon,
+  CpuChipIcon,
+  ClipboardDocumentIcon,
+  CubeTransparentIcon,
+} from "@heroicons/react/24/outline";
+
+import ThemedImage from "@theme/ThemedImage";
+
+const features = [
+  {
+    name: "1 Click Installs.",
+    desc: "Llama2, MPT, CodeLlama, and more. 1 click to install the latest and greatest models directly from HuggingFace. Or easily upload your own models.",
+    icon: CursorArrowRaysIcon,
+  },
+  {
+    name: "Model Management.",
+    desc: "Configure advanced settings for each model. Manage your model versions. Easily switch between models. Get visibility into hardware performance.",
+    icon: CubeTransparentIcon,
+  },
+  {
+    name: "Cloud AI Compatible.",
+    desc: "Connect to ChatGPT, Claude via an API key. Alternatively, host your own AI server on any GPU cloud and use it from the app.",
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: "Data Security and Privacy.",
+    desc: "Jan runs locally on your machine. Your data never leaves your computer. You can even run Jan offline.",
+    icon: ShieldCheckIcon,
+  },
+  {
+    name: "Cross Device Compatible.",
+    desc: "Jan runs Nitro, a C++ inference engine, that is compatible with all major operating systems (CPU and GPU).",
+    icon: CpuChipIcon,
+  },
+  {
+    name: "Audit & compliance.",
+    desc: "Coming soon.",
+    icon: ClipboardDocumentIcon,
+  },
+];

 export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
-    <Layout
-      title={`${siteConfig.tagline}`}
-      description="Description will go into a meta tag in <head />"
-    >
-      {/* <HomepageBanner /> */}
-      <main className={styles.main}>
-        <HomepageHero />
-        <HomepageSectionOne />
-        <HomepageSectionTwo />
-        {/* <HomepageSectionThree />
-        <HomepageDownloads /> */}
-      </main>
-    </Layout>
+    <>
+      <AnnoncementBanner />
+      <Layout
+        title={`${siteConfig.tagline}`}
+        description="Description will go into a meta tag in <head />"
+      >
+        <main className="bg-gray-50 dark:bg-gray-950/95 relative">
+          <div className="relative">
+            <ThemedImage
+              alt="App screenshot"
+              sources={{
+                light: useBaseUrl("/img/bg-hero-light.svg"),
+                dark: useBaseUrl("/img/bg-hero-dark.svg"),
+              }}
+              className="absolute w-full h-full opacity-30 dark:opacity-20 top-0 object-cover blur-3xl"
+            />
+            <div className="container py-16">
+              <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-4">
+                <div className="relative z-10 text-center lg:text-left ">
+                  <div className="bg-red-50 mb-4 inline-flex items-center py-1 rounded-full px-4 gap-x-2">
+                    <span className="font-bold uppercase text-blue-600">
+                      Event
+                    </span>
+                    <a href="/events/hcmc-oct23">
+                      <p className="font-bold">
+                        Jan's AI Hacker House (Ho Chi Minh City)
+                      </p>
+                    </a>
+                  </div>
+
+                  <h1 className="bg-gradient-to-r dark:from-white from-black to-gray-500 dark:to-gray-400 bg-clip-text text-4xl lg:text-6xl font-bold leading-tight text-transparent dark:text-transparent lg:leading-tight">
+                    Run Your Own AI
+                  </h1>
+                  <p className="text-xl leading-relaxed lg:text-2xl lg:leading-relaxed text-gray-500 dark:text-gray-400">
+                    Run large Language Models locally on&nbsp;
+                    <span className="dark:text-white text-black">Macbook</span>
+                    ,&nbsp;
+                    <span className="dark:text-white text-black">Windows</span>
+                    &nbsp;or&nbsp;
+                    <span className="dark:text-white text-black">Linux</span>.
+                  </p>
+
+                  <div className="my-6 flex flex-col-reverse md:flex-row items-center justify-center lg:justify-start gap-4 relative z-20">
+                    <button
+                      type="button"
+                      className="cursor-pointer relative hidden md:inline-flex items-center px-4 py-2.5  text-base font-semibold rounded-lg border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
+                      onClick={() =>
+                        window.open(
+                          "https://github.com/janhq/jan",
+                          "_blank",
+                          "noreferrer"
+                        )
+                      }
+                    >
+                      View Github
+                    </button>
+                    <Dropdown />
+                  </div>
+                </div>
+
+                <div className="text-center relative lg:w-[120%] lg:-left-36">
+                  <div className="el-blur-hero absolute -left-40 w-full top-1/2 -translate-y-1/2" />
+                  <div className="p-3 border dark:border-gray-500 border-gray-400 inline-block rounded-lg relative z-10">
+                    <ThemedImage
+                      alt="App screenshot"
+                      sources={{
+                        light: useBaseUrl("/img/desktop-llm-chat-light.png"),
+                        dark: useBaseUrl("/img/desktop-llm-chat-dark.png"),
+                      }}
+                      width={1800}
+                      className="rounded-md mx-auto"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="container mt-10 mb-20 text-center">
+            <h2>AI that you control</h2>
+            <p className="text-base mt-2 w-full lg:w-2/5 mx-auto leading-relaxed">
+              Jan is a source-available, cross device, and privacy focused AI
+              engine and Desktop app that runs locally on your machine.
+            </p>
+            <div className="grid text-left lg:grid-cols-3 mt-16 gap-8">
+              {features.map((feat, i) => {
+                return (
+                  <div className="flex gap-x-4" key={i}>
+                    <feat.icon
+                      className="h-6 w-6 text-indigo-600 dark:text-indigo-400 flex-shrink-0"
+                      aria-hidden="true"
+                    />
+                    <div>
+                      <h6>{feat.name}</h6>
+                      <p className="mt-2">{feat.desc}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </main>
+      </Layout>
+    </>
  );
 }
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@ -1,23 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-/* .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-} */
--- a/docs/src/styles/base.scss
+++ b/docs/src/styles/base.scss
@ -0,0 +1,45 @@
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+  html[data-theme="light"] {
+    --ifm-background-color: white;
+    --ifm-color-primary: #2563eb; /* New Primary Blue */
+    --ifm-color-primary-dark: #204fcf; /* Darker Blue */
+    --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
+    --ifm-color-primary-darkest: #163c9d; /* Darkest Blue */
+    --ifm-color-primary-light: #2974ff; /* Light Blue */
+    --ifm-color-primary-lighter: #3280ff; /* Lighter Blue */
+    --ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
+    --ifm-code-font-size: 95%;
+    --ifm-navbar-link-hover-color: inherit;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  }
+  html[data-theme="dark"] {
+    --ifm-background-color: black;
+    --ifm-color-primary: #ffffff; /* New Primary Blue */
+    --ifm-color-primary-dark: #204fcf; /* Darker Blue */
+    --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
+    --ifm-color-primary-darkest: #163c9d; /* Darkest Blue */
+    --ifm-color-primary-light: #2974ff; /* Light Blue */
+    --ifm-color-primary-lighter: #3280ff; /* Lighter Blue */
+    --ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  }
+  body {
+    @apply text-sm;
+    @apply antialiased;
+    @apply bg-white dark:bg-black;
+    @apply text-gray-700 dark:text-gray-500;
+  }
+  img {
+    pointer-events: none;
+  }
+
+  a {
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
--- a/docs/src/styles/components.scss
+++ b/docs/src/styles/components.scss
@ -0,0 +1,18 @@
+@layer components {
+  .el-blur-hero {
+    height: 200px;
+    background: linear-gradient(
+      180deg,
+      hsl(296, 100%, 67%) 0%,
+      hsl(253, 100%, 57%) 100%
+    );
+    z-index: 2;
+    border-bottom-left-radius: 100%;
+    border-bottom-right-radius: 100%;
+    border-top-left-radius: 100%;
+    border-top-right-radius: 100%;
+    filter: blur(100px);
+    -webkit-filter: blur(100px);
+    opacity: 0.5;
+  }
+}
--- a/docs/src/styles/main.scss
+++ b/docs/src/styles/main.scss
@ -0,0 +1,8 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import './typography.scss';
+@import './tweaks.scss';
+@import './base.scss';
+@import './components.scss';
--- a/docs/src/styles/tweaks.scss
+++ b/docs/src/styles/tweaks.scss
@ -0,0 +1,86 @@
+.redocusaurus {
+  div[data-section-id] {
+    min-height: auto;
+  }
+}
+
+.col.docItemCol_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module {
+  @apply p-4 lg:px-16 lg:py-4;
+}
+
+.breadcrumbsContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocBreadcrumbs-styles-module {
+  margin-bottom: 40px !important;
+}
+
+.theme-doc-footer {
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+
+.menu.thin-scrollbar {
+  padding: 32px 10px;
+}
+
+.iconExternalLink_node_modules-\@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module {
+  display: none;
+}
+
+.navbar {
+  @apply px-0 lg:h-16 border-b border-gray-200 dark:border-gray-800 bg-white/50 backdrop-blur-lg dark:bg-black/50 shadow-none;
+
+  .navbar__toggle {
+    width: 24px;
+  }
+
+  .navbar-sidebar__backdrop {
+    height: 100dvh;
+  }
+
+  .navbar-sidebar {
+    height: 100dvh;
+    .navbar-sidebar__close {
+      width: 14px;
+    }
+    // .toggle_node_modules-\@docusaurus-theme-classic-lib-theme-ColorModeToggle-styles-module {
+    //   width: 24px;
+    //   height: 24px;
+    // }
+  }
+
+  .navbar__title {
+    @apply text-lg;
+  }
+  .navbar__brand {
+    margin-right: 24px;
+    &:hover {
+      color: inherit;
+    }
+  }
+  .navbar__inner {
+    @apply container;
+  }
+}
+
+.breadcrumbs__item {
+  position: relative;
+  &:first-child {
+    .breadcrumbs__link {
+      vertical-align: middle;
+      margin-top: -2px;
+    }
+  }
+}
+
+.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module,
+.docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module {
+  @apply bg-gray-50 dark:bg-gray-950/95;
+}
+
+.navbar-sidebar {
+  @apply bg-gray-50 dark:bg-gray-900;
+}
+
+.docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module,
+.table-of-contents__left-border {
+  @apply border-gray-200 dark:border-gray-800;
+}
--- a/docs/src/styles/typography.scss
+++ b/docs/src/styles/typography.scss
@ -0,0 +1,42 @@
+h1,
+.h1 {
+  line-height: 48px;
+  font-size: 40px;
+  @apply font-bold text-black dark:text-white;
+}
+h2,
+.h2 {
+  font-size: 32px;
+  @apply font-bold text-black dark:text-white;
+  line-height: 40px;
+}
+h3,
+.h3 {
+  font-size: 28px;
+  @apply font-bold text-black dark:text-white;
+  line-height: 40px;
+}
+h4,
+.h4 {
+  font-size: 24px;
+  @apply font-bold text-black dark:text-white;
+  line-height: 32px;
+}
+h5,
+.h5 {
+  font-size: 20px;
+  @apply font-bold text-black dark:text-white;
+  line-height: 28px;
+}
+h6,
+.h6 {
+  font-size: 16px;
+  @apply font-bold text-black dark:text-white;
+  line-height: 24px;
+}
+p {
+  line-height: 24px;
+}
+.paragraph {
+  line-height: 24px;
+}
--- a/docs/src/theme/Layout/Provider/index.js
+++ b/docs/src/theme/Layout/Provider/index.js
@ -0,0 +1,21 @@
+import React from "react";
+import { composeProviders } from "@docusaurus/theme-common";
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from "@docusaurus/theme-common/internal";
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+export default function LayoutProvider({ children }) {
+  return <Provider>{children}</Provider>;
+}
--- a/docs/src/theme/Layout/index.js
+++ b/docs/src/theme/Layout/index.js
@ -0,0 +1,53 @@
+import React from "react";
+import clsx from "clsx";
+import ErrorBoundary from "@docusaurus/ErrorBoundary";
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from "@docusaurus/theme-common";
+import { useKeyboardNavigation } from "@docusaurus/theme-common/internal";
+import SkipToContent from "@theme/SkipToContent";
+import AnnouncementBar from "@theme/AnnouncementBar";
+import Navbar from "@theme/Navbar";
+import Footer from "@site/src/components/Footer";
+import LayoutProvider from "@theme/Layout/Provider";
+import ErrorPageContent from "@theme/ErrorPageContent";
+import styles from "./styles.module.scss";
+export default function Layout(props) {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    // Not really layout-related, but kept for convenience/retro-compatibility
+    title,
+    description,
+  } = props;
+  useKeyboardNavigation();
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName
+        )}
+      >
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer />}
+    </LayoutProvider>
+  );
+}
--- a/docs/src/theme/Layout/styles.module.scss
+++ b/docs/src/theme/Layout/styles.module.scss
@ -0,0 +1,21 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
--- a/docs/static/img/bg-hero-dark.svg
+++ b/docs/static/img/bg-hero-dark.svg
@ -0,0 +1,167 @@
+<svg width="1440" height="900" viewBox="0 0 1440 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_68_822" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1440" height="900">
+<rect width="1440" height="900" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0_68_822)">
+<rect x="-66" y="-0.478027" width="1572" height="950.938" fill="#2F307D"/>
+<g filter="url(#filter0_f_68_822)">
+<path d="M-57.8301 396.173L744.277 -13.1623L1108.87 -13.1624L1555.07 95.9939L-9.21778 706.098L-57.8301 396.173Z" fill="url(#paint0_linear_68_822)"/>
+</g>
+<g filter="url(#filter1_f_68_822)">
+<path d="M-101.107 383.634L800.122 -0.623145L1108.87 -13.1624L1555.07 95.9939L-9.21663 706.098L-101.107 383.634Z" fill="url(#paint1_linear_68_822)"/>
+</g>
+<g filter="url(#filter2_f_68_822)">
+<ellipse cx="329.847" cy="107.571" rx="329.847" ry="107.571" transform="matrix(0.914846 -0.403803 0.330497 0.943807 508.14 342.034)" fill="#E73800"/>
+</g>
+<g filter="url(#filter3_f_68_822)">
+<path d="M673.463 29.4612C498.517 54.805 280.304 103.381 65.8544 29.4612C54.5674 23.8293 45.914 29.8836 101.596 99.1566C171.198 185.748 398.816 149.844 673.463 29.4612Z" fill="#4463B1"/>
+</g>
+<g opacity="0.4" filter="url(#filter4_f_68_822)">
+<path d="M609.751 41.4427C470.997 61.5436 297.927 100.07 127.841 41.4427C118.889 36.9759 112.026 41.7777 156.188 96.72C211.392 165.398 391.922 136.922 609.751 41.4427Z" fill="#4463B1"/>
+</g>
+<path d="M683.23 327.829C1018.31 164.095 1157.2 156.298 1478.39 218.673L1584.3 429.188L35.639 906.746C7.28175 901.548 89.4594 770.301 313.426 571.481C355.643 534.003 348.151 491.563 683.23 327.829Z" fill="url(#paint2_linear_68_822)"/>
+<g opacity="0.7" filter="url(#filter5_f_68_822)">
+<path d="M898.979 256.588C1242.14 115.511 1157.2 156.298 1478.39 218.673L1584.3 429.189L47.792 902.848C19.4347 897.65 -12.9736 787.454 84.2516 629.958C205.783 433.087 499.515 420.813 898.979 256.588Z" fill="#4463B1"/>
+</g>
+<g filter="url(#filter6_f_68_822)">
+<path d="M806.495 345.372C1198.82 247.081 1179.04 156.299 1534.2 218.674L1584.3 429.189L-114.729 902.848C-146.086 897.65 -181.922 787.454 -74.4129 629.958C59.9733 433.087 510.846 419.442 806.495 345.372Z" fill="#4463B1"/>
+</g>
+<g filter="url(#filter7_f_68_822)">
+<ellipse cx="329.847" cy="107.571" rx="329.847" ry="107.571" transform="matrix(0.914846 -0.403803 0.330497 0.943807 -67.2598 503.045)" fill="#4463B1"/>
+</g>
+<g opacity="0.4" filter="url(#filter8_f_68_822)">
+<ellipse cx="329.847" cy="156.166" rx="329.847" ry="156.166" transform="matrix(0.914846 -0.403803 0.330497 0.943807 437.842 560.226)" fill="#4463B1"/>
+</g>
+<g filter="url(#filter9_f_68_822)">
+<ellipse cx="329.847" cy="107.571" rx="329.847" ry="107.571" transform="matrix(0.914846 -0.403803 0.330497 0.943807 980.781 431.732)" fill="#3A78F0"/>
+</g>
+<g filter="url(#filter10_f_68_822)">
+<ellipse cx="296.397" cy="165.703" rx="296.397" ry="165.703" transform="matrix(0.914846 -0.403803 0.330497 0.943807 -370.611 508.381)" fill="#2A4EAB"/>
+</g>
+<g filter="url(#filter11_f_68_822)">
+<path d="M-431 798.106V1422H1785V340.827L-431 798.106Z" fill="white"/>
+</g>
+<g filter="url(#filter12_f_68_822)">
+<path d="M1168.87 194.6L1651.63 -51L1531.83 244.697L1168.87 194.6Z" fill="#2A4EAB"/>
+</g>
+<g opacity="0.4" filter="url(#filter13_f_68_822)">
+<path d="M303.606 802.698L1065.95 450.301L1427.09 399.795L1877.64 402.328L376.107 978.65L303.606 802.698Z" fill="url(#paint3_linear_68_822)"/>
+</g>
+<g opacity="0.4" filter="url(#filter14_f_68_822)">
+<path d="M888 621.314L1690.16 377.877L2054.78 377.877L2501 442.793L936.615 805.63L888 621.314Z" fill="url(#paint4_linear_68_822)"/>
+</g>
+<g opacity="0.4" filter="url(#filter15_f_68_822)">
+<path d="M839.773 675.305L1706.82 339.905L2012.39 295.317L2463.11 306.023L954.084 854.616L839.773 675.305Z" fill="url(#paint5_linear_68_822)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_68_822" x="-64.8301" y="-20.1624" width="1626.9" height="733.26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter1_f_68_822" x="-125.107" y="-37.1624" width="1704.18" height="767.26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter2_f_68_822" x="377.575" y="-21.1177" width="935.751" height="662.969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter3_f_68_822" x="-10.4902" y="-40.1458" width="751.953" height="255.045" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="34" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter4_f_68_822" x="85.2227" y="4.16821" width="560.528" height="166.417" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter5_f_68_822" x="7.91602" y="150.332" width="1587.38" height="763.516" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.5" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter6_f_68_822" x="-192.659" y="152.168" width="1822.96" height="796.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="23" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter7_f_68_822" x="-197.824" y="139.894" width="935.751" height="662.969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter8_f_68_822" x="321.022" y="211.765" width="940.382" height="725.316" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter9_f_68_822" x="850.217" y="68.5803" width="935.751" height="662.969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter10_f_68_822" x="-485.376" y="184.142" width="881.373" height="721.889" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter11_f_68_822" x="-587" y="184.827" width="2528" height="1393.17" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="78" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter12_f_68_822" x="1100.87" y="-119" width="618.759" height="431.697" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="34" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter13_f_68_822" x="296.605" y="392.795" width="1588.03" height="592.855" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter14_f_68_822" x="881" y="370.877" width="1627" height="441.754" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<filter id="filter15_f_68_822" x="815.773" y="271.317" width="1671.34" height="607.299" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_68_822"/>
+</filter>
+<linearGradient id="paint0_linear_68_822" x1="748.618" y1="-13.1624" x2="81.6937" y2="550.866" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7D54"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_68_822" x1="501.216" y1="242.185" x2="29.7383" y2="626.281" gradientUnits="userSpaceOnUse">
+<stop offset="0.0104167" stop-color="#91B0ED"/>
+<stop offset="0.458333" stop-color="#437DD5"/>
+<stop offset="1" stop-color="#8A3AF0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_68_822" x1="1164.15" y1="269.352" x2="415.258" y2="536.803" gradientUnits="userSpaceOnUse">
+<stop stop-color="#819CFF"/>
+<stop offset="0.65537" stop-color="#E73800"/>
+<stop offset="1" stop-color="#819CFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_68_822" x1="1070.25" y1="449.7" x2="767.856" y2="1036.35" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3A4CF0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_68_822" x1="1694.5" y1="377.877" x2="1316" y2="916.154" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D73AF0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_68_822" x1="1427.52" y1="519.254" x2="1201.79" y2="922.897" gradientUnits="userSpaceOnUse">
+<stop offset="0.166667" stop-color="#FF9471"/>
+<stop offset="0.541667" stop-color="#DBC0C6" stop-opacity="0.69"/>
+<stop offset="0.791667" stop-color="#C2DEFF" stop-opacity="0.62"/>
+<stop offset="1" stop-color="#9492FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/docs/static/img/bg-hero-light.svg
+++ b/docs/static/img/bg-hero-light.svg
@ -0,0 +1,136 @@
+<svg width="1440" height="900" viewBox="0 0 1440 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="-1.50195" y="-3.47998" width="1491.69" height="872.683" fill="#9535E1"/>
+<g filter="url(#filter0_f_2_1567)">
+<path d="M5.8584 407.846L767.131 -16.7519L1113.17 -16.752L1536.64 96.4744L51.9959 729.328L5.8584 407.846Z" fill="url(#paint0_linear_2_1567)"/>
+</g>
+<g filter="url(#filter1_f_2_1567)">
+<path d="M-35.2168 394.84L820.132 -3.7452L1113.17 -16.752L1536.64 96.4744L51.9959 729.328L-35.2168 394.84Z" fill="url(#paint1_linear_2_1567)"/>
+</g>
+<g filter="url(#filter2_f_2_1567)">
+<ellipse cx="317.98" cy="110.585" rx="317.98" ry="110.585" transform="matrix(0.900676 -0.434491 0.305122 0.952313 607.015 273.158)" fill="#9D70FF"/>
+</g>
+<g filter="url(#filter3_f_2_1567)">
+<ellipse cx="317.98" cy="110.585" rx="317.98" ry="110.585" transform="matrix(0.900676 -0.434491 0.305122 0.952313 373 356.521)" fill="#9D70FF"/>
+</g>
+<g opacity="0.4" filter="url(#filter4_f_2_1567)">
+<path d="M699.922 27.4613C533.882 53.7501 326.778 104.137 123.246 27.4613C112.534 21.6194 104.321 27.8994 157.168 99.7555C223.227 189.576 439.257 152.333 699.922 27.4613Z" fill="#FDFF89"/>
+</g>
+<g opacity="0.3" filter="url(#filter5_f_2_1567)">
+<path d="M639.454 39.8894C507.763 60.7398 343.504 100.703 182.077 39.8894C173.581 35.256 167.067 40.2369 208.981 97.2278C261.374 168.466 432.714 138.928 639.454 39.8894Z" fill="#FDFF89"/>
+</g>
+<path d="M709.192 336.955C1027.21 167.115 1159.03 159.028 1463.87 223.728L1564.39 442.093L94.5687 937.458C67.655 932.066 145.649 795.925 358.213 589.691C398.281 550.817 391.171 506.794 709.192 336.955Z" fill="url(#paint2_linear_2_1567)"/>
+<g filter="url(#filter6_f_2_1567)">
+<path d="M921.752 286.407C1258.49 184.451 1159.03 159.028 1463.87 223.729L1564.39 442.093L106.102 933.414C79.1886 928.022 48.4301 813.717 140.706 650.348C256.05 446.137 667.995 363.239 921.752 286.407Z" fill="#81F7FF"/>
+</g>
+<g filter="url(#filter7_f_2_1567)">
+<path d="M826.182 355.152C1198.54 253.196 1179.76 159.029 1516.84 223.729L1564.39 442.094L-48.144 933.414C-77.9044 928.023 -111.916 813.718 -9.88045 650.349C117.664 446.137 545.583 431.983 826.182 355.152Z" fill="#81F7FF"/>
+</g>
+<g filter="url(#filter8_f_2_1567)">
+<ellipse cx="317.98" cy="110.585" rx="317.98" ry="110.585" transform="matrix(0.900676 -0.434491 0.305122 0.952313 -3.0918 518.704)" fill="#707EFF"/>
+</g>
+<g opacity="0.8" filter="url(#filter9_f_2_1567)">
+<ellipse cx="380.177" cy="161.796" rx="380.177" ry="161.796" transform="matrix(0.933505 -0.358564 0.247194 0.968966 476.48 543.488)" fill="#8026F1"/>
+</g>
+<g filter="url(#filter10_f_2_1567)">
+<ellipse cx="317.98" cy="110.585" rx="317.98" ry="110.585" transform="matrix(0.900676 -0.434491 0.305122 0.952313 991.594 444.731)" fill="#FFBAF4"/>
+</g>
+<g filter="url(#filter11_f_2_1567)">
+<ellipse cx="285.734" cy="170.346" rx="285.734" ry="170.346" transform="matrix(0.900676 -0.434491 0.305122 0.952313 -291 524.239)" fill="url(#paint3_linear_2_1567)"/>
+</g>
+<g filter="url(#filter12_f_2_1567)">
+<path d="M-5 784.943V1160H1577V397.063L-5 784.943Z" fill="white"/>
+</g>
+<g filter="url(#filter13_f_2_1567)">
+<path d="M1170.11 198.758L1628.29 -56L1514.59 250.723L1170.11 198.758Z" fill="#9651ED"/>
+</g>
+<defs>
+<filter id="filter0_f_2_1567" x="-1.1416" y="-23.752" width="1544.79" height="760.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter1_f_2_1567" x="-59.2168" y="-40.752" width="1619.86" height="794.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="12" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter2_f_2_1567" x="474.748" y="-97.4189" width="904.811" height="675.458" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter3_f_2_1567" x="240.733" y="-14.0562" width="904.811" height="675.458" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter4_f_2_1567" x="47.3262" y="-42.2056" width="720.596" height="259.483" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="34" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter5_f_2_1567" x="139.795" y="2.56738" width="535.658" height="169.938" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter6_f_2_1567" x="64.6963" y="174.236" width="1513.69" height="773.177" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter7_f_2_1567" x="-124.449" y="156.459" width="1734.83" height="822.956" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="23" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter8_f_2_1567" x="-135.358" y="148.127" width="904.811" height="675.458" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter9_f_2_1567" x="350.197" y="192.19" width="1042.35" height="743.511" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter10_f_2_1567" x="859.328" y="74.1538" width="904.811" height="675.458" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter11_f_2_1567" x="-408.271" y="194.025" width="853.202" height="736.576" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="82" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter12_f_2_1567" x="-137" y="265.063" width="1846" height="1026.94" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="66" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<filter id="filter13_f_2_1567" x="1102.11" y="-124" width="594.182" height="442.723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="34" result="effect1_foregroundBlur_2_1567"/>
+</filter>
+<linearGradient id="paint0_linear_2_1567" x1="771.251" y1="-16.752" x2="92.1733" y2="508.724" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FED237"/>
+<stop offset="1" stop-color="#FF0000" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2_1567" x1="803.5" y1="-0.783345" x2="870.787" y2="283.645" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC700"/>
+<stop offset="0.53125" stop-color="#FF18BE" stop-opacity="0.484375"/>
+<stop offset="1" stop-color="#6100FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2_1567" x1="1165.62" y1="276.298" x2="441.526" y2="512.908" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9281FF"/>
+<stop offset="0.65537" stop-color="#81F7FF"/>
+<stop offset="1" stop-color="#81D1FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2_1567" x1="373.961" y1="100.557" x2="261.156" y2="328.531" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9651EE"/>
+<stop offset="1" stop-color="#51C8EE"/>
+</linearGradient>
+</defs>
+</svg>
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@ -1,15 +1,29 @@
 // tailwind.config.js
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  corePlugins: {
-    preflight: false, // disable Tailwind's reset
-  },
-  content: ["./src/**/*.{js,jsx,ts,tsx}"], // Only affects code in /src; can also add ./docs/**/*.mdx to use tailwind in docs
-  darkMode: ["class", '[data-theme="dark"]'], // hooks into docusaurus' dark mode settings
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  darkMode: ["class", '[data-theme="dark"]'],
  theme: {
+    container: {
+      center: true,
+      padding: "16px",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    fontFamily: {
+      sans: [
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Oxygen-Sans",
+        "Ubuntu,Cantarell",
+        "Helvetica",
+        "sans-serif",
+      ],
+    },
    extend: {},
  },
-  plugins: [
-    require("tailwindcss-animate"),
-  ],
+  plugins: [require("tailwindcss-animate")],
 };
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@ -3109,7 +3109,7 @@ cheerio@^1.0.0-rc.12:
    parse5 "^7.0.0"
    parse5-htmlparser2-tree-adapter "^7.0.0"

-chokidar@^3.4.2, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.3:
  version "3.5.3"
  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@ -3827,6 +3827,13 @@ docusaurus-plugin-redoc@1.6.0:
    "@redocly/openapi-core" "1.0.0-beta.123"
    redoc "2.0.0"

+docusaurus-plugin-sass@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.5.tgz#6bfb8a227ac6265be685dcbc24ba1989e27b8005"
+  integrity sha512-Z+D0fLFUKcFpM+bqSUmqKIU+vO+YF1xoEQh5hoFreg2eMf722+siwXDD+sqtwU8E4MvVpuvsQfaHwODNlxJAEg==
+  dependencies:
+    sass-loader "^10.1.1"
+
 docusaurus-theme-redoc@1.6.3:
  version "1.6.3"
  resolved "https://registry.npmjs.org/docusaurus-theme-redoc/-/docusaurus-theme-redoc-1.6.3.tgz"
@ -4900,6 +4907,11 @@ immer@^9.0.7:
  resolved "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz"
  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==

+immutable@^4.0.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
+
 import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
  version "3.3.0"
  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@ -5326,6 +5338,11 @@ kleur@^3.0.3:
  resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz"
  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==

+klona@^2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
+  integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
+
 latest-version@^5.1.0:
  version "5.1.0"
  resolved "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz"
@ -6790,6 +6807,11 @@ react-helmet-async@*, react-helmet-async@^1.3.0:
    react-fast-compare "^3.2.0"
    shallowequal "^1.1.0"

+react-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@ -7274,6 +7296,26 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

+sass-loader@^10.1.1:
+  version "10.4.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.4.1.tgz#bea4e173ddf512c9d7f53e9ec686186146807cbf"
+  integrity sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==
+  dependencies:
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
+
+sass@^1.69.3:
+  version "1.69.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.3.tgz#f8a0c488697e6419519834a13335e7b65a609c11"
+  integrity sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
  version "1.2.4"
  resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
@ -7595,7 +7637,7 @@ sort-css-media-queries@2.1.0:
  resolved "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz"
  integrity sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA==

-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
  version "1.0.2"
  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==