bug: fix ui landing page

docs/docs/intro/introduction.md

@@ -2,35 +2,49 @@
 title: Introduction
 slug: /docs
 description: Jan is a ChatGPT-alternative that runs on your own computer, with a local API server.
-keywords: [Jan AI,  Jan, ChatGPT alternative, local AI, private AI, conversational AI, no-subscription fee, large language model ]
+keywords:
+  [
+    Jan AI,
+    Jan,
+    ChatGPT alternative,
+    local AI,
+    private AI,
+    conversational AI,
+    no-subscription fee,
+    large language model,
+  ]
 ---
 
-Jan is a ChatGPT-alternative that runs on your own computer, with a [local API server](/api). 
+Jan is a ChatGPT-alternative that runs on your own computer, with a [local API server](/api-reference/).
 
-Jan uses [open-source AI models](/docs/models), stores data in [open file formats](/specs/data-structures), is highly customizable via [extensions](/docs/extensions). 
+Jan uses [open-source AI models](/docs/models), stores data in [open file formats](/specs/data-structures), is highly customizable via [extensions](/docs/extensions).
 
-Jan believes in the need for an open source AI ecosystem. We aim to build infra and tooling to allow open source AIs to compete on a level playing field with proprietary offerings. 
+Jan believes in the need for an open source AI ecosystem. We aim to build infra and tooling to allow open source AIs to compete on a level playing field with proprietary offerings.
 
 ## Why Jan?
 
 #### 💻 Own your AI
-Jan runs 100% on your own machine, [predictably](https://www.reddit.com/r/LocalLLaMA/comments/17mghqr/comment/k7ksti6/?utm_source=share&utm_medium=web2x&context=3), privately and even offline. No one else can see your conversations, not even us. 
+
+Jan runs 100% on your own machine, [predictably](https://www.reddit.com/r/LocalLLaMA/comments/17mghqr/comment/k7ksti6/?utm_source=share&utm_medium=web2x&context=3), privately and even offline. No one else can see your conversations, not even us.
 
 #### 🏗️ Extensions
-Jan ships with a powerful [extension framework](/docs/extensions), which allows developers to extend and customize Jan's functionality. In fact, most core modules of Jan are [built as extensions](/specs/architecture) and use the same extensions API. 
+
+Jan ships with a powerful [extension framework](/docs/extensions), which allows developers to extend and customize Jan's functionality. In fact, most core modules of Jan are [built as extensions](/specs/architecture) and use the same extensions API.
 
 #### 🗂️ Open File Formats
-Jan stores data in a [local folder of non-proprietary files](/specs/data-structures). You're never locked-in and can do what you want with your data with extensions, or even a different app. 
+
+Jan stores data in a [local folder of non-proprietary files](/specs/data-structures). You're never locked-in and can do what you want with your data with extensions, or even a different app.
 
 #### 🌍 Open Source
-Both Jan and [Nitro](https://nitro.jan.ai), our lightweight inference engine, are licensed via the open source [AGPLv3 license](https://github.com/janhq/jan/blob/main/LICENSE). 
+
+Both Jan and [Nitro](https://nitro.jan.ai), our lightweight inference engine, are licensed via the open source [AGPLv3 license](https://github.com/janhq/jan/blob/main/LICENSE).
 
 <!-- ## Design Principles -->
 
-<!-- OpenAI meets VSCode meets Obsidian. 
+<!-- OpenAI meets VSCode meets Obsidian.
 
-Minimalism: https://docusaurus.io/docs#design-principles. Not having abstractions is better than having the wrong abstractions. Assistants as code. Only including features that are absolutely necessary in the Jan API. 
+Minimalism: https://docusaurus.io/docs#design-principles. Not having abstractions is better than having the wrong abstractions. Assistants as code. Only including features that are absolutely necessary in the Jan API.
 
-File-based: User should be able to look at a Jan directory and intuit how it works. Transparency. Editing things via a text editor, vs. needing a database tool for SQLite. 
+File-based: User should be able to look at a Jan directory and intuit how it works. Transparency. Editing things via a text editor, vs. needing a database tool for SQLite.
 
-Participatory: https://www.getlago.com/blog/the-5-reasons-why-we-chose-open-source -->
+Participatory: https://www.getlago.com/blog/the-5-reasons-why-we-chose-open-source -->

docs/src/containers/Banner/index.js

@@ -66,7 +66,12 @@ export default function AnnoncementBanner() {
         <div className="flex items-center gap-x-3">
           {socials.map((social, i) => {
             return (
-              <a key={i} href={social.href} target="_blank">
+              <a
+                aria-label={`social-${i}`}
+                key={i}
+                href={social.href}
+                target="_blank"
+              >
                 {social.icon}
               </a>
             );

docs/src/containers/DownloadApp/index.js

@@ -99,27 +99,28 @@ export default function DownloadApp() {
         <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">
+        <div className="bg-yellow-50 text-yellow-700 space-x-2 px-4 py-2 border border-yellow-400 rounded-lg text-base">
           <span>🚧</span>
-          <span>
-            Warning: Jan is in the process of being built. Expect bugs!
+          <span className="font-semibold">Warning:</span>
+          <span className="font-medium">
+            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}
+            href={system.href || ""}
             className={twMerge(
-              "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-black bg-neutral-50 min-w-[150px] dark:bg-[#18181B]",
+              "btn-shadow inline-flex m-2 px-4 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-zinc-200 dark:border-gray-700 text-black dark:text-white bg-zinc-50 min-w-[150px] dark:bg-[#18181B] h-[36px]",
               system.comingSoon && "pointer-events-none"
             )}
           >
             <system.logo />
-            <span>{system.name}</span>
+            <span className="text-sm">{system.name}</span>
             {system.comingSoon && (
-              <span className="bg-gray-300 py-0.5 px-2 inline-block ml-2 rounded-md text-sm mt-1">
+              <span className="bg-zinc-200 py-0.5 px-2 inline-block ml-2 rounded-md text-xs h-[20px] dark:text-black">
                 Coming Soon
               </span>
             )}

docs/src/containers/Elements/dropdown.js

@@ -3,26 +3,27 @@ import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import axios from "axios";
+import { FaWindows, FaApple, FaLinux } from "react-icons/fa";
 
 const systemsTemplate = [
   {
-    name: "Download for Mac (M1/M2)",
-    logo: require("@site/static/img/apple-logo-white.png").default,
+    name: "Download for Mac (M1/M2/M3)",
+    logo: FaApple,
     fileFormat: "{appname}-mac-arm64-{tag}.dmg",
   },
   {
     name: "Download for Mac (Intel)",
-    logo: require("@site/static/img/apple-logo-white.png").default,
+    logo: FaApple,
     fileFormat: "{appname}-mac-x64-{tag}.dmg",
   },
   {
     name: "Download for Windows",
-    logo: require("@site/static/img/windows-logo-white.png").default,
+    logo: FaWindows,
     fileFormat: "{appname}-win-x64-{tag}.exe",
   },
   {
     name: "Download for Linux",
-    logo: require("@site/static/img/linux-logo-white.png").default,
+    logo: FaLinux,
     fileFormat: "{appname}-linux-amd64-{tag}.deb",
   },
 ];
@@ -56,21 +57,13 @@ export default function Dropdown() {
   const changeDefaultSystem = async (systems) => {
     const userAgent = navigator.userAgent;
 
-    const arc = await navigator?.userAgentData?.getHighEntropyValues([
-      "architecture",
-    ]);
-
     if (userAgent.includes("Windows")) {
       // windows user
       setDefaultSystem(systems[2]);
     } else if (userAgent.includes("Linux")) {
       // linux user
       setDefaultSystem(systems[3]);
-    } else if (
-      userAgent.includes("Mac OS") &&
-      arc &&
-      arc.architecture === "arm"
-    ) {
+    } else if (userAgent.includes("Mac OS")) {
       setDefaultSystem(systems[0]);
     } else {
       setDefaultSystem(systems[1]);
@@ -123,14 +116,14 @@ export default function Dropdown() {
   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 hover:bg-blue-500 hover:text-white"
-        href={defaultSystem.href}
+        href={defaultSystem.href || ""}
+        className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-4 py-3 text-base font-semibold dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white"
       >
-        <img src={defaultSystem.logo} alt="Logo" className="h-5 mr-3 -mt-1" />
+        <defaultSystem.logo className="h-5 mr-3 -mt-1" />
         {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-l border-blue-500 h-full text-white bg-blue-600 w-8 justify-center">
+        <Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-l border-gray-600 h-full dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white w-8 justify-center">
           <span className="sr-only">Open OS options</span>
           <ChevronDownIcon className="h-6 w-6" aria-hidden="true" />
         </Menu.Button>
@@ -143,7 +136,7 @@ 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-1 w-72 text-left origin-top-right rounded-md bg-blue-600 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden">
+          <Menu.Items className="absolute right-0 z-10 mt-1 w-80 text-left origin-top-right rounded-md dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden">
             <div className="overflow-hidden">
               {systems.map((system) => (
                 <Menu.Item
@@ -152,18 +145,18 @@ export default function Dropdown() {
                 >
                   {({ active }) => (
                     <a
-                      href={system.href}
+                      href={system.href || ""}
                       className={classNames(
-                        active ? "bg-blue-500 hover:text-white" : "text-white",
-                        "flex px-4 py-3 items-center text-white hover:text-white"
+                        active
+                          ? "dark:bg-blue-100 bg-gray-900 hover:text-white dark:text-black"
+                          : "text-white dark:text-black",
+                        "flex px-4 py-3 items-center text-white hover:text-white dark:text-black"
                       )}
                     >
-                      <img
-                        src={system.logo}
-                        alt="Logo"
-                        className="w-3 mr-3 -mt-1 flex-shrink-0"
-                      />
-                      <span className="text-white">{system.name}</span>
+                      <system.logo className="w-3 mr-3 -mt-1 flex-shrink-0" />
+                      <span className="text-white dark:text-black font-medium">
+                        {system.name}
+                      </span>
                     </a>
                   )}
                 </Menu.Item>

docs/src/containers/Footer/index.js

@@ -91,7 +91,7 @@ export default function Footer() {
           <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" />
-              <h6 className="">Jan</h6>
+              <h2 className="h6">Jan</h2>
             </div>
             <div className="w-full lg:w-1/2">
               <p className="dark:text-gray-400 text-gray-600">
@@ -104,7 +104,12 @@ export default function Footer() {
                 <div className="flex items-center gap-x-3">
                   {socials.map((social, i) => {
                     return (
-                      <a key={i} href={social.href} target="_blank">
+                      <a
+                        aria-label={`social-${i}`}
+                        key={i}
+                        href={social.href}
+                        target="_blank"
+                      >
                         {social.icon}
                       </a>
                     );
@@ -116,7 +121,7 @@ export default function Footer() {
           {menus.map((menu, i) => {
             return (
               <div key={i} className="lg:text-right">
-                <h6 className="mb-3">{menu.name}</h6>
+                <h2 className="mb-3 h6">{menu.name}</h2>
                 <ul>
                   {menu.child.map((child, i) => {
                     return (