From ae700e8f3ab9fc2655b8d0cd660b94d6ba0f7f18 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Sun, 4 May 2025 18:56:33 +0100
Subject: [PATCH] fix: display only 2 demos buttons on mobile

---
 frontend/src/Hero.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 0161eac2..583f8a1b 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -38,9 +38,12 @@ export default function Hero({
                 <button
                   key={key}
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className="w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors
+                  className={`
+                    w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors
                     border-dark-gray text-just-black hover:bg-cultured
-                    dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green"
+                    dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green
+                    ${key >= 2 ? 'hidden md:block' : ''} // Show only 2 buttons on mobile
+                  `}
                 >
                   <p className="mb-2 font-semibold text-black-1000 dark:text-bright-gray">
                     {demo.header}