Improved typing and text clarity

Author: Samridha0305

src/pages/get-started/index.tsx

@@ -124,20 +124,22 @@ function GetStartedHeader() {
 
   return (
     <header className={styles.heroBanner}>
+    {/* Dark overlay for better text visibility */}
+      <div className={styles.heroOverlay}></div>
       <div className="container">
         <div className={styles.heroContent}>
-          <motion.h1
-            className="hero__title"
+          <motion.h1 
+            className={`hero__title ${styles.heroTitle}`}   
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
           >
-            Transform Your Career in{" "}
+            Transform Your Career in
             <span className={styles.highlight}>Tech</span>
           </motion.h1>
 
           <motion.p
-            className="hero__subtitle"
+            className={`hero__subtitle ${styles.heroSubtitle}`}  
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
@@ -146,29 +148,17 @@ function GetStartedHeader() {
             hands-on challenges
           </motion.p>
 
-          <motion.div
-            className={styles.typingContainer}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 0.4 }}
-          >
-            <div className={styles.typingText}>
-              <span className={styles.staticText}>Start</span>
-              <div className={styles.typingAnimation}>
-                {texts.map((text, i) => (
-                  <span
-                    key={i}
-                    className={`${styles.typingWord} ${
-                      i === textIndex ? styles.visible : ""
-                    }`}
-                  >
-                    {text}
-                  </span>
-                ))}
-              </div>
-              <span className={styles.staticText}>Today</span>
-            </div>
-          </motion.div>
+          <div className={styles.typingContainer}>
+            <span className={styles.staticText}>Start&nbsp;</span>
+            <span className={styles.dynamicText}>
+              <span className={styles.typingWord}>Code</span>
+              <span className={styles.typingWord}>Build</span>
+              <span className={styles.typingWord}>Deploy</span>
+              <span className={styles.typingWord}>Learn</span>
+            </span>
+            <span className={styles.staticText}>&nbsp;Today</span>
+          </div>
+
 
           <motion.div
             className={styles.buttons}
@@ -218,6 +208,7 @@ function GetStartedHeader() {
               </span>
             </Link>
           </motion.div>
+          
         </div>
       </div>
     </header>