Skip to content

Re-desgin Question & Pre/Next #776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DARSHAN-R-DARSHAN wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Re-desgin Question & Pre/Next #776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f19440
Re-desgin Question & Pre/Next
DARSHAN-R-DARSHAN Jan 31, 2026
4526ffb
Merge branch 'main' into design/Question
DARSHAN-R-DARSHAN Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 34 additions & 25 deletions src/components/KeployCloud.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,40 @@
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"
>
<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>
</section>
<div className="max-w-5xl mx-auto">
{/* Questions Card */}
<div className="questions-card">
<h2 className="questions-title">
Questions <span className="text-orange-500">?</span>
</h2>

<div className="questions-row">
<p className="questions-text">
Stuck with a question? Our Slack community is here to help.
</p>

<a href="https://slack.com">
<button className="questions-btn">
Join Slack
</button>
</a>
</div>

<div className="questions-row">
<p className="questions-text">
Exploring enterprise use cases? Book a demo with us.
</p>

<a href="https://calendar.app.google/cXVaj6hbMUjvmrnt9">
<button className="questions-btn">
Book Demo
</button>
</a>
</div>
</div>
</div>

);
};
2 changes: 1 addition & 1 deletion src/components/WhatIsKeploy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
42 changes: 42 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2598,4 +2598,46 @@ html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-ite
}
}

/* Card */
.questions-card {
@apply w-full rounded-2xl p-10 mt-8
bg-gray-50 dark:bg-[rgb(19,19,19)]
shadow-lg transition-colors;
}

/* Title */
.questions-title {
@apply text-3xl font-bold text-center mb-10
text-black dark:text-white;
}

/* Rows */
.questions-row {
@apply flex flex-col
gap-4
lg:flex-row
lg:items-center
lg:justify-between
mb-6;
}

.questions-row a {
@apply self-center lg:self-auto;
}

/* Text */
.questions-text {
@apply text-lg font-medium
text-gray-900 dark:text-gray-200;
}

/* Buttons */
.questions-btn {
@apply bg-orange-500 hover:bg-orange-600
text-white font-semibold
py-2 px-6 rounded-full
shadow-md transition
cursor-pointer
active:scale-95
lg:hover:scale-105;
}
69 changes: 69 additions & 0 deletions src/theme/DocPaginator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-orange-200 p-3 transition-all hover:border-orange-500 hover:bg-gray-50 hover:no-underline dark:border-orange-200 dark:hover:border-orange-500 dark:hover:bg-neutral-900
${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-orange-500 dark:text-orange-500">
{subLabel}
</div>
)}
<div className="text-sm font-semibold text-neutral-900 dark:text-white">
{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',
})}>
{previous && (
<PaginatorNavLink
{...previous}
subLabel={
<Translate
id="theme.docs.paginator.previous"
description="Used for the previous link">
Previous
</Translate>
}
/>
)}
{/* Used for last navigation page*/}
{!previous && next && <div className="flex-1" />}

{next && (
<PaginatorNavLink
{...next}
subLabel={
<Translate
id="theme.docs.paginator.next"
description="Used for the next link">
Next
</Translate>
}
isNext
/>
)}
</nav>
);
}