From 0e0515a8e4995d723703ba59ad5f395c82491657 Mon Sep 17 00:00:00 2001
From: Samaresh Das <samareshmail679@gmail.com>
Date: Tue, 17 Sep 2024 16:15:55 +0530
Subject: [PATCH] Changed grid layout to fit the cards without horizontal
 scroll. Fixed the responsive design

---
 apps/web/src/components/colabEasy/index.tsx   |  2 +-
 .../src/components/lifeEasySection/index.tsx  | 28 +++++++++++++++++--
 .../src/components/secretSection/index.tsx    |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/colabEasy/index.tsx b/apps/web/src/components/colabEasy/index.tsx
index 9d9e1d37..2aafa323 100644
--- a/apps/web/src/components/colabEasy/index.tsx
+++ b/apps/web/src/components/colabEasy/index.tsx
@@ -22,7 +22,7 @@ function ColabEasy(): React.JSX.Element {
         </span>
       </div>
 
-      <div className="auto-cols-min grid-cols-3 gap-5 space-y-5 md:grid md:space-y-0">
+      <div className="auto-cols-min gap-5 space-y-5 md:grid md:grid-cols-2 md:space-y-0 xl:grid-cols-3">
         <article className="row-span-2">
           <Card>
             <div className="p-6">
diff --git a/apps/web/src/components/lifeEasySection/index.tsx b/apps/web/src/components/lifeEasySection/index.tsx
index d9bc4e26..1debf8e4 100644
--- a/apps/web/src/components/lifeEasySection/index.tsx
+++ b/apps/web/src/components/lifeEasySection/index.tsx
@@ -22,7 +22,7 @@ function LifeEasySection(): React.JSX.Element {
         </span> */}
       </div>
 
-      <div className="grid gap-9 md:grid-cols-3">
+      <div className="grid gap-9 md:grid-cols-2 xl:grid-cols-3">
         <div className="grid gap-9">
           <Card>
             <StandardKitSVG />
@@ -59,7 +59,7 @@ function LifeEasySection(): React.JSX.Element {
             <SeemlessIntegrationSVG />
           </div>
         </Card>
-        <div className="grid gap-9">
+        <div className="grid gap-9 md:hidden xl:grid">
           <Card>
             <div className="p-6">
               <h3 className="text-lg font-medium">Command Line Interface</h3>
@@ -81,6 +81,30 @@ function LifeEasySection(): React.JSX.Element {
             <SnapshotSVG />
           </Card>
         </div>
+        <div className="hidden md:grid xl:hidden">
+          <Card>
+            <div className="p-6">
+              <h3 className="text-lg font-medium">Command Line Interface</h3>
+              <span className="text-base text-[#9394A1]">
+                Manage Your Configurations Directly from Your Terminal across
+                Multiple OS
+              </span>
+            </div>
+            <CommandLineSVG />
+          </Card>
+        </div>
+        <div className="hidden md:grid xl:hidden">
+          <Card>
+            <div className="p-6">
+              <h3 className="text-lg font-medium">Snapshot</h3>
+              <span className="text-base text-[#9394A1]">
+                Capture &quot;Pictures&quot; of Your Entire Workspace for Easy
+                Restoration at Any Time.
+              </span>
+            </div>
+            <SnapshotSVG />
+          </Card>
+        </div>
       </div>
     </section>
   )
diff --git a/apps/web/src/components/secretSection/index.tsx b/apps/web/src/components/secretSection/index.tsx
index b0ffee52..5c2f029d 100644
--- a/apps/web/src/components/secretSection/index.tsx
+++ b/apps/web/src/components/secretSection/index.tsx
@@ -60,7 +60,7 @@ function SecrectSection(): React.JSX.Element {
         {/* <span>Built for your Seamless Secret Integration</span> */}
       </div>
 
-      <div className="grid gap-3 md:grid-cols-3 2xl:gap-9">
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:gap-9">
         {cardData.map((card, index) => {
           const { heading, description, svg } = card
           return (