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;
+}

src/components/PageHeader.tsx

@@ -1,3 +1,5 @@
+import style from '@styles/PageHeader.module.scss'
+
 interface PageHeaderProps {
   title: string;
   subtitle?: string;
@@ -5,17 +7,17 @@ interface PageHeaderProps {
 
 export const PageHeader: React.FC<PageHeaderProps> = ({ title, subtitle }) => {
   return (
-    <section className="page-header text-center">
+    <section className={`text-center ${style.pageHeader}`}>
-      <div className="container position-relative">
+      <div className={`container position-relative`}>
-        <h1 className="page-title">{title}</h1>
+        <h1 className={style.pageTitle}>{title}</h1>
-        {subtitle && <p className="page-subtitle mt-4">{subtitle}</p>}
+        {subtitle && <p className={`mt-4 ${style.pageSubtitle}`}>{subtitle}</p>}
         
         {/* Binary background effect */}
         <div className="binary-bg">
-          <div className="binary-line" style={{ top: '20%', left: '10%' }}>01001100 01101111 01110010 01100101 01101101</div>
+          <div className={style.binaryLine} style={{ top: '20%', left: '10%' }}>01001100 01101111 01110010 01100101 01101101</div>
-          <div className="binary-line" style={{ bottom: '30%', right: '15%' }}>01001001 01110000 01110011 01110101 01101101</div>
+          <div className={style.binaryLine} style={{ bottom: '30%', right: '15%' }}>01001001 01110000 01110011 01110101 01101101</div>
-          <div className="binary-line" style={{ top: '50%', left: '80%' }}>01000100 01101111 01101100 01101111 01110010</div>
+          <div className={style.binaryLine} style={{ top: '50%', left: '80%' }}>01000100 01101111 01101100 01101111 01110010</div>
-          <div className="binary-line" style={{ bottom: '10%', left: '40%' }}>01010011 01101001 01110100 00100000 01000001 01101101 01100101 01110100</div>
+          <div className={style.binaryLine} style={{ bottom: '10%', left: '40%' }}>01010011 01101001 01110100 00100000 01000001 01101101 01100101 01110100</div>
         </div>
       </div>
     </section>

src/pages/Blog.tsx

@@ -75,9 +75,9 @@ export const Blog = () => {
                       <i className="fas fa-angle-left"></i>
                     </a>
                   </li>
-                  <li className={`page-item ${style.pageItem} active`}><a className="page-link" href="#">1</a></li>
+                  <li className={`page-item ${style.pageItem} ${style.active}`}><a className={`page-link ${style.pageLink}`} href="#">1</a></li>
-                  <li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">2</a></li>
+                  <li className={`page-item ${style.pageItem}`}><a className={`page-link ${style.pageLink}`} href="#">2</a></li>
-                  <li className={`page-item ${style.pageItem}`}><a className="page-link" href="#">3</a></li>
+                  <li className={`page-item ${style.pageItem}`}><a className={`page-link ${style.pageLink}`} href="#">3</a></li>
                   <li className={`page-item ${style.pageItem}`}>
                     <a className={`page-link ${style.pageLink}`} href="#" aria-label="Next">
                       <i className="fas fa-angle-right"></i>