chore: scaffold teh basics

docs/src/components/Homepage/hero.js

@@ -47,9 +47,13 @@ export default function HomepageHero() {
                 Run your own AI
               </h1>
               <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
+                Jan lets you run AI on your own hardware. 1-click to install the
-                lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
+                latest open-source models. Monitor and manage software-hardware
-                fugiat aliqua.
+                performance.
+                <br></br>
+                Jan is
+                <strong> free and open core</strong> with a Sustainable Use
+                License.
               </p>
               <div className="mt-10 flex items-center justify-center gap-x-6">
                 {/* TODO: handle mobile model download app instead */}
@@ -66,9 +70,9 @@ export default function HomepageHero() {
             <img
               src={
                 colorMode === "dark"
-                  ? require("@site/static/img/desktop-screenshot-dark.png")
+                  ? // TODO replace with darkmode image
-                      .default
+                    require("@site/static/img/desktop-llm-chat.png").default
-                  : require("@site/static/img/desktop-screenshot.png").default
+                  : require("@site/static/img/desktop-llm-chat.png").default
               }
               alt="App screenshot"
               width={2432}

docs/src/components/Homepage/sectionOne.js

@@ -8,6 +8,7 @@ import {
   RocketLaunchIcon,
   ServerIcon,
 } from "@heroicons/react/20/solid";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const features = [
   {
@@ -31,6 +32,7 @@ const features = [
 ];
 
 export default function HomepageSectionOne() {
+  const { colorMode } = useColorMode();
   return (
     <div className="overflow-hidden bg-white dark:bg-gray-900 py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -64,7 +66,14 @@ export default function HomepageSectionOne() {
           </div>
           <div className="flex items-start justify-end lg:order-first">
             <img
-              src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+              src={
+                colorMode === "dark"
+                  ? // TODO replace with darkmode image
+                    require("@site/static/img/desktop-explore-models-dark.png")
+                      .default
+                  : require("@site/static/img/desktop-explore-models.png")
+                      .default
+              }
               alt="Product screenshot"
               className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
               width={2432}

docs/src/components/Homepage/sectionThree.js

@@ -1,79 +1,172 @@
 import React from "react";
+import { useState } from "react";
+import { RadioGroup } from "@headlessui/react";
+import { CheckIcon } from "@heroicons/react/20/solid";
 
-const people = [
+const frequencies = [
+  { value: "monthly", label: "Monthly", priceSuffix: "/1Mn tokens" },
+  { value: "annually", label: "Annually", priceSuffix: "/year" },
+];
+const tiers = [
   {
-    name: "Lindsay Walton",
+    name: "Pay per API call",
-    title: "Front-end Developer",
+    id: "tier-freelancer",
-    email: "lindsay.walton@example.com",
+    href: "#",
-    role: "Member",
+    price: { monthly: "$75", annually: "$144" },
+    description: "The essentials to provide your best work for clients.",
+    features: [
+      "5 products",
+      "Up to 1,000 subscribers",
+      "Basic analytics",
+      "48-hour support response time",
+    ],
+    mostPopular: false,
+  },
+  {
+    name: "Run it yourself",
+    id: "tier-startup",
+    href: "#",
+    price: { monthly: "$0", annually: "$288" },
+    description: "A plan that scales with your rapidly growing business.",
+    features: [
+      "25 products",
+      "Up to 10,000 subscribers",
+      "Advanced analytics",
+      "24-hour support response time",
+      "Marketing automations",
+    ],
+    mostPopular: true,
+  },
+  {
+    name: "Rent Cloud GPUs",
+    id: "tier-enterprise",
+    href: "#",
+    price: { monthly: "$40", annually: "$576" },
+    description: "Dedicated support and infrastructure for your company.",
+    features: [
+      "Unlimited products",
+      "Unlimited subscribers",
+      "Advanced analytics",
+      "1-hour, dedicated support response time",
+      "Marketing automations",
+      "Custom reporting tools",
+    ],
+    mostPopular: false,
   },
-  // More people...
 ];
 
-export default function HomepageSectionThree() {
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function Example() {
+  const [frequency, setFrequency] = useState(frequencies[0]);
+
   return (
-    <div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
+    <div className="bg-white py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl lg:text-center">
+        <div className="mx-auto max-w-4xl text-center">
-          <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
+          <h2 className="text-base font-semibold leading-7 text-indigo-600">
-            Run AI on any OS
+            AI on your own hardware means
           </h2>
-          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+          <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
             Unlimited Use
           </p>
-          <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-            No uncontrolled cloud spending. No hidden fees. No limits.
-          </p>
         </div>
-        {/* Cost comparitor */}
+        <p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
-        <div className="px-4 sm:px-6 lg:px-8">
+          No uncontrolled cloud spending. No hidden fees. No limits.
-          <div className="sm:flex sm:items-center">
+        </p>
-            <div className="mt-8 flow-root">
+        {/* <div className="mt-16 flex justify-center">
-              <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <RadioGroup
-                <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            value={frequency}
-                  <table className="min-w-full divide-y divide-gray-300">
+            onChange={setFrequency}
-                    <thead>
+            className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200"
-                      <tr>
+          >
-                        <th
+            <RadioGroup.Label className="sr-only">
-                          scope="col"
+              Payment frequency
-                          className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
+            </RadioGroup.Label>
-                        >
+            {frequencies.map((option) => (
-                          Name
+              <RadioGroup.Option
-                        </th>
+                key={option.value}
-                        <th
+                value={option}
-                          scope="col"
+                className={({ checked }) =>
-                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  classNames(
-                        >
+                    checked ? "bg-indigo-600 text-white" : "text-gray-500",
-                          Title
+                    "cursor-pointer rounded-full px-2.5 py-1"
-                        </th>
+                  )
-                        <th
+                }
-                          scope="col"
+              >
-                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                <span>{option.label}</span>
-                        >
+              </RadioGroup.Option>
-                          Email
+            ))}
-                        </th>
+          </RadioGroup>
-                      </tr>
+        </div> */}
-                    </thead>
+        <div className="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-                    <tbody className="divide-y divide-gray-200">
+          {tiers.map((tier) => (
-                      {people.map((person) => (
+            <div
-                        <tr key={person.email}>
+              key={tier.id}
-                          <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
+              className={classNames(
-                            {person.name}
+                tier.mostPopular
-                          </td>
+                  ? "ring-2 ring-indigo-600"
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                  : "ring-1 ring-gray-200",
-                            {person.title}
+                "rounded-3xl p-8 xl:p-10"
-                          </td>
+              )}
-                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+            >
-                            {person.email}
+              <div className="flex items-center justify-between gap-x-4">
-                          </td>
+                <h3
-                        </tr>
+                  id={tier.id}
-                      ))}
+                  className={classNames(
-                    </tbody>
+                    tier.mostPopular ? "text-indigo-600" : "text-gray-900",
-                  </table>
+                    "text-lg font-semibold leading-8"
-                </div>
+                  )}
+                >
+                  {tier.name}
+                </h3>
+                {tier.mostPopular ? (
+                  <p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600">
+                    Fully private
+                  </p>
+                ) : null}
               </div>
+              <p className="mt-4 text-sm leading-6 text-gray-600">
+                {tier.description}
+              </p>
+              <p className="mt-6 flex items-baseline gap-x-1">
+                <span className="text-4xl font-bold tracking-tight text-gray-900">
+                  {tier.price[frequency.value]}
+                </span>
+                <span className="text-sm font-semibold leading-6 text-gray-600">
+                  {frequency.priceSuffix}
+                </span>
+              </p>
+              {/* <a
+                href={tier.href}
+                aria-describedby={tier.id}
+                className={classNames(
+                  tier.mostPopular
+                    ? "bg-indigo-600 text-white shadow-sm hover:bg-indigo-500"
+                    : "text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300",
+                  "mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                )}
+              >
+                Buy plan
+              </a> */}
+              <ul
+                role="list"
+                className="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10"
+              >
+                {tier.features.map((feature) => (
+                  <li key={feature} className="flex gap-x-3">
+                    <CheckIcon
+                      className="h-6 w-5 flex-none text-indigo-600"
+                      aria-hidden="true"
+                    />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
             </div>
-          </div>
+          ))}
         </div>
       </div>
     </div>

docs/src/components/Homepage/sectionTwo.js

@@ -8,6 +8,7 @@ import {
   RocketLaunchIcon,
   ServerIcon,
 } from "@heroicons/react/20/solid";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const features = [
   {
@@ -30,6 +31,7 @@ const features = [
 ];
 
 export default function sectionTwo() {
+  const { colorMode } = useColorMode();
   return (
     <div className="overflow-hidden bg-white dark:bg-gray-900 py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -64,7 +66,12 @@ export default function sectionTwo() {
             </div>
           </div>
           <img
-            src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+            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
+            }
             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"
             width={2432}

docs/src/css/custom.css

@@ -8,7 +8,9 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+/* You can override the default Infima variables here. 
+   Full list of Infima variables: https://github.com/facebook/docusaurus/issues/3955#issuecomment-1521944593
+*/
 :root {
   --ifm-color-primary: #2e8555;
   --ifm-color-primary-dark: #29784c;
@@ -30,5 +32,6 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --ifm-navbar-background-color: rgba(15, 23, 42);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

docs/src/pages/index.js

@@ -24,8 +24,8 @@ export default function Home() {
         <HomepageHero />
         <HomepageSectionOne />
         <HomepageSectionTwo />
-        <HomepageSectionThree />
+        {/* <HomepageSectionThree />
-        <HomepageDownloads />
+        <HomepageDownloads /> */}
       </main>
     </Layout>
   );

docs/src/pages/index.module.css

@@ -3,7 +3,7 @@
  * and scoped locally.
  */
 
-.heroBanner {
+/* .heroBanner {
   padding: 4rem 0;
   text-align: center;
   position: relative;
@@ -20,4 +20,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
+} */