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

fix: improve landing page

Browse Source
This commit is contained in:
Faisal Amir 2023-12-10 21:03:20 +07:00
parent 79b9997aa2
commit f8188f29bb
5 changed files with 85 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/src/containers/DownloadApp/index.js
View File

@ -99,10 +99,11 @@ export default function DownloadApp() {
<span className="text-zinc-500 text-lg font-medium inline-block"> <span className="text-zinc-500 text-lg font-medium inline-block">
Download for PC Download for PC
</span> </span>
<div className="bg-yellow-50 text-yellow-700 space-x-2 px-4 py-2 border border-yellow-400 rounded-lg font-semibold"> <div className="bg-yellow-50 text-yellow-700 space-x-2 px-4 py-2 border border-yellow-400 rounded-lg text-base">
<span>🚧</span> <span>🚧</span>
<span> <span className="font-semibold">Warning:</span>
Warning: Jan is in the process of being built. Expect bugs! <span className="font-medium">
Jan is in the process of being built. Expect bugs!
</span> </span>
</div> </div>
</div> </div>
@ -112,14 +113,14 @@ export default function DownloadApp() {
key={i} key={i}
href={system.href} href={system.href}
className={twMerge( className={twMerge(
"inline-flex m-2 px-4 py-2 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-black dark:text-black bg-neutral-50 min-w-[150px] dark:bg-[#18181B]", "btn-shadow inline-flex m-2 px-4 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-zinc-200 dark:border-gray-700 text-black dark:text-white bg-zinc-50 min-w-[150px] dark:bg-[#18181B] h-[36px]",
system.comingSoon && "pointer-events-none" system.comingSoon && "pointer-events-none"
)} )}
> >
<system.logo /> <system.logo />
<span>{system.name}</span> <span className="text-sm">{system.name}</span>
{system.comingSoon && ( {system.comingSoon && (
<span className="bg-gray-300 py-0.5 px-2 inline-block ml-2 rounded-md text-sm mt-1"> <span className="bg-zinc-200 py-0.5 px-2 inline-block ml-2 rounded-md text-xs h-[20px] dark:text-black">
Coming Soon Coming Soon
</span> </span>
)} )}

41
docs/src/containers/Elements/dropdown.js
View File

@ -3,26 +3,27 @@ import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { ChevronDownIcon } from "@heroicons/react/20/solid";
import axios from "axios"; import axios from "axios";
import { FaWindows, FaApple, FaLinux } from "react-icons/fa";
const systemsTemplate = [ const systemsTemplate = [
{ {
name: "Download for Mac (M1/M2)", name: "Download for Mac (M1/M2/M3)",
logo: require("@site/static/img/apple-logo-white.png").default, logo: FaApple,
fileFormat: "{appname}-mac-arm64-{tag}.dmg", fileFormat: "{appname}-mac-arm64-{tag}.dmg",
}, },
{ {
name: "Download for Mac (Intel)", name: "Download for Mac (Intel)",
logo: require("@site/static/img/apple-logo-white.png").default, logo: FaApple,
fileFormat: "{appname}-mac-x64-{tag}.dmg", fileFormat: "{appname}-mac-x64-{tag}.dmg",
}, },
{ {
name: "Download for Windows", name: "Download for Windows",
logo: require("@site/static/img/windows-logo-white.png").default, logo: FaWindows,
fileFormat: "{appname}-win-x64-{tag}.exe", fileFormat: "{appname}-win-x64-{tag}.exe",
}, },
{ {
name: "Download for Linux", name: "Download for Linux",
logo: require("@site/static/img/linux-logo-white.png").default, logo: FaLinux,
fileFormat: "{appname}-linux-amd64-{tag}.deb", fileFormat: "{appname}-linux-amd64-{tag}.deb",
}, },
]; ];
@ -66,11 +67,7 @@ export default function Dropdown() {
} else if (userAgent.includes("Linux")) { } else if (userAgent.includes("Linux")) {
// linux user // linux user
setDefaultSystem(systems[3]); setDefaultSystem(systems[3]);
} else if ( } else if (userAgent.includes("Mac OS")) {
userAgent.includes("Mac OS") &&
arc &&
arc.architecture === "arm"
) {
setDefaultSystem(systems[0]); setDefaultSystem(systems[0]);
} else { } else {
setDefaultSystem(systems[1]); setDefaultSystem(systems[1]);
@ -123,14 +120,14 @@ export default function Dropdown() {
return ( return (
<div className="inline-flex align-items-stretch"> <div className="inline-flex align-items-stretch">
<a <a
className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-3.5 py-2.5 text-base font-semibold text-white bg-blue-600 hover:bg-blue-500 hover:text-white" className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-4 py-3 text-base font-semibold dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white"
href={defaultSystem.href} href={defaultSystem.href}
> >
<img src={defaultSystem.logo} alt="Logo" className="h-5 mr-3 -mt-1" /> <defaultSystem.logo className="h-5 mr-3 -mt-1" />
{defaultSystem.name} {defaultSystem.name}
</a> </a>
<Menu as="div" className="relative -ml-px block"> <Menu as="div" className="relative -ml-px block">
<Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-l border-blue-500 h-full text-white bg-blue-600 w-8 justify-center"> <Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-l border-gray-600 h-full dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white w-8 justify-center">
<span className="sr-only">Open OS options</span> <span className="sr-only">Open OS options</span>
<ChevronDownIcon className="h-6 w-6" aria-hidden="true" /> <ChevronDownIcon className="h-6 w-6" aria-hidden="true" />
</Menu.Button> </Menu.Button>
@ -143,7 +140,7 @@ export default function Dropdown() {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="absolute right-0 z-10 mt-1 w-72 text-left origin-top-right rounded-md bg-blue-600 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden"> <Menu.Items className="absolute right-0 z-10 mt-1 w-80 text-left origin-top-right rounded-md dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden">
<div className="overflow-hidden"> <div className="overflow-hidden">
{systems.map((system) => ( {systems.map((system) => (
<Menu.Item <Menu.Item
@ -154,16 +151,16 @@ export default function Dropdown() {
<a <a
href={system.href} href={system.href}
className={classNames( className={classNames(
active ? "bg-blue-500 hover:text-white" : "text-white", active
"flex px-4 py-3 items-center text-white hover:text-white" ? "dark:bg-blue-100 bg-gray-900 hover:text-white dark:text-black"
: "text-white dark:text-black",
"flex px-4 py-3 items-center text-white hover:text-white dark:text-black"
)} )}
> >
<img <system.logo className="w-3 mr-3 -mt-1 flex-shrink-0" />
src={system.logo} <span className="text-white dark:text-black font-medium">
alt="Logo" {system.name}
className="w-3 mr-3 -mt-1 flex-shrink-0" </span>
/>
<span className="text-white">{system.name}</span>
</a> </a>
)} )}
</Menu.Item> </Menu.Item>

42
docs/src/containers/SocialButton/index.js
View File

@ -1,28 +1,44 @@
import React from "react"; import React from "react";
import { FaGithub, FaDiscord } from "react-icons/fa"; import { FaGithub, FaDiscord } from "react-icons/fa";
import { RiStarSFill } from "react-icons/ri";
import { useAppStars } from "@site/src/hooks/useAppStars";
export default function SocialButton() { export default function SocialButton() {
const { stargazers } = useAppStars();
return ( return (
<div className="flex items-center space-x-2 justify-start"> <div className="flex items-center space-x-2 justify-start">
<a
href="https://discord.gg/FTk2MvZwJH"
target="_blank"
className="text-white bg-blue-600 hover:bg-blue-700 hover:text-white inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2"
>
<span>
<FaDiscord className="text-xl" />
</span>
<span>Discord</span>
</a>
<a <a
href="https://github.com/janhq/jan" href="https://github.com/janhq/jan"
target="_blank" target="_blank"
className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 border border-gray-400 dark:border-gray-700 text-white bg-black hover:text-white" className="inline-flex px-4 py-3 rounded-lg font-semibold cursor-pointer justify-center items-center space-x-4 border border-gray-400 dark:border-gray-700 text-white bg-black hover:text-white"
> >
<span> <span>
<FaGithub className="text-lg" /> <FaGithub className="text-3xl" />
</span> </span>
<span>Github</span> <div className="flex-col">
<p className="text-base">Github</p>
<p className="text-sm text-white flex items-center space-x-1">
<RiStarSFill className="text-lg text-[#FEC928]" />
<span>{stargazers.count} stars</span>
</p>
</div>
</a>
<a
href="https://discord.gg/FTk2MvZwJH"
target="_blank"
className="text-white bg-[#5765F2] hover:bg-[#5765F2] hover:text-white inline-flex px-4 py-3 rounded-lg font-semibold cursor-pointer justify-center items-center space-x-4"
>
<span>
<FaDiscord className="text-3xl" />
</span>
<div className="flex-col">
<p className="text-base">Discord</p>
<div className="text-sm text-white flex items-center space-x-1">
<div className="w-2 h-2 bg-green-500 rounded-full" />
<span>{stargazers.count} online</span>
</div>
</div>
</a> </a>
</div> </div>
); );

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

@ -12,6 +12,8 @@ import SocialButton from "@site/src/containers/SocialButton";
import { IoArrowDown } from "react-icons/io5"; import { IoArrowDown } from "react-icons/io5";
import Dropdown from "@site/src/containers/Elements/dropdown";
export default function Home() { export default function Home() {
const { siteConfig } = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
@ -21,6 +23,11 @@ export default function Home() {
.scrollIntoView({ behavior: "smooth" }); .scrollIntoView({ behavior: "smooth" });
}; };
const userAgent = navigator.userAgent;
console.log(userAgent);
const isBrowserChrome = userAgent.includes("Chrome");
return ( return (
<> <>
<Banner /> <Banner />
@ -57,13 +64,18 @@ export default function Home() {
<br className="hidden lg:block" /> 100% offline on your <br className="hidden lg:block" /> 100% offline on your
computer. computer.
</p> </p>
<div className="mt-8"></div>
<div className="mt-8"> <div className="mt-8">
{!isBrowserChrome ? (
<div <div
onClick={() => handleAnchorLink()} onClick={() => handleAnchorLink()}
className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white scroll-smooth" className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white scroll-smooth"
> >
<span>Download Jan for PC</span> <span>Download Jan for PC</span>
</div> </div>
) : (
<Dropdown />
)}
</div> </div>
<div <div
@ -192,7 +204,7 @@ export default function Home() {
<p className="text-3xl xl:text-4xl font-semibold"> <p className="text-3xl xl:text-4xl font-semibold">
Mobile App Mobile App
</p> </p>
<span className="bg-gray-300 dark:bg-gray-700 py-1 px-2 inline-block ml-2 rounded-md text-sm mt-1"> <span className="bg-gray-300 dark:bg-gray-700 py-0.5 px-2 inline-block ml-2 rounded-lg text-sm mt-1 font-medium">
Coming Soon Coming Soon
</span> </span>
</div> </div>
@ -229,28 +241,28 @@ export default function Home() {
<div className="container py-12 lg:py-32"> <div className="container py-12 lg:py-32">
<div className="w-full xl:w-10/12 mx-auto relative"> <div className="w-full xl:w-10/12 mx-auto relative">
<div className="text-center"> <div className="text-center">
<div className="card-link-bg dark:card-link-bg-dark px-4 py-2 inline-flex rounded-xl items-center space-x-4"> <div className="card-link-bg dark:card-link-bg-dark px-4 py-2 inline-flex rounded-xl items-center space-x-6 h-[60px]">
<img <img
src="/img/homepage/ic-offline.png" src="/img/homepage/ic-offline.png"
alt="Icon Offline" alt="Icon Offline"
className="w-9" className="w-9 flex-shrink-0"
/> />
<img <img
src="/img/homepage/ic-private.png" src="/img/homepage/ic-private.png"
alt="Icon Offline" alt="Icon Offline"
className="w-9" className="w-12 flex-shrink-0"
/> />
<img <img
src="/img/homepage/ic-folder.png" src="/img/homepage/ic-folder.png"
alt="Icon Offline" alt="Icon Offline"
className="w-9" className="w-9 flex-shrink-0"
/> />
</div> </div>
<div className="mt-8"> <div className="mt-8">
<h6 className="text-3xl lg:text-4xl font-semibold"> <h6 className="text-3xl lg:text-4xl font-semibold">
Offline and Local First Offline and Local First
</h6> </h6>
<p className="mt-2 leading-relaxed text-zinc-600 dark:text-zinc-400"> <p className="mt-2 text-zinc-600 dark:text-zinc-400 text-lg leading-relaxed">
Conversations, preferences, and model usage stay on{" "} Conversations, preferences, and model usage stay on{" "}
<br className="hidden lg:block" /> your computer—secure, <br className="hidden lg:block" /> your computer—secure,
exportable, and can be deleted at any time. exportable, and can be deleted at any time.
@ -262,7 +274,7 @@ export default function Home() {
<h6 className="text-3xl lg:text-4xl font-semibold"> <h6 className="text-3xl lg:text-4xl font-semibold">
OpenAI Compatible OpenAI Compatible
</h6> </h6>
<p className="mt-4 leading-relaxed text-zinc-600 dark:text-zinc-400"> <p className="mt-4 leading-relaxed text-zinc-600 dark:text-zinc-400 text-lg">
Jan provides an OpenAI-equivalent API{" "} Jan provides an OpenAI-equivalent API{" "}
<br className="hidden lg:block" /> server at&nbsp; <br className="hidden lg:block" /> server at&nbsp;
<b>localhost:</b>&nbsp; <b>localhost:</b>&nbsp;
@ -294,7 +306,7 @@ export default function Home() {
<span className="inline-block mr-2"> <span className="inline-block mr-2">
Assistants framework Assistants framework
</span> </span>
<span className="bg-gray-300 dark:bg-gray-700 py-1 px-2 inline-block rounded-md text-sm"> <span className="bg-gray-300 dark:bg-gray-700 py-0.5 px-2 inline-block rounded-lg text-sm">
Coming Soon Coming Soon
</span> </span>
</p> </p>

4
docs/src/styles/components/base.scss
View File

@ -60,4 +60,8 @@
border-radius: 4px; border-radius: 4px;
font-weight: var(--ifm-font-weight-bold); font-weight: var(--ifm-font-weight-bold);
} }
.btn-shadow {
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
} }