feat(mobile): align h5 scenario training design

mobile/public/practice/coach-avatar.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <defs>
+    <linearGradient id="bg" x1="12" y1="8" x2="86" y2="90" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#E9F1FF"/>
+      <stop offset="1" stop-color="#94AAD1"/>
+    </linearGradient>
+  </defs>
+  <circle cx="48" cy="48" r="46" fill="url(#bg)"/>
+  <path d="M22 80c4-19 14-29 26-29s22 10 26 29" fill="#244B78"/>
+  <path d="M31 44c1-16 8-25 17-25s16 9 17 25c1 15-7 27-17 27S30 59 31 44Z" fill="#F1C8A8"/>
+  <path d="M30 36c2-15 9-24 19-24 11 0 18 9 20 24-14-8-26-8-39 0Z" fill="#26334A"/>
+  <path d="M37 49c2-2 5-2 7 0M52 49c2-2 5-2 7 0" stroke="#172235" stroke-width="3" stroke-linecap="round"/>
+  <path d="M37 62c7 4 15 4 22 0" stroke="#172235" stroke-width="3" stroke-linecap="round"/>
+  <path d="M39 56h18" stroke="#6E3D2D" stroke-width="4" stroke-linecap="round"/>
+  <path d="M34 78h28l-4 9H38z" fill="#F8FBFF"/>
+  <path d="M21 80h54l6 14H15z" fill="#1D3E67"/>
+</svg>

mobile/public/practice/customer-avatar.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <defs>
+    <linearGradient id="bg" x1="12" y1="8" x2="86" y2="90" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFE4D7"/>
+      <stop offset="1" stop-color="#FF987A"/>
+    </linearGradient>
+    <linearGradient id="hair" x1="24" y1="14" x2="72" y2="76" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8B3A22"/>
+      <stop offset="1" stop-color="#4B1B12"/>
+    </linearGradient>
+  </defs>
+  <circle cx="48" cy="48" r="46" fill="url(#bg)"/>
+  <path d="M22 82c4-18 14-29 26-29s22 11 26 29" fill="#E9523E"/>
+  <path d="M25 42c0-18 10-30 24-30 15 0 25 12 25 31 0 14-5 25-13 31H35c-7-6-10-18-10-32Z" fill="url(#hair)"/>
+  <path d="M31 46c1-15 8-25 17-25s16 10 17 25c1 15-7 27-17 27S30 61 31 46Z" fill="#FFD0B6"/>
+  <path d="M30 40c9-2 15-8 18-18 4 9 11 14 20 16-2-14-10-22-20-22-12 0-20 9-18 24Z" fill="#6F2B1C"/>
+  <path d="M30 47c-6-1-8 9-2 12M66 47c6-1 8 9 2 12" stroke="#F2B391" stroke-width="4" stroke-linecap="round"/>
+  <path d="M36 44c4-4 8-4 12-1M60 44c-4-4-8-4-12-1" stroke="#2E1C17" stroke-width="3" stroke-linecap="round"/>
+  <circle cx="40" cy="51" r="3" fill="#2E1C17"/>
+  <circle cx="56" cy="51" r="3" fill="#2E1C17"/>
+  <ellipse cx="48" cy="63" rx="8" ry="6" fill="#8E1F1C"/>
+  <path d="M42 60h12" stroke="#FFF2EA" stroke-width="2" stroke-linecap="round"/>
+  <path d="M36 78h24l-4 9H40z" fill="#FFF7F2"/>
+  <path d="M23 82h50l6 14H17z" fill="#D94133"/>
+</svg>

mobile/public/practice/trainee-avatar.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+  <defs>
+    <linearGradient id="bg" x1="12" y1="8" x2="86" y2="90" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#DDF8F2"/>
+      <stop offset="1" stop-color="#5CC9B5"/>
+    </linearGradient>
+  </defs>
+  <circle cx="48" cy="48" r="46" fill="url(#bg)"/>
+  <path d="M23 80c3-19 13-29 25-29s22 10 25 29" fill="#2072B8"/>
+  <path d="M31 44c1-16 8-24 17-24s16 8 17 24c1 15-7 27-17 27S30 59 31 44Z" fill="#FFD2B8"/>
+  <path d="M28 31c4-11 12-18 22-18 12 0 20 8 23 19-14-1-27-4-45-1Z" fill="#19558D"/>
+  <path d="M26 31h46v12H26z" fill="#2E7CCD"/>
+  <path d="M39 25h18v8H39z" fill="#D9ECFF"/>
+  <circle cx="40" cy="49" r="3" fill="#172235"/>
+  <circle cx="56" cy="49" r="3" fill="#172235"/>
+  <path d="M40 60c5 4 11 4 16 0" stroke="#172235" stroke-width="4" stroke-linecap="round"/>
+  <path d="M34 79h28l-5 8H39z" fill="#F8FBFF"/>
+</svg>