update profile example,

03_source/mobile/src/pages/DemoProfileExample/components/Figure.module.scss

@@ -0,0 +1,26 @@
+.figure {
+  padding: 1rem;
+}
+
+.figure h6 {
+  font-size: 1.5rem;
+  font-weight: 200;
+}
+
+.figure p {
+  color: rgb(255, 255, 255);
+  font-size: 0.9rem;
+  font-weight: 200;
+}
+
+.figure:nth-child(1) {
+  background-color: rgb(157, 163, 141);
+}
+
+.figure:nth-child(2) {
+  background-color: rgb(150, 155, 138);
+}
+
+.figure:nth-child(3) {
+  background-color: rgb(135, 143, 120);
+}

03_source/mobile/src/pages/DemoProfileExample/components/Figure.tsx

@@ -0,0 +1,9 @@
+import { IonCol } from '@ionic/react';
+import styles from './Figure.module.scss';
+
+export const Figure = (props): React.JSX.Element => (
+  <IonCol size="4" className={styles.figure}>
+    <h6>{props.count}</h6>
+    <p>{props.title}</p>
+  </IonCol>
+);

03_source/mobile/src/pages/DemoProfileExample/components/Post.module.scss

@@ -0,0 +1,55 @@
+.post {
+  border-bottom: 1px solid rgb(219, 219, 219);
+  padding-top: 1rem;
+  padding-bottom: 0.2rem;
+
+  p {
+    font-size: 0.9rem;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .postText {
+    color: rgb(107, 112, 97);
+  }
+}
+
+.postAvatar {
+  height: 3.5rem;
+  width: 3.5rem;
+  margin-right: 1rem;
+  border: 3px solid rgba(218, 223, 208, 1);
+}
+
+.postInfo {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-right: 1rem;
+  color: rgb(190, 190, 190);
+}
+
+.postReactions {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1rem;
+  margin-top: 0.5rem;
+  color: rgb(107, 112, 97);
+
+  .postReaction {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.9rem;
+
+    ion-icon {
+      margin-right: 0.5rem;
+    }
+
+    p {
+      padding: 0;
+      margin: 0;
+      font-size: 0.8rem;
+    }
+  }
+}

03_source/mobile/src/pages/DemoProfileExample/components/Post.tsx

@@ -0,0 +1,35 @@
+import { IonAvatar, IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { chatbubbleOutline, heart, heartOutline, shareSocialOutline } from 'ionicons/icons';
+import styles from './Post.module.scss';
+
+export const Post = (props): React.JSX.Element => (
+  <div className={styles.post}>
+    <IonItem lines="none">
+      <IonAvatar className={styles.postAvatar}>
+        <img src="https://pbs.twimg.com/profile_images/1349059994747076610/8dWvipvu_400x400.jpg" />
+      </IonAvatar>
+      <IonLabel className="ion-text-wrap">
+        <div className={styles.postInfo}>
+          <p>{props.post.date}</p>
+          <p>@93alan</p>
+        </div>
+        <p className={styles.postText}>{props.post.text}</p>
+
+        <div className={styles.postReactions}>
+          <div className={styles.postReaction}>
+            <IonIcon icon={chatbubbleOutline} />
+            <p>{props.post.comments}</p>
+          </div>
+          <div className={styles.postReaction}>
+            <IonIcon icon={props.post.liked ? heart : heartOutline} />
+            <p>{props.post.likes}</p>
+          </div>
+
+          <div className={styles.postReaction}>
+            <IonIcon icon={shareSocialOutline} />
+          </div>
+        </div>
+      </IonLabel>
+    </IonItem>
+  </div>
+);