Fix the Responsiveness

Author: AnujShrivastava01

src/components/Intro.js

@@ -29,7 +29,7 @@ function Languages() {
         </svg>
         <h2 className="mb-4 text-xl font-semibold">Languages</h2>
       </div>
-      <ul className="grid grid-cols-3 gap-3  md:grid-cols-3 lg:gap-5">
+      <ul className="grid grid-cols-2 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
@@ -135,7 +135,7 @@ 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-2 gap-3 md:grid-cols-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             to={useBaseUrl("/dependencies/mongo")}

src/components/Product.js

@@ -5,7 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 function UTG() {
   return (
     <div className="rounded-lg">
-      <ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
+      <ul className="grid grid-cols-1 gap-3 md:grid-cols-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
@@ -245,7 +245,7 @@ export const Products = () => {
         workflow:
       </p>
 
-      <div className="grid gap-4  sm:grid-cols-3 xl:gap-6">
+      <div className="mt-4">
         <UTG />
       </div>
     </section>

src/components/QuickStart.js

@@ -7,7 +7,7 @@ import {FaWindows, FaLinux, FaApple} from "react-icons/fa";
 export const QuickStart = () => {
   return (
     <section className="mt-1">
-      <h1 className="mb-4 text-4xl font-semibold tracking-wide md:text-4xl">
+      <h1 className="mb-4 text-3xl font-semibold tracking-wide md:text-4xl">
         Welcome to Keploy Documentation! 🚀
       </h1>
       <p className="text-l max-w-3xl">

src/pages/index.js

@@ -77,11 +77,11 @@ export default function Home() {
         )}
       </Head>
       <Layout
-        className="mx-auto my-2 w-full max-w-screen-lg px-8 shadow-none"
+        className="mx-auto my-2 w-full max-w-screen-lg px-4 md:px-8 shadow-none"
         title={`${siteConfig.title}`}
         description={`${siteConfig.tagline}`}
       >
-        <main className="mx-auto max-w-screen-lg p-6 md:p-10">
+        <main className="mx-auto max-w-screen-lg p-4 md:p-10">
           <QuickStart />
           {/* <Hacktoberfest /> */}
           {/*<GitTogether />*/}