From a3369adc46917f21c29d5fe0e77bb6d1ee1b22d1 Mon Sep 17 00:00:00 2001
From: Shardendu Mishra <shardendumishrabrave@gmail.com>
Date: Thu, 19 Jun 2025 03:42:24 +0530
Subject: [PATCH] Update QuickStart.js

Signed-off-by: Shardendu Mishra <shardendumishrabrave@gmail.com>
---
 src/components/QuickStart.js | 42 ++++++++----------------------------
 1 file changed, 9 insertions(+), 33 deletions(-)

diff --git a/src/components/QuickStart.js b/src/components/QuickStart.js
index 72543cc63..60bd84dbf 100644
--- a/src/components/QuickStart.js
+++ b/src/components/QuickStart.js
@@ -9,7 +9,7 @@ export const QuickStart = () => {
         Welcome to Keploy Documentation! 🚀
       </h1>
       <p className="text-l max-w-3xl">
-        This documentation will help you get the most out of Keploy—whether
+        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>
 
@@ -19,41 +19,17 @@ export const QuickStart = () => {
       <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
+        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
+        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>
@@ -64,7 +40,7 @@ export const QuickStart = () => {
 
       <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"
+          className="transform hover:scale-105 transition-transform 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
@@ -75,7 +51,7 @@ export const QuickStart = () => {
           <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"
+          className="transform hover:scale-105 transition-transform 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
@@ -86,7 +62,7 @@ export const QuickStart = () => {
           <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"
+          className="transform hover:scale-105 transition-transform 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
@@ -94,10 +70,10 @@ export const QuickStart = () => {
             src="/docs/img/os/apple-logo.svg"
             alt="Mac logo"
           />
-          <p className="text-lg font-semibold">MacOS</p>
+          <p className="text-lg font-semibold">macOS</p>
         </Link>
       </div>
-      <p className=" text-l mt-6 text-gray-500">
+      <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.