Add Compliance Portal product page

src/components/Header.astro

@@ -18,6 +18,7 @@ type Props = {
       <Image src={Logo} alt="Logo probo" width={73} height={20} class="block" />
     </a>
     <nav class="hidden sm:flex" transition:name="header-nav">
+      <NavLink href="/trust-center">Compliance Portal</NavLink>
       <NavLink href="/about">About</NavLink>
       <NavLink href="/blog">Blog</NavLink>
       <NavLink href="/stories">Stories</NavLink>

src/components/LogosScroll.svelte

@@ -7,19 +7,26 @@
 
   const props: { children: Snippet; class?: string } = $props();
   let slider: HTMLDivElement | null = null;
-  const options = {
-    type: "loop",
-    gap: 16,
-    arrows: false,
-    autoWidth: true,
-    pagination: false,
-    mediaQuery: "min",
-    autoScroll: {
-      pauseOnFocus: false,
-      speed: 0.7,
-      pauseOnHover: false,
-    },
-  } as const;
+  const createOptions = () => {
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+
+    return {
+      type: "loop",
+      gap: 16,
+      arrows: false,
+      autoWidth: true,
+      pagination: false,
+      mediaQuery: "min",
+      autoScroll: {
+        autoStart: !prefersReducedMotion,
+        pauseOnFocus: true,
+        speed: prefersReducedMotion ? 0 : 0.7,
+        pauseOnHover: true,
+      },
+    } as const;
+  };
 
   onMount(() => {
     if (!slider) {
@@ -30,7 +37,10 @@
     Array.from(slot.children).forEach((child) => {
       child.classList.add("splide__slide");
     });
-    const s = new Splide(slider, options).mount({ AutoScroll, Intersection });
+    const s = new Splide(slider, createOptions()).mount({
+      AutoScroll,
+      Intersection,
+    });
     return () => {
       s.destroy();
     };

src/components/LottiePlayer.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import type { AnimationItem } from "lottie-web";
+  import { useIntersectionObserver } from "../lib/runes/useIntersectionObserver.svelte.ts";
+
+  type Props = {
+    src: string;
+    label: string;
+    class?: string;
+    loop?: boolean;
+  };
+
+  const { src, label, class: className, loop = true }: Props = $props();
+
+  let animation = $state<AnimationItem | null>(null);
+  let loadingPromise: Promise<void> | null = null;
+  let reducedMotion = $state(false);
+  const intersection = useIntersectionObserver({ threshold: 0.2 });
+
+  const loadAnimation = async () => {
+    const { default: lottie } = await import("lottie-web");
+
+    if (!intersection.ref || animation) {
+      return;
+    }
+
+    animation = lottie.loadAnimation({
+      container: intersection.ref,
+      renderer: "svg",
+      loop,
+      autoplay: intersection.observed && !reducedMotion,
+      path: src,
+      rendererSettings: {
+        preserveAspectRatio: "xMidYMid meet",
+      },
+    });
+  };
+
+  $effect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const syncMotionPreference = () => {
+      reducedMotion = mediaQuery.matches;
+      if (reducedMotion) {
+        animation?.pause();
+      } else if (intersection.observed) {
+        animation?.play();
+      }
+    };
+
+    syncMotionPreference();
+    mediaQuery.addEventListener("change", syncMotionPreference);
+
+    return () => {
+      mediaQuery.removeEventListener("change", syncMotionPreference);
+    };
+  });
+
+  $effect(() => {
+    if (!intersection.ref) {
+      return;
+    }
+
+    if (reducedMotion || !intersection.observed) {
+      animation?.pause();
+      return;
+    }
+
+    if (animation) {
+      animation.play();
+      return;
+    }
+
+    loadingPromise ??= loadAnimation();
+  });
+
+  onDestroy(() => {
+    animation?.destroy();
+  });
+</script>
+
+<div
+  bind:this={intersection.ref}
+  class={className}
+  role="img"
+  aria-label={label}
+></div>

src/content/menu.ts

@@ -1,4 +1,9 @@
 export const menuItems = [
+  {
+    label: "Compliance Portal",
+    description: "Share compliance materials with prospects",
+    href: "/trust-center",
+  },
   {
     label: "About",
     description: "The people and vision powering Probo",

src/layouts/Layout.astro

@@ -24,7 +24,7 @@ const canonical = getCanonicalUrl(Astro.url);
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{seoTitle}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -177,8 +177,16 @@ const canonical = getCanonicalUrl(Astro.url);
     <slot name="head" />
   </head>
   <body class="text-primary bg-level-0 font-sans text-base">
+    <a
+      href="#main-content"
+      class="focus:bg-level-0 focus:text-primary sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-[100] focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg"
+    >
+      Skip to main content
+    </a>
     <Header />
-    <slot />
+    <div id="main-content" tabindex="-1">
+      <slot />
+    </div>
     <Footer noFrameworks={Astro.props.noFrameworks} />
     <probo-cookie-banner
       banner-id={import.meta.env.PUBLIC_COOKIE_BANNER_ID}