Merge pull request #172 from janhq/fix/landing-page-nitro

feat: improvements on nitro landing page
janhq · Nov 23, 2023 · 7f89c16 · 7f89c16
2 parents 5503006 + f8abe20
commit 7f89c16
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 42 deletions.
diff --git a/docs/src/containers/DownloadButton/index.js b/docs/src/containers/DownloadButton/index.js
@@ -7,17 +7,17 @@ import axios from "axios";
 const systemsTemplate = [
   {
     name: "Download for Mac",
-    logo: require("@site/static/img/apple-logo-white.png").default,
+    logo: require("@site/static/img/logos/apple-logo-white.png").default,
     fileFormat: "{appname}-mac-arm64.zip",
   },
   {
     name: "Download for Windows",
-    logo: require("@site/static/img/windows-logo-white.png").default,
+    logo: require("@site/static/img/logos/windows-logo-white.png").default,
     fileFormat: "{appname}-win-amd64.zip",
   },
   {
     name: "Download for Linux",
-    logo: require("@site/static/img/linux-logo-white.png").default,
+    logo: require("@site/static/img/logos/linux-logo-white.png").default,
     fileFormat: "{appname}-linux-amd64.zip",
   },
 ];

diff --git a/docs/src/containers/GithubButton/index.js b/docs/src/containers/GithubButton/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { FaGithub } from "react-icons/fa";
+
+export default function GithubButtob() {
+  return (
+    <a
+      href="https://github.com/janhq/nitro/releases"
+      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>
+        <FaGithub />
+      </span>
+      <span>View on Github</span>
+    </a>
+  );
+}
diff --git a/docs/src/containers/Homepage/Architecture/index.js b/docs/src/containers/Homepage/Architecture/index.js
@@ -49,9 +49,19 @@ export default function Architecture() {
                 <h6 className="mb-4">LLMs</h6>
                 <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
                   <div className="dark:bg-[#27272A]/50 bg-[#D4D4D8]/50 border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg backdrop-blur-md">
+                    <img
+                      src="/img/logos/llamacpp.svg"
+                      alt="Logo llamacpp"
+                      className="mb-4 mx-auto w-[70px]"
+                    />
                     <p>Llama.cpp</p>
                   </div>
                   <div className="dark:bg-[#27272A]/50 bg-[#D4D4D8]/50 border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg backdrop-blur-md">
+                    <img
+                      src="/img/logos/nvdia.svg"
+                      alt="Logo nvdia"
+                      className="mb-4 mx-auto w-[70px]"
+                    />
                     <p>TensorRT-LLM</p>
                     <p className="mt-2 font-medium bg-blue-600 inline-flex px-2 rounded-md text-sm text-white">
                       Coming Soon
@@ -62,6 +72,11 @@ export default function Architecture() {
               <div className="border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg backdrop-blur-md">
                 <h6 className="mb-4">Speech</h6>
                 <div className="dark:bg-[#27272A]/50 bg-[#D4D4D8]/50 border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg backdrop-blur-md">
+                  <img
+                    src="/img/logos/whispercpp.svg"
+                    alt="Logo whispercpp"
+                    className="mb-4 mx-auto w-[70px]"
+                  />
                   <p>Whisper.cpp</p>
                   <p className="mt-2 font-medium bg-blue-600 inline-flex px-2 rounded-md text-sm text-white">
                     Coming Soon
@@ -71,6 +86,11 @@ export default function Architecture() {
               <div className="border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg backdrop-blur-md">
                 <h6 className="mb-4">Vision</h6>
                 <div className="dark:bg-[#27272A]/50 bg-[#D4D4D8]/50 border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg backdrop-blur-md">
+                  <img
+                    src="/img/logos/stable-diffusion.svg"
+                    alt="Logo stable-diffusion"
+                    className="mb-4 mx-auto w-[70px]"
+                  />
                   <p>StableDiffusion</p>
                   <p className="mt-2 font-medium bg-blue-600 inline-flex px-2 rounded-md text-sm text-white">
                     Coming Soon

diff --git a/docs/src/containers/Homepage/OpenAI/index.js b/docs/src/containers/Homepage/OpenAI/index.js
@@ -11,10 +11,10 @@ import ThemedImage from "@theme/ThemedImage";
 export default function OpenAI() {
   const clipboard = useClipboard({ timeout: 200 });
 
-  const codeStringOpenAI = `curl http://localhost:3928/inferences/llamacpp/chat_completion
+  const codeStringNitro = `curl http://localhost:3928/inferences/llamacpp/chat_completion
   -H "Content-Type: application/json"
   -d '{
-    "model": "gpt-3.5-turbo",
+    "model": "/path/to/your/model.gguf",
     "messages": [
       {
         "role": "system",
@@ -27,7 +27,7 @@ export default function OpenAI() {
     ]
   }'`;
 
-  const codeStringNitro = `curl https://api.openai.com/v1/chat/completions
+  const codeStringOpenAI = `curl https://api.openai.com/v1/chat/completions
   -H "Content-Type: application/json"
   -H "Authorization: Bearer $OPENAI_API_KEY"
   -d '{
@@ -53,83 +53,83 @@ export default function OpenAI() {
         </p>
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <div className="relative">
-          <div className="mb-4">
-            <ThemedImage
-              alt="App screenshot"
-              sources={{
-                light: useBaseUrl("/img/logos/open-ai-dark.svg"),
-                dark: useBaseUrl("/img/logos/open-ai-light.svg"),
-              }}
+        <div className="relative [&>pre]:min-h-[400px]">
+          <div className="mb-2 flex items-center space-x-1">
+            <img
+              src="/img/logos/nitro.svg"
+              alt="Element Lines"
+              className="w-6 h-6"
             />
+            <span className="text-lg font-bold">Nitro</span>
           </div>
           <div className="group dark:bg-[#27272A]/50 bg-[#F4F4F5] border border-gray-300 dark:border-none py-2 px-4 rounded-md relative">
             <div className="flex gap-x-2 items-center">
               <p className="dark:text-yellow-400 text-yellow-600 font-medium">
                 POST
               </p>
               <p className="text-sm">
-                https://api.openai.com/v1/chat/completions
+                https://localhost:1337/llama.cpp/v1/chat/completions
               </p>
             </div>
             <div
               className="group-hover:block hidden absolute bottom-2 right-2 text-xs px-2 py-1 rounded-md bg-gray-700 cursor-pointer text-white"
               onClick={() =>
-                clipboard.copy("https://api.openai.com/v1/chat/completions")
+                clipboard.copy(
+                  "https://localhost:1337/llama.cpp/v1/chat/completions"
+                )
               }
             >
               {clipboard.copied ? "Copied" : "Copy"}
             </div>
           </div>
           <div className="group [&>pre]:min-h-[400px]">
             <SyntaxHighlighter language="bash" style={theme}>
-              {codeStringOpenAI}
+              {codeStringNitro}
             </SyntaxHighlighter>
             <div
               className="group-hover:block hidden absolute top-24 right-2 text-xs px-2 py-1 rounded-md bg-gray-700 cursor-pointer text-white"
-              onClick={() => clipboard.copy(codeStringOpenAI)}
+              onClick={() => clipboard.copy(codeStringNitro)}
             >
               {clipboard.copied ? "Copied" : "Copy"}
             </div>
           </div>
         </div>
 
-        <div className="relative [&>pre]:min-h-[400px]">
-          <div className="mb-2 flex items-center space-x-1">
-            <img
-              src="/img/logos/nitro.svg"
-              alt="Element Lines"
-              className="w-6 h-6"
+        <div className="relative">
+          <div className="mb-4">
+            <ThemedImage
+              alt="App screenshot"
+              sources={{
+                light: useBaseUrl("/img/logos/open-ai-dark.svg"),
+                dark: useBaseUrl("/img/logos/open-ai-light.svg"),
+              }}
             />
-            <span className="text-lg font-bold">Nitro</span>
           </div>
           <div className="group dark:bg-[#27272A]/50 bg-[#F4F4F5] border border-gray-300 dark:border-none py-2 px-4 rounded-md relative">
             <div className="flex gap-x-2 items-center">
               <p className="dark:text-yellow-400 text-yellow-600 font-medium">
                 POST
               </p>
               <p className="text-sm">
-                https://localhost:1337/llama.cpp/v1/chat/completions
+                https://api.openai.com/v1/chat/completions
               </p>
             </div>
             <div
               className="group-hover:block hidden absolute bottom-2 right-2 text-xs px-2 py-1 rounded-md bg-gray-700 cursor-pointer text-white"
               onClick={() =>
-                clipboard.copy(
-                  "https://localhost:1337/llama.cpp/v1/chat/completions"
-                )
+                clipboard.copy("https://api.openai.com/v1/chat/completions")
               }
             >
               {clipboard.copied ? "Copied" : "Copy"}
             </div>
           </div>
           <div className="group [&>pre]:min-h-[400px]">
             <SyntaxHighlighter language="bash" style={theme}>
-              {codeStringNitro}
+              {codeStringOpenAI}
             </SyntaxHighlighter>
             <div
               className="group-hover:block hidden absolute top-24 right-2 text-xs px-2 py-1 rounded-md bg-gray-700 cursor-pointer text-white"
-              onClick={() => clipboard.copy(codeStringNitro)}
+              onClick={() => clipboard.copy(codeStringOpenAI)}
             >
               {clipboard.copied ? "Copied" : "Copy"}
             </div>

diff --git a/docs/src/containers/Homepage/Statistic/index.js b/docs/src/containers/Homepage/Statistic/index.js
@@ -13,7 +13,8 @@ export default function Statistic() {
     <div className="container">
       <div className="grid grid-cols-12 text-center">
         <div className="col-span-full lg:col-span-12 pt-4">
-          <div className="dark:bg-[#27272A] bg-[#F4F4F5] inline-flex rounded-lg overflow-hidden mb-4 border dark:border-gray-800 border-gray-300 justify-center">
+          {/* Temporary disabled */}
+          {/* <div className="dark:bg-[#27272A] bg-[#F4F4F5] inline-flex rounded-lg overflow-hidden mb-4 border dark:border-gray-800 border-gray-300 justify-center">
             <ul className="flex">
               {tabs.map((option, i) => {
                 return (
@@ -30,7 +31,9 @@ export default function Statistic() {
                 );
               })}
             </ul>
-          </div>
+          </div> */}
+
+          <h2>Lightweight</h2>
           <div className="w-full lg:w-1/2 mx-auto">
             <p className="mt-2">
               {lightweightTabActive
@@ -48,12 +51,6 @@ export default function Statistic() {
                   3mb
                 </h6>
               </div>
-              <div className="dark:bg-[#27272A]/20 bg-[#E4E4E7]/20 border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg">
-                <h6 className="font-medium lg:text-xl text-red-600">Ollama</h6>
-                <h6 className="mt-2 font-medium text-2xl sm:text-3xl lg:text-5xl">
-                  332mb
-                </h6>
-              </div>
               <div className="dark:bg-[#27272A]/20 bg-[#E4E4E7]/20 border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg">
                 <h6 className="font-medium lg:text-xl text-blue-600">
                   Local AI
@@ -62,6 +59,12 @@ export default function Statistic() {
                   193mb
                 </h6>
               </div>
+              <div className="dark:bg-[#27272A]/20 bg-[#E4E4E7]/20 border dark:border-gray-800 border-gray-300 p-4 lg:p-6 rounded-lg">
+                <h6 className="font-medium lg:text-xl text-red-600">Ollama</h6>
+                <h6 className="mt-2 font-medium text-2xl sm:text-3xl lg:text-5xl">
+                  332mb
+                </h6>
+              </div>
             </div>
           ) : (
             <div className="grid grid-cols-3 mt-8 gap-4 lg:gap-8">

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -4,7 +4,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
 import Layout from "@theme/Layout";
 
-import DownloadButton from "@site/src/containers/DownloadButton";
+import GithubButtob from "@site/src/containers/GithubButton";
 
 import GetNitro from "@site/src/containers/Homepage/GetNitro";
 import Statistic from "@site/src/containers/Homepage/Statistic";
@@ -46,15 +46,15 @@ export default function Home() {
               </p>
 
               <div className="mt-10">
-                <DownloadButton />
+                <GithubButtob />
               </div>
             </div>
             <div className="mt-10">
               <GetNitro />
             </div>
           </div>
 
-          <div className="mt-4">
+          <div className="mt-4 md:mt-20 2xl:mt-4">
             <OpenAI />
           </div>
 

diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico
diff --git a/docs/static/img/apple-logo-white.png → docs/static/img/logos/apple-logo-white.png b/docs/static/img/apple-logo-white.png → docs/static/img/logos/apple-logo-white.png
diff --git a/docs/static/img/linux-logo-white.png → docs/static/img/logos/linux-logo-white.png b/docs/static/img/linux-logo-white.png → docs/static/img/logos/linux-logo-white.png
diff --git a/docs/static/img/logos/llamacpp.svg b/docs/static/img/logos/llamacpp.svg
diff --git a/docs/static/img/logos/nvdia.svg b/docs/static/img/logos/nvdia.svg