fix: improve landing page
This commit is contained in:
Faisal Amir
parent
79b9997aa2
commit
f8188f29bb
@ -99,10 +99,11 @@ export default function DownloadApp() {
|
||||
<span className="text-zinc-500 text-lg font-medium inline-block">
|
||||
Download for PC
|
||||
</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>
|
||||
Warning: Jan is in the process of being built. Expect bugs!
|
||||
<span className="font-semibold">Warning:</span>
|
||||
<span className="font-medium">
|
||||
Jan is in the process of being built. Expect bugs!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,14 +113,14 @@ export default function DownloadApp() {
|
||||
key={i}
|
||||
href={system.href}
|
||||
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.logo />
|
||||
<span>{system.name}</span>
|
||||
<span className="text-sm">{system.name}</span>
|
||||
{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
|
||||
</span>
|
||||
)}
|
||||
|
||||
@ -3,26 +3,27 @@ import { Fragment } from "react";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
import axios from "axios";
|
||||
import { FaWindows, FaApple, FaLinux } from "react-icons/fa";
|
||||
|
||||
const systemsTemplate = [
|
||||
{
|
||||
name: "Download for Mac (M1/M2)",
|
||||
logo: require("@site/static/img/apple-logo-white.png").default,
|
||||
name: "Download for Mac (M1/M2/M3)",
|
||||
logo: FaApple,
|
||||
fileFormat: "{appname}-mac-arm64-{tag}.dmg",
|
||||
},
|
||||
{
|
||||
name: "Download for Mac (Intel)",
|
||||
logo: require("@site/static/img/apple-logo-white.png").default,
|
||||
logo: FaApple,
|
||||
fileFormat: "{appname}-mac-x64-{tag}.dmg",
|
||||
},
|
||||
{
|
||||
name: "Download for Windows",
|
||||
logo: require("@site/static/img/windows-logo-white.png").default,
|
||||
logo: FaWindows,
|
||||
fileFormat: "{appname}-win-x64-{tag}.exe",
|
||||
},
|
||||
{
|
||||
name: "Download for Linux",
|
||||
logo: require("@site/static/img/linux-logo-white.png").default,
|
||||
logo: FaLinux,
|
||||
fileFormat: "{appname}-linux-amd64-{tag}.deb",
|
||||
},
|
||||
];
|
||||
@ -66,11 +67,7 @@ export default function Dropdown() {
|
||||
} else if (userAgent.includes("Linux")) {
|
||||
// linux user
|
||||
setDefaultSystem(systems[3]);
|
||||
} else if (
|
||||
userAgent.includes("Mac OS") &&
|
||||
arc &&
|
||||
arc.architecture === "arm"
|
||||
) {
|
||||
} else if (userAgent.includes("Mac OS")) {
|
||||
setDefaultSystem(systems[0]);
|
||||
} else {
|
||||
setDefaultSystem(systems[1]);
|
||||
@ -123,14 +120,14 @@ export default function Dropdown() {
|
||||
return (
|
||||
<div className="inline-flex align-items-stretch">
|
||||
<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}
|
||||
>
|
||||
<img src={defaultSystem.logo} alt="Logo" className="h-5 mr-3 -mt-1" />
|
||||
<defaultSystem.logo className="h-5 mr-3 -mt-1" />
|
||||
{defaultSystem.name}
|
||||
</a>
|
||||
<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>
|
||||
<ChevronDownIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</Menu.Button>
|
||||
@ -143,7 +140,7 @@ export default function Dropdown() {
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
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">
|
||||
{systems.map((system) => (
|
||||
<Menu.Item
|
||||
@ -154,16 +151,16 @@ export default function Dropdown() {
|
||||
<a
|
||||
href={system.href}
|
||||
className={classNames(
|
||||
active ? "bg-blue-500 hover:text-white" : "text-white",
|
||||
"flex px-4 py-3 items-center text-white hover:text-white"
|
||||
active
|
||||
? "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
|
||||
src={system.logo}
|
||||
alt="Logo"
|
||||
className="w-3 mr-3 -mt-1 flex-shrink-0"
|
||||
/>
|
||||
<span className="text-white">{system.name}</span>
|
||||
<system.logo className="w-3 mr-3 -mt-1 flex-shrink-0" />
|
||||
<span className="text-white dark:text-black font-medium">
|
||||
{system.name}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
|
||||
@ -1,28 +1,44 @@
|
||||
import React from "react";
|
||||
import { FaGithub, FaDiscord } from "react-icons/fa";
|
||||
import { RiStarSFill } from "react-icons/ri";
|
||||
import { useAppStars } from "@site/src/hooks/useAppStars";
|
||||
|
||||
export default function SocialButton() {
|
||||
const { stargazers } = useAppStars();
|
||||
|
||||
return (
|
||||
<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
|
||||
href="https://github.com/janhq/jan"
|
||||
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>
|
||||
<FaGithub className="text-lg" />
|
||||
<FaGithub className="text-3xl" />
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,6 +12,8 @@ import SocialButton from "@site/src/containers/SocialButton";
|
||||
|
||||
import { IoArrowDown } from "react-icons/io5";
|
||||
|
||||
import Dropdown from "@site/src/containers/Elements/dropdown";
|
||||
|
||||
export default function Home() {
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
|
||||
@ -21,6 +23,11 @@ export default function Home() {
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
const userAgent = navigator.userAgent;
|
||||
|
||||
console.log(userAgent);
|
||||
const isBrowserChrome = userAgent.includes("Chrome");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Banner />
|
||||
@ -57,13 +64,18 @@ export default function Home() {
|
||||
<br className="hidden lg:block" /> 100% offline on your
|
||||
computer.
|
||||
</p>
|
||||
<div className="mt-8"></div>
|
||||
<div className="mt-8">
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<span>Download Jan for PC</span>
|
||||
</div>
|
||||
{!isBrowserChrome ? (
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<span>Download Jan for PC</span>
|
||||
</div>
|
||||
) : (
|
||||
<Dropdown />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
@ -192,7 +204,7 @@ export default function Home() {
|
||||
<p className="text-3xl xl:text-4xl font-semibold">
|
||||
Mobile App
|
||||
</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
|
||||
</span>
|
||||
</div>
|
||||
@ -229,28 +241,28 @@ export default function Home() {
|
||||
<div className="container py-12 lg:py-32">
|
||||
<div className="w-full xl:w-10/12 mx-auto relative">
|
||||
<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
|
||||
src="/img/homepage/ic-offline.png"
|
||||
alt="Icon Offline"
|
||||
className="w-9"
|
||||
className="w-9 flex-shrink-0"
|
||||
/>
|
||||
<img
|
||||
src="/img/homepage/ic-private.png"
|
||||
alt="Icon Offline"
|
||||
className="w-9"
|
||||
className="w-12 flex-shrink-0"
|
||||
/>
|
||||
<img
|
||||
src="/img/homepage/ic-folder.png"
|
||||
alt="Icon Offline"
|
||||
className="w-9"
|
||||
className="w-9 flex-shrink-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<h6 className="text-3xl lg:text-4xl font-semibold">
|
||||
Offline and Local First
|
||||
</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{" "}
|
||||
<br className="hidden lg:block" /> your computer—secure,
|
||||
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">
|
||||
OpenAI Compatible
|
||||
</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{" "}
|
||||
<br className="hidden lg:block" /> server at
|
||||
<b>localhost:</b>
|
||||
@ -294,7 +306,7 @@ export default function Home() {
|
||||
<span className="inline-block mr-2">
|
||||
Assistants framework
|
||||
</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
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@ -60,4 +60,8 @@
|
||||
border-radius: 4px;
|
||||
font-weight: var(--ifm-font-weight-bold);
|
||||
}
|
||||
|
||||
.btn-shadow {
|
||||
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user