Add button hover effect for enhanced user interaction

Author: iitzIrFan

src/pages/get-started/index.tsx

@@ -564,38 +564,6 @@ export default function GetStarted() {
                 </div>
               </section>
             </AnimatedSection>
-            
-            {/* Final CTA */}
-            <AnimatedSection delay={3}>
-              <div className={styles.ctaSection}>
-                <h2>Ready to Transform Your Career?</h2>
-                <p>Join our community of passionate developers and start building your future today</p>
-                <div className={styles.buttons}>
-                  <Link
-                    className={`${styles.button} ${styles.buttonPrimary} ${styles.buttonLarge}`}
-                    to="/courses/"
-                  >
-                    Get Started for Free
-                  </Link>
-                  <Link
-                    className={`${styles.button} ${styles.buttonOutline} ${styles.buttonLarge}`}
-                    to="/pricing/"
-                  >
-                    View Pricing
-                  </Link>
-                </div>
-                
-                <div className={styles.trustedBy}>
-                  <span>Trusted by developers at</span>
-                  <div className={styles.companies}>
-                    <span>Google</span>
-                    <span>Microsoft</span>
-                    <span>Amazon</span>
-                    <span>Netflix</span>
-                  </div>
-                </div>
-              </div>
-            </AnimatedSection>
           </div>
         </section>
       </main>

src/pages/get-started/styles.module.css

@@ -651,6 +651,33 @@
 }
 
 /* Button Ripple Effect */
+/* Button hover effect */
+.button-hover-effect {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.button-hover-effect::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
+  opacity: 0;
+}
+
+.button-hover-effect:hover::after {
+  width: 300px;
+  height: 300px;
+  opacity: 1;
+}
+
 .button::after {
   content: '';
   position: absolute;