Merge pull request #642 from areebniyas/fix-ux-in-homepage-buttons

fix: UX in Get Started and Courses Buttons on Homepage

Author: sanjay-kv

src/components/header/header.css

@@ -104,24 +104,14 @@ html.theme-dark .chh__header-content p {
   gap: 1rem;
 }
 
-.chh__header-content__input--link {
+.chh__header-content__input--button {
   text-decoration: none;
   font-size: 20px;
   line-height: 28px;
   font-weight: 600;
   color: black;
-}
-
-.chh__header-content__input--link:hover {
-  text-decoration: none;
-  color:#121212;
-}
-
-.chh__header-content__input button {
-  flex: 1;
+  width: 100%;
   min-height: 56px;
-  font-weight: 600;
-  font-size: 18px;
   border: none;
   cursor: pointer;
   outline: none;
@@ -131,9 +121,12 @@ html.theme-dark .chh__header-content p {
   position: relative;
   overflow: hidden;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.chh__header-content__input button::after {
+.chh__header-content__input--button::after {
   content: "";
   position: absolute;
   top: 0;
@@ -151,53 +144,62 @@ html.theme-dark .chh__header-content p {
   pointer-events: none;
 }
 
-.chh__header-content__input button:hover::after {
+.chh__header-content__input--button:hover::after {
   left: 100%;
 }
 
-.chh__header-content__input button:hover {
+.chh__header-content__input--button:hover {
   transform: scale(1.03); /* very subtle lift */
+  text-decoration: none;
 }
 
-.chh__header-content__input button:first-child {
+.chh__header-content__input div:first-child .chh__header-content__input--button {
   background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
 }
 
-.chh__header-content__input button:first-child:hover {
+.chh__header-content__input div:first-child .chh__header-content__input--button:hover {
   background: linear-gradient(135deg, #f76b1c 0%, #fca65f 100%);
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  color: black;
 }
 
-[data-theme='dark'] .chh__header-content__input button:first-child {
+[data-theme='dark'] .chh__header-content__input div:first-child .chh__header-content__input--button {
   background: linear-gradient(135deg, #9b4d89 0%, #6b3a9c 100%); 
 }
 
-[data-theme='dark'] .chh__header-content__input button:first-child:hover {
+[data-theme='dark'] .chh__header-content__input div:first-child .chh__header-content__input--button:hover {
   background: linear-gradient(135deg, #b45ea5 0%, #8050c4 100%); 
   transform: translateY(-2px) scale(1.02);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+  text-decoration: none;
+  color: white;
 }
 
-.chh__header-content__input button:last-child {
+.chh__header-content__input div:last-child .chh__header-content__input--button {
   background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
 }
 
-.chh__header-content__input button:last-child:hover {
+.chh__header-content__input div:last-child .chh__header-content__input--button:hover {
   background: linear-gradient(135deg, #ae8dca 0%, #b3a7cb 100%);
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  color: black;
 }
 
-[data-theme='dark'] .chh__header-content__input button:last-child {
+[data-theme='dark'] .chh__header-content__input div:last-child .chh__header-content__input--button {
   background: linear-gradient(135deg, #2c2c36 0%, #3d3d4f 100%);
   color: #e0e0e0;
 }
 
-[data-theme='dark'] .chh__header-content__input button:last-child:hover {
+[data-theme='dark'] .chh__header-content__input div:last-child .chh__header-content__input--button:hover {
   background: linear-gradient(135deg, #3d3d4f 0%, #50506b 100%); 
   transform: translateY(-2px) scale(1.02); 
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); 
+  text-decoration: none;
+  color: #e0e0e0;
 }
 
 .chh__header-image {

src/components/header/header.tsx

@@ -41,7 +41,7 @@ const HeaderContent = () => {
       </motion.p>
 
       <div className="chh__header-content__input">
-        <motion.button
+        <motion.div
           initial={{ opacity: 0, x: -10 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
@@ -51,14 +51,14 @@ const HeaderContent = () => {
             stiffness: 100,
             delay: 0.3,
           }}
-          type="button"
+          style={{ flex: 1 }}
         >
-          <Link to="/get-started/" className="chh__header-content__input--link">
+          <Link to="/get-started/" className="chh__header-content__input--button">
             Get Started
           </Link>
-        </motion.button>
+        </motion.div>
 
-        <motion.button
+        <motion.div
           initial={{ opacity: 0, x: 10 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
@@ -68,12 +68,12 @@ const HeaderContent = () => {
             stiffness: 100,
             delay: 0.2,
           }}
-          type="button"
+          style={{ flex: 1 }}
         >
-          <Link to="/courses" className="chh__header-content__input--link">
+          <Link to="/courses" className="chh__header-content__input--button">
             Courses
           </Link>
-        </motion.button>
+        </motion.div>
       </div>
     </div>
   );