feat(wip parallax test on homepage)

resources/js/components/features/home/HeroSection.tsx

@@ -4,9 +4,12 @@ import { Button } from '@/components/ui/button';
 import { dashboard, membership } from '@/routes';
 import { type SharedData } from '@/types';
 import illustrationImage from '@/img/utils/lrl-illustration.png';
+import PawsDecoration from '@/components/common/PawsDecoration';
+import { useParallax } from '@/hooks/use-parallax';
 
 export function HeroSection() {
     const { auth } = usePage<SharedData>().props;
+    const pawsRef = useParallax<HTMLDivElement>(0.12);
 
     const scrollToFirstSection = () => {
         document.getElementById('first-section')?.scrollIntoView({ behavior: 'smooth' });
@@ -15,7 +18,7 @@ export function HeroSection() {
     return (
         <section
             id="hero"
-            className="flex flex-col w-full max-w-[335px] lg:max-w-7xl mx-auto min-h-[calc(100vh-80px)] px-4"
+            className="relative flex flex-col w-full max-w-[335px] lg:max-w-7xl mx-auto min-h-[calc(100vh-80px)] px-4"
         >
             {/* Contenu principal */}
             <div className="flex flex-1 items-center justify-center gap-4 w-full">
@@ -43,6 +46,10 @@ export function HeroSection() {
                 </div>
             </div>
 
+            <div ref={pawsRef} className="absolute bottom-12 right-0 pointer-events-none hidden lg:block w-48 opacity-40">
+                <PawsDecoration className="w-full h-auto" />
+            </div>
+
             {/* Flèche vers la première section */}
             <div className="flex justify-center pb-8">
                 <button