feat: e-passport page

Author: grv-saini-20

infrastructure/eid-wallet/src/lib/fragments/IdentifierCard/IdentifierCard.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
     import { ButtonAction } from "$lib/ui";
     import { cn } from "$lib/utils";
     import type { HTMLAttributes } from "svelte/elements";

infrastructure/eid-wallet/src/routes/(auth)/e-passport/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { ButtonAction } from "$lib/ui";
+
+    let usedStorage = $state(50);
+    let totalStorage = $state(90);
+
+    const handleFinish = async() => {
+
+    }
+</script>
+
+
+<main class="h-[100vh] pt-[5.2vh] px-[2.3vw] pb-[4.5vh] flex flex-col justify-between">
+    <section>
+        <h1 class="text-3xl text-black font-semibold mb-[0.5vh]">Your ePassport and eVault are ready</h1>
+        <p class="text-base text-black-700 font-normal mb-[3vh]">Log into any W3DS platform without passwords. It’s tied to this phone; if lost, you’ll need to revoke and reissue it on a new device.</p>
+    </section>
+    <section>
+        <h1 class="text-xl text-black font-semibold mb-[0.5vh]">Your eVault</h1>
+        <p class="text-base text-black-700 font-normal mb-[3vh]">We’ve also created your eVault—secure cloud storage for your personal data. W3DS platforms access it directly, keeping you in control.</p>
+    </section>
+    <section class="bg-gray-900 rounded-[24px] p-[24px]">
+        <div class="flex justify-between items-center mb-[12px]">
+            <p class="text-base font-normal text-black">{usedStorage}GB used</p>
+            <p class="text-base font-normal text-black">{totalStorage}GB total storage</p>
+        </div>
+        <progress class="progress progress-secondary bg-primary-700 w-full h-[16px] rounded-xl" value={(usedStorage/totalStorage)*100} max="100"></progress>
+    </section>
+    <ButtonAction class="w-full" callback={handleFinish}>Finish</ButtonAction>
+</main>