perf: add subtitle for each page

web/src/app/home/components/home-titlebar/HomeTitleBar.tsx

@@ -1,9 +1,16 @@
 import styles from './HomeTittleBar.module.css';
 
-export default function HomeTitleBar({ title }: { title: string }) {
+export default function HomeTitleBar({
+  title,
+  subtitle,
+}: {
+  title: string;
+  subtitle: string;
+}) {
   return (
     <div className={`${styles.titleBarContainer}`}>
       <div className={`${styles.titleText}`}>{title}</div>
+      <div className={`${styles.subtitleText}`}>{subtitle}</div>
     </div>
   );
 }

web/src/app/home/components/home-titlebar/HomeTittleBar.module.css

@@ -5,14 +5,20 @@
     opacity: 1;
     font-size: 20px;
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    background-color: #fafafa;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
 }
 
 .titleText {
     margin-left: 3.2rem;
-    font-size: 1.6rem;
+    font-size: 1.4rem;
     font-weight: 500;
     color: #585858;
+}
+
+.subtitleText {
+    margin-left: 3.2rem;
+    font-size: 0.8rem;
+    color: #808080;
 }