Merge pull request #5 from janhq/chore/update-landing

chore: update landing page
janhq · Jun 4, 2024 · f71cc83 · f71cc83
2 parents d5e4f71 + 213d37c
commit f71cc83
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -23,13 +23,15 @@
     "@docusaurus/theme-mermaid": "^3.4.0",
     "@mdx-js/react": "3.0.1",
     "autoprefixer": "^10.4.19",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "docusaurus-plugin-sass": "^0.2.5",
+    "framer-motion": "^11.2.10",
     "postcss": "^8.4.38",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sass": "^1.77.4",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {

diff --git a/src/components/typeWriterWffect.tsx b/src/components/typeWriterWffect.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { twMerge } from "tailwind-merge";
+import { motion as m, stagger, useAnimate, useInView } from "framer-motion";
+import { useEffect } from "react";
+
+const TypewriterEffect = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+
+  const [scope, animate] = useAnimate();
+  const isInView = useInView(scope);
+  useEffect(() => {
+    if (isInView) {
+      animate(
+        "span",
+        {
+          display: "inline-block",
+          opacity: 1,
+          width: "fit-content",
+        },
+        {
+          duration: 0.3,
+          delay: stagger(0.1),
+          ease: "easeInOut",
+        }
+      );
+    }
+  }, [isInView]);
+
+  const renderWords = () => {
+    return (
+      <m.div ref={scope} className="inline">
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <m.span
+                  initial={{}}
+                  key={`char-${index}`}
+                  className={twMerge(
+                    `dark:text-white text-black opacity-0 hidden`,
+                    word.className
+                  )}
+                >
+                  {char}
+                </m.span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </m.div>
+    );
+  };
+  return (
+    <div
+      className={twMerge(
+        "text-2xl lg:text-4xl font-bold text-center inline-flex",
+        className
+      )}
+    >
+      {renderWords()}
+      <m.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={twMerge(
+          "inline-block rounded-sm w-[4px] h-6 md:h-6 lg:h-10 bg-blue-500",
+          cursorClassName
+        )}
+      ></m.span>
+    </div>
+  );
+};
+
+export default TypewriterEffect;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,14 +1,62 @@
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 
+import TypewriterEffect from "@site/src/components/typeWriterWffect";
+
 const Home = () => {
   const { siteConfig } = useDocusaurusContext();
 
+  const words = [
+    {
+      text: "npm",
+    },
+    {
+      text: "i",
+    },
+    {
+      text: "-g",
+    },
+    {
+      text: "@janhq/cortex",
+    },
+  ];
+
   return (
     <Layout title="Homepage">
       <main>
-        <div className="container mt-8">
-          <p>Cortex is under construction</p>
+        <div className="container">
+          <div className="text-center mt-20">
+            <h1 className="text-6xl">Run LLMs Easily</h1>
+            <p className="text-2xl">
+              OpenAI Compatible. Multi-engine. For Production
+            </p>
+
+            <code className="bg-transparent my-24 inline-block border-none">
+              <TypewriterEffect words={words} />
+            </code>
+
+            <div className="relative w-full lg:w-1/2 mx-auto">
+              <div className="rounded-lg dark:border-neutral-800 border-neutral-200 border border-solid">
+                <div className="flex p-2 gap-1.5">
+                  <div className="rounded-full w-3 h-3 bg-red-500" />
+                  <div className="rounded-full w-3 h-3 bg-yellow-500" />
+                  <div className="rounded-full w-3 h-3 bg-green-500" />
+                </div>
+                <div className="p-4 text-left">
+                  <code className="bg-transparent border-none inline-block">
+                    <p className="mb-0"># Download a GGUF model</p>
+                    <p className="mb-3">cortex models pull llama3</p>
+                    <p className="mb-0"># Run the model to start chatting</p>
+                    <p className="mb-3">cortex models run llama3</p>
+                    <p className="mb-0">
+                      # Run Cortex in OpenAI-compatible server mode
+                    </p>
+                    <p className="mb-0">cortex serve</p>
+                  </code>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </main>
     </Layout>

diff --git a/yarn.lock b/yarn.lock
@@ -1174,7 +1174,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.22.6", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.22.6", "@babel/runtime@^7.24.1", "@babel/runtime@^7.8.4":
   version "7.24.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.6.tgz#5b76eb89ad45e2e4a0a8db54c456251469a3358e"
   integrity sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==
@@ -3148,7 +3148,7 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^2.0.0:
+clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -4605,6 +4605,13 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^11.2.10:
+  version "11.2.10"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.2.10.tgz#c8671e33e8f8d4abbd95efd20d3b8a888f457ed7"
+  integrity sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==
+  dependencies:
+    tslib "^2.4.0"
+
 [email protected]:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -8801,6 +8808,13 @@ svgo@^3.0.2, svgo@^3.2.0:
     csso "^5.0.5"
     picocolors "^1.0.0"
 
+tailwind-merge@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.3.0.tgz#27d2134fd00a1f77eca22bcaafdd67055917d286"
+  integrity sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+
 tailwindcss@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.3.tgz#be48f5283df77dfced705451319a5dffb8621519"
@@ -8941,7 +8955,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@^2.0.3, tslib@^2.6.0:
+tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==