Add gallery of screens to the shared account case study page

_compress_images_cache.yml

@@ -29,10 +29,6 @@ assets/images/guide/case-studies/case-cash-mobile.png: case-cash-mobile.png
 assets/images/guide/case-studies/[email protected]: [email protected]
 assets/images/guide/case-studies/case-cash.png: case-cash.png
 assets/images/guide/case-studies/[email protected]: [email protected]
-assets/images/guide/case-studies/case-shared-mobile.png: case-shared-mobile.png
-assets/images/guide/case-studies/[email protected]: [email protected]
-assets/images/guide/case-studies/case-shared.png: case-shared.png
-assets/images/guide/case-studies/[email protected]: [email protected]
 assets/images/guide/case-studies/case-studies-mobile.jpg: case-studies-mobile.jpg
 assets/images/guide/case-studies/[email protected]: [email protected]
 assets/images/guide/case-studies/case-studies.jpg: case-studies.jpg
@@ -762,6 +758,49 @@ assets/images/guide/payments/receive/transactions-no-label-context.png: transact
 assets/images/guide/payments/receive/[email protected]: [email protected]
 assets/images/guide/payments/receive/transactions-with-label-context.png: transactions-with-label-context.png
 assets/images/guide/payments/receive/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/shared-account-preview.jpg: shared-account-preview.jpg
+assets/images/guide/case-studies/shared-account/backup-info.png: backup-info.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/change-private-key-scheme.png: change-private-key-scheme.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/continue-later.png: continue-later.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/create-multi-key-wallet.png: create-multi-key-wallet.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/create-recovery-key.png: create-recovery-key.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/create-signing-key.png: create-signing-key.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/creation-complete.png: creation-complete.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/export-wallet.png: export-wallet.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/first.png: first.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/home.png: home.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/import-multi-key.png: import-multi-key.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/import-wallet.png: import-wallet.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/input-recovery-phrase.png: input-recovery-phrase.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/more-information.png: more-information.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/recover-wallet.png: recover-wallet.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/recovery-key-setup.png: recovery-key-setup.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/replace-key.png: replace-key.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/second.png: second.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/settings.png: settings.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/case-shared-mobile.png: case-shared-mobile.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
+assets/images/guide/case-studies/shared-account/case-shared.png: case-shared.png
+assets/images/guide/case-studies/shared-account/[email protected]: [email protected]
 assets/images/guide/case-studies/upgradeable-wallet/advanced-options.png: advanced-options.png
 assets/images/guide/case-studies/upgradeable-wallet/[email protected]: [email protected]
 assets/images/guide/case-studies/upgradeable-wallet/backup-info.png: backup-info.png

guide/case-studies/shared-account.md

@@ -5,7 +5,33 @@ nav_order: 4
 parent: Case studies
 permalink: /guide/case-studies/shared-account/
 main_classes: -no-top-padding
-image: https://bitcoin.design/assets/images/guide/getting-started/getting-started-preview.jpg
+image: https://bitcoin.design/assets/images/guide/case-studies/shared-account/shared-account-preview.jpg
+image_base: /assets/images/guide/case-studies/shared-account/
+images:
+    - file: first
+      alt: App cover screen with a logo, intro and primary call-to-action.
+      caption: A typical app cover screen to welcome users.
+    - file: second
+      alt: Informational app screen about the private key management scheme used.
+      caption: Provide users with information about the scheme and the next steps they are about to take.
+    - file: create-multi-key-wallet
+      alt: 3-step screen with 'Create your key' highlighted.
+      caption: The first key is created directly on the device and stored via automatic cloud backup.
+    - file: create-signing-key
+      alt: 3-step screen with 'Invite account-holder' highlighted.
+      caption: The second key is created and stored by the account co-holder, which requires exchange of keys outside of the app.
+    - file: create-recovery-key
+      alt: 3-step screen with 'Account activation' highlighted.
+      caption: The third key is stored with the wallet provider.
+    - file: recovery-key-setup
+      alt: Summary screen of the recovery key setup process.
+      caption: Guide users through the recovery key creation.
+    - file: creation-complete
+      alt: 3-step screen with all steps checked.
+      caption: Clearly confirm that the wallet was successfully created.
+    - file: home
+      alt: Mobile app screen for the main wallet overview.
+      caption: Once set up, users are navigated to the app home screen.
 ---
 
 <!--
@@ -35,13 +61,37 @@ We are looking for a low friction, easy-to-manage solution that could work for b
 
 {% include prototype.html
    link = "https://www.figma.com/proto/SRWlaxbDulsacpPQn2TTri/Case-study-prototypes?node-id=15%3A824&viewport=333%2C41%2C0.37497082352638245&scaling=scale-down"
-   image = "/assets/images/guide/case-studies/case-shared.png"
-   retina = "/assets/images/guide/case-studies/[email protected]"
-   mobile = "/assets/images/guide/case-studies/case-shared-mobile.png"
-   mobileRetina = "/assets/images/guide/case-studies/[email protected]"
+   image = "/assets/images/guide/case-studies/shared-account/case-shared.png"
+   retina = "/assets/images/guide/case-studies/shared-account/[email protected]"
+   mobile = "/assets/images/guide/case-studies/shared-account/case-shared-mobile.png"
+   mobileRetina = "/assets/images/guide/case-studies/shared-account/[email protected]"
    alt-text = "Image of case study prototype"
    width = 800
    height = 500
 %}
 
+### Onboarding experience
+
+The wireframe screens below show the main onboarding sequence that guides users through wallet creation.
+
+<div class="image-slide-gallery">
+
+{% for item in page.images %}
+
+{% capture imageURL %}{{ page.image_base }}{{ item.file }}.png{% endcapture %}
+{% capture imageURLRetina %}{{ page.image_base }}{{ item.file }}@2x.png{% endcapture %}
+
+{% include picture.html
+   image = imageURL
+   retina = imageURLRetina
+   alt-text = item.alt
+   caption = item.caption
+   width = 250
+   height = 541
+   layout = "shadow"
+%}
+{% endfor %}
+
+</div>
+
 You can find a prototype for this case study linked in the image above, and a Figma file with [outline designs here](https://www.figma.com/file/SRWlaxbDulsacpPQn2TTri/Case-study-prototypes?node-id=15%3A822).