Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Update hub page component styling to tailwind css

Browse Source
This commit is contained in:
Arista Indrajaya 2024-03-05 16:04:01 +07:00
parent 16bbd9e52b
commit 53e0c53a23
3 changed files with 113 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
docs/src/components/HomepagePrimaryFeatures/index.js
View File

@ -1,37 +1,34 @@
import styles from "../HomepagePrimaryFeatures/styles.module.css";
import clsx from "clsx";
export default function HomepagePrimaryFeatures() { export default function HomepagePrimaryFeatures() {
return ( return (
<section className={styles.features}> <section className="py-8 md:py-16 lg:py-20 flex items-center">
<div className="container"> <div className="container">
<div className={clsx(styles.cards)}> <div className="flex flex-col md:flex-row justify-center md:gap-8">
<div className={clsx(styles.card, styles.cardBluish)}> <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> <div>
<p>Installation</p> <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>
<h3>Set up Jan with our guide to install across multiple platform.</h3>
</div> </div>
<div > <div className="absolute right-4 bottom-4">
<a href={"/guides/install"}>Get Started</a> <img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} className="h-16 md:h-24" />
</div>
<div className={styles.cardImage}>
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} />
</div> </div>
</div> </div>
<div className={clsx(styles.card, styles.cardPinkish)}> <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> <div>
<p>Models</p> <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>
<h3>Explore the available pre-configured AI models. </h3>
</div> </div>
<div > <div className="absolute right-4 bottom-4">
<a href={"/guides/models-list"}>Support</a> <img alt={"Card Image"} src={"/img/homepage-new/chat.png"} className="h-16 md:h-24" />
</div>
<div className={styles.cardImage}>
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
); );
} }

102
docs/src/components/HomepageSecondaryFeatures/index.js
View File

@ -1,67 +1,51 @@
import styles from "../HomepageSecondaryFeatures/styles.module.css"; import React from "react";
import clsx from "clsx";
export default function HomepageSecondaryFeatures() { export default function HomepageSecondaryFeatures() {
return ( 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="container">
<div className={clsx(styles.cards)}> <div className="flex flex-col md:flex-row justify-center gap-8">
<div className={clsx(styles.card)}> <FeatureCard
<div> imgSrc="/img/homepage-new/bg-rocket.png"
<div className={styles.cardLogo}> title="Quickstart"
<img alt={"Feature logo"} src={"/img/homepage-new/bg-rocket.png"}/> description="Jump right in with our Quickstart guide, designed to get you going with simple steps and clear instructions for a smooth setup."
</div> href="/guides/"
<div className={styles.cardContent}> />
<h3>Quickstart</h3> <FeatureCard
<p>Jump right in with our Quickstart guide, designed to get you going with simple steps and clear instructions for a smooth setup.</p> imgSrc="/img/homepage-new/bg-wrench.png"
</div> title="Integrations"
</div> description="Discover how Jan seamlessly integrates with 9 different systems, streamlining your application for maximum efficiency."
<div className={styles.cardFooter}> href="/guides/integrations/"
<a href={"/guides/"}>Learn Here />
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}> <FeatureCard
<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"/> imgSrc="/img/homepage-new/bg-book.png"
</svg> */} title="Error Codes"
</a> description="Navigate through common error codes with explanations and solutions to resolve them quickly."
</div> href="/guides/error-codes/"
</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> </div>
</div> </div>
</section> </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
docs/src/components/HomepageTerinaryFeatures/index.js
View File

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