docs: add hub page named trial -> /trial
This commit is contained in:
Arista Indrajaya
parent
e4ff358bfa
commit
2dc90f8012
@ -321,6 +321,11 @@ const config = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "trial",
|
||||
label: "Trial",
|
||||
position: "right",
|
||||
},
|
||||
{
|
||||
to: "blog",
|
||||
label: "Blog",
|
||||
|
||||
37
docs/src/components/HomepagePrimaryFeatures/index.js
Normal file
37
docs/src/components/HomepagePrimaryFeatures/index.js
Normal file
@ -0,0 +1,37 @@
|
||||
import styles from "../HomepagePrimaryFeatures/styles.module.css";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function HomepagePrimaryFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className={clsx(styles.cards)}>
|
||||
<div className={clsx(styles.card, styles.cardBluish)}>
|
||||
<div>
|
||||
<p>Installation</p>
|
||||
<h3>Set up Jan with our guide, ensuring a smooth installation process across multiple platforms.</h3>
|
||||
</div>
|
||||
<div >
|
||||
<a href={"/quickstart/install"}>Get Started</a>
|
||||
</div>
|
||||
<div className={styles.cardImage}>
|
||||
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card, styles.cardPinkish)}>
|
||||
<div>
|
||||
<p>Models</p>
|
||||
<h3>Explore the available AI models, each pre-configured for immediate use to streamline your projects.</h3>
|
||||
</div>
|
||||
<div >
|
||||
<a href={"/quickstart/models-list"}>Support</a>
|
||||
</div>
|
||||
<div className={styles.cardImage}>
|
||||
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
67
docs/src/components/HomepageSecondaryFeatures/index.js
Normal file
67
docs/src/components/HomepageSecondaryFeatures/index.js
Normal file
@ -0,0 +1,67 @@
|
||||
import styles from "../HomepageSecondaryFeatures/styles.module.css";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function HomepageSecondaryFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className={clsx(styles.cards)}>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div>
|
||||
<div className={styles.cardLogo}>
|
||||
<img alt={"Feature logo"} src={"/img/homepage-new/bg-rocket.png"}/>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<h3>Quickstart</h3>
|
||||
<p>Jump right in with our Quickstart guide, designed to get you going with simple steps and clear instructions for a smooth setup.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardFooter}>
|
||||
<a href={"/quickstart/"}>Learn Here
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||
</svg> */}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div>
|
||||
<div className={styles.cardLogo}>
|
||||
<img alt={"Feature logo"} src={"/img/homepage-new/bg-wrench.png"}/>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<h3>Integrations</h3>
|
||||
<p>Discover how Jan seamlessly integrates with 9 different system, streamlining your application for maximum efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardFooter}>
|
||||
<a href={"/category/integrations/"}>Learn Here
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||
</svg> */}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div>
|
||||
<div className={styles.cardLogo}>
|
||||
<img alt={"Feature logo"} src={"/img/homepage-new/bg-book.png"}/>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<h3>Error Codes</h3>
|
||||
<p>Navigate through common error codes with explanations and solutions to resolve them quickly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardFooter}>
|
||||
<a href={"/category/error-codes/"}>Learn Here
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||
</svg> */}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
68
docs/src/components/HomepageTerinaryFeatures/index.js
Normal file
68
docs/src/components/HomepageTerinaryFeatures/index.js
Normal file
@ -0,0 +1,68 @@
|
||||
import styles from "../HomepageTerinaryFeatures/styles.module.css";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function HomepageTerinaryFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className={clsx(styles.cards)}>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<img alt={"Icon"} src={"/img/homepage-new/roket.png"}/>
|
||||
<h3>Get Started</h3>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Dive into the Jan basics and get set up quickly.</p>
|
||||
<ul>
|
||||
<li>Quickstart</li>
|
||||
<li>Installation</li>
|
||||
<li>Pre-configured Models</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<img alt={"Icon"} src={"/img/homepage-new/buku.png"}/>
|
||||
<h3>Best Practices</h3>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Learn the best practices for optimizing thread management and local server use.</p>
|
||||
<ul>
|
||||
<li>Thread Management</li>
|
||||
<li>Local Server</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<img alt={"Icon"} src={"/img/homepage-new/setting.png"}/>
|
||||
<h3>Features:</h3>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Explore our key features designed to enhance your experience.</p>
|
||||
<ul>
|
||||
<li>Advanced Models Setup</li>
|
||||
<li>Extensions</li>
|
||||
<li>Integrations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<img alt={"Icon"} src={"/img/homepage-new/doa.png"}/>
|
||||
<h3>Troubleshooting</h3>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Find solutions to common issues, including error codes, frequent errors, and FAQs.</p>
|
||||
<ul>
|
||||
<li>Error Codes</li>
|
||||
<li>Common Errors</li>
|
||||
<li>FAQ</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
52
docs/src/pages/trial.js
Normal file
52
docs/src/pages/trial.js
Normal file
@ -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 (
|
||||
<header className={clsx(styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<Heading as="h1" className={clsx(styles.heroTitle)}>
|
||||
Hello, how can we help?
|
||||
</Heading>
|
||||
<div className={styles.searchBar}>
|
||||
<DocSearch />
|
||||
</div>
|
||||
{/* <div className={styles.searchBar}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill={"currentColor"}>
|
||||
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
||||
<input placeholder={"Search for questions or topics ..."}/>
|
||||
<button>Search</button>
|
||||
</div> */}
|
||||
<p className={clsx(styles.heroSubtitle)}>
|
||||
Open-source ChatGPT alternative that runs 100% offline on your computer.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={`Home | ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />"
|
||||
>
|
||||
<div className={clsx(styles.homeBg)}>
|
||||
<HomepageHeader />
|
||||
<main style={{backgroundColor: "whitesmoke"}}>
|
||||
<HomepagePrimaryFeatures />
|
||||
<HomepageSecondaryFeatures />
|
||||
<HomepageTerinaryFeatures />
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
96
docs/src/pages/trial.module.css
Normal file
96
docs/src/pages/trial.module.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user