fix: Redesigned Question card and next/prev card with footer correction…

src/components/KeployCloud.js

@@ -4,11 +4,11 @@ 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="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-2xl bg-[color:var(--ifm-card-background-color)] p-6 shadow-md border border-x-4 border-orange-500"
     >
       <div className="prose prose-orange max-w-3xl text-left">
-        <h1 className="text-left">Questions? 🤔💭</h1>
-        <p className="my-3 block text-left">
+        <h1 className="text-left text-xl">🤔 Questions <span className="text-orange-500"> ?</span></h1>
+        <p className="my-3 block text-left text-sm">
           For any support please{" "}
           <a
             href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"

src/css/custom.css

@@ -427,6 +427,9 @@ html[data-theme="dark"] .navbar {
 }
 
 /* Footer */
+footer {
+  margin-top: 0;
+}
 
 footer svg {
   display: inline;

src/theme/DocPaginator/index.js

@@ -0,0 +1,47 @@
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+
+function PaginatorCard({link, direction}) {
+  if (!link) {
+    return null;
+  }
+
+  const isNext = direction === "next";
+  const label = isNext ? "Next page" : "Previous page";
+
+  return (
+    <Link
+      className={clsx(styles.card, isNext ? styles.next : styles.prev)}
+      to={link.permalink}
+      rel={isNext ? "next" : "prev"}
+    >
+      <div className={styles.meta}>
+        <span className={styles.title}>{link.title}</span>
+        <span className={styles.kicker}>{isNext ? `${label} >` : `< ${label}`}</span>
+      </div>
+    </Link>
+  );
+}
+
+export default function DocPaginator({previous, next}) {
+  if (!previous && !next) {
+    return null;
+  }
+
+  return (
+    <nav className={styles.paginator} aria-label="Doc pagination">
+      {previous ? (
+        <PaginatorCard link={previous} direction="prev" />
+      ) : (
+        <div className={styles.spacer} aria-hidden="true" />
+      )}
+      {next ? (
+        <PaginatorCard link={next} direction="next" />
+      ) : (
+        <div className={styles.spacer} aria-hidden="true" />
+      )}
+    </nav>
+  );
+}

src/theme/DocPaginator/styles.module.css

@@ -0,0 +1,121 @@
+.paginator {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 1.25rem;
+  margin-top: 3rem;
+  width: 100%;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  /* padding: 1rem; */
+  border-radius: 18px;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.7rem 1.2rem;
+  border-radius: 16px;
+  border: 1.25px solid #f9920b;
+  background: #ffffff;
+  transition: transform 160ms ease, border-color 160ms ease;
+  text-decoration: none;
+  color: #111111;
+  min-height: px;
+  flex: 0 0 calc(50% - 0.625rem);
+  max-width: 200px;
+}
+
+.card:hover {
+  transform: translateY(-1px);
+  box-shadow: 2px 2px 5px #9a341239;
+  color: inherit;
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.kicker {
+  font-size: 0.7rem;
+  /* font-weight: 700; */
+  color: inherit;
+  opacity: 0.7;
+}
+
+.title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  line-height: 1.35;
+  color: inherit;
+}
+
+.card:hover .title,
+.card:hover .kicker,
+.card:hover .arrow {
+  color: inherit;
+}
+
+.arrow {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  font-size: 1.25rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.spacer {
+  min-height: 92px;
+  flex: 0 0 calc(50% - 0.625rem);
+}
+
+.prev {
+  border-left: 4px solid #f9920b;
+  justify-content: flex-start;
+}
+
+.next {
+  text-align: right;
+  justify-content: flex-end;
+  border-right: 4px solid #f9920b;
+}
+
+.next .meta {
+  align-items: flex-end;
+  text-align: right;
+}
+
+@media (max-width: 996px) {
+  .paginator {
+    flex-direction: row;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .card,
+  .spacer {
+    flex: 0 0 calc(50% - 0.625rem);
+  }
+}
+
+:global(html[data-theme="dark"]) .kicker {
+  color: #f9920b;
+}
+
+:global(html[data-theme="dark"]) .prev {
+  background: #111111;
+  color: white;
+}
+
+:global(html[data-theme="dark"]) .next {
+  background: #111111;
+  color: #ffffff;
+}