fix: address code review — move inline styles to CSS, fix visualization spelling

Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/30250193-58e1-450c-a5ab-15dd9e0d11d5

Author: Copilot

src/data/coursesData.ts

@@ -263,7 +263,7 @@ export const coursesData: Course[] = [
     category: "data-science",
     difficulty: "Beginner",
     duration: "6 hrs",
-    tags: ["Data Visualisation", "Matplotlib", "Seaborn", "Plotly", "Python"],
+    tags: ["Data Visualization", "Matplotlib", "Seaborn", "Plotly", "Python"],
     freePlatforms: [
       {
         name: "Kaggle",

src/pages/courses/courses.css

@@ -373,6 +373,16 @@
   box-shadow: var(--courses-shadow-lg);
 }
 
+/* Allow <a> elements styled as the primary button to look/behave correctly */
+a.courses-button-link {
+  display: inline-flex;
+  text-decoration: none;
+}
+
+a.courses-button-link:hover {
+  text-decoration: none;
+}
+
 .courses-button-primary:hover {
   background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
   transform: translateY(-3px);

src/pages/courses/index.tsx

@@ -503,8 +503,7 @@ function CoursesContent() {
             >
               <a
                 href="/courses/explore"
-                className="courses-button-primary group courses-backdrop-blur relative overflow-hidden rounded-2xl border border-blue-400/20 px-8 py-3 text-base font-bold shadow-2xl transition-all duration-300 hover:scale-105 hover:shadow-blue-500/30 md:px-10 md:py-4 md:text-lg"
-                style={{ display: "inline-flex", textDecoration: "none" }}
+                className="courses-button-primary courses-button-link group courses-backdrop-blur relative overflow-hidden rounded-2xl border border-blue-400/20 px-8 py-3 text-base font-bold shadow-2xl transition-all duration-300 hover:scale-105 hover:shadow-blue-500/30 md:px-10 md:py-4 md:text-lg"
               >
                 <span className="relative z-10 flex items-center justify-center gap-2">
                   Explore Courses