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

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

@@ -2,6 +2,8 @@ import { type Service } from '@/types';
 import { ServiceCard } from './ServiceCard';
 import { SectionHeading } from '@/components/common/SectionHeading';
 import { Container } from '@/components/common/Container';
+import PawsDecoration from '@/components/common/PawsDecoration';
+import { useParallax } from '@/hooks/use-parallax';
 
 const services: Service[] = [
     {
@@ -62,8 +64,13 @@ const services: Service[] = [
 ];
 
 export function ServicesSection() {
+    const pawsRef = useParallax<HTMLDivElement>(0.08);
+
     return (
-        <section id="first-section" className="w-full bg-white py-16">
+        <section id="first-section" className="relative overflow-hidden w-full bg-white py-16">
+            <div ref={pawsRef} className="absolute -top-4 left-0 pointer-events-none hidden lg:block w-48 opacity-30">
+                <PawsDecoration className="w-full h-auto" />
+            </div>
             <Container className="flex flex-col gap-10">
                 <SectionHeading
                     title="Nos services"