feat(web): add privacy step in the onboarding (#11359)

* feat: add privacy step in the onboarding

* fix: remove console.log

* feat:Details the implications of enabling the map on the settings page

Added a link to the guide on customizing map styles as well

* feat: add map implication

* refactor: onboarding style

* fix: tile provider

* fix: remove long explanations

* chore: cleanup

---------

Co-authored-by: pcouy <contact@pierre-couy.dev>
Co-authored-by: Jason Rasmussen <jason@rasm.me>

web/src/routes/auth/onboarding/+page.svelte

@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
+  import OnboardingPrivacy from '$lib/components/onboarding-page/onboarding-privacy.svelte';
   import OnboadingStorageTemplate from '$lib/components/onboarding-page/onboarding-storage-template.svelte';
   import OnboardingTheme from '$lib/components/onboarding-page/onboarding-theme.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
@@ -11,12 +12,17 @@
 
   interface OnboardingStep {
     name: string;
-    component: typeof OnboardingHello | typeof OnboardingTheme | typeof OnboadingStorageTemplate;
+    component:
+      | typeof OnboardingHello
+      | typeof OnboardingTheme
+      | typeof OnboadingStorageTemplate
+      | typeof OnboardingPrivacy;
   }
 
   const onboardingSteps: OnboardingStep[] = [
     { name: 'hello', component: OnboardingHello },
     { name: 'theme', component: OnboardingTheme },
+    { name: 'privacy', component: OnboardingPrivacy },
     { name: 'storage', component: OnboadingStorageTemplate },
   ];
 
@@ -55,8 +61,8 @@
     <div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
       <svelte:component
         this={onboardingSteps[index].component}
-        on:done={handleDoneClicked}
-        on:previous={handlePrevious}
+        onDone={handleDoneClicked}
+        onPrevious={handlePrevious}
       />
     </div>
   </div>