From c3ee5f1ba1721f9a7e69776d0ed57785ebefe09f Mon Sep 17 00:00:00 2001
From: Shaun Struwig <41984034+Blargian@users.noreply.github.com>
Date: Wed, 2 Apr 2025 11:51:44 +0200
Subject: [PATCH 1/3] add search to docs homepage

---
 src/css/home.scss              | 29 +++++++++++++++++++++++++++++
 src/pages/index.mdx            | 16 ++++++++++++++++
 src/theme/SearchBar/styles.css |  3 +++
 3 files changed, 48 insertions(+)

diff --git a/src/css/home.scss b/src/css/home.scss
index 3b52bf4d026..9fc377b3a5d 100644
--- a/src/css/home.scss
+++ b/src/css/home.scss
@@ -75,6 +75,18 @@
   }
 }
 
+.home-page-hero-right-search {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    flex: 1;
+    justify-content: center;
+  }
+}
+
 .home-page-hero-button {
   display: flex;
   color: inherit;
@@ -196,6 +208,21 @@
   }
 }
 
+.home-page-section-search {
+  display: flex;
+  flex-direction: column;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--click-color-stroke);
+
+  @media (min-width: 768px) {
+    flex-direction: column;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
 .home-page-section:last-of-type {
   border-bottom: none;
 }
@@ -234,5 +261,7 @@ img.home-svg svg path {
 .home-container {
   display: flex;
   flex-direction: column;
+  max-width: 1000px;
+  justify-self: center;
 }
 
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 4b535326bb6..74a77211f38 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -23,6 +23,7 @@ import IconSQLConsole from '@site/src/icons/IconSQLConsole';
 import IconLightning from '@site/src/icons/IconLightning';
 import IconDownload from '@site/src/icons/IconDownload';
 import Image from '@theme/IdealImage';
+import SearchBar from "@theme/SearchBar";
 
 export const Hero = ({children, color}) => {
     return (
@@ -88,6 +89,20 @@ export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link})
     )
 }
 
+export const SearchClickHouse = ({children, color}) => {
+    return (
+        <div className='home-page-section-search'>
+            <div className='home-page-section-left'>
+                <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Search documentation</div>
+                <div style={{marginBottom: '12px'}}></div>
+            </div>
+            <div className='home-page-hero-right-search'>
+                <SearchBar/>
+            </div>
+        </div>
+    )
+}
+
 export const ConnectToClickHouse = ({children, color}) => {
     return (
         <div className='home-page-section'>
@@ -197,6 +212,7 @@ export const HomeContainer = () => {
     return (
         <div className='home-container'>
             <Hero/>
+            <SearchClickHouse/>
             <ConnectToClickHouse/>
             <MigrateToClickHouse/>
             <DeployClickHouse/>
diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
index fd89bb6623f..2b4d3dffe83 100644
--- a/src/theme/SearchBar/styles.css
+++ b/src/theme/SearchBar/styles.css
@@ -17,7 +17,10 @@
 }
 .DocSearch-Button-Placeholder {
   font-size: inherit;
+}
 
+[data-theme='dark'] .DocSearch-Button-Placeholder {
+  color: white;
 }
 
 .DocSearch-Container {

From 88281336a808605bf86a1de6380c4745362bb30e Mon Sep 17 00:00:00 2001
From: Shaun Struwig <41984034+Blargian@users.noreply.github.com>
Date: Fri, 4 Apr 2025 20:47:59 +0200
Subject: [PATCH 2/3] improve styling

---
 src/css/home.scss   | 41 +++++++++++++++++++++++++----------------
 src/pages/index.mdx |  7 ++-----
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/css/home.scss b/src/css/home.scss
index 9fc377b3a5d..9f50f4999ed 100644
--- a/src/css/home.scss
+++ b/src/css/home.scss
@@ -57,6 +57,7 @@
 .home-page-hero-left {
   align-self: center;
   padding: 2rem 0rem;
+  flex: 1;
 
   @media (min-width: 768px) {
     padding-right: 2rem;
@@ -67,23 +68,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
+  flex: 1;
 
   @media (min-width: 768px) {
     flex-direction: row;
     flex: 1;
-    justify-content: center;
-  }
-}
-
-.home-page-hero-right-search {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  @media (min-width: 768px) {
-    flex-direction: row;
-    flex: 1;
-    justify-content: center;
+    justify-content: space-between;
   }
 }
 
@@ -97,10 +88,10 @@
   padding: 16px;
   border-radius: 8px;
   margin-bottom: 1rem;
+  margin: 0px 20px;
   width: 100%;
 
   @media (min-width: 768px) {
-    margin-right: 24px;
     margin-bottom: 0;
     width: 200px;
   }
@@ -210,16 +201,34 @@
 
 .home-page-section-search {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   padding-top: 2rem;
   padding-bottom: 2rem;
   justify-content: space-between;
   border-bottom: 1px solid var(--click-color-stroke);
 
   @media (min-width: 768px) {
-    flex-direction: column;
+    flex-direction: row;
     padding-top: 2rem;
     padding-bottom: 2rem;
+    padding-right: 2rem;
+    justify-content: space-between;
+  }
+}
+
+.home-page-hero-right-search {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: right;
+  flex: 1;
+  max-width: 450px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    flex: 1;
+    justify-content: right;
+    max-width: 450px;
   }
 }
 
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 74a77211f38..be9a77f8ec0 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -92,12 +92,9 @@ export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link})
 export const SearchClickHouse = ({children, color}) => {
     return (
         <div className='home-page-section-search'>
-            <div className='home-page-section-left'>
-                <div style={{fontWeight: '600', fontSize: '18px', marginBottom: '24px'}}>Search documentation</div>
-                <div style={{marginBottom: '12px'}}></div>
-            </div>
+            <p style={{fontWeight: '600', fontSize: '18px', margin: 'auto', flex: '1'}}>Search documentation</p>
             <div className='home-page-hero-right-search'>
-                <SearchBar/>
+                <SearchBar style="width: 75%"/>
             </div>
         </div>
     )

From fcc064d26d7b1038649f352f671489558c860fc4 Mon Sep 17 00:00:00 2001
From: Shaun Struwig <41984034+Blargian@users.noreply.github.com>
Date: Fri, 4 Apr 2025 21:29:02 +0200
Subject: [PATCH 3/3] fix alignment styling issue

---
 src/css/home.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/css/home.scss b/src/css/home.scss
index 9f50f4999ed..64d806b709f 100644
--- a/src/css/home.scss
+++ b/src/css/home.scss
@@ -70,6 +70,7 @@
   align-items: center;
   justify-content: space-between;
   flex: 1;
+  gap: 20px;
 
   @media (min-width: 768px) {
     flex-direction: row;
@@ -88,7 +89,6 @@
   padding: 16px;
   border-radius: 8px;
   margin-bottom: 1rem;
-  margin: 0px 20px;
   width: 100%;
 
   @media (min-width: 768px) {
@@ -222,13 +222,12 @@
   align-items: center;
   justify-content: right;
   flex: 1;
-  max-width: 450px;
+  max-width: 465px;
 
   @media (min-width: 768px) {
     flex-direction: row;
     flex: 1;
     justify-content: right;
-    max-width: 450px;
   }
 }