From 2dc90f80125e0e93990b1c54f137ed7ad6a3b577 Mon Sep 17 00:00:00 2001 From: Arista Indrajaya Date: Fri, 1 Mar 2024 14:46:22 +0700 Subject: [PATCH] docs: add hub page named trial -> /trial --- docs/docusaurus.config.js | 5 + .../HomepagePrimaryFeatures/index.js | 37 +++++++ .../HomepagePrimaryFeatures/styles.module.css | 77 +++++++++++++++ .../HomepageSecondaryFeatures/index.js | 67 +++++++++++++ .../styles.module.css | 79 +++++++++++++++ .../HomepageTerinaryFeatures/index.js | 68 +++++++++++++ .../styles.module.css | 68 +++++++++++++ docs/src/pages/trial.js | 52 ++++++++++ docs/src/pages/trial.module.css | 96 +++++++++++++++++++ 9 files changed, 549 insertions(+) create mode 100644 docs/src/components/HomepagePrimaryFeatures/index.js create mode 100644 docs/src/components/HomepagePrimaryFeatures/styles.module.css create mode 100644 docs/src/components/HomepageSecondaryFeatures/index.js create mode 100644 docs/src/components/HomepageSecondaryFeatures/styles.module.css create mode 100644 docs/src/components/HomepageTerinaryFeatures/index.js create mode 100644 docs/src/components/HomepageTerinaryFeatures/styles.module.css create mode 100644 docs/src/pages/trial.js create mode 100644 docs/src/pages/trial.module.css diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 40b6bf18c..816d1ea88 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -321,6 +321,11 @@ const config = { }, ], }, + { + to: "trial", + label: "Trial", + position: "right", + }, { to: "blog", label: "Blog", diff --git a/docs/src/components/HomepagePrimaryFeatures/index.js b/docs/src/components/HomepagePrimaryFeatures/index.js new file mode 100644 index 000000000..cf887d44d --- /dev/null +++ b/docs/src/components/HomepagePrimaryFeatures/index.js @@ -0,0 +1,37 @@ +import styles from "../HomepagePrimaryFeatures/styles.module.css"; +import clsx from "clsx"; + +export default function HomepagePrimaryFeatures() { + return ( +
+
+
+
+
+

Installation

+

Set up Jan with our guide, ensuring a smooth installation process across multiple platforms.

+
+ +
+ {"Card +
+
+
+
+

Models

+

Explore the available AI models, each pre-configured for immediate use to streamline your projects.

+
+
+ Support +
+
+ {"Card +
+
+
+
+
+ ); +} diff --git a/docs/src/components/HomepagePrimaryFeatures/styles.module.css b/docs/src/components/HomepagePrimaryFeatures/styles.module.css new file mode 100644 index 000000000..63fb3a1e1 --- /dev/null +++ b/docs/src/components/HomepagePrimaryFeatures/styles.module.css @@ -0,0 +1,77 @@ +.features { + display: flex; + align-items: center; + padding: 5rem 0; + width: 100%; +} + +.cards { + display: flex; + flex-wrap: wrap; + gap: 4rem; +} + +@media screen and (max-width: 768px) { + .cards { + gap: 2rem; + } +} + +.card { + min-width: 250px; + min-height: 275px; + max-height: 325px; + flex: 1; + border-radius: 15px; + padding: 2rem 1.5rem; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.card p { + font-size: 1.25rem; +} + +.cardImage { + position: absolute; + right: 1rem; + bottom: 1rem; +} + +.cardImage img { + height: 100px; +} + +@media screen and (max-width: 1024px) { + .cardImage { + display: none; + } +} + +.cardBluish { + background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(185,202,237,1) 100%); +} + +.cardPinkish { + background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(215,194,238,1) 100%); +} + +.card h3 { + font-size: 1.5rem; + font-weight: 600; + padding-top: 1rem; +} + +.card a { + all: unset; + color: white; + background-color: #1C1E21; + padding: 0.75rem 1.25rem; + border-radius: 6px; +} + +.card a:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/docs/src/components/HomepageSecondaryFeatures/index.js b/docs/src/components/HomepageSecondaryFeatures/index.js new file mode 100644 index 000000000..5ca86481a --- /dev/null +++ b/docs/src/components/HomepageSecondaryFeatures/index.js @@ -0,0 +1,67 @@ +import styles from "../HomepageSecondaryFeatures/styles.module.css"; +import clsx from "clsx"; + +export default function HomepageSecondaryFeatures() { + return ( +
+
+
+
+
+
+ {"Feature +
+
+

Quickstart

+

Jump right in with our Quickstart guide, designed to get you going with simple steps and clear instructions for a smooth setup.

+
+
+ +
+
+
+
+ {"Feature +
+
+

Integrations

+

Discover how Jan seamlessly integrates with 9 different system, streamlining your application for maximum efficiency.

+
+
+ +
+
+
+
+ {"Feature +
+
+

Error Codes

+

Navigate through common error codes with explanations and solutions to resolve them quickly.

+
+
+ +
+
+
+
+ ); +} diff --git a/docs/src/components/HomepageSecondaryFeatures/styles.module.css b/docs/src/components/HomepageSecondaryFeatures/styles.module.css new file mode 100644 index 000000000..1455d2e80 --- /dev/null +++ b/docs/src/components/HomepageSecondaryFeatures/styles.module.css @@ -0,0 +1,79 @@ +.features { + padding-top: 2rem; + display: flex; + align-items: center; + width: 100%; +} + +.cards { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 2rem; +} + +@media screen and (max-width: 768px) { + .cards { + gap: 2rem; + } +} + +.card { + background-color: #ECECEF; + width: 30%; + border-radius: 15px; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.cardContent { + margin-top: 3rem; + padding: 2rem; +} + +.cardLogo { + height: 130px; + width: 100%; +} + +.cardFooter { + padding-left: 2rem; + padding-right: 2rem; + padding-bottom: 2rem; + padding-top: 0; +} + +.cardLogo img { + object-fit: cover; +} + +.card p { + font-size: 1rem; + padding-top: 1rem; +} + +.card h3 { + font-size: 1.25rem; + font-weight: 600; +} + +.card a { + all: unset; + color: white; + background-color: #1C1E21; + padding: 0.75rem 1.25rem; + border-radius: 6px; +} + +.card a svg { + padding-top: 12px; + height: 1.5rem; + width: 1.5rem; + color: white; +} + +.card a:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/docs/src/components/HomepageTerinaryFeatures/index.js b/docs/src/components/HomepageTerinaryFeatures/index.js new file mode 100644 index 000000000..608f4e292 --- /dev/null +++ b/docs/src/components/HomepageTerinaryFeatures/index.js @@ -0,0 +1,68 @@ +import styles from "../HomepageTerinaryFeatures/styles.module.css"; +import clsx from "clsx"; + +export default function HomepageTerinaryFeatures() { + return ( +
+
+
+
+
+ {"Icon"} +

Get Started

+
+
+

Dive into the Jan basics and get set up quickly.

+
    +
  • Quickstart
    • +
  • Installation
    • +
  • Pre-configured Models
    • +
+
+
+
+
+ {"Icon"} +

Best Practices

+
+
+

Learn the best practices for optimizing thread management and local server use.

+
    +
  • Thread Management
    • +
  • Local Server
    • +
+
+
+
+
+ {"Icon"} +

Features:

+
+
+

Explore our key features designed to enhance your experience.

+
    +
  • Advanced Models Setup
    • +
  • Extensions
    • +
  • Integrations
    • +
+
+
+
+
+ {"Icon"} +

Troubleshooting

+
+
+

Find solutions to common issues, including error codes, frequent errors, and FAQs.

+
    +
  • Error Codes
    • +
  • Common Errors
    • +
  • FAQ
    • +
+
+
+
+
+
+ ); +} diff --git a/docs/src/components/HomepageTerinaryFeatures/styles.module.css b/docs/src/components/HomepageTerinaryFeatures/styles.module.css new file mode 100644 index 000000000..be47332e0 --- /dev/null +++ b/docs/src/components/HomepageTerinaryFeatures/styles.module.css @@ -0,0 +1,68 @@ +.features { + padding-top: 5rem; + padding-bottom: 5rem; + display: flex; + align-items: center; + width: 100%; +} + +.cards { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 2rem; +} + +@media screen and (max-width: 768px) { + .cards { + gap: 2rem; + } +} + +.card { + background-color: #ECECEF; + width: 275px; + border-radius: 15px; + position: relative; + display: flex; + flex-direction: column; + /* justify-content: space-between; */ + padding: 2rem; +} + +.cardContent { + margin-top: 1rem; + justify-content: start; +} + +.cardContent li { + font-weight: 600; + list-style: circle; + margin: 1rem; + padding: 0; +} + +.cardContent li::marker { + color: #2563EB; +} + +.cardHeader { + display: flex; + align-content: center; + gap: 1rem; +} + +.cardHeader img { + /*width: 40px;*/ + height: 40px; +} + +.card p { + font-size: 1rem; + margin-bottom: 1rem; +} + +.card h3 { + font-size: 1.2rem; + font-weight: 600; +} diff --git a/docs/src/pages/trial.js b/docs/src/pages/trial.js new file mode 100644 index 000000000..f4c6ef9c0 --- /dev/null +++ b/docs/src/pages/trial.js @@ -0,0 +1,52 @@ +import clsx from 'clsx'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import Heading from '@theme/Heading'; +import styles from './trial.module.css'; +import HomepagePrimaryFeatures from "../components/HomepagePrimaryFeatures"; +import HomepageSecondaryFeatures from "../components/HomepageSecondaryFeatures"; +import HomepageTerinaryFeatures from "../components/HomepageTerinaryFeatures"; +import { DocSearch } from '@docsearch/react'; + +function HomepageHeader() { + return ( +
+
+ + Hello, how can we help? + +
+ +
+ {/*
+ + + + +
*/} +

+ Open-source ChatGPT alternative that runs 100% offline on your computer. +

+
+
+ ); +} + +export default function Home() { + const {siteConfig} = useDocusaurusContext(); + return ( + +
+ +
+ + + +
+
+ + ); +} diff --git a/docs/src/pages/trial.module.css b/docs/src/pages/trial.module.css new file mode 100644 index 000000000..89728b7ef --- /dev/null +++ b/docs/src/pages/trial.module.css @@ -0,0 +1,96 @@ +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + + .heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; + } + + @media screen and (max-width: 996px) { + .heroBanner { + padding: 2rem; + } + } + + @media screen and (max-width: 1400px) { + .homeBg { + background-size: auto 600px !important; + } + } + + .homeBg { + background-image: url("/img/homepage-new/bg.png") !important; + background-size: contain; + background-repeat: no-repeat; + } + + .heroTitle { + font-size: 3rem; + font-weight: 600; + color: white; + margin-top: 4rem; + margin-bottom: 3rem; + } + + @media screen and (max-width: 1024px) { + .heroTitle { + font-size: 2rem; + } + } + + + .searchBar { + background-color: white; + max-width: 580px; + height: 50px; + margin-left: auto; + margin-right: auto; + border-radius: 25px; + display: flex; + margin-bottom: 4rem; + } + + .searchBar svg { + width: 20px; + height: 20px; + align-self: center; + margin-left: 16px; + margin-right: 8px; + color: #B8C2C8; + } + + .searchBar input { + flex: auto; + border: none; + outline: none; + margin: 6px 8px 6px 6px; + } + + .searchBar input:focus { + border: none; + outline: none; + } + + .searchBar input::placeholder { + color: #B8C2C8; + } + + .searchBar button { + height: 40px; + width: 100%; + border-radius: 20px; + background-color: white; + color: gray; + align-self: center; + padding: 0px 5px; + margin: 0px 10px + } + + .heroSubtitle { + font-size: 1.25rem; + color: white; + }