feat(WEB-250): overview hero final ui

components/MyPages/Blocks/Header/header.module.css

@@ -1,20 +1,20 @@
 .header {
   display: grid;
-  grid-template-areas:
-    "title link"
-    "subtitle subtitle";
-  grid-template-columns: 1fr max-content;
-  gap: 1.5rem;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr auto;
 }
 
 .title {
-  grid-area: title;
+  grid-column: 1/2;
+  grid-row: 1/2;
 }
 
 .link {
-  grid-area: link;
+  grid-column: 2/-1;
+  grid-row: 1/2;
 }
 
 .subtitle {
-  grid-area: subtitle;
+  grid-column: 1/-1;
+  grid-row: 2;
 }

components/MyPages/Blocks/Header/index.tsx

@@ -1,37 +1,32 @@
-import Link from "next/link"
-
-import Title from "@/components/Title"
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Subtitle"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./header.module.css"
 
 import type { HeaderProps } from "@/types/components/myPages/stays/title"
 
-export default function Header({ title, subtitle, link }: HeaderProps) {
+export default function Header({
+  link,
+  subtitle,
+  title,
+  topTitle = false,
+}: HeaderProps) {
   return (
-    <>
-      <header className={styles.header}>
-        {title && (
-          <Title
-            as="h3"
-            level="h2"
-            className={styles.title}
-            weight="medium"
-            uppercase
-          >
-            {title}
-          </Title>
-        )}
-        {link && (
-          <Link className={styles.link} href={link.href}>
-            {link.text}
-          </Link>
-        )}
-        {subtitle && (
-          <Title as="h5" weight="regular" className={styles.subtitle}>
-            {subtitle}
-          </Title>
-        )}
-      </header>
-    </>
+    <header className={styles.header}>
+      <Title
+        as={topTitle ? "h2" : "h3"}
+        className={styles.title}
+        level={topTitle ? "h1" : "h2"}
+      >
+        {title}
+      </Title>
+      {link && (
+        <Link className={styles.link} href={link.href}>
+          {link.text}
+        </Link>
+      )}
+      <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>
+    </header>
   )
 }