feat: center vcluster logo and add algolia search

Author: Piotr1215

docs/index.mdx

@@ -12,18 +12,46 @@ custom_edit_url: null
 import Link from '@docusaurus/Link';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import SearchBar from '@theme/SearchBar';
 
-<div className="intro-card">
-  <div style={{marginBottom: '1.5rem', display: 'flex', alignItems: 'center'}}>
-    <img src="/docs/media/rebranding/vCluster_horizontal-orange.svg" alt="vCluster" style={{height: '40px'}} />
-  </div>
-  <div style={{fontSize: '1.1rem', lineHeight: '1.6', marginBottom: '1.5rem'}}>
+{/* Centered Hero Section */}
+<div style={{textAlign: 'center', maxWidth: '900px', margin: '0 auto 4rem', padding: '2rem 1rem'}}>
+  <img src="/docs/media/rebranding/vCluster_horizontal-orange.svg" alt="vCluster" style={{height: '70px', marginBottom: '1.5rem'}} />
+  <p style={{fontSize: '1.15rem', lineHeight: '1.6', marginBottom: '2.5rem', color: 'var(--ifm-color-content-secondary)'}}>
     vCluster is an open-source solution that enables teams to run virtual Kubernetes clusters inside existing infrastructure. These virtual clusters are Certified Kubernetes Distributions that provide strong workload isolation while running as nested environments on top of another Kubernetes cluster.
+  </p>
+
+  {/* Algolia Search Box */}
+  <div className="hero-search-wrapper" style={{maxWidth: '700px', margin: '0 auto'}}>
+    <SearchBar />
   </div>
-  <a href="/docs/vcluster/" className="button button--primary" style={{textDecoration: 'none', padding: '0.75rem 1.25rem', fontSize: '1.05rem'}}>Get started →</a>
 </div>
 
 <style dangerouslySetInnerHTML={{__html: `
+  /* Hero search box styling */
+  .hero-search-wrapper .DocSearch-Button {
+    width: 100%;
+    background-color: var(--ifm-background-color) !important;
+    border: 2px solid var(--ifm-color-emphasis-300) !important;
+    border-radius: 12px !important;
+    height: 56px !important;
+    padding: 0 1.5rem !important;
+  }
+  .hero-search-wrapper .DocSearch-Button:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  /* Position DocSearch modal lower on the page */
+  .DocSearch-Modal {
+    top: 250px !important;
+    max-height: calc(100vh - 260px) !important;
+  }
+
+  /* Adjust backdrop to start from below header */
+  .DocSearch-Container {
+    padding-top: 250px !important;
+  }
+
   .intro-card {
     border: 1px solid #d9d9d9 !important;
     border-radius: 8px !important;