Ui Changes

package.json

@@ -28,11 +28,13 @@
     "pushfeedback-react": "^0.1.40",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-icons": "^5.4.0",
     "sass": "^1.77.8"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.1",
-    "@docusaurus/types": "3.0.1"
+    "@docusaurus/types": "3.0.1",
+    "tailwindcss": "3"
   },
   "browserslist": {
     "production": [

src/css/custom.css

@@ -1,8 +1,6 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 /* You can override the default Infima variables here. */
 :root {

src/pages/index.js

@@ -4,7 +4,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import Link from "@docusaurus/Link";
 import LinkButton from "../components/LinkButton";
-
+import { BsRobot } from "react-icons/bs";
 function HeroSection() {
   const { siteConfig } = useDocusaurusContext();
 
@@ -16,10 +16,15 @@ function HeroSection() {
           Decentralized, Verifiable Oracles
         </h2>
         <p className={styles.heroDescription}>
-         Integrate Chronicle's Decentralized, Verifiable Oracles into your dApp.
+          Integrate Chronicle's Decentralized, Verifiable Oracles into your
+          dApp.
         </p>
         <div className={styles.getStartedButton}>
-          <LinkButton text="Start Now" link="./Developers/tutorials/Remix" small={true} />
+          <LinkButton
+            text="Start Now"
+            link="./Developers/tutorials/Remix"
+            small={true}
+          />
         </div>
       </div>
     </header>
@@ -37,28 +42,28 @@ function FeatureItem({ title, description, href, icon }) {
 }
 
 function FeaturesSection() {
-    const features = [
-        {
-          title: "LEARN",
-          description:
-            "Explore Chronicle's decentralized, verifiable oracles, what sets them apart from other oracle solutions, and dive into their architecture.",
-          icon: "📚",
-          href: "./understandingChronicle",
-        },
-        {
-          title: "DEVELOPERS",
-          description:
-            "Discover how to integrate Chronicle's Oracles and power your dApp with data.",
-          icon: "🧩",
-          href: "./Developers/start",
-        },
-        {
-          title: "PRODUCTS",
-          description:
-            "Explore Chronicle: DeFi Oracles, Verified Asset Oracles, and beyond.",
-          icon: "🛠️",
-          href: "./Products/productsOverview",
-        },
+  const features = [
+    {
+      title: "LEARN",
+      description:
+        "Explore Chronicle's decentralized, verifiable oracles, what sets them apart from other oracle solutions, and dive into their architecture.",
+      icon: "📚",
+      href: "./understandingChronicle",
+    },
+    {
+      title: "DEVELOPERS",
+      description:
+        "Discover how to integrate Chronicle's Oracles and power your dApp with data.",
+      icon: "🧩",
+      href: "./Developers/start",
+    },
+    {
+      title: "PRODUCTS",
+      description:
+        "Explore Chronicle: DeFi Oracles, Verified Asset Oracles, and beyond.",
+      icon: "🛠️",
+      href: "./Products/productsOverview",
+    },
   ];
 
   return (
@@ -76,12 +81,19 @@ export default function Home() {
       title="Home"
       description="Chronicle Docs"
       noFooter={true}
-      wrapperClassName="homepage"
+      wrapperclassName="homepage"
     >
       <main className={styles.main}>
         <HeroSection />
         <FeaturesSection />
+        <div>
+          <div className={styles.stickyButton} id="sticky-button">
+            <label htmlFor="offchat-menu">
+              <BsRobot size={25} color="black" />
+            </label>
+          </div>
+        </div>
       </main>
     </Layout>
   );
-}
+}

src/pages/index.module.css

@@ -33,7 +33,7 @@
 
 .heroTitle {
   font-size: 3rem;
-  color: #2FD05B;
+  color: #2fd05b;
   margin-bottom: 0.5rem;
 }
 
@@ -80,7 +80,6 @@
   .heroBanner {
     gap: 0rem;
   }
-
 }
 
 .features {
@@ -106,12 +105,13 @@
   color: var(--ifm-font-color-base) !important;
   transition: all 0.3s ease;
   border: 2px solid transparent;
+
 }
 
 .featureItem:hover {
   transform: translateY(-5px);
-  box-shadow: 0 4px 20px #2FD05B;
-  border-color: #2FD05B;
+  box-shadow: 0 4px 20px #2fd05b;
+  border-color: #2fd05b;
 }
 
 .featureIcon {
@@ -201,7 +201,7 @@
     padding: 1.5rem;
   }
 
-  .heroImageContainer{
+  .heroImageContainer {
     margin: 0px;
   }
 
@@ -212,8 +212,39 @@
   .heroContent {
     margin-bottom: 0.5rem;
   }
-  
+
   .getStartedButton {
     display: none;
   }
-}
+}
+
+.stickyButton {
+  position: fixed;
+  background-color: white;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  bottom: 20px;
+  right: 20px;
+  width: 45px;
+  height: 45px;
+  border-radius: 50px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  z-index: 20;
+  overflow: hidden;
+}
+.stickyButton a,
+.stickyButton label {
+  display: flex;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+
+.chatMenuHidden{display:none}
+
+

tailwind.config.js

@@ -0,0 +1,8 @@
+ /** @type {import('tailwindcss').Config} */
+ export default {
+    content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }