feat(WEB-250): overview hero final ui

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

@@ -0,0 +1,26 @@
+import Title from "@/components/TempDesignSystem/Title"
+
+import Label from "../Label"
+
+import styles from "./totalPoints.module.css"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default function Points({ user }: UserProps) {
+  return (
+    <section className={styles.points}>
+      <article>
+        <Label>Total Points</Label>
+        <Title color="pale" level="h2">
+          {user.membership ? user.membership.currentPoints : "N/A"}
+        </Title>
+      </article>
+      <article>
+        <Label>Points until next level</Label>
+        <Title color="pale" level="h2">
+          {user.membership ? user.membership.currentPoints : "N/A"}
+        </Title>
+      </article>
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/Stats/Points/totalPoints.module.css

@@ -0,0 +1,11 @@
+.points {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
+}
+
+@media screen and (min-width: 768px) {
+  .points {
+    grid-template-columns: 1fr 1fr;
+  }
+}