feat: revamp docs

Signed-off-by: Animesh Pathak <[email protected]>

Author: Sonichigo

docusaurus.config.js

@@ -118,7 +118,7 @@ module.exports = {
         {
           to: "/server/installation",
           activeBasePath: "none",
-          label: "Installation",
+          label: "Start",
         },
         // {
         //   to: "/server/installation/",
@@ -136,12 +136,25 @@ module.exports = {
         //   label: "test SDKs",
         // },
         {
-          to: "/keploy-explained/contribution-guide",
-          label: "Contribution Guide",
+          to: "/keploy-cloud/cloud-installation",
+          label: "Cloud",
         },
         {
-          to: "https://keploy.io/blog",
-          label: "Blog",
+          label: "Resources",
+          items: [
+            {
+              label: 'Blogs',
+              href:'https://keploy.io/blog',
+            },
+            {
+              label: 'Contributing',
+              href: '/keploy-explained/contribution-guide',
+            },
+            {
+              label: 'FAQ',
+              href:'/keploy-explained/faq/',
+            },
+          ]
         },
         {
           type: "docsVersionDropdown",

src/components/GitTogether.js renamed to src/components/DevScribe.js

@@ -4,13 +4,13 @@ export const GitTogether = () => {
   return (
     <section className="mb-14 mt-1">
       <h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
-        Attend GitTogether
+        Attend DevScribe
       </h2>
-      <a href="https://keploy.io/gittogether">
+      <a href="https://keploy.io/devscribe">
         <img
-          className="mt-8 "
-          src="/docs/img/GitTogether.jpg"
-          alt={"GitTogether Image"}
+          className="mt-8"
+          src="/docs/img/Devscribe.png"
+          alt={"DevScribe Image"}
         />
       </a>
       <div className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2">

src/components/Intro.js

@@ -27,7 +27,7 @@ function Languages() {
             fill="currentColor"
           />
         </svg>
-        <h2 className="mb-4 text-xl font-semibold">Languages</h2>
+        <h2 className="mb-4 text-xl font-semibold">QuickStart</h2>
       </div>
       <ul className="grid grid-cols-3 gap-3  md:grid-cols-3 lg:gap-5">
         {/* <ul className="grid grid-cols-2 gap-6 xl:gap-8"> */}
@@ -227,9 +227,13 @@ export const Intro = () => {
   return (
     <section className="mb-4 mt-12">
       <h2 className="mb-4 text-2xl font-semibold tracking-wide md:text-3xl">
-        Supports
+      Getting Started ✨
       </h2>
-      <div className="grid gap-6  sm:grid-cols-2 xl:gap-8">
+      <p className="text-l text-gray-500"> 
+        Get up and running with Keploy in just a few minutes by integrating it with your applications. 
+        Below are the quick-start guides for popular languages and frameworks.
+      </p><br/>
+      <div className="grid gap-6 sm:grid-cols-2 xl:gap-8">
         <Languages />
         <Frameworks />
       </div>

src/components/Product.js

@@ -6,57 +6,28 @@ export const QuickStart = () => {
   return (
     <section className="mt-1">
       <h1 className="mb-4 text-4xl font-semibold tracking-wide md:text-5xl">
-        Welcome to Keploy Documentation! 🚀
+        Keploy Documentation! 🚀
       </h1>
-      <p className="text-l max-w-3xl">
-        This documentation is your roadmap to becoming a Keploy expert, whether
-        you're a seasoned developer or just starting out. 🗺️
+      <p className="text-l max-w-3xxl">
+       Welcome to Keploy’s documentation! Whether you're new to backend testing or an experienced developer, this guide will help you get started with Keploy quickly and effectively.🗺️
       </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..🛠️
-      </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 className="text-l max-w-3xxl">
+        Keploy is an open-source backend testing tool that helps developers quickly create and run tests by capturing 
+        real user traffic. It generates test cases and data mocks to ensure your code is reliable and helps speed up your release cycle..🛠️
+        <br/><br/>
+        With features like API testing, unit test generation, and schema/PRD-based test automation, Keploy helps teams release faster while maintaining high reliability. 
+        It’s easy to use, extensible, and integrates seamlessly into CI/CD pipelines, making backend testing efficient and productive.
       </p>
 
       <h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
-        Installation Guide 📗
+        Setup 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. ⏱️
+        Follow the steps below to install Keploy on your system. ⏱️
       </p>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
@@ -89,15 +60,13 @@ export const QuickStart = () => {
           <img
             className="h-16 w-16"
             src="/docs/img/os/apple-logo.svg"
-            alt="Mac logo"
+            alt="MacOs logo"
           />
           <p className="text-lg font-semibold">MacOS</p>
         </Link>
       </div>
-      <p className=" text-l mt-6 text-gray-500">
-        ⚠️ Please note that Keploy v2 is currently in development, with the best
-        experience on Linux. Docker support is experimental and may have some
-        limitations for certain use cases.
+      <p className="text-l mt-6 text-gray-500">
+      <b>⚠️ Important Note:</b> Keploy v2 is currently in Beta, and the best experience is on Linux. Docker support is experimental, and some limitations may apply.
       </p>
     </section>
   );

src/components/QuickStart.js

@@ -20,7 +20,7 @@ export const SDKs = () => {
             src="/docs/img/os/windows-logo.svg"
             alt="Windows logo"
           />
-          <p className="text-lg">Windows</p>
+          <p className="text-lg">Native</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"
@@ -31,18 +31,7 @@ export const SDKs = () => {
             src="/docs/img/os/linux-logo.svg"
             alt="Linux logo"
           />
-          <p className="text-lg">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("/server/installation")}
-        >
-          <img
-            className="h-16 w-16"
-            src="/docs/img/os/apple-logo.svg"
-            alt="Mac logo"
-          />
-          <p className="text-lg">MacOS</p>
+          <p className="text-lg">Docker</p>
         </Link>
       </div>
     </section>

src/components/SDKs.js

@@ -2,7 +2,8 @@ import React from "react";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import {Community, KeployCloud, Resources, QuickStart} from "../components";
-import {GSoC} from "../components/GSoC";
+import {GitTogether} from "../components/DevScribe";
+import {Products} from "../components/Product";
 import {Intro} from "../components";
 export default function Home() {
   const context = useDocusaurusContext();
@@ -16,12 +17,10 @@ export default function Home() {
       >
         <main className="mx-auto max-w-screen-lg p-6 md:p-10">
           <QuickStart />
-          {/* <Hacktoberfest /> */}
-          {/*<GitTogether />*/}
+          {/* <GitTogether /> */}
           <Intro />
-          <Resources />
+          <Products />
           <Community />
-          {/*<GSoC/>*/}
           <KeployCloud />
         </main>
       </Layout>

src/pages/index.js

@@ -13,6 +13,10 @@ tags:
   - cd
   - plugin
 ---
+<head>
+  <title>Integrating with GitHub CI | Keploy Docs</title>
+  <meta charSet="utf-8" />
+</head>
 
 Keploy can be integrated with GitHub by two methods:-
 

static/img/DevScribe.png

@@ -13,6 +13,10 @@ tags:
   - cd
   - plugin
 ---
+<head>
+  <title>Integrating with GitLab CI | Keploy Docs</title>
+  <meta charSet="utf-8" />
+</head>
 
 Keploy can integrated with GitLab CI to streamline your testing process and ensure continuous testing as part of your CI/CD pipeline.