Merge branch 'main' into SIGN-599

.env.example

@@ -16,4 +16,6 @@ BYPASS_TOKEN=
 
 VITE_HTTPS_ENABLED=true
 
-SESSION_SECRET_KEY=
+SESSION_SECRET_KEY=
+
+PUBLIC_POSTHOG_PROJECT_TOKEN=

package.json

@@ -64,6 +64,7 @@
     "@significa/svelte-ui": "^0.0.28",
     "@storyblok/js": "^2.3.0",
     "matter-js": "^0.19.0",
+    "posthog-js": "^1.96.1",
     "prism-svelte": "^0.5.0",
     "svelte-confetti": "^1.3.0"
   }

src/components/footer.svelte

@@ -47,11 +47,13 @@
                     {link.name}
                     {#if sanitizeSlug(link.full_slug) === '/careers'}
                       {#if $page.data.careers.length}
-                        <div aria-hidden="true">
-                          <Badge class="absolute -right-6 top-1/2 -translate-y-1/2 text-xs leading-none">
+                        <span aria-hidden="true">
+                          <Badge
+                            class="absolute -right-6 top-1/2 -translate-y-1/2 text-xs leading-none"
+                          >
                             {$page.data.careers.length}
                           </Badge>
-                        </div>
+                        </span>
                       {/if}
                     {/if}
                   </Link>

src/components/pages/project.svelte

@@ -62,7 +62,7 @@
       <h4 class="mb-4 text-xs uppercase tracking-wider text-foreground-secondary">
         {t('recognitions')}
       </h4>
-      <div class="grid grid-cols-1 gap-6 xs:grid-cols-2 md:grid-cols-3">
+      <div class="grid grid-cols-1 gap-4 xs:gap-6 xs:grid-cols-2 md:grid-cols-3">
         <Recognitions recognitions={story.content.recognitions} />
       </div>
     </div>

src/components/pre-footer.svelte

@@ -3,6 +3,8 @@
   import type { ComponentProps } from 'svelte';
   import ContactForm from './contact-form.svelte';
   import PreFooterAsset from './illustrations/assets/pre-footer.webp';
+  import PreFooterAssetLight from './illustrations/assets/pre-footer-light.webp';
+  import { theme } from '$lib/stores/theme';
 
   export let variant: ComponentProps<ContactForm>['variant'] = undefined;
 </script>
@@ -20,7 +22,7 @@
         </p>
       </div>
       <div class="flex flex-1 flex-col justify-end">
-        <img src={PreFooterAsset} alt="" />
+        <img src={$theme === 'dark' ? PreFooterAsset : PreFooterAssetLight} alt="" />
       </div>
     </div>
     <div class="col-span-3 bg-background-panel p-8 @5xl:col-span-2 @5xl:border-l">

src/routes/+layout.svelte

@@ -2,20 +2,32 @@
   import '$styles/index.css';
 
   import { page } from '$app/stores';
+  import { beforeNavigate } from '$app/navigation';
+  import { browser, dev } from '$app/environment';
 
   import DraftMode from '$components/draft-mode.svelte';
   import ImageGallery from '$components/image-gallery.svelte';
   import TopNavigation from '$components/top-navigation.svelte';
   import PageDrawer from '$components/page-drawer.svelte';
   import Footer from '$components/footer.svelte';
+
+  import { PUBLIC_POSTHOG_PROJECT_TOKEN } from '$env/static/public';
+
   import { toast, Toaster, ToastNotification } from '@significa/svelte-ui';
-  import { beforeNavigate } from '$app/navigation';
-  import { dev } from '$app/environment';
+  import posthog from 'posthog-js';
+
   export let data;
 
   beforeNavigate(() => {
     toast.clearAll();
   });
+
+  if (browser) {
+    posthog.init(PUBLIC_POSTHOG_PROJECT_TOKEN, {
+      api_host: 'https://eu.posthog.com',
+      persistence: 'localStorage'
+    });
+  }
 </script>
 
 <svelte:head>