Changed grid layout to fit the cards without horizontal scroll. Fixed…

… the responsive design
keyshade-xyz · Sep 18, 2024 · eb4996b · eb4996b
1 parent ed38d22
commit eb4996b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 (