chore: website

website/docusaurus.config.ts

@@ -60,7 +60,7 @@ const config: Config = {
       title: 'Noi',
       logo: {
         alt: 'Noi Logo',
-        src: 'img/noi.png',
+        src: 'readme/noi.png',
       },
       items: [
         // {
@@ -84,7 +84,7 @@ const config: Config = {
     },
     footer: {
       style: 'dark',
-      copyright: `Copyright © ${new Date().getFullYear()} <a target="_blank" href="https://github.com/nofwl">NoFWL</a>.`,
+      copyright: `Copyright © ${new Date().getFullYear()} <a target="_blank" href="https://github.com/lencx">lencx</a>.`,
     },
     prism: {
       theme: prismThemes.github,

website/src/css/custom.css

@@ -18,7 +18,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --docusaurus-highlighted-code-line-bg: rgba(45, 45, 45, 0.1);
   --ifm-navbar-background-color: rgba(250, 247, 245, 0.9);
   --ifm-background-color: #fff;
 }
@@ -32,8 +32,8 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-  --ifm-navbar-background-color: rgba(39, 41, 53, 0.9);
+  --docusaurus-highlighted-code-line-bg: rgba(45, 45, 45, 0.1);
+  --ifm-navbar-background-color: rgba(46, 47, 54, 0.1);
 }
 
 .navbar--fixed-top {
@@ -47,3 +47,7 @@
 .navbar-sidebar {
   backdrop-filter: blur(6px) saturate(1.5);
 }
+
+.navbar__title {
+  display: none;
+}

website/src/pages/index.tsx

@@ -2,36 +2,58 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 
+const noiVersion = '0.2.1';
+
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
       title="Home"
       description={siteConfig.tagline}
+      wrapperClassName="bg-amber-200/30 dark:bg-slate-700/50"
     >
-      <main className="p-10 text-center bg-amber-200/30 dark:bg-slate-700/50">
+      <main className="p-10 text-center max-w-[960px] m-auto">
         <h1 className="font-bold">Noi</h1>
         <p className="text-md font-bold mb-10">{siteConfig.tagline}</p>
-        <div className="flex justify-center gap-10">
-          <div>
-            <img src="/img/apple-logo.svg" className="w-24 h-24 mx-auto mb-4" />
-            <p>macOS</p>
+        <div className="flex gap-10 justify-center items-end flex-row max-w-[560px] m-auto">
+          <div className="flex flex-col items-center gap-1 basis-1/3">
+            <img src="/os/apple-logo.svg" className="w-[40px] sm:w-[60px]" />
+            <div className="font-bold">macOS</div>
+            <div className="flex gap-2 justify-center">
+              <a href={`https://github.com/lencx/Noi/releases/download/v${noiVersion}/Noi_macos_${noiVersion}.dmg`}>x64</a>
+              <a href={`https://github.com/lencx/Noi/releases/download/v${noiVersion}/Noi_macos_${noiVersion}-arm64.dmg`}>arm64</a>
+            </div>
           </div>
-          <div>
-            <img src="/img/windows-logo.png" className="w-24 h-24 mx-auto mb-4" />
-            <p>Windows</p>
+          <div className="flex flex-col items-center gap-1 basis-1/3">
+            <img src="/os/windows-logo.png" className="w-[40px] sm:w-[60px]" />
+            <div className="font-bold">Windows</div>
+            <div className="flex gap-2 justify-center">
+              <a href={`https://github.com/lencx/Noi/releases/download/v${noiVersion}/Noi-win32-x64-${noiVersion}-setup.exe`}>x64</a>
+            </div>
           </div>
-          <div>
-            <img src="/img/linux-logo.png" className="w-24 h-24 mx-auto mb-4" />
-            <p>Linux</p>
+          <div className="flex flex-col items-center gap-1 basis-1/3">
+            <img src="/os/linux-logo.png" className="w-[40px] sm:w-[60px]" />
+            <div className="font-bold">Linux</div>
+            <div className="flex gap-2 justify-center">
+              <a href={`https://github.com/lencx/Noi/releases/download/v0.2.1/Noi_linux_0.2.1.AppImage`}>AppImage</a>
+              <a href={`https://github.com/lencx/Noi/releases/download/v0.2.1/noi_linux_amd64_0.2.1.deb`}>amd64.deb</a>
+            </div>
           </div>
         </div>
 
-        <p className="font-bold text-red-500">Note: Final preparations for release are underway, please stay tuned.</p>
+        <h2 className="mt-5">Preview</h2>
+        <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-4 max-w-[960px] m-auto">
+          <img className="rounded-lg shadow-lg" src="/readme/noi-theme-dark.png" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-theme-light.png" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-batch-ask.png" />
+          <img className="rounded-lg shadow-lg" src="/readme/noi-settings-prompts.png" />
+        </div>
 
-        <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-4">
-          <img className="rounded-lg shadow-lg mb-4" src="/img/noi-preview-1.png" />
-          <img className="rounded-lg shadow-lg" src="/img/noi-preview-2.png" />
+        <h2 className="mt-5">FAQ</h2>
+        <div className="text-left">
+          <h3>macOS</h3>
+          <p>If you encounter the error message "Noi" is damaged and can't be opened. You should move it to the Trash. while installing software on macOS, it may be due to security settings restrictions in macOS. To solve this problem, please try the following command in Terminal:</p>
+          <code className="px-2">xattr -cr /Applications/Noi.app</code>
         </div>
       </main>
     </Layout>