docs: Update hub page component styling to tailwind css
This commit is contained in:
Arista Indrajaya
parent
16bbd9e52b
commit
53e0c53a23
@ -1,33 +1,30 @@
|
||||
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 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>
|
||||
<p>Installation</p>
|
||||
<h3>Set up Jan with our guide to install across multiple platform.</h3>
|
||||
<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 >
|
||||
<a href={"/guides/install"}>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 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>
|
||||
<p>Models</p>
|
||||
<h3>Explore the available pre-configured AI models. </h3>
|
||||
<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 >
|
||||
<a href={"/guides/models-list"}>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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user