feat(hero): add animated Supply Chain background on home page

app/components/hero/HeroBackground.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="absolute inset-0 overflow-hidden">
+    <!-- Lottie animation -->
+    <ClientOnly>
+      <DotLottieVue
+        src="/animations/supply-chain.lottie"
+        autoplay
+        loop
+        class="absolute inset-0 w-full h-full"
+        :style="{
+          opacity: 1 - collapseProgress * 0.7,
+          transform: `scale(${1 + collapseProgress * 0.1})`
+        }"
+      />
+    </ClientOnly>
+
+    <!-- Overlay for text readability -->
+    <div class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/40 to-slate-900/70" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+
+defineProps<{
+  collapseProgress: number
+}>()
+</script>

app/layouts/topnav.vue

@@ -2,11 +2,8 @@
   <div class="min-h-screen flex flex-col bg-base-300">
     <!-- Fixed Header Container -->
     <div class="fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
-      <!-- Dark gradient background for home page -->
+      <!-- Animated background for home page -->
-      <template v-if="isHomePage">
+      <HeroBackground v-if="isHomePage" :collapse-progress="collapseProgress" />
-        <div class="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900" />
-        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent" />
-      </template>
 
       <!-- MainNavigation - dynamic height on home page -->
       <MainNavigation