Revamp docs structure

docusaurus.config.js

@@ -118,7 +118,7 @@ module.exports = {
         {
           to: "/server/installation",
           activeBasePath: "none",
-          label: "Installation",
+          label: "Getting Started",
         },
         // {
         //   to: "/server/installation/",
@@ -136,12 +136,26 @@ module.exports = {
         //   label: "test SDKs",
         // },
         {
-          to: "/keploy-explained/contribution-guide",
-          label: "Contribution Guide",
+          to: "/keploy-cloud/cloud-installation",
+          label: "Enterprise",
+          activeBasePath: "none",
         },
         {
-          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: "Glossary",
+              href: "/concepts/reference/glossary/",
+            },
+          ],
         },
         {
           type: "docsVersionDropdown",
@@ -154,6 +168,11 @@ module.exports = {
           className: "header-github-link",
           "aria-label": "GitHub repository",
         },
+        {
+          href: "https://app.keploy.io/pricing",
+          position: "right",
+          label: "Pricing",
+        },
         // TODO : Add Blogging Section
         // {
         //   to: "/blog",

src/components/Community.js

@@ -46,8 +46,7 @@ export const Community = () => {
           >
             <svg
               fill="currentColor"
-              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-red-500 "
+              className="h-12 w-12 flex-none text-red-500"
               viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
@@ -120,7 +119,7 @@ export const Community = () => {
           >
             <svg
               fill="currentColor"
-              className="h-12 w-12 flex-none      text-black"
+              className="h-12 w-12 flex-none text-black"
               viewBox="0 0 512 509.64"
             >
               <rect width="509.64" height="512" rx="120" />

src/components/GitTogether.js → 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,86 +27,86 @@ 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"> */}
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
-            className="flex flex-col items-center space-x-3 p-6 hover:underline"
+            className="hover-label-container flex flex-col items-center space-x-3 p-6 hover:underline"
             to={useBaseUrl("/quickstart/samples-gin")}
+            data-tooltip="Golang"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/golang.svg"
-              alt="Go lang logo"
+              alt="Golang logo"
             />
-            <p className="font-semibold">Go</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
-            className="flex flex-col items-center space-x-3 p-6 hover:underline"
+            className="hover-label-container flex flex-col items-center space-x-3 p-6 hover:underline"
             to={useBaseUrl("/quickstart/samples-java")}
+            data-tooltip="Java"
           >
             <img
               className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/java.svg"
               alt="Java logo"
             />
-            <p className="font-semibold">Java</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
-            className="flex flex-col items-center space-x-3 p-6 hover:underline"
+            className="hover-label-container flex flex-col items-center space-x-3 p-6 hover:underline"
             to={useBaseUrl("/quickstart/samples-django")}
+            data-tooltip="Python"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/python.svg"
               alt="Python logo"
             />
-            <p className="font-semibold">Python</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
-            className="flex flex-col items-center space-x-3 p-6 hover:underline"
+            className="hover-label-container flex flex-col items-center space-x-3 p-6 hover:underline"
             to={useBaseUrl("/quickstart/samples-nodejs")}
+            data-tooltip="Javascript"
           >
             <img
               className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/javascript-logo.svg"
               alt="Javascript logo"
             />
-            <p className="font-semibold">Javascript</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
-            className="flex flex-col items-center space-x-3 p-6 hover:underline"
+            className="hover-label-container flex flex-col items-center space-x-3 p-6 hover:underline"
             to={useBaseUrl("/quickstart/samples-rust")}
+            data-tooltip="Rust"
           >
             <img
               className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/rust-logo.svg"
               alt="Javascript logo"
             />
-            <p className="font-semibold">Rust</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
-            className="flex flex-col items-center space-x-3 p-6 hover:underline"
+            className="hover-label-container flex flex-col items-center space-x-3 p-6 hover:underline"
             to={useBaseUrl("/quickstart/samples-csharp")}
+            data-tooltip="CSharp"
           >
             <img
               className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/csharp-logo.svg"
               alt="Javascript logo"
             />
-            <p className="font-semibold">CSharp</p>
           </Link>
         </li>
       </ul>
@@ -116,7 +116,7 @@ function Languages() {
 
 function Frameworks() {
   return (
-    <div className="flex flex-col rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
+    <div className="flex flex-col rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg">
       <div className="flex items-center space-x-4">
         <svg
           className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
@@ -135,77 +135,81 @@ function Frameworks() {
         </svg>
         <h2 className="mb-4 text-xl font-semibold">Dependencies Support</h2>
       </div>
-      <ul className="grid grid-cols-3 gap-3  lg:gap-5">
+      <ul className="grid grid-cols-3 gap-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             to={useBaseUrl("/dependencies/mongo")}
-            className="flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
+            data-tooltip="MongoDB"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/mongodb-logo.svg"
               alt="Docker logo"
             />
-            <p className="font-semibold">MongoDB</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             to={useBaseUrl("/dependencies/http")}
-            className="flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
+            data-tooltip="HTTP"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/http-logo.svg"
               alt="HTTP logo"
             />
-            <p className="font-semibold">HTTP</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             to={useBaseUrl("/dependencies/postgres")}
-            className="flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
+            data-tooltip="PostgreSQL"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/postgres-logo.svg"
               alt="PostgresSQL logo"
             />
-            <p className="font-semibold">PostgresSQL</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             to={useBaseUrl("/dependencies/redis")}
-            className="flex flex-col items-center justify-center space-y-1 p-6 text-center "
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
+            data-tooltip="Redis"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/redis-logo.svg"
               alt="Redis logo"
             />
-            <p className="font-semibold">Redis</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
-          <Link className="flex flex-col items-center justify-center space-y-1 p-6 text-center ">
+          <Link
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center "
+            data-tooltip="MySQL"
+          >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/mysql-logo.svg"
               alt="MySQL logo"
             />
-            <p className="font-semibold">MySQL</p>
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
-          <Link className="flex flex-col items-center justify-center space-y-1 p-6 text-center ">
+          <Link
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center "
+            data-tooltip="DynamoDB"
+          >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/dynamodb-logo.svg"
               alt="DynamoDB logo"
             />
-            <p className="font-semibold">DynamoDB</p>
           </Link>
         </li>
         {/*<li className="mt-5 flex flex-col space-y-3 text-lg">*/}
@@ -227,9 +231,15 @@ 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/Platforms.js

@@ -0,0 +1,57 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+export const Platforms = () => {
+  return (
+    <section className="mb-4 mt-12">
+      <h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
+        Setup Guide 📗
+      </h2>
+      <p className="text-l mb-8 mt-4 max-w-4xl">
+        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">
+        <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/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("/server/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("/server/installation/")}
+        >
+          <img
+            className="h-16 w-16"
+            src="/docs/img/os/apple-logo.svg"
+            alt="MacOs logo"
+          />
+          <p className="text-lg font-semibold">MacOS</p>
+        </Link>
+      </div>
+      <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>
+  );
+};