feat: add initial mobile layout for earn and burn

components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css

@@ -1,14 +1,14 @@
 .card {
-  background-color: var(--Base-Fill-Normal);
-  border-radius: 16px;
-  color: var(--Theme-Primary-Light-On-Surface-Text);
+  background-color: var(--Main-Grey-10);
+  border-radius: var(--Corner-radius-xLarge);
+  color: var(--Main-Brand-Burgundy);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
+  gap: var(--Spacing-x2);
 }
 
 .points {
-  font-size: var(--typography-Title2-Desktop-fontSize);
+  font-size: var(--typography-Title-2-Desktop-fontSize);
   margin: 0;
 }

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,19 +1,32 @@
 import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/MyPages/Blocks/Header"
+
 import styles from "./currentPointsBalance.module.css"
 
-async function CurrentPointsBalance() {
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+async function CurrentPointsBalance({
+  title,
+  subtitle,
+  link,
+  lang,
+}: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   return (
-    <div className={styles.card}>
-      <h2>{`${_("Total points")}*`}</h2>
-      <p
-        className={styles.points}
-      >{`${_("Points")}: ${user.membership?.currentPoints || "N/A"}`}</p>
-      <p className={styles.disclaimer}>
-        {`*${_("Points may take up to 10 days to be displayed.")}`}
-      </p>
+    <div>
+      <Header title={title} link={link} subtitle={subtitle} />
+
+      <div className={styles.card}>
+        <h2>{`${_("Total points")}*`}</h2>
+        <p
+          className={styles.points}
+        >{`${_("Points")}: ${user.membership?.currentPoints || "N/A"}`}</p>
+        <p className={styles.disclaimer}>
+          {`*${_("Points may take up to 10 days to be displayed.")}`}
+        </p>
+      </div>
     </div>
   )
 }