fix : Question section and Prev/Next Cards

src/components/KeployCloud.js

@@ -4,27 +4,25 @@ export const KeployCloud = () => {
   return (
     <section
       id="cloud"
-      className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 shadow-md"
+      className="mt-10 flex max-w-7xl items-center justify-between rounded-md border border-[color:var(--ifm-toc-border-color)] bg-[color:var(--ifm-background-surface-color)] px-4 py-3"
     >
-      <div className="prose prose-orange max-w-3xl text-left">
-        <h1 className="text-left">Questions? 🤔💭</h1>
-        <p className="my-3 block text-left">
-          For any support please{" "}
-          <a
-            href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
-            className="text-orange-500 underline hover:text-orange-400"
-          >
-            join keploy slack community
-          </a>{" "}
-          to get help from fellow users, or{" "}
-          <a
-            href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
-            className="text-orange-500 underline hover:text-orange-400"
-          >
-            book a demo
-          </a>{" "}
-          if you're exploring enterprise use cases.
-        </p>
+      <p className="m-0 text-sm text-[color:var(--ifm-font-color-base)]">
+        Need help or have questions?
+      </p>
+
+      <div className="flex gap-4 text-sm">
+        <a
+          href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
+          className="font-medium text-orange-500 hover:underline"
+        >
+          Join Slack
+        </a>
+        <a
+          href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
+          className="font-medium text-orange-500 hover:underline"
+        >
+          Book a demo
+        </a>
       </div>
     </section>
   );

src/css/custom.css

@@ -2599,3 +2599,37 @@ html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-ite
 }
 
 
+/* === Keploy custom paginator styling === */
+.keploy-doc-paginator {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* Force styles through wrapper */
+.keploy-doc-paginator a {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 4px;
+  padding: 0.6rem 0.75rem;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* Hover state */
+.keploy-doc-paginator a:hover {
+  border-color: var(--ifm-color-emphasis-400);
+  background-color: var(--ifm-hover-overlay);
+  text-decoration: none;
+}
+
+/* Compact text */
+.keploy-doc-paginator .pagination-nav__label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+
+.keploy-doc-paginator .pagination-nav__sublabel {
+  font-size: 0.85rem;
+  font-weight: 500;
+}

src/theme/DocItem/index.js

@@ -245,10 +245,18 @@ export default function DocItem(props) {
                 </article>
               </div>
             </article>
-            <div>
-              <KeployCloud />
-            </div>
-            <DocPaginator previous={metadata.previous} next={metadata.next} />
+            <hr className="my-8 border-[color:var(--ifm-toc-border-color)]" />
+
+<KeployCloud />
+
+<hr className="my-8 border-[color:var(--ifm-toc-border-color)]" />
+
+<div className="keploy-doc-paginator">
+  <DocPaginator previous={metadata.previous} next={metadata.next} />
+</div>
+
+<hr className="my-6 border-[color:var(--ifm-color-emphasis-200)]" />
+
           </div>
         </div>
 

src/theme/DocItem/styles.module.css

@@ -20,3 +20,6 @@
     display: none;
   }
 }
+
+
+