Revamp landing page

docs/src/containers/Banner/index.js

@@ -27,7 +27,7 @@ export default function AnnoncementBanner() {
 
   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="px-4 lg:px-10 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"

docs/src/containers/DownloadApp/index.js

@@ -4,22 +4,22 @@ import { FaWindows, FaApple, FaLinux } from "react-icons/fa";
 
 const systemsTemplate = [
   {
-    name: "Download for Mac (M1/M2)",
+    name: "Mac Silicon",
     logo: FaApple,
     fileFormat: "{appname}-mac-arm64-{tag}.dmg",
   },
   {
-    name: "Download for Mac (Intel)",
+    name: "Mac (Intel)",
     logo: FaApple,
     fileFormat: "{appname}-mac-x64-{tag}.dmg",
   },
   {
-    name: "Download for Windows",
+    name: "Windows",
     logo: FaWindows,
     fileFormat: "{appname}-win-x64-{tag}.exe",
   },
   {
-    name: "Download for Linux",
+    name: "Linux",
     logo: FaLinux,
     fileFormat: "{appname}-linux-amd64-{tag}.deb",
   },
@@ -90,66 +90,29 @@ export default function DownloadApp() {
 
   return (
     <div>
-      <div className="flex flex-col gap-y-4">
-        <div className="flex items-center space-x-4">
-          <h6 className="w-[100px]">Windows</h6>
-          {systems
-            .filter((x) => x.name.includes("Windows"))
-            .map((system) => (
+      <div className="flex flex-col lg:flex-row items-center justify-center gap-4 mb-4">
+        <span className="text-zinc-500 text-lg font-medium  inline-block">
+          Download for PC
+        </span>
+        <div className="bg-yellow-50 text-yellow-700 space-x-2 px-4 py-2 border border-yellow-400 rounded-lg font-semibold">
+          <span>🚧</span>
+          <span>
+            Warning: Jan is in the process of being built. Expect bugs!
+          </span>
+        </div>
+      </div>
+      <div className="mx-auto text-center">
+        {systems.map((system, i) => (
           <a
+            key={i}
             href={system.href}
-                className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
+            className="inline-flex m-2 px-4 py-2 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-black dark:text-white bg-neutral-50 min-w-[200px] dark:bg-[#18181B]"
           >
             <system.logo />
             <span>{system.name}</span>
           </a>
         ))}
       </div>
-        <div className="flex items-start lg:items-center space-x-4">
-          <h6 className="w-[100px]">Mac</h6>
-          <div className="flex flex-col lg:flex-row gap-4">
-            {systems
-              .filter((x) => x.name.includes("Mac"))
-              .map((system) => (
-                <a
-                  href={system.href}
-                  className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
-                >
-                  <system.logo />
-                  <span>{system.name}</span>
-                </a>
-              ))}
-          </div>
-        </div>
-        <div className="flex items-center space-x-4">
-          <h6 className="w-[100px]">Linux</h6>
-          {systems
-            .filter((x) => x.name.includes("Linux"))
-            .map((system) => (
-              <a
-                href={system.href}
-                className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
-              >
-                <system.logo />
-                <span>{system.name}</span>
-              </a>
-            ))}
-        </div>
-      </div>
-
-      {/* {systems.map((system) => (
-        <a
-          href={system.href}
-          className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
-        >
-          <img
-            src={system.logo}
-            alt="Logo"
-            className="w-3 mr-3 -mt-1 flex-shrink-0"
-          />
-          <span>{system.name}</span>
-        </a>
-      ))} */}
     </div>
   );
 }

docs/src/containers/Footer/index.js

@@ -1,5 +1,23 @@
 import React from "react";
 
+import { AiOutlineGithub, AiOutlineTwitter } from "react-icons/ai";
+import { BiLogoDiscordAlt } from "react-icons/bi";
+
+const socials = [
+  {
+    icon: <AiOutlineTwitter className="text-xl text-black dark:text-white" />,
+    href: "https://twitter.com/janhq_",
+  },
+  {
+    icon: <BiLogoDiscordAlt className="text-xl text-black dark:text-white" />,
+    href: "https://discord.com/invite/FTk2MvZwJH",
+  },
+  {
+    icon: <AiOutlineGithub className="text-lg text-black dark:text-white" />,
+    href: "https://github.com/janhq/jan",
+  },
+];
+
 const menus = [
   {
     name: "For Developers",
@@ -72,7 +90,7 @@ export default function Footer() {
         <div className="grid grid-cols-2 gap-8 md:grid-cols-2 lg:grid-cols-6">
           <div className="lg:col-span-3 col-span-2">
             <div className="flex items-center space-x-2 mb-3">
-              <img alt="Jan Logo" src="img/logo.svg" />
+              <img alt="Jan Logo" src="/img/logo.svg" />
               <h6 className="">Jan</h6>
             </div>
             <div className="w-full lg:w-1/2">
@@ -81,6 +99,18 @@ export default function Footer() {
                 <br className="hidden lg:block" />
                 &nbsp;alternative to ChatGPT.
               </p>
+
+              <div className="mt-4">
+                <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>
           </div>
           {menus.map((menu, i) => {

docs/src/containers/SocialButton/index.js

@@ -7,7 +7,7 @@ export default function SocialButton() {
       <a
         href="https://discord.gg/FTk2MvZwJH"
         target="_blank"
-        className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
+        className="text-white bg-blue-600 hover:bg-blue-700 hover:text-white inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2"
       >
         <span>
           <FaDiscord className="text-xl" />
@@ -17,7 +17,7 @@ export default function SocialButton() {
       <a
         href="https://github.com/janhq/jan"
         target="_blank"
-        className="text-white bg-blue-600 hover:bg-blue-700 hover:text-white inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2"
+        className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-white bg-black hover:text-white"
       >
         <span>
           <FaGithub className="text-lg" />

docs/src/pages/index.js

@@ -10,8 +10,17 @@ import ThemedImage from "@theme/ThemedImage";
 
 import SocialButton from "@site/src/containers/SocialButton";
 
+import { IoArrowDown } from "react-icons/io5";
+
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
+
+  const handleAnchorLink = () => {
+    document
+      .getElementById("download-section")
+      .scrollIntoView({ behavior: "smooth" });
+  };
+
   return (
     <>
       <Banner />
@@ -20,24 +29,58 @@ export default function Home() {
         description="Jan is a ChatGPT-alternative that runs on your own computer, with a local API server."
       >
         <main>
-          <div className="grid grid-cols-1 lg:grid-cols-12 -mt-1 gap-8 items-center relative">
-            <div className="col-span-full lg:col-start-2 lg:col-span-5 lg:text-left text-center relative z-10">
-              <h1 className="text-7xl font-semibold leading-tight lg:leading-tight">
-                Bringing AI to <br /> your Desktop
+          <div className="grid grid-cols-1 lg:grid-cols-12 -mt-1 gap-8 items-center relative min-h-[calc(100vh-96px)] ">
+            <div className="col-span-full lg:col-start-2 lg:col-span-5 text-left relative z-10 px-4 py-6">
+              <img
+                src="/img/homepage/element-hero-blur.png"
+                alt="Element blur"
+                className="hidden lg:block absolute blur-3xl opacity-30 right-32 -bottom-32"
+              />
+              <div className="flex items-center space-x-2 mb-3">
+                <img alt="Jan Logo" src="img/logo.svg" width={36} height={36} />
+                <span className="text-zinc-500 text-4xl font-medium">
+                  Meet Jan
+                </span>
+              </div>
+              <h1 className="text-5xl lg:text-7xl font-semibold leading-tight lg:leading-tight mt-2">
+                Bringing AI to <br /> your Desktop{" "}
+                <span>
+                  <img
+                    src="/img/homepage/element-hero-heading.png"
+                    alt="Element hero heading"
+                    className="w-16 inline-block"
+                  />
+                </span>
               </h1>
-              <p className="text-2xl mt-3">
-                Open-source ChatGPT alternative that runs 100% offline on your
+              <p className="text-2xl mt-3 leading-relaxed text-zinc-500">
+                Open-source ChatGPT alternative that runs{" "}
+                <br className="hidden lg:block" /> 100% offline on your
                 computer.
               </p>
               <div className="mt-8">
-                <SocialButton />
+                <div
+                  onClick={() => handleAnchorLink()}
+                  className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white scroll-smooth"
+                >
+                  <span>Download Jan for PC</span>
                 </div>
               </div>
 
-            <div className="col-span-full lg:col-span-6">
-              <div className="relative text-center">
+              <div
+                onClick={() => handleAnchorLink()}
+                className="hidden lg:inline-block cursor-pointer"
+              >
+                <div className="mt-16 flex items-center space-x-2">
+                  <p>Find out more</p>
+                  <IoArrowDown size={24} className="animate-bounce-down" />
+                </div>
+              </div>
+            </div>
+
+            <div className="col-span-full lg:col-span-6 h-full">
+              <div className="relative text-center h-full">
                 <ThemedImage
-                  className="w-full object-cover mr-auto"
+                  className="w-full object-cover mr-auto h-full"
                   alt="App screenshots"
                   sources={{
                     light: useBaseUrl(
@@ -49,138 +92,226 @@ export default function Home() {
               </div>
             </div>
           </div>
-          {/* <div className="container">
-          </div> */}
 
-          {/* <div className="bg-gray-50 dark:bg-[#09090B]/20 border-y border-gray-00 dark:border-gray-800 mt-10 py-10">
+          <div
+            className="dark:bg-[#09090B]/20 border-t border-zinc-200 dark:border-gray-800 py-16"
+            id="download-section"
+          >
             <div className="container">
               <div className="w-full lg:w-3/4 mx-auto">
                 <DownloadApp />
               </div>
             </div>
-          </div> */}
-
-          {/* <div className="container py-14">
-            <div className="mb-10">
-              <h2 className="h1 text-center lg:text-left">Explore Jan</h2>
           </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              <div className="card relative">
-                <div className="p-8 mb-8">
-                  <h4>Take Control</h4>
-                  <p className="mt-2">
-                    Jan runs 100% on your own machine, privately, predictably
-                    and even in offline, with no surprise bills
-                  </p>
-                </div>
+          <div className="dark:bg-[#09090B]/20 pb-36">
+            <div className="container h-full ">
+              <div className="w-full lg:w-3/4 mx-auto relative rounded-xl py-10">
                 <img
-                  src="img/homepage/full-control.svg"
-                  alt="Full Control Illustration"
-                  className="relative -bottom-2 left-0"
+                  src="/img/homepage/element-bg-open-source.png"
+                  alt="Element Open Source BG"
+                  className="absolute w-full h-full object-cover rounded-xl top-0"
                 />
-              </div>
-
-              <div className="card relative">
-                <div className="p-8 mb-8">
-                  <h4>100% Open Source</h4>
-                  <p className="mt-2">
-                    Say goodbye to black boxes. Jan has well-documented code and
-                    stores data in open-format files that you can inspect,
-                    verify and tinker with.
-                  </p>
+                <div className="grid grid-cols-12 gap-4 px-4 items-center relative z-20">
+                  <div className="col-span-full lg:col-span-7 order-2 lg:order-1 relative">
+                    <div className="relative lg:-left-14 overflow-hidden rounded-lg group">
+                      <div className="hidden group-hover:flex absolute top-0 left-3 rounded-xl bg-black/30 w-[calc(100%-23px)] h-[calc(100%-20px)] items-center justify-center transition-all">
+                        <a
+                          href="https://github.com/orgs/janhq/projects/5/views/12"
+                          target="_blank"
+                          className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 text-black bg-white"
+                        >
+                          <span>View Roadmap</span>
+                        </a>
                       </div>
                       <img
-                  src="img/homepage/open-source.svg"
-                  alt="Full Control Illustration"
-                  className="relative -bottom-2 left-0"
-                />
-              </div>
-
-              <div className="card relative">
-                <div className="p-8 mb-8">
-                  <h4>Extensions</h4>
-                  <p className="mt-2">
-                    Jan has a powerful Extensions API inspired by VSCode. In
-                    fact, most of Jan's core services are built as extensions.
-                  </p>
-                </div>
-                <img
-                  src="img/homepage/extentions.svg"
-                  alt="Extentions Illustration"
-                  className="relative -bottom-2 left-0"
+                        src="/img/homepage/roadmap.png"
+                        alt="Element Roadmap"
+                        className="h-full w-full object-cover"
                       />
                     </div>
                   </div>
-          </div> */}
+                  <div className="col-span-full lg:col-span-5 order-1 lg:order-2 text-black">
+                    <p className="text-4xl font-semibold">100% open source</p>
+                    <p className="leading-relaxed w-full lg:w-3/4 mt-4">
+                      Our core team believes that AI should be open source, and
+                      Jan is built in public.
+                    </p>
+                    <div className="mt-6">
+                      <SocialButton />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-          {/* <div className="container mt-8 pb-16 relative">
+          <div className="dark:bg-[#27272A] bg-zinc-100 pt-20 pb-10">
+            <div className="container">
+              <div className="w-full lg:w-3/4 mx-auto relative">
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+                  <div className="col-span-5">
+                    <p className="text-4xl font-semibold">Desktop App</p>
+                    <p className="text-zinc-600 dark:text-zinc-400 mt-4 text-lg leading-relaxed">
+                      <b className="text-bold text-black dark:text-white">
+                        10x productivity
+                      </b>{" "}
+                      with customizable AI <br className="hidden lg:block" />{" "}
+                      assistants, global hotkeys, and in-line AI.
+                    </p>
+                  </div>
+                  <div className="col-span-7">
+                    <div className="bg-white dark:bg-[#09090B]/50 h-[375px] border border-zinc-200 dark:border-gray-800 rounded-xl overflow-hidden">
+                      <ThemedImage
+                        className="object-cover w-full object-center mx-auto h-full lg:-left-4 relative"
+                        alt="App screenshots"
+                        sources={{
+                          light: useBaseUrl(
+                            "/img/homepage/desktop-app-light.png"
+                          ),
+                          dark: useBaseUrl(
+                            "/img/homepage/desktop-app-dark.png"
+                          ),
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="dark:bg-[#27272A] bg-zinc-100 pb-20 pt-10">
+            <div className="container">
+              <div className="w-full lg:w-3/4 mx-auto relative ">
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+                  <div className="col-span-5">
+                    <div className="flex items-center">
+                      <p className="text-4xl font-semibold">Mobile App</p>
+                      <span className="bg-gray-300 dark:bg-gray-700 py-1 px-2 inline-block ml-2 rounded-md text-sm mt-1">
+                        Coming Soon
+                      </span>
+                    </div>
+                    <p className="text-zinc-600 dark:text-zinc-400 mt-4 text-lg leading-relaxed">
+                      Take your AI assistants on the go.{" "}
+                      <br className="hidden lg:block" /> Seamless integration
+                      into your&nbsp;
+                      <b className="text-bold text-black dark:text-white">
+                        mobile <br className="hidden lg:block" /> workflows
+                      </b>
+                      &nbsp; with elegant features.
+                    </p>
+                  </div>
+                  <div className="col-span-7">
+                    <div className="bg-white dark:bg-[#09090B]/50 h-[375px] border border-zinc-200 dark:border-gray-800 rounded-xl">
+                      <ThemedImage
+                        className="object-cover w-full object-center mx-auto h-full"
+                        alt="App screenshots"
+                        sources={{
+                          light: useBaseUrl(
+                            "/img/homepage/mobile-app-light.png"
+                          ),
+                          dark: useBaseUrl("/img/homepage/mobile-app-dark.png"),
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="dark:bg-[#09090B]/20">
+            <div className="container py-32">
+              <div className="w-full xl:w-10/12 mx-auto relative">
                 <div className="text-center">
-              <h2 className="h1">No-fuss Compatibility</h2>
-              <p className="mt-2 leading-relaxed">
-                Jan's API aims to be a drop-in replacement for OpenAI's REST
-                API, <br /> with a local server that runs at port{" "}
-                <span className="bg-indigo-600 py-1 px-2 text-white font-bold rounded-full">
+                  <div className="card-link-bg dark:card-link-bg-dark px-4 py-2 inline-flex rounded-xl items-center space-x-4">
+                    <img
+                      src="/img/homepage/ic-offline.png"
+                      alt="Icon Offline"
+                      className="w-9"
+                    />
+                    <img
+                      src="/img/homepage/ic-private.png"
+                      alt="Icon Offline"
+                      className="w-9"
+                    />
+                    <img
+                      src="/img/homepage/ic-folder.png"
+                      alt="Icon Offline"
+                      className="w-9"
+                    />
+                  </div>
+                  <div className="mt-8">
+                    <h6 className="text-4xl font-semibold">
+                      Offline and Local First
+                    </h6>
+                    <p className="mt-2 leading-relaxed text-zinc-600 dark:text-zinc-400">
+                      Conversations, preferences, and model usage stay on{" "}
+                      <br className="hidden lg:block" /> your computer—secure,
+                      exportable, and can be deleted at any time.
+                    </p>
+
+                    <div className="grid grid-cols-12 mt-20 text-left gap-8">
+                      <div className="col-span-full lg:col-span-4">
+                        <div className="dark:bg-[#27272A] bg-zinc-100 rounded-xl p-8 min-h-[450px]">
+                          <h6 className="text-4xl font-semibold">
+                            OpenAI Compatible
+                          </h6>
+                          <p className="mt-4 leading-relaxed text-zinc-600 dark:text-zinc-400">
+                            Jan provides an OpenAI-equivalent API{" "}
+                            <br className="hidden lg:block" /> server at&nbsp;
+                            <b>localhost:</b>&nbsp;
+                            <span className="bg-blue-600 text-white font-bold py-0.5 px-2 rounded-lg">
                               1337
+                            </span>{" "}
+                            that can be used as a drop-in replacement with
+                            compatible apps.
+                          </p>
+
+                          <div className="mt-6">
+                            <div className="mb-4">
+                              <div className="bg-white dark:bg-[#18181B] shadow-lg py-2 px-4 inline-flex rounded-xl">
+                                <p className="font-medium">
+                                  /chats/completions
+                                </p>
+                              </div>
+                            </div>
+                            <div className="mb-4">
+                              <div className="bg-white dark:bg-[#18181B] shadow-lg py-2 px-4 inline-flex rounded-xl">
+                                <p className="font-medium">
+                                  Local server and API
+                                </p>
+                              </div>
+                            </div>
+                            <div className="mb-4">
+                              <div className="bg-white dark:bg-[#18181B] shadow-lg py-2 px-4 inline-flex rounded-xl">
+                                <p className="font-medium">
+                                  Assistants framework
+                                  <span className="bg-gray-300 dark:bg-gray-700 py-1 px-2 inline-block ml-2 rounded-md text-sm">
+                                    Coming Soon
                                   </span>
                                 </p>
                               </div>
-            <div className="w-full lg:w-1/2 mx-auto mt-10">
-              <h4 className="mb-4">Endpoints</h4>
-              <div className="flex flex-col gap-y-4">
-                <div className="dark:bg-[#27272A]/50 bg-[#F4F4F5]/50 border border-gray-300 dark:border-none py-2 px-4 rounded-md relative">
-                  <div className="flex gap-x-2 items-center">
-                    <p>/chat/completions</p>
-                  </div>
-                  <div className="absolute bg-yellow-500 py-1 px-2 rounded-lg top-1 right-1">
-                    <span className="text-sm text-yellow-800 font-semibold">
-                      Partial
-                    </span>
-                  </div>
-                </div>
-                <div className="dark:bg-[#27272A]/50 bg-[#F4F4F5]/50 border border-gray-300 dark:border-none py-2 px-4 rounded-md relative">
-                  <div className="flex gap-x-2 items-center">
-                    <p>/models</p>
-                    <div className="absolute bg-green-500 py-1 px-2 rounded-lg top-1 right-1">
-                      <span className="text-sm text-green-800 font-semibold">
-                        Complete
-                      </span>
                             </div>
                           </div>
                         </div>
-                <div className="dark:bg-[#27272A]/50 bg-[#F4F4F5]/50 border border-gray-300 dark:border-none py-2 px-4 rounded-md relative">
-                  <div className="flex gap-x-2 items-center">
-                    <p>/threads</p>
-                    <div className="absolute bg-yellow-500 py-1 px-2 rounded-lg top-1 right-1">
-                      <span className="text-sm text-yellow-800 font-semibold">
-                        Partial
-                      </span>
                       </div>
-                  </div>
-                </div>
-                <div className="dark:bg-[#27272A]/50 bg-[#F4F4F5]/50 border border-gray-300 dark:border-none py-2 px-4 rounded-md relative">
-                  <div className="flex gap-x-2 items-center">
-                    <p>/messages</p>
-                    <div className="absolute bg-yellow-500 py-1 px-2 rounded-lg top-1 right-1">
-                      <span className="text-sm text-yellow-800 font-semibold">
-                        Partial
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="dark:bg-[#27272A]/50 bg-[#F4F4F5]/50 border border-gray-300 dark:border-none py-2 px-4 rounded-md relative">
-                  <div className="flex gap-x-2 items-center">
-                    <p>/runs</p>
-                    <div className="absolute bg-yellow-500 py-1 px-2 rounded-lg top-1 right-1">
-                      <span className="text-sm text-yellow-800 font-semibold">
-                        Partial
-                      </span>
+                      <div className="col-span-full lg:col-span-8 items-center">
+                        <div className="card-gradient rounded-xl h-full relative text-center min-h-[450px]">
+                          <img
+                            src="/img/homepage/status.png"
+                            alt="Element status"
+                            className="w-3/4 lg:p-20 object-cover absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+                          />
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          </div> */}
         </main>
       </Layout>
     </>

docs/src/styles/components/base.scss

@@ -1,5 +1,4 @@
 @layer base {
-  
   html[data-theme="light"] {
     --custom-radial-blur: #e1e7fd;
     --ifm-background-color: #fff;
@@ -53,7 +52,7 @@
     display: inline-block;
     padding: 2px 8px;
     margin: 0;
-    background-color: #228B22;
+    background-color: #228b22;
     color: #000;
     font-size: 13px;
     vertical-align: middle;

docs/src/styles/components/card.scss

@@ -1,17 +1,33 @@
 @layer components {
+  .card-gradient {
+    background: radial-gradient(
+        58.83% 95.12% at 62.37% 97.91%,
+        rgba(238, 203, 255, 0.59) 0%,
+        rgba(255, 255, 255, 0) 100%
+      ),
+      linear-gradient(
+        155deg,
+        rgba(50, 107, 255, 0.8) 68.16%,
+        rgba(194, 226, 255, 0.8) 94.33%
+      );
+
+    backdrop-filter: blur(7.174633026123047px);
+  }
+
   .card-link-bg {
-    background: linear-gradient(180deg, #fff 0%, #fff 100%);
+    background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
     box-shadow:
-      0px 10px 10px -5px rgba(0, 0, 0, 0.1),
-      0px 20px 25px -5px rgba(0, 0, 0, 0.1),
-      0px 1px 2px 0px #f1f1f1 inset;
+      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
+      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
+      0px 1px 1px 0px #fff inset;
   }
 
   .card-link-bg-dark {
-    background: linear-gradient(180deg, #101118 0%, #101118 100%);
+    background: var(--color-bg-elevated, #27272a);
     box-shadow:
-      0px 10px 10px -5px rgba(0, 0, 0, 0.3),
-      0px 1px 2px 0px #525154 inset;
+      0px 4px 12px 0px rgba(0, 0, 0, 0.12),
+      0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
+      0px 1px 1px 0px #4c4c4c inset;
   }
   .card {
     @apply rounded-xl border bg-gray-50 border-gray-50 dark:border-[#202231] dark:bg-[#111217]/50;

docs/src/styles/tweaks/navbar.scss

@@ -2,7 +2,7 @@
   @apply bg-transparent py-0 shadow-none px-0;
 
   &__inner {
-    @apply border border-gray-200 dark:border-gray-800 bg-[#E4E4E7]/20 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-8 relative;
+    @apply border border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-4 lg:px-8 relative;
   }
 
   &__logo {

docs/src/styles/tweaks/sidebar.scss

@@ -7,7 +7,11 @@
 }
 
 [class*="sidebar_"] {
-  padding-top: 0 !important;
+  padding-top: 0px !important;
+}
+
+.navbar-sidebar__back {
+  padding-top: 20px !important;
 }
 
 [class*="sidebarViewport_"] {

docs/tailwind.config.js

@@ -4,6 +4,42 @@ module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   darkMode: ["class", '[data-theme="dark"]'],
   theme: {
+    animation: {
+      wave: "wave 2.5s linear infinite",
+      enter: "enter 200ms ease-out",
+      "slide-in": "slide-in 1.2s cubic-bezier(.41,.73,.51,1.02)",
+      leave: "leave 150ms ease-in forwards",
+      "bounce-down": "bounce-down 3s infinite",
+    },
+    keyframes: {
+      wave: {
+        "0%": { transform: "rotate( 0.0deg)" },
+        "10%": { transform: "rotate(14.0deg)" },
+        "20%": { transform: "rotate(-8.0deg)" },
+        "30%": { transform: "rotate(14.0deg)" },
+        "40%": { transform: "rotate(-4.0deg)" },
+        "50%": { transform: "rotate(10.0deg)" },
+        "60%": { transform: "rotate( 0.0deg)" },
+        "100%": { transform: "rotate( 0.0deg)" },
+      },
+      enter: {
+        "0%": { transform: "scale(0.8)", opacity: "0" },
+        "100%": { transform: "scale(1)", opacity: "1" },
+      },
+      leave: {
+        "0%": { transform: "scale(1)", opacity: "1" },
+        "100%": { transform: "scale(0.8)", opacity: "0" },
+      },
+      "slide-in": {
+        "0%": { transform: "translateY(-100%)" },
+        "100%": { transform: "translateY(0)" },
+      },
+      "bounce-down": {
+        "0%,20%, 50%,80%,100%": { transform: "translateY(0)" },
+        "40%": { transform: "translateY(-8px)" },
+        "60%": { transform: "translateY(-4px)" },
+      },
+    },
     container: {
       center: true,
       padding: "16px",