chore: scaffold more sections

docs/src/components/Homepage/downloads.js

@@ -1,5 +1,77 @@
 import React from "react";
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  LockClosedIcon,
+} from "@heroicons/react/20/solid";
+
+const features = [
+  {
+    name: "Mac",
+    description:
+      "Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu. Phasellus praesent ligula sit faucibus.",
+    href: "#",
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: "Windows",
+    description:
+      "Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.",
+    href: "#",
+    icon: LockClosedIcon,
+  },
+  {
+    name: "Linux",
+    description:
+      "Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod ut condimentum.",
+    href: "#",
+    icon: ArrowPathIcon,
+  },
+];
 
 export default function HomepageDownloads() {
-  return <div>Downloads section</div>;
+  return (
+    <div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:text-center">
+          <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
+            Run AI on any OS
+          </h2>
+          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+            Downloads
+          </p>
+          <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
+            Jan is compatible with all major operating systems. Download the
+            latest stable versions here.
+          </p>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.name} className="flex flex-col">
+                <dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark: text-white">
+                  <feature.icon
+                    className="h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
+                    aria-hidden="true"
+                  />
+                  {feature.name}
+                </dt>
+                <dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300">
+                  <p className="flex-auto">{feature.description}</p>
+                  <p className="mt-6">
+                    <a
+                      href={feature.href}
+                      className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400"
+                    >
+                      Learn more <span aria-hidden="true">→</span>
+                    </a>
+                  </p>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
 }

docs/src/components/Homepage/features.js

@@ -1,78 +0,0 @@
-import React from "react";
-import {
-  ArrowPathIcon,
-  CloudArrowUpIcon,
-  LockClosedIcon,
-} from "@heroicons/react/20/solid";
-
-const features = [
-  {
-    name: "Powerful models",
-    description:
-      "Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu. Phasellus praesent ligula sit faucibus.",
-    href: "#",
-    icon: CloudArrowUpIcon,
-  },
-  {
-    name: "AI that you control",
-    description:
-      "Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.",
-    href: "#",
-    icon: LockClosedIcon,
-  },
-  {
-    name: "Unlimited use",
-    description:
-      "Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod ut condimentum.",
-    href: "#",
-    icon: ArrowPathIcon,
-  },
-];
-
-export default function HomepageFeatures() {
-  return (
-    <div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl lg:text-center">
-          <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
-            Deploy faster
-          </h2>
-          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-            Why Jan
-          </p>
-          <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
-            Quis tellus eget adipiscing convallis sit sit eget aliquet quis.
-            Suspendisse eget egestas a elementum pulvinar et feugiat blandit at.
-            In mi viverra elit nunc.
-          </p>
-        </div>
-        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
-          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
-            {features.map((feature) => (
-              <div key={feature.name} className="flex flex-col">
-                <dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark: text-white">
-                  <feature.icon
-                    className="h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
-                    aria-hidden="true"
-                  />
-                  {feature.name}
-                </dt>
-                <dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300">
-                  <p className="flex-auto">{feature.description}</p>
-                  <p className="mt-6">
-                    <a
-                      href={feature.href}
-                      className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400"
-                    >
-                      Learn more <span aria-hidden="true">→</span>
-                    </a>
-                  </p>
-                </dd>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </div>
-    </div>
-  );
-}

docs/src/components/Homepage/hero.js

@@ -56,7 +56,7 @@ export default function HomepageHero() {
                 <Dropdown />
                 <button
                   type="button"
-                  className="cursor-pointer relative inline-flex items-center rounded px-3.5 py-2 text-base font-semibold text-indigo-600 bg-white border-indigo-600 dark:border-white hover:bg-indigo-600 dark:hover:border-indigo-600 hover:text-white"
+                  className="cursor-pointer relative inline-flex items-center rounded px-3.5 py-2 dark:py-2.5 text-base font-semibold text-indigo-600 bg-white border-indigo-600 dark:border-0 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white"
                 >
                   Book a Demo
                 </button>

docs/src/components/Homepage/index.js

@@ -1,5 +1,6 @@
 export { default as HomepageBanner } from "./banner";
-export { default as HomepageFeatures } from "./features";
 export { default as HomepageHero } from "./hero";
-export { default as HomepageUseCases } from "./usecases";
+export { default as HomepageSectionOne } from "./sectionOne";
+export { default as HomepageSectionTwo } from "./sectionTwo";
+export { default as HomepageSectionThree } from "./sectionThree";
 export { default as HomepageDownloads } from "./downloads";

docs/src/components/Homepage/sectionOne.js

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  CircleStackIcon,
+  CloudArrowUpIcon,
+  CursorArrowRaysIcon,
+  HomeIcon,
+  LockClosedIcon,
+  RocketLaunchIcon,
+  ServerIcon,
+} from "@heroicons/react/20/solid";
+
+const features = [
+  {
+    name: "1 Click Installs.",
+    description:
+      "Llama2, MPT, CodeLlama, and more. 1 click to install the latest and greatest models directly from HuggingFace. Or easily uploads your own models.",
+    icon: CursorArrowRaysIcon,
+  },
+  {
+    name: "Model management.",
+    description:
+      "Configure advanced settings for each model. Manage your model versions. Easily switch between models. Get visibility into hardware compatibility.",
+    icon: HomeIcon,
+  },
+  {
+    name: "Cloud AI Compatible.",
+    description:
+      "Connect via API to ChatGPT, Claude which are also still supported. Also declare your own remote server endpoint on any GPU cloud and share it.",
+    icon: CloudArrowUpIcon,
+  },
+];
+
+export default function HomepageSectionOne() {
+  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">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:ml-auto lg:pl-4 lg:pt-4">
+            <div className="lg:max-w-lg">
+              <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
+                Jan supports
+              </h2>
+              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+                Powerful Foundational Models
+              </p>
+              <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
+                Open source foundational models are supported.
+              </p>
+              <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 dark:text-gray-300 lg:max-w-none">
+                {features.map((feature) => (
+                  <div key={feature.name} className="relative pl-9">
+                    <dt className="inline font-semibold text-gray-900 dark:text-gray-300">
+                      <feature.icon
+                        className="absolute left-1 top-1 h-5 w-5 text-indigo-600 dark:text-indigo-400"
+                        aria-hidden="true"
+                      />
+                      {feature.name}
+                    </dt>{" "}
+                    <dd className="inline">{feature.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <div className="flex items-start justify-end lg:order-first">
+            <img
+              src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+              alt="Product screenshot"
+              className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+              width={2432}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/components/Homepage/sectionThree.js

@@ -0,0 +1,81 @@
+import React from "react";
+
+const people = [
+  {
+    name: "Lindsay Walton",
+    title: "Front-end Developer",
+    email: "lindsay.walton@example.com",
+    role: "Member",
+  },
+  // More people...
+];
+
+export default function HomepageSectionThree() {
+  return (
+    <div className="bg-white dark:bg-gray-900 py-12 sm:py-16">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:text-center">
+          <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
+            Run AI on any OS
+          </h2>
+          <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+            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 */}
+        <div className="px-4 sm:px-6 lg:px-8">
+          <div className="sm:flex sm:items-center">
+            <div className="mt-8 flow-root">
+              <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                  <table className="min-w-full divide-y divide-gray-300">
+                    <thead>
+                      <tr>
+                        <th
+                          scope="col"
+                          className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"
+                        >
+                          Name
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Title
+                        </th>
+                        <th
+                          scope="col"
+                          className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                          Email
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {people.map((person) => (
+                        <tr key={person.email}>
+                          <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">
+                            {person.name}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                            {person.title}
+                          </td>
+                          <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                            {person.email}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/components/Homepage/sectionTwo.js

@@ -1,45 +1,48 @@
 import React from "react";
 import {
+  CircleStackIcon,
   CloudArrowUpIcon,
+  CursorArrowRaysIcon,
+  HomeIcon,
   LockClosedIcon,
+  RocketLaunchIcon,
   ServerIcon,
 } from "@heroicons/react/20/solid";
 
 const features = [
   {
-    name: "Push to deploy.",
+    name: "Data security and privacy.",
     description:
       "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.",
     icon: CloudArrowUpIcon,
   },
   {
-    name: "SSL certificates.",
+    name: "Always accessible.",
     description:
       "Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.",
     icon: LockClosedIcon,
   },
   {
-    name: "Database backups.",
+    name: "Audit & compliance.",
-    description:
+    description: "Coming soon.",
-      "Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
     icon: ServerIcon,
   },
 ];
 
-export default function HomepageUseCases() {
+export default function sectionTwo() {
   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">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
-          <div className="lg:ml-auto lg:pl-4 lg:pt-4">
+          <div className="lg:pr-8 lg:pt-4">
             <div className="lg:max-w-lg">
               <h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
-                Deploy faster
+                Jan gives you
               </h2>
               <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
-                Why Jan
+                AI that you control
               </p>
-              <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-indigo-400">
+              <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                 Maiores impedit perferendis suscipit eaque, iste dolor
                 cupiditate blanditiis ratione.
@@ -47,7 +50,7 @@ export default function HomepageUseCases() {
               <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 dark:text-gray-300 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
-                    <dt className="inline font-semibold text-gray-900 dark:text-gray-300">
+                    <dt className="inline font-semibold text-gray-900 dark:text-white">
                       <feature.icon
                         className="absolute left-1 top-1 h-5 w-5 text-indigo-600 dark:text-indigo-400"
                         aria-hidden="true"
@@ -60,14 +63,12 @@ export default function HomepageUseCases() {
               </dl>
             </div>
           </div>
-          <div className="flex items-start justify-end lg:order-first">
+          <img
-            <img
+            src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
-              src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png"
+            alt="Product screenshot"
-              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"
-              className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+            width={2432}
-              width={2432}
+          />
-            />
-          </div>
         </div>
       </div>
     </div>

docs/src/pages/index.js

@@ -2,10 +2,11 @@ import React from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import {
-  HomepageFeatures,
   HomepageHero,
   HomepageBanner,
-  HomepageUseCases,
+  HomepageSectionOne,
+  HomepageSectionTwo,
+  HomepageSectionThree,
   HomepageDownloads,
 } from "@site/src/components/Homepage";
 
@@ -21,8 +22,9 @@ export default function Home() {
       {/* <HomepageBanner /> */}
       <main className={styles.main}>
         <HomepageHero />
-        <HomepageFeatures />
+        <HomepageSectionOne />
-        <HomepageUseCases />
+        <HomepageSectionTwo />
+        <HomepageSectionThree />
         <HomepageDownloads />
       </main>
     </Layout>