From d38dab05bdf97a94c1d07623bc46aa3ec996c5e9 Mon Sep 17 00:00:00 2001
From: Chandraprakash <sahuprakash.er@gmail.com>
Date: Fri, 13 Oct 2023 23:57:12 +0530
Subject: [PATCH 1/3] Fixed Break point issue of home, from 551px to 695px
 screen size.

---
 src/components/Sections/HeaderLearnMore.tsx |   2 +-
 src/components/Sections/HomepageHeader.tsx  | 220 ++++++++++++--------
 src/css/custom.css                          |   5 +
 3 files changed, 134 insertions(+), 93 deletions(-)

diff --git a/src/components/Sections/HeaderLearnMore.tsx b/src/components/Sections/HeaderLearnMore.tsx
index 782129044fb..80a0b1b0df2 100644
--- a/src/components/Sections/HeaderLearnMore.tsx
+++ b/src/components/Sections/HeaderLearnMore.tsx
@@ -19,7 +19,7 @@ export function HeaderLearnMore() {
         items-center
         justify-center
         mobile:flex-wrap sm:flex-wrap 
-        mobile:w-[342px] sm:w-[696px]
+        mobile:w-[342px] sm:w-full
         mx-auto
         w-[100%]
     "
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index 9de588dfeca..556ae464efa 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -15,82 +15,86 @@ import ScarfIcon from "@site/static/img/Homepage/brand/Scarf.svg";
 import IBMIcon from "@site/static/img/Homepage/brand/IBM.svg";
 
 export function HomepageHeader() {
-  return (
-    <div>
-      <img
-        src={HeaderBG}
-        alt=""
-        className="
+    return (
+        <div className="w-full">
+            <img
+                src={HeaderBG}
+                alt=""
+                className="
       absolute top-[0px] left-[0px] max-h-[580px] 
       xl:w-screen sm:hidden"
-      />
-      <img
-        src={HeaderBGMB}
-        alt=""
-        className="
+            />
+            <img
+                src={HeaderBGMB}
+                alt=""
+                className="
       absolute top-[0px] left-[0px] w-screen z-0
       sm:h-[496px] mobile:h-[526px]
       hidden sm:block"
-      />
-      <header
-        className="
+            />
+            <header
+                className="
         flex justify-center
         items-center
-        w-[840px] mobile:w-[90%]  sm:w-[600px]  2xl:w-[1000px]
+        w-[840px] mobile:w-[90%]  sm:w-full  2xl:w-[1000px] custom-padding
         mobile:mt-[32px] sm:mt-[65px] mt-[71px]
         z-10
         mx-auto
         "
-      >
-        <div
-          className="z-10
+            >
+                <div
+                    className="z-10
           flex flex-col 
           flex-wrap
         "
-        >
-          <div
-            className="text-primary
+                >
+                    <div
+                        className="text-primary
             font-bold font-inter
             text-label40 sm:text-heading2 mobile:text-label20
             sm:font-semibold"
-          >
-            Debug engineering processes and discover opportunities with DORA, Community Growth, Engineering Throughput and more DevLake dashboards...
-          </div>
-          <div
-            className="
+                    >
+                        Debug engineering processes and discover opportunities
+                        with DORA, Community Growth, Engineering Throughput and
+                        more DevLake dashboards...
+                    </div>
+                    <div
+                        className="
             mt-5 mobile:mt-3 sm:mt-3
             text-primary-800
             text-label24
             sm:text-label16Lake mobile:text-label16Lake
             font-inter
         "
-          >
-            Apache DevLake&trade; (Incubating) ingests, analyzes, and visualizes the
-            fragmented data from DevOps tools to distill insights for
-            engineering excellence.
-          </div>
-          <div className="
+                    >
+                        Apache DevLake&trade; (Incubating) ingests, analyzes,
+                        and visualizes the fragmented data from DevOps tools to
+                        distill insights for engineering excellence.
+                    </div>
+                    <div
+                        className="
             flex
             mobile:flex-col
             mt-[48px]  sm:mt-3
             items-center
             justify-between
             mb-[129px] 2xl:mb-[148px] sm:mb-[101px] mobile:mb-[44.9px]
-            ">
-          <Link
-            className="primary-button
+            "
+                    >
+                        <Link
+                            className="primary-button
               flex
               whitespace-nowrap
               mobile:mt-3
               rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
               w-[200px] sm:w-[140px] mobile:w-[140px]
               h-[48px] sm:h-[32px] mobile:h-[32px]"
-            to="https://devlake.apache.org/livedemo/EngineeringLeads/DORA"
-          >
-            See it Live
-          </Link>
-          <Link
-            className="primary-button
+                            to="https://devlake.apache.org/livedemo/EngineeringLeads/DORA"
+                        >
+                            See it Live
+                        </Link>
+                        <Link
+                            className="primary-button
             flex
             whitespace-nowrap
             rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
@@ -103,12 +107,12 @@ export function HomepageHeader() {
             mobile:mt-3
             w-[200px] sm:w-[140px] mobile:w-[140px]
             h-[48px] sm:h-[32px] mobile:h-[32px]"
-            to="https://devlake.apache.org/docs/GettingStarted"
-          >
-            Install DevLake
-          </Link>
-          <Link
-            className="primary-button
+                            to="https://devlake.apache.org/docs/GettingStarted"
+                        >
+                            Install DevLake
+                        </Link>
+                        <Link
+                            className="primary-button
             flex
             whitespace-nowrap
             rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
@@ -121,14 +125,15 @@ export function HomepageHeader() {
             mobile:mt-3
             w-[200px] sm:w-[140px] mobile:w-[140px]
             h-[48px] sm:h-[32px] mobile:h-[32px]"
-            to="https://join.slack.com/t/devlake-io/shared_invite/zt-20envwfbk-JUTZ4z9jSeRnrvNhBFLg9w"
-          >
-            Join Slack
-          </Link>
-          </div>
-        </div>
-      </header>
-      <div className="
+                            to="https://join.slack.com/t/devlake-io/shared_invite/zt-20envwfbk-JUTZ4z9jSeRnrvNhBFLg9w"
+                        >
+                            Join Slack
+                        </Link>
+                    </div>
+                </div>
+            </header>
+            <div
+                className="
        flex
        text-heading4
        text-neutral-300
@@ -139,18 +144,21 @@ export function HomepageHeader() {
        h-[20px]
        mb-[40px]
        items-center
-      ">
-        <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
-        <span className="
+      "
+            >
+                <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
+                <span
+                    className="
          flex-1
          w-[81px]
-        ">
-        Trusted by
-        </span>
-        <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%]"></div>
-      </div>
-      <div
-        className=" 
+        "
+                >
+                    Trusted by
+                </span>
+                <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%]"></div>
+            </div>
+            <div
+                className=" 
               pl-[30px] pr-[30px]
               flex 
               justify-between
@@ -160,32 +168,60 @@ export function HomepageHeader() {
               items-center
               m-auto
               max-w-[90%]"
-      >
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://www.redhat.com/en"><RedHatIcon className="mobile:w-[72px]" /></a>
-        </div>
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://stripe.com/gb"><StripeIcon className="mobile:w-[36px]" /></a>
-        </div>
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://orkes.io/"><img className="w-[88px] mobile:w-[48px]" src={OrkesIcon} /></a>
-        </div>
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://clickhouse.com/"><img className="w-[140px] mobile:w-[71px]" src={ClickHouseIcon} /></a>
-        </div>
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://croz.net/"><img className="w-[80px] mobile:w-[36px]" src={CrozIcon} /></a>
-        </div>
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://coder.com/"><img className="w-[120px] mobile:w-[60px]" src={CoderIcon} /></a>
-        </div>
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://about.scarf.sh/"><ScarfIcon className="mobile:w-[48px]" /></a>
-        </div>
-        <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-          <a href="https://www.ibm.com/"><IBMIcon className="mobile:w-[30px]" /></a>
+            >
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://www.redhat.com/en">
+                        <RedHatIcon className="mobile:w-[72px]" />
+                    </a>
+                </div>
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://stripe.com/gb">
+                        <StripeIcon className="mobile:w-[36px]" />
+                    </a>
+                </div>
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://orkes.io/">
+                        <img
+                            className="w-[88px] mobile:w-[48px]"
+                            src={OrkesIcon}
+                        />
+                    </a>
+                </div>
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://clickhouse.com/">
+                        <img
+                            className="w-[140px] mobile:w-[71px]"
+                            src={ClickHouseIcon}
+                        />
+                    </a>
+                </div>
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://croz.net/">
+                        <img
+                            className="w-[80px] mobile:w-[36px]"
+                            src={CrozIcon}
+                        />
+                    </a>
+                </div>
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://coder.com/">
+                        <img
+                            className="w-[120px] mobile:w-[60px]"
+                            src={CoderIcon}
+                        />
+                    </a>
+                </div>
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://about.scarf.sh/">
+                        <ScarfIcon className="mobile:w-[48px]" />
+                    </a>
+                </div>
+                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+                    <a href="https://www.ibm.com/">
+                        <IBMIcon className="mobile:w-[30px]" />
+                    </a>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index ab5dae3c9b1..ecd6a73a39d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -48,6 +48,11 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
     display: none;
   }
 }
+ @media (min-width: 550px) and (max-width: 1024px) {
+   .custom-padding {
+     padding-inline: 35px;
+   }
+ }
 
 @layer components {
   .primary-button {

From d664a21bcbd044743ff06e9ea8d0b9e9017824f0 Mon Sep 17 00:00:00 2001
From: Chandraprakash <sahuprakash.er@gmail.com>
Date: Tue, 17 Oct 2023 19:58:46 +0530
Subject: [PATCH 2/3] code formation removed

---
 src/components/Sections/HomepageHeader.tsx | 371 ++++++++++-----------
 1 file changed, 173 insertions(+), 198 deletions(-)

diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index 556ae464efa..f3b92cda656 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -17,209 +17,184 @@ import IBMIcon from "@site/static/img/Homepage/brand/IBM.svg";
 export function HomepageHeader() {
     return (
         <div className="w-full">
-            <img
-                src={HeaderBG}
-                alt=""
-                className="
-      absolute top-[0px] left-[0px] max-h-[580px] 
-      xl:w-screen sm:hidden"
-            />
-            <img
-                src={HeaderBGMB}
-                alt=""
-                className="
-      absolute top-[0px] left-[0px] w-screen z-0
-      sm:h-[496px] mobile:h-[526px]
-      hidden sm:block"
-            />
-            <header
-                className="
-        flex justify-center
-        items-center
-        w-[840px] mobile:w-[90%]  sm:w-full  2xl:w-[1000px] custom-padding
-        mobile:mt-[32px] sm:mt-[65px] mt-[71px]
-        z-10
-        mx-auto
-        "
-            >
-                <div
-                    className="z-10
-          flex flex-col 
-          flex-wrap
-        "
-                >
-                    <div
-                        className="text-primary
-            font-bold font-inter
-            text-label40 sm:text-heading2 mobile:text-label20
-            sm:font-semibold"
-                    >
-                        Debug engineering processes and discover opportunities
-                        with DORA, Community Growth, Engineering Throughput and
-                        more DevLake dashboards...
-                    </div>
-                    <div
-                        className="
-            mt-5 mobile:mt-3 sm:mt-3
-            text-primary-800
-            text-label24
-            sm:text-label16Lake mobile:text-label16Lake
-            font-inter
-        "
-                    >
-                        Apache DevLake&trade; (Incubating) ingests, analyzes,
-                        and visualizes the fragmented data from DevOps tools to
-                        distill insights for engineering excellence.
-                    </div>
-                    <div
-                        className="
-            flex
-            mobile:flex-col
-            mt-[48px]  sm:mt-3
+          <img
+            src={HeaderBG}
+            alt=""
+            className="
+          absolute top-[0px] left-[0px] max-h-[580px] 
+          xl:w-screen sm:hidden"
+          />
+          <img
+            src={HeaderBGMB}
+            alt=""
+            className="
+          absolute top-[0px] left-[0px] w-screen z-0
+          sm:h-[496px] mobile:h-[526px]
+          hidden sm:block"
+          />
+          <header
+            className="
+            flex justify-center
             items-center
-            justify-between
-            mb-[129px] 2xl:mb-[148px] sm:mb-[101px] mobile:mb-[44.9px]
+            w-[840px] mobile:w-[90%]  sm:w-full  2xl:w-[1000px] custom-padding
+            mobile:mt-[32px] sm:mt-[65px] mt-[71px]
+            z-10
+            mx-auto
             "
-                    >
-                        <Link
-                            className="primary-button
-              flex
-              whitespace-nowrap
-              mobile:mt-3
-              rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
-              w-[200px] sm:w-[140px] mobile:w-[140px]
-              h-[48px] sm:h-[32px] mobile:h-[32px]"
-                            to="https://devlake.apache.org/livedemo/EngineeringLeads/DORA"
-                        >
-                            See it Live
-                        </Link>
-                        <Link
-                            className="primary-button
-            flex
-            whitespace-nowrap
-            rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
-            bg-neutral-invert
-            text-primary-500
-            border-2 border-primary-500 border-solid
-            hover:text-primary-500 
-            hover:bg-neutral-invert
-            hover:opacity-80
-            mobile:mt-3
-            w-[200px] sm:w-[140px] mobile:w-[140px]
-            h-[48px] sm:h-[32px] mobile:h-[32px]"
-                            to="https://devlake.apache.org/docs/GettingStarted"
-                        >
-                            Install DevLake
-                        </Link>
-                        <Link
-                            className="primary-button
-            flex
-            whitespace-nowrap
-            rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
-            bg-neutral-invert
-            text-primary-500
-            border-2 border-primary-500 border-solid
-            hover:text-primary-500 
-            hover:bg-neutral-invert
-            hover:opacity-80
-            mobile:mt-3
-            w-[200px] sm:w-[140px] mobile:w-[140px]
-            h-[48px] sm:h-[32px] mobile:h-[32px]"
-                            to="https://join.slack.com/t/devlake-io/shared_invite/zt-20envwfbk-JUTZ4z9jSeRnrvNhBFLg9w"
-                        >
-                            Join Slack
-                        </Link>
-                    </div>
-                </div>
-            </header>
+          >
             <div
-                className="
-       flex
-       text-heading4
-       text-neutral-300
-       font-inter
-       text-center
-       mx-[auto]
-       w-[86%]
-       h-[20px]
-       mb-[40px]
-       items-center
-      "
+              className="z-10
+              flex flex-col 
+              flex-wrap
+            "
             >
-                <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
-                <span
-                    className="
-         flex-1
-         w-[81px]
-        "
-                >
-                    Trusted by
-                </span>
-                <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%]"></div>
+              <div
+                className="text-primary
+                font-bold font-inter
+                text-label40 sm:text-heading2 mobile:text-label20
+                sm:font-semibold"
+              >
+                Debug engineering processes and discover opportunities with DORA, Community Growth, Engineering Throughput and more DevLake dashboards...
+              </div>
+              <div
+                className="
+                mt-5 mobile:mt-3 sm:mt-3
+                text-primary-800
+                text-label24
+                sm:text-label16Lake mobile:text-label16Lake
+                font-inter
+            "
+              >
+                Apache DevLake&trade; (Incubating) ingests, analyzes, and visualizes the
+                fragmented data from DevOps tools to distill insights for
+                engineering excellence.
+              </div>
+              <div className="
+                flex
+                mobile:flex-col
+                mt-[48px]  sm:mt-3
+                items-center
+                justify-between
+                mb-[129px] 2xl:mb-[148px] sm:mb-[101px] mobile:mb-[44.9px]
+                ">
+              <Link
+                className="primary-button
+                  flex
+                  whitespace-nowrap
+                  mobile:mt-3
+                  rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
+                  w-[200px] sm:w-[140px] mobile:w-[140px]
+                  h-[48px] sm:h-[32px] mobile:h-[32px]"
+                to="https://devlake.apache.org/livedemo/EngineeringLeads/DORA"
+              >
+                See it Live
+              </Link>
+              <Link
+                className="primary-button
+                flex
+                whitespace-nowrap
+                rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
+                bg-neutral-invert
+                text-primary-500
+                border-2 border-primary-500 border-solid
+                hover:text-primary-500 
+                hover:bg-neutral-invert
+                hover:opacity-80
+                mobile:mt-3
+                w-[200px] sm:w-[140px] mobile:w-[140px]
+                h-[48px] sm:h-[32px] mobile:h-[32px]"
+                to="https://devlake.apache.org/docs/GettingStarted"
+              >
+                Install DevLake
+              </Link>
+              <Link
+                className="primary-button
+                flex
+                whitespace-nowrap
+                rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
+    
+        
+            
+              
+        
+    
+            
+            Expand All
+        
+        @@ -121,14 +125,15 @@ export function HomepageHeader() {
+      
+                bg-neutral-invert
+                text-primary-500
+                border-2 border-primary-500 border-solid
+                hover:text-primary-500 
+                hover:bg-neutral-invert
+                hover:opacity-80
+                mobile:mt-3
+                w-[200px] sm:w-[140px] mobile:w-[140px]
+                h-[48px] sm:h-[32px] mobile:h-[32px]"
+                to="https://join.slack.com/t/devlake-io/shared_invite/zt-20envwfbk-JUTZ4z9jSeRnrvNhBFLg9w"
+              >
+                Join Slack
+              </Link>
+              </div>
             </div>
-            <div
-                className=" 
-              pl-[30px] pr-[30px]
-              flex 
-              justify-between
-              sm:flex-wrap
-              xl:justify-between
-              sm:justify-around
-              items-center
-              m-auto
-              max-w-[90%]"
-            >
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://www.redhat.com/en">
-                        <RedHatIcon className="mobile:w-[72px]" />
-                    </a>
-                </div>
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://stripe.com/gb">
-                        <StripeIcon className="mobile:w-[36px]" />
-                    </a>
-                </div>
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://orkes.io/">
-                        <img
-                            className="w-[88px] mobile:w-[48px]"
-                            src={OrkesIcon}
-                        />
-                    </a>
-                </div>
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://clickhouse.com/">
-                        <img
-                            className="w-[140px] mobile:w-[71px]"
-                            src={ClickHouseIcon}
-                        />
-                    </a>
-                </div>
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://croz.net/">
-                        <img
-                            className="w-[80px] mobile:w-[36px]"
-                            src={CrozIcon}
-                        />
-                    </a>
-                </div>
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://coder.com/">
-                        <img
-                            className="w-[120px] mobile:w-[60px]"
-                            src={CoderIcon}
-                        />
-                    </a>
-                </div>
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://about.scarf.sh/">
-                        <ScarfIcon className="mobile:w-[48px]" />
-                    </a>
-                </div>
-                <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
-                    <a href="https://www.ibm.com/">
-                        <IBMIcon className="mobile:w-[30px]" />
-                    </a>
+          </header>
+          <div className="
+           flex
+           text-heading4
+           text-neutral-300
+           font-inter
+           text-center
+           mx-[auto]
+           w-[86%]
+           h-[20px]
+           mb-[40px]
+           items-center
+          ">
+            <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
+            <span className="
+             flex-1
+             w-[81px]
+            ">
+            Trusted by
+            </span>
+            <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%]"></div>
+          </div>
+          <div
+            className=" 
+                  pl-[30px] pr-[30px]
+                  flex 
+                  justify-between
+                  sm:flex-wrap
+                  xl:justify-between
+                  sm:justify-around
+                  items-center
+                  m-auto
+                  max-w-[90%]"
+          >
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://www.redhat.com/en"><RedHatIcon className="mobile:w-[72px]" /></a>
+            </div>
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://stripe.com/gb"><StripeIcon className="mobile:w-[36px]" /></a>
+            </div>
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://orkes.io/"><img className="w-[88px] mobile:w-[48px]" src={OrkesIcon} /></a>
+            </div>
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://clickhouse.com/"><img className="w-[140px] mobile:w-[71px]" src={ClickHouseIcon} /></a>
+            </div>
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://croz.net/"><img className="w-[80px] mobile:w-[36px]" src={CrozIcon} /></a>
+            </div>
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://coder.com/"><img className="w-[120px] mobile:w-[60px]" src={CoderIcon} /></a>
+            </div>
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://about.scarf.sh/"><ScarfIcon className="mobile:w-[48px]" /></a>
+            </div>
+            <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
+              <a href="https://www.ibm.com/"><IBMIcon className="mobile:w-[30px]" /></a>
                 </div>
             </div>
         </div>

From c19d3e986d46d961896e28bad1e8f5d1bf311dc7 Mon Sep 17 00:00:00 2001
From: Chandraprakash <sahuprakash.er@gmail.com>
Date: Wed, 18 Oct 2023 08:38:31 +0530
Subject: [PATCH 3/3] code style changed

---
 src/components/Sections/HomepageHeader.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index f3b92cda656..6c57f9bdd59 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -112,17 +112,6 @@ export function HomepageHeader() {
                 flex
                 whitespace-nowrap
                 rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
-    
-        
-            
-              
-        
-    
-            
-            Expand All
-        
-        @@ -121,14 +125,15 @@ export function HomepageHeader() {
-      
                 bg-neutral-invert
                 text-primary-500
                 border-2 border-primary-500 border-solid