Fix: Redesign Questions card, Prev/Next cards

src/components/KeployCloud.js

@@ -1,30 +1,33 @@
 import React from "react";
+import Link from "@docusaurus/Link";
 
 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="flex flex-col items-center justify-between rounded-lg border border-gray-200 bg-gray-50/50 p-3 dark:border-gray-800 dark:bg-gray-800/20 md:flex-row"
     >
-      <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>
+      <div className="mb-3 flex items-center gap-2 md:mb-0">
+        <span className="text-sm font-semibold text-gray-800 dark:text-gray-200">
+          Have questions?
+        </span>
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          We're here to help!
+        </span>
+      </div>
+      <div className="flex flex-wrap justify-center gap-3">
+        <Link
+          href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
+          className="whitespace-nowrap rounded-md bg-white px-3 py-1.5 text-xs font-bold text-orange-600 shadow-sm ring-1 ring-gray-200 transition-all hover:bg-orange-50 hover:text-orange-700 hover:shadow hover:no-underline dark:bg-gray-800 dark:text-orange-400 dark:ring-gray-700 dark:hover:bg-gray-700"
+        >
+          Join Slack to chat
+        </Link>
+        <Link
+          href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
+          className="whitespace-nowrap rounded-md bg-white px-3 py-1.5 text-xs font-bold text-gray-700 shadow-sm ring-1 ring-gray-200 transition-all hover:bg-gray-50 hover:text-gray-900 hover:shadow hover:no-underline dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700"
+        >
+          Book a Demo
+        </Link>
       </div>
     </section>
   );

src/components/WhatIsKeploy.js

@@ -44,7 +44,7 @@ const cards = [
     id: "comparison",
     title: "Keploy vs traditional testing tools",
     description: "Where record–replay and AI-generated flows fit vs Postman, contract testing, and mocking libraries.",
-    link: "/docs/keploy-explained/why-keploy/",
+    link: "/keploy-explained/why-keploy/",
     tone: "secondary",
     icon: (
       <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">

src/theme/DocItem/index.js

@@ -245,10 +245,11 @@ export default function DocItem(props) {
                 </article>
               </div>
             </article>
-            <div>
+            <div className="mt-8">
               <KeployCloud />
             </div>
             <DocPaginator previous={metadata.previous} next={metadata.next} />
+            <hr className="my-8 border-t border-gray-200 dark:border-gray-800" />
           </div>
         </div>
 

src/theme/DocPaginator/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import Translate, {translate} from '@docusaurus/Translate';
+
+function PaginatorNavLink({permalink, title, subLabel, isNext}) {
+  return (
+    <Link
+      className={`
+        flex flex-1 flex-col rounded-lg border border-gray-200 p-3 transition-all hover:border-orange-300 hover:bg-orange-50 hover:no-underline dark:border-gray-700 dark:hover:border-orange-500/50 dark:hover:bg-orange-900/20
+        ${isNext ? 'items-end text-right' : 'items-start text-left'}
+      `}
+      to={permalink}
+    >
+      {subLabel && (
+        <div className="mb-0.5 text-xs font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+          {subLabel}
+        </div>
+      )}
+      <div className="text-sm font-semibold text-orange-600 dark:text-orange-500">
+        {title}
+      </div>
+    </Link>
+  );
+}
+
+export default function DocPaginator(props) {
+  const {previous, next} = props;
+  if (!previous && !next) {
+    return null;
+  }
+  return (
+    <nav
+      className="mt-6 flex flex-col gap-3 sm:flex-row"
+      aria-label={translate({
+        id: 'theme.docs.paginator.navAriaLabel',
+        message: 'Docs pages navigation',
+        description: 'The ARIA label for the docs pagination',
+      })}>
+      {previous && (
+        <PaginatorNavLink
+          {...previous}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.previous"
+              description="The label used for the previous link in the docs pagination">
+              Previous
+            </Translate>
+          }
+        />
+      )}
+      {/* Spacer if only one item exists to push next to right - actually flex handles this if we use just flex-1 */}
+      {!previous && next && <div className="flex-1" />}
+
+      {next && (
+        <PaginatorNavLink
+          {...next}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.next"
+              description="The label used for the next link in the docs pagination">
+              Next
+            </Translate>
+          }
+          isNext
+        />
+      )}
+    </nav>
+  );
+}