feat(WEB-250): overview hero final ui

components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx

@@ -0,0 +1,22 @@
+import { _ } from "@/lib/translation"
+
+import BiroScript from "@/components/TempDesignSystem/BiroScript"
+import Title from "@/components/TempDesignSystem/Title"
+
+import Label from "../Label"
+
+import styles from "./nextLevel.module.css"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default function NextLevel({}: UserProps) {
+  return (
+    <section>
+      <Label>{_("Next level")}:</Label>
+      <Title className={styles.nextLevel} color="pale" level="h3">
+        {_("Close friend")}
+        <BiroScript>{_("Coming up")}!</BiroScript>
+      </Title>
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/Stats/NextLevel/nextLevel.module.css

@@ -0,0 +1,12 @@
+.nextLevel {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+@media screen and (min-width: 768px) {
+  .nextLevel {
+    gap: var(--Spacing-x1);
+    grid-template-columns: 1fr auto;
+  }
+}