MetaState-Prototype-Project · coodos · Apr 1, 2025 · Mar 31, 2025 · Mar 31, 2025 · MetaState-Prototype-Project
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>
@@ -11,27 +11,27 @@
 @layer base {
 	/* Typography */
 	h1 {
- @apply text-[90px] text-black font-semibold;
+ @apply text-[90px]/[1.5] text-black font-semibold;
 	}
 
 	h2 {
- @apply text-6xl text-black font-semibold;
+ @apply text-6xl/[1.5] text-black font-semibold;
 	}
 
 	h3 {
- @apply text-3xl text-black font-semibold;
+ @apply text-3xl/[1.5] text-black font-semibold;
 	}
 
 	h4 {
- @apply text-xl text-black font-semibold;
+ @apply text-xl/[1.5] text-black font-semibold;
 	}
 
 	p {
- @apply text-base text-black font-normal;
+ @apply text-base/[1.5] text-black font-normal;
 	}
 
 	.small {
- @apply text-xs text-black font-normal;
+ @apply text-xs/[1.5] text-black font-normal;
 	}
 }
 

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import Hero from "./Hero.svelte";
+
+export default {
+	title: "Fragments/Hero",
+	component: Hero,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: Hero;
+ props: ComponentProps<typeof Hero>;
+	}) => ({
+ Component: Hero,
+ props: args,
+	}),
+};
+
+export const Basic = {
+	args: {
+ title: "Create PIN",
+ subtitle: "Create a PIN to protect your wallet",
+	},
+};
+
+export const WithSettings = {
+	args: {
+ title: "Good morning!",
+ subtitle: "Don't forget to drink water.",
+ titleClasses: "-mb-2",
+ showSettings: true,
+	},
+};
@@ -0,0 +1,69 @@
+<script lang="ts">
+import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
+import { Settings02Icon } from "@hugeicons/core-free-icons";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeroProps extends HTMLAttributes<HTMLElement> {
+	title?: string;
+	subtitle?: string;
+	showSettings?: boolean;
+	titleClasses?: string;
+}
+const {
+	title,
+	subtitle,
+	showSettings = false,
+	titleClasses,
+	children,
+	...restProps
+}: IHeroProps = $props();
+const baseClasses = "w-full flex justify-between items-center";
+</script>
+
+<header {...restProps} class={cn(baseClasses, restProps.class)}>
+ <div class="flex flex-col items-start">
+ <h3 class={cn(titleClasses)}>
+ {@render children?.()}
+ {title}
+ </h3>
+ {#if subtitle}
+ <p class="text-black-700 mt-2">{subtitle}</p>
+ {/if}
+ </div>
+ {#if showSettings}
+ <Button.Nav href="/settings">
+ <Button.Icon
+ icon={Settings02Icon}
+ iconSize="lg"
+ />
+ </Button.Nav>
+ {:else}
+ <span aria-hidden="true"></span>
+ {/if}
+</header>
+
+<!-- 
+@component
+@name Hero
+@description A component that displays a header with a title, subtitle, and optional settings icon.
+@props
+- title: string - The main title to display.
+- subtitle: string - An optional subtitle to display below the title.
+- showSettings: boolean - A flag to determine if the settings icon should be displayed.
+- titleClasses: string - Additional classes to apply to the title element.
+- children: Snippet - Optional child elements to render within the title.
+@slots
+- default - Slot for additional content to be rendered within the title.
+@usage
+```svelte
+<Hero
+ title="Good morning!"
+ subtitle="Don't forget to drink water."
+ class="mb-8"
+ titleClasses="-mb-2"
+ showSettings
+ >
+</Hero>
+```
+ -->
@@ -41,7 +41,7 @@ $effect(() => {
 });
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"} rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
  <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
  <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>

@@ -1,3 +1,3 @@
-export { default as Header } from "./Header/Header.svelte";
+export { default as Hero } from "./Hero/Hero.svelte";
 export { default as IdentityCard } from "./IdentityCard/IdentityCard.svelte";
 export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Hero } from "$lib/fragments";
 import IdentityCard from "$lib/fragments/IdentityCard/IdentityCard.svelte";
 import { ButtonAction } from "$lib/ui";
 
@@ -20,8 +21,11 @@ const handleFinish = async () => {};
  }}/>
  </section>
  <section class="mt-[4vh] mb-[9vh]">
- <h4 class="mb-[0.5vh]">Your eVault</h4>
- <p class="text-black-700 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>
+ <Hero
+ title="Your ePassport and eVault are ready"
+ subtitle="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."
+ class="mb-2"
+ />
  <IdentityCard variant= "eVault"
  usedStorage= {15}
  totalStorage= {80}/>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer } from "$lib/ui";
 
 let isPaneOpen = $state(false);
@@ -20,10 +21,15 @@ const handleNext = async () => {
  <img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
  </article>
  <section class="mb-[9.3vh]">
- <h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>
+ <Hero
+ subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
+ class="mb-4"
+ titleClasses="text-[42px]/[1.1] font-medium"
+ >
+ Your <br>
  Digital Identity,
- Secured</h2>
- <p class="text-black-700">Store your IDs, verify instantly with QR codes, and manage your digital identity with ease.</p>
+ Secured
+ </Hero>
  </section>
  <section>
  <p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction, Drawer, InputPin } from "$lib/ui";
 import { CircleLock01Icon, FaceIdIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/svelte";
@@ -55,17 +56,23 @@ $effect(() => {
 {#if firstStep}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Create a pin</h3>
- <p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
+ <Hero
+ title="Create a pin"
+ subtitle="Enter a 4-digit PIN code"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin/>
  </section>
  <ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
  </main>
 {:else}
  <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[1vh]">Re-enter your pin</h3>
- <p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
+ <Hero
+ title="Re-enter your pin"
+ subtitle="Confirm by entering pin again"
+ class="mb-[14vh]"
+ />
  <InputPin bind:pin={repeatPin} {isError}/>
  <p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
  </section>

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
-import { IdentityCard } from "$lib/fragments";
+import { Hero, IdentityCard } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 
 const handleNext = async () => {
@@ -10,10 +10,12 @@ const handleNext = async () => {
 
 <main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
  <section>
- <h3 class="mb-[0.5vh]">Here’s your eName</h3>
- <p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
-
- <IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
+ <Hero
+ title="Here’s your eName"
+ subtitle="This identifier is permanently yours, and it stays with you for your whole life."
+ class="mb-4"
+ />
+ <IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
  </section>
  <ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
 </main>
@@ -1,15 +1,16 @@
 <script lang="ts">
 import { goto } from "$app/navigation";
+import { Hero } from "$lib/fragments";
 import { ButtonAction } from "$lib/ui";
 </script>
 
 <main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
  <section>
- <h3 class="mb-[1vh]">Verify your account</h3>
-<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>
-<div class="flex justify-center">
- <img src="images/Passport.svg" alt="passport">
- </div>
+ <Hero
+ title="Verify your account"
+ subtitle="Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process"
+/>
+ <img class="mx-auto mt-20" src="images/Passport.svg" alt="passport">
  </section>
  <ButtonAction class="w-full" callback={async() => goto("/verify/id")}>I'm ready</ButtonAction>
 </main>