Refactor hash-generator page structure and components

src/pages/hash-generator.astro

@@ -1,16 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { FiHash } from 'solid-icons/fi'
-import HashGeneratorComponent from '../components/Hash-Generator/HashGeneratorComponent.tsx'
+import HashGeneratorComponent from '../components/PageComponents/Hash-Generator/HashGeneratorComponent.tsx'
+import PageTitle from '../components/PageTitle/PageTitle'
 ---
 
 <Layout title="Hash Generator - AIO Tools">
   <div class="page">
-    <section class="title">
-      <FiHash class="title__icon" opacity={1} />
-      <h1 class="title__text">Hash Generator</h1>
-      <p class="title__description">Convert text to multiple hash formats for secure data transmission.</p>
-    </section>
+    <PageTitle title="Hash Generator" description="Convert text to multiple hash formats for secure data transmission." />
 
     <section class="content">
       <HashGeneratorComponent client:visible />
@@ -22,7 +18,6 @@ import HashGeneratorComponent from '../components/Hash-Generator/HashGeneratorCo
   @use '/src/assets/css/viewport.sass' as view
 
   .page
-    font-family: 'Inter', sans-serif
     text-align: center
     margin: 4rem 0 0 0
     transition: margin 0.4s ease-in-out
@@ -30,21 +25,6 @@ import HashGeneratorComponent from '../components/Hash-Generator/HashGeneratorCo
     @media screen and (max-width: view.$tablet)
       margin-top: 1rem
 
-  .title
-    color: #ffffff
-
-    &__text
-      font-size: clamp(1.2rem, 5vw, 2.4rem)
-      margin-bottom: 1rem
-
-    &__description
-      font-size: clamp(0.5rem, 2vw, 1rem)
-      opacity: 0.6
-      margin-bottom: 3rem
-
-    &__icon
-      font-size: clamp(2rem, 5vw, 4rem)
-
   .content
     display: flex
     justify-content: center