docs: improve main page, change colors, remove docusaurus logo

usernein · Jan 29, 2024 · 57fdcc9 · 57fdcc9
1 parent 139499b
commit 57fdcc9
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 29 deletions.
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -64,13 +64,9 @@ const config = {
         defaultMode: 'dark',
       },
       // Replace with your project's social card
-      image: 'img/docusaurus-social-card.jpg',
+      // image: 'img/docusaurus-social-card.jpg',
       navbar: {
         title: 'pyromod',
-        logo: {
-          alt: 'My Site Logo',
-          src: 'img/logo.svg',
-        },
         items: [
           {
             type: 'docSidebar',

diff --git a/docs/src/components/ChatSimulator/index.jsx b/docs/src/components/ChatSimulator/index.jsx
@@ -33,7 +33,7 @@ const sendMessage = (message) => {
 
 const Command = ({command}) => {
     return (
-        <div className={"text-blue-700 inline cursor-pointer"} onClick={() => sendMessage(command)}>
+        <div className={"text-blue-500 inline cursor-pointer"} onClick={() => sendMessage(command)}>
             {command}
         </div>
     )
@@ -64,10 +64,10 @@ const ChatMessage = ({message, outgoing}) => {
             <div className="chat chat-start">
                 <div className="chat-image avatar">
                     <div className="w-10 rounded-full">
-                        <div className={"bg-primary h-full w-full font-bold text-primary-content justify-center flex items-center"}>BOT</div>
+                        <div className={"bg-orange-300 h-full w-full font-bold text-black justify-center flex items-center"}>BOT</div>
                     </div>
                 </div>
-                <div className="chat-bubble chat-bubble-primary text-primary-content">{innerBubble}</div>
+                <div className="chat-bubble text-[var(--ifm-font-color-base-inverse)] bg-[var(--ifm-color-primary-lighter)] text-white">{innerBubble}</div>
             </div>
         )
     }

diff --git a/docs/src/components/ChatSimulator/styles.module.css b/docs/src/components/ChatSimulator/styles.module.css
@@ -46,5 +46,5 @@
 }
 
 .chatButton {
-    @apply btn btn-sm btn-primary;
+    @apply btn btn-sm glass;
 }
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -6,26 +6,26 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+--ifm-color-primary: #b87033;
+--ifm-color-primary-dark: #9a5f2a; /* 10% darker than primary */
+--ifm-color-primary-darker: #7c4e21; /* 20% darker than primary */
+--ifm-color-primary-darkest: #5e3d18; /* 30% darker than primary */
+--ifm-color-primary-light: #d08c4f; /* 10% lighter than primary */
+--ifm-color-primary-lighter: #e8a76b; /* 20% lighter than primary */
+--ifm-color-primary-lightest: #ffb987; /* 30% lighter than primary */
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+--ifm-color-primary: #c78448;
+--ifm-color-primary-dark: #ab6f3a; /* 10% darker than primary */
+--ifm-color-primary-darker: #8f5b2c; /* 20% darker than primary */
+--ifm-color-primary-darkest: #73461e; /* 30% darker than primary */
+--ifm-color-primary-light: #e29d64; /* 10% lighter than primary */
+--ifm-color-primary-lighter: #fcb680; /* 20% lighter than primary */
+--ifm-color-primary-lightest: #ffd49c; /* 30% lighter than primary */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -4,7 +4,6 @@ import Layout from '@theme/Layout';
 
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
-import {ChatSimulator} from "../components/ChatSimulator";
 import {PyromodChatSimulator} from "../components/PyromodChatSimulator";
 import {PyromodCodeBox} from "../components/PyromodCodeBox";
 
@@ -33,12 +32,39 @@ export default function Home() {
     }
     return (
         <Layout
-            title={`Hello from ${siteConfig.title}`}
-            description="Description will go into a meta tag in <head />">
+            title={`pyromod documentation`}
+            description="Powerful add-on that monkeypatches extra useful features on Pyrogram.">
             <HomepageHeader/>
-            <main className={"flex flex-col md:flex-row w-full gap-5 justify-center items-center"}>
-                <PyromodChatSimulator />
-                <PyromodCodeBox />
+            <main className={"flex flex-col items-center justify-center"}>
+                <div className={"flex flex-col gap-5 justify-center items-center w-full"}>
+                    <div className={"flex w-full flex-col md:flex-row justify-evenly items-center p-8 gap-5"}>
+                        <section className={styles.advantage}>
+                            Powerful add-on that monkeypatches extra useful features.
+                        </section>
+                        <section className={styles.advantage}>
+                            Get user responses (or button clicks) effortlessly with a single line of code.
+                        </section>
+                        <section className={styles.advantage}>
+                            Create keyboard-based interfaces for your bots with ease and fun.
+                        </section>
+                        <section className={styles.advantage}>
+                            Effortlessly send messages with inline keyboards from your userbots.
+                        </section>
+                    </div>
+                </div>
+                <div className={"flex w-full flex-col-reverse md:flex-row gap-8 justify-center items-center"}>
+                    <PyromodChatSimulator/>
+                    <PyromodCodeBox/>
+                </div>
+                <a
+                    href="/getting-started/intro"
+                    className={"no=underline m-5"}
+                >
+                    <div
+                        className={"no-underline hover:no-underline p-3 font-bold text-[var(--ifm-font-color-base-inverse)] bg-[var(--ifm-color-primary-light)] uppercase rounded-btn md:hover:brightness-90 duration-150 md:active:scale-95 select-none cursor-pointer"}>Get
+                        Started
+                    </div>
+                </a>
             </main>
         </Layout>
     );

diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
@@ -21,3 +21,8 @@
   align-items: center;
   justify-content: center;
 }
+
+.advantage {
+  @apply flex flex-col gap-5 justify-center items-center w-[70vw] md:w-64 text-center bg-base-200 rounded-box p-4 font-medium;
+  @apply md:hover:shadow-xl md:hover:scale-105 duration-150;
+}