feat: refactor PageHeader component to use CSS modules and remove unused styles from Blog module

src/assets/styles/Blog.module.scss

@@ -1,53 +1,5 @@
 @use "./variables.scss" as *;
 
-
-/* Page Header */
-.pageHeader {
-    padding-top: 7rem;
-    padding-bottom: 3rem;
-    background-color: $secondary-dark;
-    position: relative;
-    overflow: hidden;
-}
-
-.pageHeader::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-image: url('/api/placeholder/1200/400');
-    opacity: 0.15;
-    filter: brightness(0.3);
-    z-index: 0;
-}
-
-.pageTitle {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    position: relative;
-    display: inline-block;
-}
-
-.pageTitle::after {
-    content: "";
-    position: absolute;
-    width: 60px;
-    height: 3px;
-    background: $accent-fire;
-    bottom: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    box-shadow: $glow-effect;
-}
-
-.pageSubtitle {
-    font-size: 1.2rem;
-    color: $text-ash;
-}
-
-
 /* Meta items */
 @mixin metaItem {
     .metaItem {
@@ -269,13 +221,3 @@
     border-color: $accent-fire;
     color: $text-light;
 }
-
-/* Binary background effect */
-.binaryLine {
-    position: absolute;
-    font-family: 'Fira Code', monospace;
-    color: $accent-fire;
-    font-size: 0.8rem;
-    opacity: 0.15;
-    pointer-events: none;
-}

src/assets/styles/PageHeader.module.scss

@@ -0,0 +1,58 @@
+@use "./variables.scss" as *;
+
+
+/* Binary background effect */
+.binaryLine {
+    position: absolute;
+    font-family: 'Fira Code', monospace;
+    color: $accent-fire;
+    font-size: 0.8rem;
+    opacity: 0.15;
+    pointer-events: none;
+}
+
+/* Page Header */
+.pageHeader {
+    padding-top: 7rem;
+    padding-bottom: 3rem;
+    background-color: $secondary-dark;
+    position: relative;
+    overflow: hidden;
+}
+
+.pageHeader::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: url('/api/placeholder/1200/400');
+    opacity: 0.15;
+    filter: brightness(0.3);
+    z-index: 0;
+}
+
+.pageTitle {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    position: relative;
+    display: inline-block;
+}
+
+.pageTitle::after {
+    content: "";
+    position: absolute;
+    width: 60px;
+    height: 3px;
+    background: $accent-fire;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: $glow-effect;
+}
+
+.pageSubtitle {
+    font-size: 1.2rem;
+    color: $text-ash;
+}