Added header and screen mockups to cloud backup page

_compress_images_cache.yml

@@ -591,3 +591,40 @@ assets/images/guide/getting-started/common-user-flows/sending-ui-basic.png: send
 assets/images/guide/getting-started/common-user-flows/[email protected]: [email protected]
 assets/images/guide/getting-started/common-user-flows/sending-ui-complex.png: sending-ui-complex.png
 assets/images/guide/getting-started/common-user-flows/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/First.png: First.png
+assets/images/guide/case-studies/cloud-backup/advanced-options.png: advanced-options.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/backup-info.png: backup-info.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/balance.png: balance.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/change-private-key-scheme.png: change-private-key-scheme.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/export-wallet.png: export-wallet.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/home.png: home.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/import-wallet.png: import-wallet.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/input-recovery-phrase.png: input-recovery-phrase.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/more-information.png: more-information.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/recovery-phrase.png: recovery-phrase.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/second.png: second.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/settings.png: settings.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/first.png: first.png
+assets/images/guide/case-studies/cloud-backup/case-cash-mobile.png: case-cash-mobile.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/case-cash.png: case-cash.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/cloud-backup-header.jpg: cloud-backup-header.jpg
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/cloud-backup-header-mobile.jpg: cloud-backup-header-mobile.jpg
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/cloud-backup-header-mbile.jpg: cloud-backup-header-mbile.jpg
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]

guide/case-studies/cloud-backup.md

@@ -6,6 +6,44 @@ parent: Case studies
 permalink: /guide/case-studies/cloud-backup/
 main_classes: -no-top-padding
 image: https://bitcoin.design/assets/images/guide/getting-started/getting-started-preview.jpg
+image_base: /assets/images/guide/case-studies/cloud-backup/
+images:
+    - file: first
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: second
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: advanced-options
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: more-information
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: import-wallet
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: input-recovery-phrase
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: backup-info
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: balance
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: settings
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: change-private-key-scheme
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: export-wallet
+      alt:
+      caption: Explain purpose and design of this screen.
+    - file: recovery-phrase
+      alt:
+      caption: Explain purpose and design of this screen.
 ---
 
 <!--
@@ -14,6 +52,17 @@ Editor's notes
 
 -->
 
+{% include picture.html
+   image = "/assets/images/guide/case-studies/cloud-backup/cloud-backup-header.jpg"
+   retina = "/assets/images/guide/case-studies/cloud-backup/cloud-[email protected]"
+   mobile = "/assets/images/guide/case-studies/cloud-backup/cloud-backup-header-mobile.jpg"
+   mobileRetina = "/assets/images/guide/case-studies/cloud-backup/cloud-[email protected]"
+   alt-text = ""
+   width = 1600
+   height = 571
+   layout = "full-width"
+%}
+
 ## Cash account / Daily spending
 
 Imagine a product which tries to solve the problem of quickly and easily sending smaller amounts of money to friends and family, or for small purchases. Ease and speed of use will be important as usage is likely to be on mobile devices and on the go. Users are not expected to be well versed in bitcoin technology or advanced private key management, which makes it reasonable to worry more about self-inflicted loss than from theft.
@@ -22,10 +71,10 @@ A single-key scheme with [automatic cloud backup]({{ '/guide/private-key-managem
 
 {% include prototype.html
    link = "https://www.figma.com/proto/SRWlaxbDulsacpPQn2TTri/Case-study-prototypes?node-id=1%3A3&viewport=1357%2C576%2C1&scaling=scale-down"
-   image = "/assets/images/guide/case-studies/case-cash.png"
-   retina = "/assets/images/guide/case-studies/case-[email protected]"
-   mobile = "/assets/images/guide/case-studies/case-cash-mobile.png"
-   mobileRetina = "/assets/images/guide/case-studies/case-[email protected]"
+   image = "/assets/images/guide/case-studies/cloud-backup/case-cash.png"
+   retina = "/assets/images/guide/case-studies/cloud-backup/case-[email protected]"
+   mobile = "/assets/images/guide/case-studies/cloud-backup/case-cash-mobile.png"
+   mobileRetina = "/assets/images/guide/case-studies/cloud-backup/case-[email protected]"
    alt-text = "Image of case study prototype"
    width = 800
    height = 500
@@ -42,4 +91,26 @@ A single-key scheme with [automatic cloud backup]({{ '/guide/private-key-managem
 - Additional user authentication to consider: biometrics, pin
 - Upgrade-path to other schemes if funds stored increase
 
+### Design details
+
+<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=0%3A1).