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

chore: scaffold teh basics

Browse Source
This commit is contained in:
0xSage 2023-09-25 18:59:34 +08:00
parent cd8f9847c9
commit 343e2e1e19
11 changed files with 191 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
fugiat aliqua.
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>
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")
.default
: require("@site/static/img/desktop-screenshot.png").default
? // TODO replace with darkmode image
require("@site/static/img/desktop-llm-chat.png").default
: require("@site/static/img/desktop-llm-chat.png").default
}
alt="App screenshot"
width={2432}

11
docs/src/components/Homepage/sectionOne.js
View File

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

217
docs/src/components/Homepage/sectionThree.js
View File

@ -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",
title: "Front-end Developer",
email: "lindsay.walton@example.com",
role: "Member",
name: "Pay per API call",
id: "tier-freelancer",
href: "#",
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">
<h2 className="text-base font-semibold leading-7 text-indigo-600 dark:text-indigo-400">
Run AI on any OS
<div className="mx-auto max-w-4xl text-center">
<h2 className="text-base font-semibold leading-7 text-indigo-600">
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 */}
<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>
<p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600">
No uncontrolled cloud spending. No hidden fees. No limits.
</p>
{/* <div className="mt-16 flex justify-center">
<RadioGroup
value={frequency}
onChange={setFrequency}
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"
>
<RadioGroup.Label className="sr-only">
Payment frequency
</RadioGroup.Label>
{frequencies.map((option) => (
<RadioGroup.Option
key={option.value}
value={option}
className={({ checked }) =>
classNames(
checked ? "bg-indigo-600 text-white" : "text-gray-500",
"cursor-pointer rounded-full px-2.5 py-1"
)
}
>
<span>{option.label}</span>
</RadioGroup.Option>
))}
</RadioGroup>
</div> */}
<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">
{tiers.map((tier) => (
<div
key={tier.id}
className={classNames(
tier.mostPopular
? "ring-2 ring-indigo-600"
: "ring-1 ring-gray-200",
"rounded-3xl p-8 xl:p-10"
)}
>
<div className="flex items-center justify-between gap-x-4">
<h3
id={tier.id}
className={classNames(
tier.mostPopular ? "text-indigo-600" : "text-gray-900",
"text-lg font-semibold leading-8"
)}
>
{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>

9
docs/src/components/Homepage/sectionTwo.js
View File

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

5
docs/src/css/custom.css
View File

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

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

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

4
docs/src/pages/index.module.css
View File

@ -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;
}
} */

0
docs/static/img/desktop-screenshot-dark.png → docs/static/img/desktop-explore-models-dark.png vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 389 KiB

After

Width:  |  Height:  |  Size: 389 KiB

0
docs/static/img/desktop-screenshot.png → docs/static/img/desktop-explore-models.png vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 379 KiB

After

Width:  |  Height:  |  Size: 379 KiB

BIN
docs/static/img/desktop-llm-chat.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 619 KiB

BIN
docs/static/img/desktop-model-settings.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB