From bad8f766db698bdd535b69d0936e1a9308820b73 Mon Sep 17 00:00:00 2001
From: Rakibul Islam <rakibul@autobit.co>
Date: Tue, 28 Apr 2026 02:27:27 +0530
Subject: [PATCH] FIX: update button styles for secondary CTA in Hero component

---
 src/pages/index.js         |  2 +-
 src/pages/index.module.css | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 89b9939..6cb3bed 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -57,7 +57,7 @@ function Hero() {
               <Link className={clsx('button button--primary button--lg', styles.ctaPrimary)} to="/getting-started/installation">
                 Get started
               </Link>
-              <Link className={clsx('button button--secondary button--lg', styles.ctaSecondary)} to="/tour/basics">
+              <Link className={clsx('button button--secondary button--lg', styles.heroSecondaryCta)} to="/tour/basics">
                 Take the tour
               </Link>
               <Link className={styles.ctaGhost} to="/drivers">
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 8f412f7..0b54b2f 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -64,12 +64,27 @@
   background: var(--ifm-color-primary);
   border: none;
 }
+.ctaPrimary:hover {
+  background: var(--ifm-color-primary-darker);
+}
 
 .ctaSecondary {
   background: transparent;
   border: 1px solid var(--ifm-color-emphasis-300);
 }
 
+.heroSecondaryCta {
+  /* background: transparent; */
+  border: 1px solid var(--ifm-color-emphasis-300);
+  color: var(--ifm-color-content-secondary);
+}
+
+.heroSecondaryCta:hover {
+  border-color: var(--ifm-color-primary-lighter);
+  color: rgb(157, 156, 156);
+  background: var(--ifm-hero-background-color);
+}
+
 .ctaGhost {
   padding: 0 0.5rem;
   font-weight: 500;