diff --git a/docs/static/translations.json b/docs/static/translations.json
index bce36cfcc..bea71924b 100644
--- a/docs/static/translations.json
+++ b/docs/static/translations.json
@@ -77,11 +77,19 @@
"identity_verified_id": "VERIFIED ID",
"identity_verified_on": "Verified On",
"identity_your_ename": "Your eName",
+ "info_binding_diagram_documents": "Binding\nDocuments",
+ "info_binding_diagram_lost": "If lost\neID app",
+ "info_binding_diagram_user": "User with\neID app",
"info_binding_p1": "Link binding documents to strengthen the connection between your Digital and Real Selves. Upload verifiable artifacts to your eVault, such as official documents, photos, or confirmations from friends and family, so you can prove ownership of your eVault if needed.",
"info_binding_p2": "Unlike the usual Web 2.0 approach, where platforms make you create an account and upload your data to them, in W3DS, you have your own sovereign account — your Digital Self — and you control who can access your data. With sovereignty comes responsibility.",
"info_binding_p3": "By default, your Digital Self is tied to your Real Self via the eID App, so if anything happens to your phone, you may lose control over your data. However, if your personal artifacts — documents, photos, and social confirmations — are stored in your eVault, you can prove ownership of your Digital Self and regain control over your data.",
"info_binding_title": "Binding documents",
"info_binding_why": "Why it's important:",
+ "info_evault_diagram_business": "Business",
+ "info_evault_diagram_government": "Government",
+ "info_evault_diagram_people": "People",
+ "info_evault_diagram_platforms": "Platforms",
+ "info_evault_diagram_your_data": "Your Data",
"info_evault_p1": "eVault is your sovereign and secure storage. It holds all your data: photos, documents, social media posts, messages to friends, and more. Since your data is now stored by you, not platforms, you can easily switch between services.",
"info_evault_p2": "For example, if you don't like one messenger, simply switch to another, and all your messages, chats, and friends will still be there, because your data is stored with you, and the app only gets temporary permission to access it.",
"info_evault_title": "What is eVault?",
@@ -617,11 +625,19 @@
"identity_verified_id": "ПОДТВЕРЖДЁННЫЙ ID",
"identity_verified_on": "Подтверждён",
"identity_your_ename": "Ваш eName",
+ "info_binding_diagram_documents": "Связывающие\nдокументы",
+ "info_binding_diagram_lost": "Если приложение\neID утеряно",
+ "info_binding_diagram_user": "Пользователь\nприложения eID",
"info_binding_p1": "Добавляйте связывающие документы, чтобы усилить связь между вашими Цифровым и Реальным Я. Загружайте в eVault проверяемые артефакты — официальные документы, фотографии или подтверждения от друзей и родных, — чтобы при необходимости доказать право на свой eVault.",
"info_binding_p2": "В отличие от привычного подхода Web 2.0, где платформы заставляют вас создавать аккаунт и загружать данные к ним, в W3DS у вас есть собственный суверенный аккаунт — ваше Цифровое Я — и вы решаете, кто получит доступ к вашим данным. Вместе с суверенитетом приходит и ответственность.",
"info_binding_p3": "По умолчанию ваше Цифровое Я связано с Реальным через приложение eID, поэтому если с телефоном что-то случится, вы можете потерять контроль над данными. Но если ваши личные артефакты — документы, фотографии и социальные подтверждения — хранятся в eVault, вы сможете доказать право на своё Цифровое Я и вернуть контроль над данными.",
"info_binding_title": "Связывающие документы",
"info_binding_why": "Почему это важно:",
+ "info_evault_diagram_business": "Бизнес",
+ "info_evault_diagram_government": "Правительство",
+ "info_evault_diagram_people": "Люди",
+ "info_evault_diagram_platforms": "Платформы",
+ "info_evault_diagram_your_data": "Ваши\nданные",
"info_evault_p1": "eVault — это ваше суверенное и защищённое хранилище. В нём находятся все ваши данные: фотографии, документы, публикации в соцсетях, сообщения друзьям и многое другое. Поскольку теперь данные хранятся у вас, а не у платформ, вы легко можете переходить с одного сервиса на другой.",
"info_evault_p2": "Например, если вам не нравится какой-то мессенджер, просто перейдите в другой — все ваши сообщения, чаты и друзья останутся на месте, потому что данные хранятся у вас, а приложение получает лишь временное разрешение на доступ к ним.",
"info_evault_title": "Что такое eVault?",
@@ -1157,11 +1173,19 @@
"identity_verified_id": "ПІДТВЕРДЖЕНИЙ ID",
"identity_verified_on": "Підтверджено",
"identity_your_ename": "Ваш eName",
+ "info_binding_diagram_documents": "Зв’язувальні\nдокументи",
+ "info_binding_diagram_lost": "Якщо додаток\neID втрачено",
+ "info_binding_diagram_user": "Користувач\nдодатка eID",
"info_binding_p1": "Додавайте зв’язувальні документи, щоб посилити зв’язок між вашими Цифровим та Реальним Я. Завантажуйте в eVault перевірювані артефакти — офіційні документи, фотографії чи підтвердження від друзів і рідних, — щоб за потреби довести право на свій eVault.",
"info_binding_p2": "На відміну від звичного підходу Web 2.0, де платформи змушують вас створювати обліковий запис і завантажувати дані до них, у W3DS ви маєте власний суверенний обліковий запис — ваше Цифрове Я — і самі вирішуєте, хто отримає доступ до ваших даних. Разом із суверенітетом приходить і відповідальність.",
"info_binding_p3": "За умовчанням ваше Цифрове Я пов’язане з Реальним через застосунок eID, тож якщо з телефоном щось станеться, ви можете втратити контроль над даними. Але якщо ваші особисті артефакти — документи, фотографії та соціальні підтвердження — зберігаються в eVault, ви зможете довести право на своє Цифрове Я і повернути контроль над даними.",
"info_binding_title": "Зв’язувальні документи",
"info_binding_why": "Чому це важливо:",
+ "info_evault_diagram_business": "Бізнес",
+ "info_evault_diagram_government": "Уряд",
+ "info_evault_diagram_people": "Люди",
+ "info_evault_diagram_platforms": "Платформи",
+ "info_evault_diagram_your_data": "Ваші дані",
"info_evault_p1": "eVault — це ваше суверенне та захищене сховище. У ньому зберігаються всі ваші дані: фотографії, документи, дописи в соцмережах, повідомлення друзям тощо. Оскільки тепер дані зберігаються у вас, а не в платформ, ви легко можете переходити між сервісами.",
"info_evault_p2": "Наприклад, якщо вам не подобається якийсь месенджер, просто перейдіть в інший — усі ваші повідомлення, чати та друзі залишаться на місці, адже дані зберігаються у вас, а застосунок отримує лише тимчасовий дозвіл на доступ до них.",
"info_evault_title": "Що таке eVault?",
diff --git a/infrastructure/eid-wallet/messages/en.json b/infrastructure/eid-wallet/messages/en.json
index 02041cec7..954082143 100644
--- a/infrastructure/eid-wallet/messages/en.json
+++ b/infrastructure/eid-wallet/messages/en.json
@@ -75,11 +75,19 @@
"identity_verified_id": "VERIFIED ID",
"identity_verified_on": "Verified On",
"identity_your_ename": "Your eName",
+ "info_binding_diagram_documents": "Binding\nDocuments",
+ "info_binding_diagram_lost": "If lost\neID app",
+ "info_binding_diagram_user": "User with\neID app",
"info_binding_p1": "Link binding documents to strengthen the connection between your Digital and Real Selves. Upload verifiable artifacts to your eVault, such as official documents, photos, or confirmations from friends and family, so you can prove ownership of your eVault if needed.",
"info_binding_p2": "Unlike the usual Web 2.0 approach, where platforms make you create an account and upload your data to them, in W3DS, you have your own sovereign account — your Digital Self — and you control who can access your data. With sovereignty comes responsibility.",
"info_binding_p3": "By default, your Digital Self is tied to your Real Self via the eID App, so if anything happens to your phone, you may lose control over your data. However, if your personal artifacts — documents, photos, and social confirmations — are stored in your eVault, you can prove ownership of your Digital Self and regain control over your data.",
"info_binding_title": "Binding documents",
"info_binding_why": "Why it's important:",
+ "info_evault_diagram_business": "Business",
+ "info_evault_diagram_government": "Government",
+ "info_evault_diagram_people": "People",
+ "info_evault_diagram_platforms": "Platforms",
+ "info_evault_diagram_your_data": "Your Data",
"info_evault_p1": "eVault is your sovereign and secure storage. It holds all your data: photos, documents, social media posts, messages to friends, and more. Since your data is now stored by you, not platforms, you can easily switch between services.",
"info_evault_p2": "For example, if you don't like one messenger, simply switch to another, and all your messages, chats, and friends will still be there, because your data is stored with you, and the app only gets temporary permission to access it.",
"info_evault_title": "What is eVault?",
diff --git a/infrastructure/eid-wallet/messages/ru.json b/infrastructure/eid-wallet/messages/ru.json
index 8f37761cf..ae2176470 100644
--- a/infrastructure/eid-wallet/messages/ru.json
+++ b/infrastructure/eid-wallet/messages/ru.json
@@ -75,11 +75,19 @@
"identity_verified_id": "ПОДТВЕРЖДЁННЫЙ ID",
"identity_verified_on": "Подтверждён",
"identity_your_ename": "Ваш eName",
+ "info_binding_diagram_documents": "Связывающие\nдокументы",
+ "info_binding_diagram_lost": "Если приложение\neID утеряно",
+ "info_binding_diagram_user": "Пользователь\nприложения eID",
"info_binding_p1": "Добавляйте связывающие документы, чтобы усилить связь между вашими Цифровым и Реальным Я. Загружайте в eVault проверяемые артефакты — официальные документы, фотографии или подтверждения от друзей и родных, — чтобы при необходимости доказать право на свой eVault.",
"info_binding_p2": "В отличие от привычного подхода Web 2.0, где платформы заставляют вас создавать аккаунт и загружать данные к ним, в W3DS у вас есть собственный суверенный аккаунт — ваше Цифровое Я — и вы решаете, кто получит доступ к вашим данным. Вместе с суверенитетом приходит и ответственность.",
"info_binding_p3": "По умолчанию ваше Цифровое Я связано с Реальным через приложение eID, поэтому если с телефоном что-то случится, вы можете потерять контроль над данными. Но если ваши личные артефакты — документы, фотографии и социальные подтверждения — хранятся в eVault, вы сможете доказать право на своё Цифровое Я и вернуть контроль над данными.",
"info_binding_title": "Связывающие документы",
"info_binding_why": "Почему это важно:",
+ "info_evault_diagram_business": "Бизнес",
+ "info_evault_diagram_government": "Правительство",
+ "info_evault_diagram_people": "Люди",
+ "info_evault_diagram_platforms": "Платформы",
+ "info_evault_diagram_your_data": "Ваши\nданные",
"info_evault_p1": "eVault — это ваше суверенное и защищённое хранилище. В нём находятся все ваши данные: фотографии, документы, публикации в соцсетях, сообщения друзьям и многое другое. Поскольку теперь данные хранятся у вас, а не у платформ, вы легко можете переходить с одного сервиса на другой.",
"info_evault_p2": "Например, если вам не нравится какой-то мессенджер, просто перейдите в другой — все ваши сообщения, чаты и друзья останутся на месте, потому что данные хранятся у вас, а приложение получает лишь временное разрешение на доступ к ним.",
"info_evault_title": "Что такое eVault?",
diff --git a/infrastructure/eid-wallet/messages/uk.json b/infrastructure/eid-wallet/messages/uk.json
index 75bde60e0..349f33e04 100644
--- a/infrastructure/eid-wallet/messages/uk.json
+++ b/infrastructure/eid-wallet/messages/uk.json
@@ -75,11 +75,19 @@
"identity_verified_id": "ПІДТВЕРДЖЕНИЙ ID",
"identity_verified_on": "Підтверджено",
"identity_your_ename": "Ваш eName",
+ "info_binding_diagram_documents": "Зв’язувальні\nдокументи",
+ "info_binding_diagram_lost": "Якщо додаток\neID втрачено",
+ "info_binding_diagram_user": "Користувач\nдодатка eID",
"info_binding_p1": "Додавайте зв’язувальні документи, щоб посилити зв’язок між вашими Цифровим та Реальним Я. Завантажуйте в eVault перевірювані артефакти — офіційні документи, фотографії чи підтвердження від друзів і рідних, — щоб за потреби довести право на свій eVault.",
"info_binding_p2": "На відміну від звичного підходу Web 2.0, де платформи змушують вас створювати обліковий запис і завантажувати дані до них, у W3DS ви маєте власний суверенний обліковий запис — ваше Цифрове Я — і самі вирішуєте, хто отримає доступ до ваших даних. Разом із суверенітетом приходить і відповідальність.",
"info_binding_p3": "За умовчанням ваше Цифрове Я пов’язане з Реальним через застосунок eID, тож якщо з телефоном щось станеться, ви можете втратити контроль над даними. Але якщо ваші особисті артефакти — документи, фотографії та соціальні підтвердження — зберігаються в eVault, ви зможете довести право на своє Цифрове Я і повернути контроль над даними.",
"info_binding_title": "Зв’язувальні документи",
"info_binding_why": "Чому це важливо:",
+ "info_evault_diagram_business": "Бізнес",
+ "info_evault_diagram_government": "Уряд",
+ "info_evault_diagram_people": "Люди",
+ "info_evault_diagram_platforms": "Платформи",
+ "info_evault_diagram_your_data": "Ваші дані",
"info_evault_p1": "eVault — це ваше суверенне та захищене сховище. У ньому зберігаються всі ваші дані: фотографії, документи, дописи в соцмережах, повідомлення друзям тощо. Оскільки тепер дані зберігаються у вас, а не в платформ, ви легко можете переходити між сервісами.",
"info_evault_p2": "Наприклад, якщо вам не подобається якийсь месенджер, просто перейдіть в інший — усі ваші повідомлення, чати та друзі залишаться на місці, адже дані зберігаються у вас, а застосунок отримує лише тимчасовий дозвіл на доступ до них.",
"info_evault_title": "Що таке eVault?",
diff --git a/infrastructure/eid-wallet/src/lib/fragments/LabelledIllustration/LabelledIllustration.svelte b/infrastructure/eid-wallet/src/lib/fragments/LabelledIllustration/LabelledIllustration.svelte
new file mode 100644
index 000000000..04178fb1a
--- /dev/null
+++ b/infrastructure/eid-wallet/src/lib/fragments/LabelledIllustration/LabelledIllustration.svelte
@@ -0,0 +1,89 @@
+
+
+
+
+
+
diff --git a/infrastructure/eid-wallet/src/lib/fragments/index.ts b/infrastructure/eid-wallet/src/lib/fragments/index.ts
index 482770ac6..ea761d9f0 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/index.ts
+++ b/infrastructure/eid-wallet/src/lib/fragments/index.ts
@@ -1,4 +1,5 @@
export { default as Hero } from "./Hero/Hero.svelte";
export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
+export { default as LabelledIllustration } from "./LabelledIllustration/LabelledIllustration.svelte";
export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
export { default as AppNav } from "./AppNav/AppNav.svelte";
diff --git a/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte b/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
index f92c1d521..6f6af1aca 100644
--- a/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
+++ b/infrastructure/eid-wallet/src/routes/(app)/main/+page.svelte
@@ -34,6 +34,7 @@ import {
subscribe as subscribeNotifications,
} from "$lib/stores/notifications";
import NotificationService from "$lib/services/NotificationService";
+import { LabelledIllustration } from "$lib/fragments";
import { BottomSheet, ButtonAction, Toast } from "$lib/ui";
import { m } from "$lib/i18n";
import { getLocale } from "$lib/paraglide/runtime";
@@ -110,6 +111,24 @@ let editNameOpen = $state(false);
let editNameSaving = $state(false);
let editNameError = $state(null);
let kycOpen = $state(false);
+// Coordinates are in the illustration's own pixel space. eVault and eID are
+// product names and stay as they are in every language.
+const eVaultDiagram = $derived([
+ { x: 702, y: 290, text: m.info_evault_diagram_your_data(), maxWidth: 266 },
+ { x: 692, y: 524, text: "eVault" },
+ { x: 244, y: 756, text: m.info_evault_diagram_platforms(), maxWidth: 440 },
+ { x: 1174, y: 758, text: m.info_evault_diagram_business(), maxWidth: 412 },
+ { x: 445, y: 1130, text: m.info_evault_diagram_government(), maxWidth: 420 },
+ { x: 915, y: 1130, text: m.info_evault_diagram_people(), maxWidth: 420 },
+]);
+
+const bindingDiagram = $derived([
+ { x: 1040, y: 652, text: m.info_binding_diagram_documents(), maxWidth: 317 },
+ { x: 706, y: 836, text: "eVault" },
+ { x: 285, y: 1360, text: m.info_binding_diagram_user(), maxWidth: 520 },
+ { x: 1142, y: 1357, text: m.info_binding_diagram_lost(), maxWidth: 450 },
+]);
+
let eVaultInfoOpen = $state(false);
let bindingDocsInfoOpen = $state(false);
let socialDrawerOpen = $state(false);
@@ -1173,11 +1192,11 @@ async function refreshBindings(): Promise {
{#snippet body()}
-
