From 53e0c53a23583d5e83c8ace6030977f921c350be Mon Sep 17 00:00:00 2001
From: Arista Indrajaya <arista.indrajaya@gmail.com>
Date: Tue, 5 Mar 2024 16:04:01 +0700
Subject: [PATCH] docs: Update hub page component styling to tailwind css

---
 .../HomepagePrimaryFeatures/index.js          |  41 ++++---
 .../HomepageSecondaryFeatures/index.js        | 102 +++++++----------
 .../HomepageTerinaryFeatures/index.js         | 105 +++++++++---------
 3 files changed, 113 insertions(+), 135 deletions(-)

diff --git a/docs/src/components/HomepagePrimaryFeatures/index.js b/docs/src/components/HomepagePrimaryFeatures/index.js
index b06decfb7..e139ae358 100644
--- a/docs/src/components/HomepagePrimaryFeatures/index.js
+++ b/docs/src/components/HomepagePrimaryFeatures/index.js
@@ -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 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>
             </div>
         </section>
     );
-}
\ No newline at end of file
+}
diff --git a/docs/src/components/HomepageSecondaryFeatures/index.js b/docs/src/components/HomepageSecondaryFeatures/index.js
index 3d58117af..9c8307c3f 100644
--- a/docs/src/components/HomepageSecondaryFeatures/index.js
+++ b/docs/src/components/HomepageSecondaryFeatures/index.js
@@ -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>
     );
-}
\ No newline at end of file
+}
+
+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>
+    );
+}
diff --git a/docs/src/components/HomepageTerinaryFeatures/index.js b/docs/src/components/HomepageTerinaryFeatures/index.js
index e3003cbd9..025bab0ca 100644
--- a/docs/src/components/HomepageTerinaryFeatures/index.js
+++ b/docs/src/components/HomepageTerinaryFeatures/index.js
@@ -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>
@@ -114,4 +111,4 @@ export default function HomepageTerinaryFeatures() {
             </div>
         </section>
     );
-}
\ No newline at end of file
+}