From 637e3fc83235a1e480ccd23fb4e84dc89c2295cd Mon Sep 17 00:00:00 2001
From: Arpit Bansal <arpit@codalent.com>
Date: Mon, 28 Oct 2024 10:54:11 +0530
Subject: [PATCH] fix: home grid layout

---
 config/krakend/demo-redesign/src/app/page.tsx | 77 ++++++++++---------
 .../src/components/Architecture/index.tsx     |  2 +-
 .../src/components/Home/UseCases/index.tsx    |  4 +-
 3 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/config/krakend/demo-redesign/src/app/page.tsx b/config/krakend/demo-redesign/src/app/page.tsx
index ee18b1f..737af59 100644
--- a/config/krakend/demo-redesign/src/app/page.tsx
+++ b/config/krakend/demo-redesign/src/app/page.tsx
@@ -43,47 +43,50 @@ const Page: FC<any> = () => {
 
       <main className="section--xl bg-brand-neutral-900 relative">
         <div className="container--boxed">
-          <div className="flex flex-col md:flex-row items-stretch gap-8 justify-between">
-            <div className="md:w-1/3 ">
-              <div className="flex items-center gap-1.5 mb-2.5">
-                <button
-                  className={`px-4 py-2 font-medium rounded-md rounded-l-full ${
-                    currentTab === "use-cases"
-                      ? "bg-white text-brand-neutral-900"
-                      : "bg-brand-neutral-600 text-brand-neutral-300"
-                  }`}
-                  onClick={() => setCurrentTab("use-cases")}
-                >
-                  Use-cases
-                </button>
-                <button
-                  className={`px-4 py-2 font-medium rounded-r-full rounded-l-md ${
-                    currentTab === "integrations"
-                      ? "bg-white text-brand-neutral-900"
-                      : "bg-brand-neutral-600 text-brand-neutral-300"
-                  }`}
-                  onClick={() => setCurrentTab("integrations")}
-                >
-                  Integrations
-                </button>
+          <div className="grid grid-cols-12 w-full gap-8">
+            <div className="col-span-12 md:col-span-5 lg:col-span-4 flex">
+              <div className="max-w-full">
+                <div className="flex items-center gap-1.5 mb-2.5">
+                  <button
+                    className={`px-4 py-2 font-medium rounded-md rounded-l-full ${
+                      currentTab === "use-cases"
+                        ? "bg-white text-brand-neutral-900"
+                        : "bg-brand-neutral-600 text-brand-neutral-300"
+                    }`}
+                    onClick={() => setCurrentTab("use-cases")}
+                  >
+                    Use-cases
+                  </button>
+                  <button
+                    className={`px-4 py-2 font-medium rounded-r-full rounded-l-md ${
+                      currentTab === "integrations"
+                        ? "bg-white text-brand-neutral-900"
+                        : "bg-brand-neutral-600 text-brand-neutral-300"
+                    }`}
+                    onClick={() => setCurrentTab("integrations")}
+                  >
+                    Integrations
+                  </button>
+                </div>
+                {currentTab === "use-cases" && <UseCases />}
+                {currentTab === "integrations" && <Integration />}
               </div>
-              {currentTab === "use-cases" && <UseCases />}
-              {currentTab === "integrations" && <Integration />}
-            </div>
 
-            {/* Line */}
-            <div
-              className="h-auto"
-              style={{
-                width: "1px",
-                backgroundImage:
-                  "linear-gradient(to bottom, #0b0c10 0%, #545d78 25%, #545d78 51%, #545d78 75%, #0b0c10 100%)",
-              }}
-            />
+              {/* Line */}
+              {/* <div
+                className="h-auto ml-8 shrink-0"
+                style={{
+                  width: "1px",
+                  minWidth: 1,
+                  backgroundImage:
+                    "linear-gradient(to bottom, #0b0c10 0%, #545d78 25%, #545d78 51%, #545d78 75%, #0b0c10 100%)",
+                }}
+              /> */}
+            </div>
 
             {/* Diagram */}
-            <div className="flex-1 flex items-start">
-              <div className="sticky top-4 w-full max-h-full h-[95vh] flex items-center justify-center">
+            <div className="col-span-12 md:col-span-7 lg:col-span-8 ">
+              <div className="sticky top-0 h-screen flex items-center justify-center">
                 <Architecture />
               </div>
             </div>
diff --git a/config/krakend/demo-redesign/src/components/Architecture/index.tsx b/config/krakend/demo-redesign/src/components/Architecture/index.tsx
index 13e05a7..01c9dda 100644
--- a/config/krakend/demo-redesign/src/components/Architecture/index.tsx
+++ b/config/krakend/demo-redesign/src/components/Architecture/index.tsx
@@ -3,7 +3,7 @@ const Architecture = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 715 910"
     fill="none"
-    className="h-full w-auto"
+    className=""
   >
     <rect
       width={229}
diff --git a/config/krakend/demo-redesign/src/components/Home/UseCases/index.tsx b/config/krakend/demo-redesign/src/components/Home/UseCases/index.tsx
index f0cf107..4e68bce 100644
--- a/config/krakend/demo-redesign/src/components/Home/UseCases/index.tsx
+++ b/config/krakend/demo-redesign/src/components/Home/UseCases/index.tsx
@@ -52,7 +52,7 @@ const UseCases = () => {
                   return (
                     <Link
                       href={`/use-cases/${useCase.custom_fields.slug}`}
-                      className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md"
+                      className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md break-words"
                       key={`${useCase.custom_fields.slug}-${index}`}
                       style={{ background: "#272B3A" }}
                     >
@@ -73,7 +73,7 @@ const UseCases = () => {
             <Link
               href={`/use-cases/${useCase.custom_fields.slug}`}
               key={`others-${useCase.custom_fields.slug}-${index}`}
-              className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md"
+              className="text-white text-base p-3 rounded-md hover:outline hover:outline-brand-neutral-300 transition-colors shadow-md break-words"
               style={{ background: "#272B3A" }}
             >
               {useCase.title}