+

+
+
+
+
+
+
+
+
+ Desktop App
+
+
+
+ 10x productivity
+ {" "}
+ with customizable AI
{" "}
+ assistants, global hotkeys, and in-line AI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mobile App
+
+
+ Coming Soon
+
+
+
+ Take your AI assistants on the go.{" "}
+
Seamless integration
+ into your
+
+ mobile
workflows
+
+ with elegant features.
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+ Offline and Local First
+
+
+ Conversations, preferences, and model usage stay on{" "}
+
your computerāsecure,
+ exportable, and can be deleted at any time.
+
+
+
+
+
+
+ OpenAI Compatible
+
+
+ Jan provides an OpenAI-equivalent API{" "}
+
server at
+ localhost:
+
+ 1337
+ {" "}
+ that can be used as a drop-in replacement with
+ compatible apps.
+
+
+
+
+
+
+ /chats/completions
+
+
+
+
+
+
+ Local server and API
+
+
+
+
+
+
+
+ Assistants framework
+
+
+ Coming Soon
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
diff --git a/docs/src/styles/card.scss b/docs/src/styles/card.scss
deleted file mode 100644
index 9149c3d0d..000000000
--- a/docs/src/styles/card.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@layer components {
- .card-link-bg {
- background: linear-gradient(180deg, #fff 0%, #fff 100%);
- box-shadow:
- 0px 10px 10px -5px rgba(0, 0, 0, 0.1),
- 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
- 0px 1px 2px 0px #f1f1f1 inset;
- }
-
- .card-link-bg-dark {
- background: linear-gradient(180deg, #101118 0%, #101118 100%);
- box-shadow:
- 0px 10px 10px -5px rgba(0, 0, 0, 0.3),
- 0px 1px 2px 0px #525154 inset;
- }
- .card {
- @apply rounded-3xl border bg-gray-100 border-gray-100 dark:border-[#202231] dark:bg-[#111217];
-
- &-link {
- display: inline-flex;
- padding: 8px 16px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 8px;
- border-radius: 16px;
- font-size: 14px;
- cursor: pointer;
- }
- }
-}
diff --git a/docs/src/styles/components.scss b/docs/src/styles/components.scss
deleted file mode 100644
index 3583c258c..000000000
--- a/docs/src/styles/components.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@layer components {
- .el-blur-hero {
- height: 200px;
- background: linear-gradient(
- 180deg,
- hsl(296, 100%, 67%) 0%,
- hsl(253, 100%, 57%) 100%
- );
- z-index: 2;
- border-bottom-left-radius: 100%;
- border-bottom-right-radius: 100%;
- border-top-left-radius: 100%;
- border-top-right-radius: 100%;
- filter: blur(100px);
- -webkit-filter: blur(100px);
- opacity: 0.5;
- }
-}
diff --git a/docs/src/styles/base.scss b/docs/src/styles/components/base.scss
similarity index 85%
rename from docs/src/styles/base.scss
rename to docs/src/styles/components/base.scss
index b94081d66..b99ff21c2 100644
--- a/docs/src/styles/base.scss
+++ b/docs/src/styles/components/base.scss
@@ -1,7 +1,7 @@
@layer base {
-
html[data-theme="light"] {
- --ifm-background-color: white;
+ --custom-radial-blur: #e1e7fd;
+ --ifm-background-color: #fff;
--ifm-color-primary: #2563eb; /* New Primary Blue */
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
@@ -13,8 +13,10 @@
--ifm-navbar-link-hover-color: inherit;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
+
html[data-theme="dark"] {
- --ifm-background-color: black;
+ --custom-radial-blur: #1d1b48;
+ --ifm-background-color: #18181b;
--ifm-color-primary: #ffffff; /* New Primary Blue */
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
@@ -24,12 +26,18 @@
--ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
+
+ pre,
+ code {
+ @apply text-sm;
+ }
+
body {
@apply text-base;
@apply antialiased;
- @apply bg-white dark:bg-black;
- @apply text-gray-800 dark:text-gray-300;
+ @apply bg-white dark:bg-[#18181B];
}
+
img {
pointer-events: none;
}
@@ -44,12 +52,12 @@
display: inline-block;
padding: 2px 8px;
margin: 0;
- background-color: #228B22;
+ background-color: #228b22;
color: #000;
font-size: 13px;
vertical-align: middle;
line-height: 1.6;
border-radius: 4px;
font-weight: var(--ifm-font-weight-bold);
-}
+ }
}
diff --git a/docs/src/styles/components/card.scss b/docs/src/styles/components/card.scss
new file mode 100644
index 000000000..0bd29b3c4
--- /dev/null
+++ b/docs/src/styles/components/card.scss
@@ -0,0 +1,47 @@
+@layer components {
+ .card-gradient {
+ background: radial-gradient(
+ 58.83% 95.12% at 62.37% 97.91%,
+ rgba(238, 203, 255, 0.59) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ linear-gradient(
+ 155deg,
+ rgba(50, 107, 255, 0.8) 68.16%,
+ rgba(194, 226, 255, 0.8) 94.33%
+ );
+
+ backdrop-filter: blur(7.174633026123047px);
+ }
+
+ .card-link-bg {
+ background: linear-gradient(180deg, #fafafa 0%, #ededed 100%);
+ box-shadow:
+ 0px 4px 12px 0px rgba(0, 0, 0, 0.12),
+ 0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
+ 0px 1px 1px 0px #fff inset;
+ }
+
+ .card-link-bg-dark {
+ background: var(--color-bg-elevated, #27272a);
+ box-shadow:
+ 0px 4px 12px 0px rgba(0, 0, 0, 0.12),
+ 0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset,
+ 0px 1px 1px 0px #4c4c4c inset;
+ }
+ .card {
+ @apply rounded-xl border bg-gray-50 border-gray-50 dark:border-[#202231] dark:bg-[#111217]/50;
+
+ &-link {
+ display: inline-flex;
+ padding: 8px 16px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+ border-radius: 16px;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ }
+}
diff --git a/docs/src/styles/typography.scss b/docs/src/styles/components/typography.scss
similarity index 100%
rename from docs/src/styles/typography.scss
rename to docs/src/styles/components/typography.scss
diff --git a/docs/src/styles/main.scss b/docs/src/styles/main.scss
index 459a1197b..216b960d3 100644
--- a/docs/src/styles/main.scss
+++ b/docs/src/styles/main.scss
@@ -2,8 +2,12 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
-@import "./typography.scss";
-@import "./tweaks.scss";
-@import "./base.scss";
-@import "./components.scss";
-@import "./card.scss";
+@import "./components/base.scss";
+@import "./components/typography.scss";
+@import "./components/card.scss";
+
+@import "./tweaks/navbar.scss";
+@import "./tweaks/breadcrumb.scss";
+@import "./tweaks/markdown.scss";
+@import "./tweaks/redocusaurus.scss";
+@import "./tweaks/sidebar.scss";
diff --git a/docs/src/styles/tweaks.scss b/docs/src/styles/tweaks.scss
deleted file mode 100644
index d5d016436..000000000
--- a/docs/src/styles/tweaks.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-.redocusaurus {
- div[data-section-id] {
- min-height: auto;
- }
-}
-
-[class*="docItemCol_"] {
- @apply p-4 lg:px-16 lg:py-4;
-}
-
-[class*="breadcrumbsContainer_"] {
- margin-bottom: 40px !important;
-}
-
-.theme-doc-footer {
- margin-top: 40px;
- margin-bottom: 20px;
-}
-
-.menu.thin-scrollbar {
- padding: 32px 10px;
-}
-
-[class*="iconExternalLink_"] {
- display: none;
-}
-
-.navbar {
- @apply px-0 lg:h-16 border-b border-gray-200 dark:border-gray-800 bg-white/50 backdrop-blur-lg dark:bg-black/50 shadow-none;
-
- .navbar__toggle {
- width: 24px;
- }
-
- .navbar-sidebar__backdrop {
- height: 100dvh;
- }
-
- .navbar-sidebar {
- height: 100dvh;
- .navbar-sidebar__close {
- width: 14px;
- }
- }
-
- .navbar__title {
- @apply text-lg;
- }
- .navbar__brand {
- margin-right: 24px;
- &:hover {
- color: inherit;
- }
- }
- .navbar__inner {
- @apply container;
- }
-}
-
-.breadcrumbs__item {
- position: relative;
- &:first-child {
- .breadcrumbs__link {
- vertical-align: middle;
- margin-top: -2px;
- }
- }
-}
-
-[class*="docMainContainer_"],
-[class*="docSidebarContainer_"] {
- @apply bg-gray-50 dark:bg-gray-950/95;
-}
-
-.navbar-sidebar {
- @apply bg-gray-50 dark:bg-gray-900;
-}
-
-.theme-doc-sidebar-container {
- @apply border-gray-200 dark:border-gray-800;
-}
-
-.theme-doc-markdown {
- a {
- @apply text-blue-600 dark:text-blue-400;
- }
- ul {
- list-style: revert;
- }
- ol {
- list-style: decimal;
- }
- ul,
- ol {
- padding-left: 32px;
- li {
- @apply leading-loose;
- line-height: 1.5;
- }
- + div {
- margin-top: 12px;
- }
- }
-}
-
-.markdown h1:first-child,
-.markdown > p {
- margin-bottom: 16px;
-}
-
-.theme-code-block {
- font-size: 14px;
- background-color: black;
-}
-
-.table-of-contents {
- font-size: 14px;
-}
-
-.task-list-item {
- list-style: none;
-}
-
-blockquote {
- margin-bottom: 12px;
-}
diff --git a/docs/src/styles/tweaks/breadcrumb.scss b/docs/src/styles/tweaks/breadcrumb.scss
new file mode 100644
index 000000000..9091f8386
--- /dev/null
+++ b/docs/src/styles/tweaks/breadcrumb.scss
@@ -0,0 +1,18 @@
+.breadcrumbs {
+ @apply mb-8;
+
+ &__item {
+ position: relative;
+ &:first-child {
+ .breadcrumbs__link {
+ vertical-align: middle;
+ margin-top: -2px;
+ }
+ }
+ }
+
+ &__link {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
+}
diff --git a/docs/src/styles/tweaks/markdown.scss b/docs/src/styles/tweaks/markdown.scss
new file mode 100644
index 000000000..7e8e33871
--- /dev/null
+++ b/docs/src/styles/tweaks/markdown.scss
@@ -0,0 +1,47 @@
+.theme-doc-markdown {
+ a {
+ @apply text-blue-600 dark:text-blue-400 underline;
+ }
+ ul {
+ list-style: revert;
+ }
+ ol {
+ list-style: decimal;
+ }
+ ul,
+ ol {
+ padding-left: 16px;
+ li {
+ @apply leading-normal;
+ p {
+ margin-bottom: 0;
+ }
+ }
+ }
+ p {
+ @apply mb-2;
+ }
+ h1 {
+ &:first-child {
+ @apply mb-4;
+ }
+ }
+
+ h1,
+ h2 {
+ @apply mb-3;
+ }
+
+ table {
+ width: 100%;
+ display: table;
+ }
+}
+
+.task-list-item {
+ list-style: none;
+}
+
+blockquote {
+ margin-bottom: 12px;
+}
diff --git a/docs/src/styles/tweaks/navbar.scss b/docs/src/styles/tweaks/navbar.scss
new file mode 100644
index 000000000..789c2f48a
--- /dev/null
+++ b/docs/src/styles/tweaks/navbar.scss
@@ -0,0 +1,25 @@
+.navbar {
+ @apply bg-transparent py-0 shadow-none px-0;
+
+ &__inner {
+ @apply border border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-4 lg:px-8 relative;
+ }
+
+ &__logo {
+ @apply flex items-center;
+ }
+
+ &__brand {
+ &:hover {
+ @apply dark:text-white text-black;
+ }
+ }
+
+ &__title {
+ font-size: 18px;
+ }
+
+ [class*="searchBox_"] {
+ display: none;
+ }
+}
diff --git a/docs/src/styles/tweaks/redocusaurus.scss b/docs/src/styles/tweaks/redocusaurus.scss
new file mode 100644
index 000000000..debebf618
--- /dev/null
+++ b/docs/src/styles/tweaks/redocusaurus.scss
@@ -0,0 +1,33 @@
+.redocusaurus {
+ .menu-content {
+ top: 80px !important;
+ background-color: transparent;
+ }
+
+ .redoc-markdown {
+ margin-top: 8px;
+ }
+
+ .scrollbar-container {
+ ul > li > label {
+ margin-bottom: 4px;
+ background-color: transparent;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--ifm-menu-color);
+ }
+
+ ul > li > ul > li > label {
+ background-color: transparent;
+ font-weight: 500;
+ &:hover {
+ @apply dark:bg-gray-800/50 bg-gray-100;
+ }
+ &.active {
+ @apply dark:bg-gray-800/50 bg-gray-100;
+ }
+ }
+ }
+}
diff --git a/docs/src/styles/tweaks/sidebar.scss b/docs/src/styles/tweaks/sidebar.scss
new file mode 100644
index 000000000..5508a3bfa
--- /dev/null
+++ b/docs/src/styles/tweaks/sidebar.scss
@@ -0,0 +1,45 @@
+// * Classname from Docusaurus template
+// * We just overide the styling with applied class from tailwind
+
+[class*="docSidebarContainer_"] {
+ margin-top: 0 !important;
+ @apply dark:border-gray-800 border-gray-300;
+}
+
+[class*="sidebar_"] {
+ padding-top: 0px !important;
+}
+
+.navbar-sidebar__back {
+ padding-top: 20px !important;
+}
+
+[class*="sidebarViewport_"] {
+ top: 80px !important;
+ // height: unset !important;
+}
+
+[class*="docItemCol_"] {
+ @apply lg:px-8;
+}
+
+// * Including custom sidebar table of content
+.table-of-contents {
+ @apply text-base py-0 dark:border-gray-800 border-gray-300;
+}
+
+.menu__caret:before {
+ background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+}
+
+[class*="codeBlockContainer_"] {
+ margin: 4px;
+}
+
+[class*="codeBlockTitle_"] {
+ border-bottom: 1px solid #52525a !important;
+}
+
+[class*="iconExternalLink_"] {
+ display: none;
+}
diff --git a/docs/src/theme/Layout/index.js b/docs/src/theme/Layout/index.js
index 22c4cc131..2557d2c9f 100644
--- a/docs/src/theme/Layout/index.js
+++ b/docs/src/theme/Layout/index.js
@@ -10,7 +10,7 @@ import { useKeyboardNavigation } from "@docusaurus/theme-common/internal";
import SkipToContent from "@theme/SkipToContent";
import AnnouncementBar from "@theme/AnnouncementBar";
import Navbar from "@theme/Navbar";
-import Footer from "@site/src/components/Footer";
+import Footer from "@site/src/containers/Footer";
import LayoutProvider from "@theme/Layout/Provider";
import ErrorPageContent from "@theme/ErrorPageContent";
import styles from "./styles.module.scss";
diff --git a/docs/static/img/homepage/app-base-screen-dark.png b/docs/static/img/homepage/app-base-screen-dark.png
new file mode 100644
index 000000000..88d65f87e
Binary files /dev/null and b/docs/static/img/homepage/app-base-screen-dark.png differ
diff --git a/docs/static/img/homepage/app-base-screen-light.png b/docs/static/img/homepage/app-base-screen-light.png
new file mode 100644
index 000000000..5e8105a65
Binary files /dev/null and b/docs/static/img/homepage/app-base-screen-light.png differ
diff --git a/docs/static/img/homepage/desktop-app-dark.png b/docs/static/img/homepage/desktop-app-dark.png
new file mode 100644
index 000000000..961159276
Binary files /dev/null and b/docs/static/img/homepage/desktop-app-dark.png differ
diff --git a/docs/static/img/homepage/desktop-app-light.png b/docs/static/img/homepage/desktop-app-light.png
new file mode 100644
index 000000000..03f2a7c90
Binary files /dev/null and b/docs/static/img/homepage/desktop-app-light.png differ
diff --git a/docs/static/img/homepage/element-bg-open-source.png b/docs/static/img/homepage/element-bg-open-source.png
new file mode 100644
index 000000000..9314290e0
Binary files /dev/null and b/docs/static/img/homepage/element-bg-open-source.png differ
diff --git a/docs/static/img/homepage/element-hero-blur.png b/docs/static/img/homepage/element-hero-blur.png
new file mode 100644
index 000000000..5df882fea
Binary files /dev/null and b/docs/static/img/homepage/element-hero-blur.png differ
diff --git a/docs/static/img/homepage/element-hero-heading.png b/docs/static/img/homepage/element-hero-heading.png
new file mode 100644
index 000000000..671693713
Binary files /dev/null and b/docs/static/img/homepage/element-hero-heading.png differ
diff --git a/docs/static/img/homepage/extentions.svg b/docs/static/img/homepage/extentions.svg
new file mode 100644
index 000000000..a3ce1a981
--- /dev/null
+++ b/docs/static/img/homepage/extentions.svg
@@ -0,0 +1,511 @@
+
diff --git a/docs/static/img/homepage/full-control.svg b/docs/static/img/homepage/full-control.svg
new file mode 100644
index 000000000..7f744e2f9
--- /dev/null
+++ b/docs/static/img/homepage/full-control.svg
@@ -0,0 +1,333 @@
+
diff --git a/docs/static/img/homepage/ic-folder.png b/docs/static/img/homepage/ic-folder.png
new file mode 100644
index 000000000..dbf54acf9
Binary files /dev/null and b/docs/static/img/homepage/ic-folder.png differ
diff --git a/docs/static/img/homepage/ic-offline.png b/docs/static/img/homepage/ic-offline.png
new file mode 100644
index 000000000..85c57417d
Binary files /dev/null and b/docs/static/img/homepage/ic-offline.png differ
diff --git a/docs/static/img/homepage/ic-private.png b/docs/static/img/homepage/ic-private.png
new file mode 100644
index 000000000..bbebdd9d2
Binary files /dev/null and b/docs/static/img/homepage/ic-private.png differ
diff --git a/docs/static/img/homepage/mobile-app-dark.png b/docs/static/img/homepage/mobile-app-dark.png
new file mode 100644
index 000000000..3d1b1ce20
Binary files /dev/null and b/docs/static/img/homepage/mobile-app-dark.png differ
diff --git a/docs/static/img/homepage/mobile-app-light.png b/docs/static/img/homepage/mobile-app-light.png
new file mode 100644
index 000000000..30001b31c
Binary files /dev/null and b/docs/static/img/homepage/mobile-app-light.png differ
diff --git a/docs/static/img/homepage/open-source.svg b/docs/static/img/homepage/open-source.svg
new file mode 100644
index 000000000..8333d30f6
--- /dev/null
+++ b/docs/static/img/homepage/open-source.svg
@@ -0,0 +1,349 @@
+
diff --git a/docs/static/img/homepage/roadmap.png b/docs/static/img/homepage/roadmap.png
new file mode 100644
index 000000000..033b4a0fc
Binary files /dev/null and b/docs/static/img/homepage/roadmap.png differ
diff --git a/docs/static/img/homepage/status.png b/docs/static/img/homepage/status.png
new file mode 100644
index 000000000..7d618b0b1
Binary files /dev/null and b/docs/static/img/homepage/status.png differ
diff --git a/docs/static/img/jan-social-card.png b/docs/static/img/jan-social-card.png
index e1574eabc..c858b786b 100644
Binary files a/docs/static/img/jan-social-card.png and b/docs/static/img/jan-social-card.png differ
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index 24c343197..7ef39234d 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -4,12 +4,45 @@ module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: ["class", '[data-theme="dark"]'],
theme: {
+ animation: {
+ wave: "wave 2.5s linear infinite",
+ enter: "enter 200ms ease-out",
+ "slide-in": "slide-in 1.2s cubic-bezier(.41,.73,.51,1.02)",
+ leave: "leave 150ms ease-in forwards",
+ "bounce-down": "bounce-down 3s infinite",
+ },
+ keyframes: {
+ wave: {
+ "0%": { transform: "rotate( 0.0deg)" },
+ "10%": { transform: "rotate(14.0deg)" },
+ "20%": { transform: "rotate(-8.0deg)" },
+ "30%": { transform: "rotate(14.0deg)" },
+ "40%": { transform: "rotate(-4.0deg)" },
+ "50%": { transform: "rotate(10.0deg)" },
+ "60%": { transform: "rotate( 0.0deg)" },
+ "100%": { transform: "rotate( 0.0deg)" },
+ },
+ enter: {
+ "0%": { transform: "scale(0.8)", opacity: "0" },
+ "100%": { transform: "scale(1)", opacity: "1" },
+ },
+ leave: {
+ "0%": { transform: "scale(1)", opacity: "1" },
+ "100%": { transform: "scale(0.8)", opacity: "0" },
+ },
+ "slide-in": {
+ "0%": { transform: "translateY(-100%)" },
+ "100%": { transform: "translateY(0)" },
+ },
+ "bounce-down": {
+ "0%,20%, 50%,80%,100%": { transform: "translateY(0)" },
+ "40%": { transform: "translateY(-8px)" },
+ "60%": { transform: "translateY(-4px)" },
+ },
+ },
container: {
center: true,
padding: "16px",
- screens: {
- "2xl": "1400px",
- },
},
fontFamily: {
sans: [
diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
index 3621c90ec..79428b042 100644
--- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -98,23 +98,30 @@ const ExploreModelItemHeader: React.FC
= ({ model, onClick, open }) => {
return (
-
- {model.name}
-
-
-
- {toGigabytes(model.metadata.size)}
-
- {downloadButton}
-
+ {model.metadata.cover && (
+
+

+
+ )}
+
+
+ {model.name}
+
+
+
+ {toGigabytes(model.metadata.size)}
+
+ {downloadButton}
+
+
)