Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: sync docs hub fixes from dev to docs branch #2247

Merged
merged 18 commits into from
Mar 5, 2024
Merged

docs: sync docs hub fixes from dev to docs branch #2247

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift click to select a range
5758ac8
docs: Update tailwind config and remove unused css
aindrajaya Mar 5, 2024
50412a6
docs: Update navbar content and styling so it has style similar to Sn…
aindrajaya Mar 5, 2024
afd3cb9
docs: Hub page styling fix darkmode and change into tailwind styling
aindrajaya Mar 5, 2024
16bbd9e
docs: update layout so it can handle navbar function smoothly
aindrajaya Mar 5, 2024
53e0c53
docs: Update hub page component styling to tailwind css
aindrajaya Mar 5, 2024
8007896
Merge branch 'dev' into docs-pena-team
aindrajaya Mar 5, 2024
22d81d5
janhq/jan: Update README.md with nightly build artifact URL
jan-service-account Mar 5, 2024
1c14bd9
docs: enhance dark mode on Docs Hub (#2243)
henryh0x1 Mar 5, 2024
56fcf98
docs: fix bug and rename Changelog nav item
aindrajaya Mar 5, 2024
36eb195
docs: Update hub page content
aindrajaya Mar 5, 2024
5bd20d7
docs: Add new content best practices for guides section
aindrajaya Mar 5, 2024
7a1154a
docs: Update content for guides -> advanced settings
aindrajaya Mar 5, 2024
2cb3dbd
docs: Update content for common-error
aindrajaya Mar 5, 2024
408fa12
docs: correct explanation of https proxy affect
henryh0x1 Mar 5, 2024
b24de38
docs: fix typo and grammar issues
henryh0x1 Mar 5, 2024
d6af0f0
docs: update not-using-gpu
henryh0x1 Mar 5, 2024
b0f4c87
docs: improve current text
henryh0x1 Mar 5, 2024
c91b212
docs: update content for Hub page and Guides section (#2245)
henryh0x1 Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: Update hub page component styling to tailwind css
  • Loading branch information
@aindrajaya
aindrajaya committed Mar 5, 2024
commit 53e0c53a23583d5e83c8ace6030977f921c350be
41 changes: 19 additions & 22 deletions docs/src/components/HomepagePrimaryFeatures/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 1,34 @@
import styles from "../HomepagePrimaryFeatures/styles.module.css";
import clsx from "clsx";

export default function HomepagePrimaryFeatures() {
return (
<section className={styles.features}>
<section className="py-8 md:py-16 lg:py-20 flex items-center">
<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 to install across multiple platform.</h3>
<div className="flex flex-col md:flex-row justify-center md:gap-8">
<div className="w-full md:w-1/2 h-72 md:h-84 flex-1 rounded-lg p-8 relative bg-gradient-to-r from-gray-100 to-blue-400 dark:from-gray-700 dark:to-blue-800 mb-8 md:mb-0">
<div className="mb-10">
<p className="text-lg mb-4">Installation</p>
<h3 className="text-2xl md:text-3xl lg:text-4xl font-semibold">Set up Jan with our guide to install across multiple platforms.</h3>
</div>
<div >
<a href={"/guides/install"}>Get Started</a>
<div>
<a href={"/guides/install"} className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-white font-normal py-2 px-4 rounded-xl">Get Started</a>
</div>
<div className={styles.cardImage}>
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} />
<div className="absolute right-4 bottom-4">
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} className="h-16 md:h-24" />
</div>
</div>
<div className={clsx(styles.card, styles.cardPinkish)}>
<div>
<p>Models</p>
<h3>Explore the available pre-configured AI models. </h3>
<div className="w-full md:w-1/2 h-72 md:h-84 flex-1 rounded-lg p-8 relative bg-gradient-to-r from-gray-100 to-purple-400 dark:from-gray-700 dark:to-purple-800">
<div className="mb-10">
<p className="text-lg mb-4">Models</p>
<h3 className="text-2xl md:text-3xl lg:text-4xl font-semibold">Explore the available pre-configured AI models.</h3>
</div>
<div >
<a href={"/guides/models-list"}>Support</a>
<div>
<a href={"/guides/models-list"} className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-white font-normal py-2 px-4 rounded-xl">Support</a>
</div>
<div className={styles.cardImage}>
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} />
<div className="absolute right-4 bottom-4">
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} className="h-16 md:h-24" />
</div>
</div>
</div>
</div>
</section>
);
}
}
102 changes: 43 additions & 59 deletions docs/src/components/HomepageSecondaryFeatures/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 1,51 @@
import styles from "../HomepageSecondaryFeatures/styles.module.css";
import clsx from "clsx";
import React from "react";

export default function HomepageSecondaryFeatures() {
return (
<section className={styles.features}>
<section className="py-8 md:py-16 bg-gray-100 dark:bg-gray-800 flex items-center">
<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={"/guides/"}>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={"/guides/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={"/guides/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 className="flex flex-col md:flex-row justify-center gap-8">
<FeatureCard
imgSrc="/img/homepage-new/bg-rocket.png"
title="Quickstart"
description="Jump right in with our Quickstart guide, designed to get you going with simple steps and clear instructions for a smooth setup."
href="/guides/"
/>
<FeatureCard
imgSrc="/img/homepage-new/bg-wrench.png"
title="Integrations"
description="Discover how Jan seamlessly integrates with 9 different systems, streamlining your application for maximum efficiency."
href="/guides/integrations/"
/>
<FeatureCard
imgSrc="/img/homepage-new/bg-book.png"
title="Error Codes"
description="Navigate through common error codes with explanations and solutions to resolve them quickly."
href="/guides/error-codes/"
/>
</div>
</div>
</section>
);
}
}

function FeatureCard({ imgSrc, title, description, href }) {
return (
<div className="bg-gray-200 dark:bg-gray-700 w-full rounded-lg relative flex flex-col justify-between mb-8 md:mb-0 md:mr-8 p-2">
<div>
<div className="h-32 w-full">
<img alt={"Feature logo"} src={imgSrc} />
</div>
<div className="mt-12 p-8">
<h3 className="text-lg font-semibold">{title}</h3>
<p>{description}</p>
</div>
</div>
<div className="p-8 mb-2 pt-0">
<a href={href} className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-white font-normal py-2 px-4 rounded-xl">
Learn Here
</a>
</div>
</div>
);
}
105 changes: 51 additions & 54 deletions docs/src/components/HomepageTerinaryFeatures/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,109 1,106 @@
import styles from "../HomepageTerinaryFeatures/styles.module.css";
import clsx from "clsx";

export default function HomepageTerinaryFeatures() {
return (
<section className={styles.features}>
<section className="py-20 flex items-center">
<div className="container">
<div className={clsx(styles.cards)}>
<div className={clsx(styles.card)}>
<div className={styles.cardHeader}>
<div className="flex justify-center flex-wrap gap-8">
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
<div className="flex items-center gap-4">
<img alt={"Icon"} src={"/img/homepage-new/roket.png"} />
<h3>Get Started</h3>
<h3 className="text-gray-700 dark:text-gray-200">Get Started</h3>
</div>
<div className={styles.cardContent}>
<p>Kick off your journey with Jan easily and install your AI locally.</p>
<ul>
<li>
<a href={"/guides/"}>
<div className="mt-5 justify-center">
<p className="text-gray-700 dark:text-gray-200">Kick off your journey with Jan easily and install your AI locally.</p>
<ul className="mt-5">
<li className="font-semibold list-disc mb-4">
<a href={"/guides/"} className=" dark:text-blue-400">
Quickstart
</a>
</li>
<li>
<a href={"/guides/install/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/install/"} className="dark:text-blue-400">
Installation
</a>
</li>
<li>
<a href={"/guides/models-list/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/models-list/"} className="dark:text-blue-400">
Pre-configured Models
</a>
</li>
</ul>
</div>
</div>
<div className={clsx(styles.card)}>
<div className={styles.cardHeader}>
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
<div className="flex items-center gap-4">
<img alt={"Icon"} src={"/img/homepage-new/buku.png"} />
<h3>Settings</h3>
<h5 className="text-gray-700 dark:text-gray-200">Settings</h5>
</div>
<div className={styles.cardContent}>
<p>Learn how to manage the thread history and configure your installed AI.</p>
<ul>
<li>
<a href={"/guides/thread/"}>
<div className="mt-5 justify-center">
<p className="text-gray-700 dark:text-gray-200">Learn how to manage the thread history and configure your installed AI.</p>
<ul className="mt-5">
<li className="font-semibold list-disc mb-4">
<a href={"/guides/thread/"} className="dark:text-blue-400">
Thread Management
</a>
</li>
<li>
<a href={"/guides/start-server/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/start-server/"} className="dark:text-blue-400">
Local Server
</a>
</li>
<li>
<a href={"/guides/advanced-settings/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/advanced-settings/"} className="dark:text-blue-400">
Advanced Settings
</a>
</li>
</ul>
</div>
</div>
<div className={clsx(styles.card)}>
<div className={styles.cardHeader}>
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
<div className="flex items-center gap-4">
<img alt={"Icon"} src={"/img/homepage-new/setting.png"} />
<h3>Features</h3>
<h5 className="text-gray-700 dark:text-gray-200">Features</h5>
</div>
<div className={styles.cardContent}>
<p>Explore our key features designed to enhance your experience.</p>
<ul>
<li>
<a href={"/guides/models-setup/"}>
<div className="mt-5 justify-center">
<p className="text-gray-700 dark:text-gray-200">Explore our key features designed to enhance your experience.</p>
<ul className="mt-5">
<li className="font-semibold list-disc mb-4">
<a href={"/guides/models-setup/"} className="dark:text-blue-400">
Models Setup
</a>
</li>
<li>
<a href={"/guides/extensions/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/extensions/"} className="dark:text-blue-400">
Extensions
</a>
</li>
<li>
<a href={"/guides/integrations/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/integrations/"} className="dark:text-blue-400">
Integrations
</a>
</li>
</ul>
</div>
</div>
<div className={clsx(styles.card)}>
<div className={styles.cardHeader}>
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
<div className="flex items-center gap-4">
<img alt={"Icon"} src={"/img/homepage-new/doa.png"} />
<h3>Troubleshooting</h3>
<h5 className="text-gray-700 dark:text-gray-200">Troubleshooting</h5>
</div>
<div className={styles.cardContent}>
<p>Find solutions to common issues, including error codes, and FAQs.</p>
<ul>
<li>
<a href={"/guides/error-codes/"}>
<div className="mt-5 justify-center">
<p className="text-gray-700 dark:text-gray-200">Find solutions to common issues, including error codes, and FAQs.</p>
<ul className="mt-5">
<li className="font-semibold list-disc mb-4">
<a href={"/guides/error-codes/"} className="dark:text-blue-400">
Error Codes
</a>
</li>
<li>
<a href={"/guides/common-error/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/common-error/"} className="dark:text-blue-400">
Common Errors
</a>
</li>
<li>
<a href={"/guides/faqs/"}>
<li className="font-semibold list-disc mb-4">
<a href={"/guides/faqs/"} className="dark:text-blue-400">
FAQ
</a>
</li>
Expand All @@ -114,4 111,4 @@ export default function HomepageTerinaryFeatures() {
</div>
</section>
);
}
}
Loading