Merge pull request #213 from janhq/jan-182-drake

Updates:
- Color palette: Green -> Blue
- Screenshots in Light and Dark Mode
- Animation

docs/package.json

@@ -30,7 +30,8 @@
     "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.1"
+    "@docusaurus/module-type-aliases": "2.4.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "browserslist": {
     "production": [

docs/src/components/Homepage/hero.js

@@ -39,7 +39,7 @@ export default function HomepageHero() {
         )}
 
         {/* Main hero block */}
-        <div className="py-24 sm:py-32 lg:pb-40">
+        <div className="py-24 sm:py-32 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">
@@ -47,7 +47,7 @@ export default function HomepageHero() {
                 Run your own AI
               </h1>
               <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-                Jan lets you run AI on your own hardware. 1-click to install the
+              Jan lets you run AI on your own hardware. 1-click to install the
                 latest open-source models. Monitor and manage software-hardware
                 performance.
                 <br></br>
@@ -79,13 +79,14 @@ export default function HomepageHero() {
               src={
                 colorMode === "dark"
                   ? // TODO replace with darkmode image
-                    require("@site/static/img/desktop-llm-chat.png").default
-                  : require("@site/static/img/desktop-llm-chat.png").default
+                    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 */}

docs/src/components/Homepage/sectionOne.js

@@ -58,7 +58,7 @@ export default function HomepageSectionOne() {
                       />
                       {feature.name}
                     </dt>{" "}
-                    <dd className="inline">{feature.description}</dd>
+                    <dt>{feature.description}</dt>
                   </div>
                 ))}
               </dl>
@@ -71,7 +71,7 @@ export default function HomepageSectionOne() {
                   ? // TODO replace with darkmode image
                     require("@site/static/img/desktop-explore-models-dark.png")
                       .default
-                  : require("@site/static/img/desktop-explore-models.png")
+                  : require("@site/static/img/desktop-explore-models-light.png")
                       .default
               }
               alt="Product screenshot"

docs/src/components/Homepage/sectionTwo.js

@@ -58,7 +58,7 @@ export default function sectionTwo() {
                       />
                       {feature.name}
                     </dt>{" "}
-                    <dd className="inline">{feature.description}</dd>
+                    <dt>{feature.description}</dt>
                   </div>
                 ))}
               </dl>
@@ -68,8 +68,8 @@ export default function sectionTwo() {
             src={
               colorMode === "dark"
                 ? // TODO replace with darkmode image
-                  require("@site/static/img/desktop-model-settings.png").default
-                : require("@site/static/img/desktop-model-settings.png").default
+                  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"

docs/src/css/custom.css

@@ -12,26 +12,25 @@
    Full list of Infima variables: https://github.com/facebook/docusaurus/issues/3955#issuecomment-1521944593
 */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --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: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --ifm-navbar-background-color: rgba(15, 23, 42);
+  --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 */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

docs/tailwind.config.js

@@ -9,5 +9,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require("tailwindcss-animate"),
+  ],
 };