From 9236e3aefce61496e921b0ec6b3a3711aab00629 Mon Sep 17 00:00:00 2001
From: Kyriakos Akriotis <akriotis.kyriakos@gmail.com>
Date: Mon, 1 Sep 2025 09:19:54 +0000
Subject: [PATCH] fix hero img in small screens #21

---
 src/pages/index.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b8f85cf..4221003 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,13 +3,14 @@ import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { BarChart3, Lock , HeartPulse, Rocket, CircleFadingArrowUp, Ship, Cable} from "lucide-react";
+import { BarChart3, Lock, HeartPulse, Rocket, CircleFadingArrowUp, Ship, Cable } from "lucide-react";
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
 
   return (
     <Layout
+
       title={`Typesense Kubernetes Operator Docs`}
       description="TyKO, your turnkey Typesense Kubernetes Operator">
       {/* HERO */}
@@ -27,7 +28,7 @@ export default function Home(): JSX.Element {
                 TyKO
               </h1>
               <p style={{ fontSize: "1.15rem", opacity: 0.9, marginBottom: "1.25rem" }}>
-                Your turnkey Typesense Kubernetes Operator<br/>
+                Your turnkey Typesense Kubernetes Operator<br />
                 for highly available self-healing Typesense clusters
               </p>
               <div style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
@@ -39,8 +40,14 @@ export default function Home(): JSX.Element {
                 </Link>
               </div>
             </div>
+            <style>{`
+              @media (max-width: 932px) {
+                .hero-inline-hide { display: none !important; maxWidth: "50%" }
+              }
+            `}</style>
             <div className="col col--5" style={{ textAlign: "center" }}>
               <img
+                className="hero-inline-hide"
                 src={useBaseUrl('/img/tyko-logo.png')}
                 alt="TyKO Hero"
                 style={{ maxWidth: "50%" }}