feat: enhance UI, branding assets, onboarding flow, and screen layouts

assets/art/onboarding_find_work.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 520" preserveAspectRatio="xMidYMid slice">
+  <rect width="390" height="520" style="fill:#3752A8"/>
+  <circle cx="252" cy="178" r="168" style="fill:#6486D8"/>
+  <!-- light beams -->
+  <path d="M96 118 L166 118 L206 300 L56 300 Z" style="fill:#F5C842" opacity=".13"/>
+  <path d="M244 96 L314 96 L354 300 L204 300 Z" style="fill:#F5C842" opacity=".13"/>
+  <!-- pendants -->
+  <rect x="129" y="0" width="4" height="62" style="fill:#F5C842" opacity=".55"/>
+  <rect x="277" y="0" width="4" height="40" style="fill:#F5C842" opacity=".55"/>
+  <path d="M100 118 L162 118 L150 62 L112 62 Z" style="fill:#F5C842"/>
+  <ellipse cx="131" cy="118" rx="31" ry="7" style="fill:#FDF3D8"/>
+  <path d="M248 96 L310 96 L298 40 L260 40 Z" style="fill:#F5C842"/>
+  <ellipse cx="279" cy="96" rx="31" ry="7" style="fill:#FDF3D8"/>
+  <!-- barista silhouette -->
+  <circle cx="205" cy="228" r="38" style="fill:#22366F"/>
+  <path d="M205 274c-46 0-78 30-86 78h172c-8-48-40-78-86-78Z" style="fill:#22366F"/>
+  <path d="M186 274h38v78h-38Z" style="fill:#E1E6F4"/>
+  <!-- counter -->
+  <rect x="0" y="352" width="390" height="14" style="fill:#CFDDD3"/>
+  <rect x="0" y="366" width="390" height="154" style="fill:#CFDDD3"/>
+  <!-- espresso machine -->
+  <rect x="20" y="256" width="118" height="96" rx="12" style="fill:#26353E"/>
+  <rect x="34" y="272" width="90" height="30" rx="7" style="fill:#65727A"/>
+  <circle cx="52" cy="326" r="9" style="fill:#F5C842"/>
+  <circle cx="80" cy="326" r="9" style="fill:#949FA5"/>
+  <rect x="98" y="340" width="30" height="8" rx="4" style="fill:#949FA5"/>
+  <!-- cup + steam -->
+  <path d="M262 318h52v22a14 14 0 0 1-14 14h-24a14 14 0 0 1-14-14Z" fill="#FFFFFF"/>
+  <path d="M314 322h10a10 10 0 0 1 0 20h-10" fill="none" stroke="#FFFFFF" stroke-width="6"/>
+  <ellipse cx="288" cy="352" rx="34" ry="6" style="fill:#CFDDD3"/>
+  <path d="M278 306c-8-10 8-16 0-26M292 306c-8-10 8-16 0-26" stroke="#FFFFFF" stroke-width="4.5"
+  stroke-linecap="round" fill="none" opacity=".65"/>
+  </svg>

assets/art/onboarding_get_paid.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 520" preserveAspectRatio="xMidYMid slice">
+  <rect width="390" height="520" style="fill:#3752A8"/>
+  <circle cx="196" cy="212" r="180" style="fill:#6486D8"/>
+  <!-- clock -->
+  <circle cx="196" cy="206" r="118" style="fill:#F5C842"/>
+  <circle cx="196" cy="206" r="100" fill="none" style="stroke:#22366F" stroke-width="4" opacity=".25"/>
+  <g style="fill:#22366F" opacity=".55">
+  <rect x="193" y="98" width="6" height="16" rx="3"/>
+  <rect x="193" y="298" width="6" height="16" rx="3"/>
+  <rect x="88" y="203" width="16" height="6" rx="3"/>
+  <rect x="288" y="203" width="16" height="6" rx="3"/>
+  </g>
+  <path d="M196 206V136" style="stroke:#22366F" stroke-width="11" stroke-linecap="round"/>
+  <path d="M196 206l50 30" style="stroke:#22366F" stroke-width="11" stroke-linecap="round"/>
+  <circle cx="196" cy="206" r="9" style="fill:#22366F"/>
+  <!-- location pin -->
+  <path d="M92 350c0 34-38 62-38 62s-38-28-38-62a38 38 0 0 1 76 0Z" fill="#FFFFFF"
+  transform="translate(24 12)"/>
+  <circle cx="78" cy="360" r="14" style="fill:#3752A8"/>
+  <!-- phone -->
+  <rect x="238" y="330" width="104" height="170" rx="20" style="fill:#CFDDD3"/>
+  <rect x="250" y="346" width="80" height="138" rx="12" fill="#FFFFFF"/>
+  <rect x="262" y="366" width="56" height="9" rx="4.5" style="fill:#C4D4C9"/>
+  <rect x="262" y="386" width="40" height="9" rx="4.5" style="fill:#C4D4C9"/>
+  <rect x="262" y="416" width="56" height="26" rx="9" style="fill:#3752A8"/>
+  </svg>

assets/art/onboarding_know_your_pay.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 390 520" preserveAspectRatio="xMidYMid slice">
+  <rect width="390" height="520" style="fill:#3752A8"/>
+  <circle cx="128" cy="150" r="150" style="fill:#6486D8"/>
+  <!-- coin -->
+  <circle cx="272" cy="150" r="86" style="fill:#F5C842"/>
+  <circle cx="272" cy="150" r="72" fill="none" style="stroke:#22366F" stroke-width="5" opacity=".35"/>
+  <text x="272" y="150" text-anchor="middle" dominant-baseline="central"
+  font-family="Poppins" font-weight="800" font-size="84" style="fill:#22366F">$</text>
+  <circle cx="118" cy="92" r="15" style="fill:#CFDDD3" opacity=".5"/>
+  <circle cx="336" cy="272" r="10" style="fill:#CFDDD3" opacity=".5"/>
+  <!-- the docket, tilted -->
+  <g transform="rotate(-8 190 356)">
+  <rect x="44" y="258" width="292" height="196" rx="22" fill="#FFFFFF"/>
+  <rect x="44" y="258" width="11" height="196" rx="5" style="fill:#F5C842"/>
+  <rect x="78" y="290" width="128" height="15" rx="7" style="fill:#26353E"/>
+  <rect x="78" y="316" width="92" height="11" rx="5" style="fill:#CFDDD3"/>
+  <g style="fill:#C4D4C9">
+  <circle cx="86" cy="360" r="3"/><circle cx="102" cy="360" r="3"/><circle cx="118" cy="360" r="3"/>
+  <circle cx="134" cy="360" r="3"/><circle cx="150" cy="360" r="3"/><circle cx="166" cy="360" r="3"/>
+  <circle cx="182" cy="360" r="3"/><circle cx="198" cy="360" r="3"/><circle cx="214" cy="360" r="3"/>
+  <circle cx="230" cy="360" r="3"/><circle cx="246" cy="360" r="3"/><circle cx="262" cy="360" r="3"/>
+  <circle cx="278" cy="360" r="3"/><circle cx="294" cy="360" r="3"/><circle cx="310" cy="360" r="3"/>
+  </g>
+  <circle cx="44" cy="360" r="15" style="fill:#22366F"/>
+  <circle cx="336" cy="360" r="15" style="fill:#22366F"/>
+  <rect x="78" y="392" width="76" height="11" rx="5" style="fill:#CFDDD3"/>
+  <text x="302" y="404" text-anchor="end" font-family="Poppins" font-weight="800"
+  font-size="30" style="fill:#3752A8">$121.80</text>
+  </g>
+  </svg>