feat: revamp home page and quickstart guide (#677)

Signed-off-by: Achanandhi-M <[email protected]>

Author: Achanandhi-M

docusaurus.config.js

@@ -340,7 +340,7 @@ module.exports = {
       async: true,
       defer: true,
     },
-   /*{
+    /*{
       src: "/docs/scripts/chat.js",
       async: true,
       defer: true,

package.json

@@ -28,6 +28,7 @@
     "ajv-keywords": "^3.5.2",
     "clsx": "^2.0.0",
     "lint": "^0.8.19",
+    "lucide-react": "^0.544.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Community.js

@@ -64,31 +64,35 @@ export const Community = () => {
           </a>
         </li>
         <li>
-          <a href="https://lu.ma/keploy" className="flex items-start space-x-4">
+          <a
+            href="https://testgpt.substack.com/"
+            className="flex items-start space-x-4"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <svg
-              width="512"
-              height="512"
-              viewBox="0 0 512 512"
-              className="h-12 w-12 flex-none rounded-lg text-black"
-              fill="none"
               xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              className="h-12 w-12 flex-none"
             >
+              <rect width="512" height="512" fill="white" />
+              <rect x="96" y="128" width="320" height="42.7" fill="#FF6719" />
+              <rect x="96" y="213.3" width="320" height="42.7" fill="#FF6719" />
               <path
-                d="M384 0H128C57.3076 0 0 57.3076 0 128V384C0 454.692 57.3076 512 128 512H384C454.692 512 512 454.692 512 384V128C512 57.3076 454.692 0 384 0Z"
-                fill="#2D8CFF"
-              />
-              <path
-                d="M402.164 342.205C408.958 343.904 414.904 340.507 418.301 335.411C420 332.863 420 328.616 420 319.274V191.027C420 181.685 420 178.288 418.301 174.89C415.753 168.096 408.958 165.548 402.164 168.096C384.327 179.986 345.257 214.808 344.408 229.247C343.728 231.795 343.728 236.041 343.728 241.986V274.26C343.728 281.055 343.728 283.603 344.408 287C345.257 293.795 347.805 299.74 351.203 303.137C361.395 310.781 395.369 341.356 403.013 341.356L402.164 342.205ZM93 197.822C93 185.082 93 178.288 95.5481 174.89C97.2468 171.493 102.343 168.096 104.891 165.548C108.288 163 114.234 163 127.823 163H237.39C269.665 163 285.803 163 298.543 169.795C307.886 176.589 318.078 182.534 324.023 195.274C330.818 208.014 330.818 224.151 330.818 256.425V314.178C330.818 326.918 330.818 333.712 328.27 337.11C326.571 340.507 321.475 343.904 318.927 346.452C315.53 349 309.584 349 295.995 349H186.429C154.153 349 138.016 349 125.275 342.205C115.932 335.411 105.74 329.466 99.7948 316.726C93 303.986 93 287.849 93 255.575V197.822Z"
-                fill="white"
+                d="M96 298.6h320V448L256 362.7 96 448V298.6Z"
+                fill="#FF6719"
               />
             </svg>
 
             <div className="flex-auto">
-              <h3 className="font-bold">Meetup</h3>
-              <p>Join our monthly meetup and ask questions!</p>
+              <h3 className="font-bold">Substack</h3>
+              <p className="text-sm text-gray-700">
+                Ideas worth reading — delivered directly to you.
+              </p>
             </div>
           </a>
         </li>
+
         <li>
           <a
             href="https://github.com/keploy"
@@ -270,20 +274,21 @@ export const Community = () => {
         </li>
       </ul>
       <p className="mt-8">
-        We are happy to help you with your 🎤 talks, 📝 blogposts (whether on
-        our blog or yours) or anything else you want to try. Just {/*<a*/}
+        Want to present your case study on Keploy? Just get in touch for any
+        resources you may need. Use the following link to
+        {/*<a*/}
         {/*  className="text-blue-400 hover:underline"*/}
         {/*  href="https://keploy.io/careers"*/}
         {/*>*/}
         {/*  job listings,*/}
         {/*</a>*/}
         <a
           className="text-blue-400 hover:underline"
-          href="mailto:[email protected]"
+          href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ2l-psdTCNCLYAJ-Jt5ESyGP7gi1_U70ySTjtFNr0Kmx5UagNJnyzg7lNjA3NKnaP6qFfpAgcdZ"
         >
-          get in touch
+          {" "}
+          book a slot
         </a>
-        !
       </p>
       {/*TODO : Early adopters and contributors*/}
     </section>

src/components/QuickStart.js

@@ -1,7 +1,9 @@
 import React from "react";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-
+import {FaBook} from "react-icons/fa";
+import {FaRobot} from "react-icons/fa";
+import {FaWindows, FaLinux, FaApple} from "react-icons/fa";
 export const QuickStart = () => {
   return (
     <section className="mt-1">
@@ -54,48 +56,47 @@ export const QuickStart = () => {
       {/*  </a>*/}
       {/*</p>*/}
 
-      <h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
-        Installation Guide 📗
-      </h2>
-      <p className="text-l mb-8 mt-4 max-w-4xl">
-        Let's get Keploy up and running on your Windows, Linux, or macOS
-        machine, so you can start crafting test cases in minutes. ⏱️
-      </p>
+      <div className="mt-8">
+        <h2 className="mb-4 text-2xl font-semibold tracking-wide md:text-3xl">
+          Get Started 🚀
+        </h2>
+        <p className="text-l mb-8 max-w-4xl">
+          Get started with installation, quickstart, or dive into AI-powered API
+          testing.
+        </p>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
+          {/* Installation Card */}
+          <Link
+            className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
+            to={useBaseUrl("/server/installation")}
+          >
+            <div class="flex gap-3">
+              <FaWindows className="h-12 w-12 text-orange-500" />
+              <FaLinux className="h-12 w-12 text-orange-500" />
+              <FaApple className="h-12 w-12 text-orange-500" />
+            </div>
+            <p className="pt-4 text-lg font-semibold">Installation</p>
+          </Link>
+
+          {/* Quickstart Card */}
+          <Link
+            className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
+            to={useBaseUrl("/docs/quickstart/quickstart-filter/")}
+          >
+            <FaBook className="h-12 w-12 text-orange-500" />
+            <p className="pt-4 text-lg font-semibold">Quickstart Guide</p>
+          </Link>
 
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
-        <Link
-          className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
-          to={useBaseUrl("/installation/windows-installation/")}
-        >
-          <img
-            className="h-16 w-16"
-            src="/docs/img/os/windows-logo.svg"
-            alt="Windows logo"
-          />
-          <p className="text-lg font-semibold">Windows</p>
-        </Link>
-        <Link
-          className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
-          to={useBaseUrl("/installation/linux-installation/")}
-        >
-          <img
-            className="h-16 w-16"
-            src="/docs/img/os/linux-logo.svg"
-            alt="Linux logo"
-          />
-          <p className="text-lg font-semibold">Linux</p>
-        </Link>
-        <Link
-          className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
-          to={useBaseUrl("/installation/macos-installation/")}
-        >
-          <img
-            className="h-16 w-16"
-            src="/docs/img/os/apple-logo.svg"
-            alt="Mac logo"
-          />
-          <p className="text-lg font-semibold">MacOS</p>
-        </Link>
+          {/* AI-powered API Testing Card */}
+          <Link
+            className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
+            to={useBaseUrl("/docs/running-keploy/generate-api-tests-using-ai/")}
+          >
+            <FaRobot className="h-12 w-12 text-orange-500" />
+            <p className="pt-4 text-lg font-semibold">AI-powered API Testing</p>
+          </Link>
+        </div>
       </div>
     </section>
   );

src/components/QuickStartGuide.js

@@ -0,0 +1,102 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+export const QuickStart = () => {
+  return (
+    <section className="mt-1">
+      <h1 className="mb-4 text-4xl font-semibold tracking-wide md:text-4xl">
+        Welcome to Keploy Documentation! 🚀
+      </h1>
+      <p className="text-l max-w-3xl">
+        This documentation will help you get the most out of Keploy—whether
+        you’re building your first project or leveling up your testing workflow.
+      </p>
+
+      <h2 className="mb-4 mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
+        What is Keploy? 🤔
+      </h2>
+      <p className="text-l max-w-4xl">
+        Keploy is your open-source, developer-centric backend testing tool. It
+        makes backend testing easy and productive for engineering teams. Plus,
+        it's easy-to-use, powerful and extensible..🛠️ Keploy also has AI-powered
+        tools that help you generate unit and api tests quickly, helping
+        developers focus on writing code rather than writing tests.
+      </p>
+
+      <p className="text-l mt-4 max-w-4xl">
+        Keploy creates test cases and data mocks/stubs from user-traffic by
+        recording API calls and DB queries, significantly speeding up releases
+        and enhancing reliability. 📈
+      </p>
+
+      {/*<h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">*/}
+      {/*  Contribute through Hacktoberfest ✅*/}
+      {/*</h2>*/}
+      {/*<p className="text-l mb-8 mt-4 max-w-4xl">*/}
+      {/*  DigitalOcean's Hacktoberfest is a month-long celebration of open-source*/}
+      {/*  contributions. Everyone is welcome to participate, regardless of their*/}
+      {/*  experience level. Simply make a pull request to an open-source project*/}
+      {/*  to get started.*/}
+      {/*  <br /> <br />*/}
+      {/*  You can contribute to{" "}*/}
+      {/*  <a href="https://github.com/orgs/keploy/repositories">*/}
+      {/*    several Keploy projects*/}
+      {/*  </a>{" "}*/}
+      {/*  participating this year, If you’ve ever wanted to contribute to open*/}
+      {/*  source , now is your chance!*/}
+      {/*  <br /> <br />*/}
+      {/*  Anyone around the globe who desires to help drive the growth of open*/}
+      {/*  source and make positive contributions to an ever-growing community. All*/}
+      {/*  backgrounds and skill levels are encouraged to participate.{" "}*/}
+      {/*  <a href="https://opensource.guide/how-to-contribute">*/}
+      {/*    Learn How to Contribute?*/}
+      {/*  </a>*/}
+      {/*</p>*/}
+
+      <h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
+        Installation Guide 📗
+      </h2>
+      <p className="text-l mb-8 mt-4 max-w-4xl">
+        Let's get Keploy up and running on your Windows, Linux, or macOS
+        machine, so you can start crafting test cases in minutes. ⏱️
+      </p>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
+        <Link
+          className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
+          to={useBaseUrl("/installation/installation")}
+        >
+          <img
+            className="h-16 w-16"
+            src="/docs/img/os/windows-logo.svg"
+            alt=""
+          />
+          <p className="text-lg font-semibold">Windows</p>
+        </Link>
+        <Link
+          className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
+          to={useBaseUrl("/")}
+        >
+          <img
+            className="h-16 w-16"
+            src="/docs/img/os/linux-logo.svg"
+            alt="Linux logo"
+          />
+          <p className="text-lg font-semibold">Linux</p>
+        </Link>
+        <Link
+          className="scale flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg"
+          to={useBaseUrl("/installation/macos-installation/")}
+        >
+          <img
+            className="h-16 w-16"
+            src="/docs/img/os/apple-logo.svg"
+            alt="Mac logo"
+          />
+          <p className="text-lg font-semibold">MacOS</p>
+        </Link>
+      </div>
+    </section>
+  );
+};

src/components/StartKeploy.js

@@ -0,0 +1,97 @@
+import React from "react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+import Link from "@docusaurus/Link";
+
+export default function StartKeploy() {
+  return (
+    <div
+      style={{
+        border: "1px solid var(--ifm-color-emphasis-200)",
+        borderRadius: "12px",
+        padding: "0.8rem",
+        background: "var(--ifm-background-color)",
+        boxShadow: "0 2px 6px rgba(0,0,0,0.08)",
+      }}
+    >
+      <h3>🎬 Start Capturing Test Cases</h3>
+
+      <Tabs>
+        <TabItem value="go" label="Go">
+          <br />
+          <p>
+            <strong>Record the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy record -c "go run main.go"`}
+          </CodeBlock>
+          <p>
+            <strong>Run the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy test -c "go run main.go" --delay 10`}
+          </CodeBlock>
+        </TabItem>
+
+        <TabItem value="node" label="Node.js">
+          <br />
+          <p>
+            <strong>Record the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy record -c "npm start"`}
+          </CodeBlock>
+          <p>
+            <strong>Run the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy test -c "npm start" --delay 10`}
+          </CodeBlock>
+        </TabItem>
+
+        <TabItem value="java" label="Java">
+          <br />
+          <p>
+            <strong>Record the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy record -c "mvn spring-boot:run"`}
+          </CodeBlock>
+          <p>
+            <strong>Run the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy test -c "mvn spring-boot:run" --delay 10`}
+          </CodeBlock>
+        </TabItem>
+
+        <TabItem value="python" label="Python">
+          <br />
+          <p>
+            <strong>Record the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy record -c "python app.py"`}
+          </CodeBlock>
+          <p>
+            <strong>Run the test cases</strong>
+          </p>
+          <CodeBlock language="bash">
+            {`keploy test -c "python app.py" --delay 10`}
+          </CodeBlock>
+        </TabItem>
+      </Tabs>
+
+      <h3>📖 What’s Next?</h3>
+
+      <p>
+        Now, take it further by following the{" "}
+        <Link to="/docs/quickstart/quickstart-filter/">
+          <strong>Quickstart Guide</strong>
+        </Link>{" "}
+        and see Keploy in action with your app.
+      </p>
+    </div>
+  );
+}