Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: scaffold more sections

Browse Source
This commit is contained in:
0xSage 2023-09-22 15:09:59 +08:00
parent b80adfb5ae
commit cd8f9847c9
8 changed files with 261 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
docs/src/components/Homepage/downloads.js
View File

@ -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>
);
}

78
docs/src/components/Homepage/features.js
View File

@ -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>
);
}

2
docs/src/components/Homepage/hero.js
View File

@ -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>

5
docs/src/components/Homepage/index.js
View File

@ -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";

77
docs/src/components/Homepage/sectionOne.js Normal file
View File

@ -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>
);
}

81
docs/src/components/Homepage/sectionThree.js Normal file
View File

@ -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>
);
}

29
docs/src/components/Homepage/usecases.js → docs/src/components/Homepage/sectionTwo.js
View File

@ -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.",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
name: "Audit & compliance.",
description: "Coming soon.",
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,16 +63,14 @@ export default function HomepageUseCases() {
</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]"
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}
/>
</div>
</div>
</div>
</div>
);
}

10
docs/src/pages/index.js
View File

@ -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 />
<HomepageUseCases />
<HomepageSectionOne />
<HomepageSectionTwo />
<HomepageSectionThree />
<HomepageDownloads />
</main>
</Layout>