fix(docs-ui): improve responsive layout for prev/next navigation cards (#781)

Signed-off-by: Kamakshi Mudgal <navyash110@gmail.com>

Author: kams05-ops

src/components/KeployCloud.js

@@ -3,28 +3,31 @@ import React from "react";
 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"
+      id="support"
+      className="my-10 w-full border-y border-white/10 py-4"
     >
-      <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="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-3 text-sm text-gray-400">
+        <span className="opacity-70">Need help?</span>
+
+        <a
+          href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-semibold text-orange-500 hover:text-orange-400"
+        >
+          Join Slack
+        </a>
+
+        <span className="opacity-30">|</span>
+
+        <a
+          href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-semibold text-orange-500 hover:text-orange-400"
+        >
+          Book a Demo
+        </a>
       </div>
     </section>
   );

src/css/custom.css

@@ -2094,24 +2094,6 @@ html[data-theme="dark"] .navbar__items--right .dropdown > .navbar__link {
    EDIT THIS PAGE / REQUEST CHANGES LINKS
    ============================================ */
 
-/* Bottom of page links */
-.theme-doc-footer {
-  margin-top: 3rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-html[data-theme="dark"] .theme-doc-footer {
-  border-top-color: rgba(255, 255, 255, 0.06);
-}
-
-.theme-doc-footer-edit-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
 /* Edit this page link */
 .theme-edit-this-page {
   display: inline-flex;
@@ -2599,3 +2581,143 @@ html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-ite
 }
 
 
+/* Support strip (Need help? Slack | Demo) */
+.support-strip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  padding: 10px;
+  background: var(--ifm-color-emphasis-100); /* Slim strip look */
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+#support span {
+  color: #252525;
+  font-weight: 400;
+}
+
+/* Dark mode */
+[data-theme='dark'] #support span {
+  color: #ffffff; /* or a softer light gray like #e0e0e0 */
+}
+
+#support a {
+  font-weight: 600;
+  color: #ff7849;
+  text-decoration: none;
+}
+
+#support a:hover {
+  color: #ffa07a;
+  text-decoration: underline;
+}
+
+/* ===== FINAL Compact Pagination ===== */
+
+.pagination-nav {
+  border-top: 2.5px solid var(--ifm-color-emphasis-200);
+  padding-top: 2rem;
+  margin-top: 2rem;
+}
+
+.pagination-nav__link {
+  padding: 0.5rem 1rem !important; 
+  border-radius: 6px !important;
+  box-shadow: none !important;    
+  border: 1.5px solid var(--ifm-color-emphasis-200) !important;
+  background: transparent !important; 
+  min-height: auto !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.pagination-nav__label {
+  font-weight: 700 !important;
+  color: var(--ifm-color-emphasis-900) !important;
+  font-size: 0.9rem;
+}
+
+.pagination-nav__sublabel {
+  font-weight: 500;
+  color: var(--ifm-color-emphasis-600);
+}
+
+/* Hover */
+.pagination-nav__link:hover {
+  border-color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-emphasis-100);
+  text-decoration: none;
+}
+
+
+
+/* Title */
+.pagination-nav__title {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+  line-height: 1.9;
+}
+
+/* Arrows subtle */
+.pagination-nav__link svg {
+  transform: scale(0.7);
+  opacity: 1.65;
+}
+
+[data-theme='dark'] .pagination-nav__link {
+  border-color: var(--ifm-color-emphasis-100); /* softer than before */
+}
+
+[data-theme='dark'] .pagination-nav__label {
+  color: var(--ifm-color-emphasis-500);
+}
+
+/* ===== Divider Between Pagination and Footer ===== */
+
+/* Add space below pagination */
+.pagination-nav {
+  margin-bottom: 3rem;
+}
+
+/* ===== Remove footer border on landing page only ===== */
+
+/* Default: footer border ON everywhere */
+.theme-layout-footer.footer {
+  border-top: 1px solid var(--ifm-toc-border-color);
+  margin-top: 0;
+  padding-top: 2rem;
+}
+
+/* Remove border ONLY on landing page */
+.plugin-pages.plugin-id-default .theme-layout-footer.footer {
+  border-top: none !important;
+}
+
+
+
+/* ===== MOBILE FIX FOR PREV / NEXT CARDS ===== */
+@media (max-width: 768px) {
+
+  .pagination-nav {
+    display: flex !important;
+    flex-direction: column !important; /* stack vertically */
+    gap: 12px;
+  }
+
+  .pagination-nav__link {
+    width: 100% !important;
+    padding: 14px !important;
+  }
+
+  .pagination-nav__label {
+    font-size: 0.85rem !important;
+  }
+
+  .pagination-nav__title {
+    font-size: 0.9rem !important;
+    line-height: 1.4;
+  }
+}