feat(wip parallax test on homepage)

resources/js/components/common/PawsDecoration.tsx

@@ -0,0 +1,13 @@
+import {SVGAttributes} from "react";
+
+export default function PawsDecoration(props: SVGAttributes<SVGElement>) {
+    return (
+        <svg {...props} viewBox="0 0 400 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity=".35" fill="#8A8A8A">
+                <path d="M31.13 292.304c4.61-1.125 10.243 5.075 13.861 14.559 6.197-8.478 13.57-13.138 17.786-10.724 5.002 2.864 3.664 14.605-2.99 26.224-4.347 7.592-9.889 13.252-14.603 15.464-.742.802-1.6 1.344-2.565 1.58a4.613 4.613 0 0 1-.834.122c-4.887 1.893-14.34-.778-23.41-7.031C7.352 324.9 1.068 314.892 4.34 310.146c2.818-4.089 11.807-2.936 21.291 2.319-1.379-10.479.758-19.005 5.498-20.161ZM228.85 25.324c4.409 1.756 5.406 10.073 2.856 19.899 9.964-3.317 18.673-2.84 20.709 1.57 2.416 5.234-5.48 14.026-17.635 19.637-7.945 3.667-15.742 5.067-20.866 4.137-1.069.223-2.081.168-3.004-.2a4.57 4.57 0 0 1-.75-.384c-5.08-1.29-11.234-8.945-15.001-19.298-4.578-12.581-3.898-24.379 1.519-26.35 4.666-1.698 11.323 4.451 16.005 14.231 4.95-9.339 11.634-15.047 16.167-13.242ZM145.999 243.334c4.29 2.031 4.76 10.394 1.597 20.04 10.153-2.683 18.815-1.658 20.569 2.872 2.081 5.375-6.353 13.652-18.838 18.486-8.159 3.159-16.028 4.065-21.084 2.814-1.081.156-2.088.037-2.987-.388a4.656 4.656 0 0 1-.723-.43c-4.989-1.607-10.649-9.636-13.756-20.206-3.777-12.845-2.355-24.576 3.176-26.202 4.764-1.401 11.02 5.156 15.077 15.212 5.529-9.009 12.559-14.285 16.969-12.198ZM366.871 13.708c4.29 2.03 4.76 10.394 1.597 20.04 10.153-2.683 18.815-1.658 20.569 2.872 2.081 5.375-6.353 13.652-18.838 18.486-8.159 3.16-16.029 4.066-21.085 2.815-1.08.155-2.087.036-2.986-.39a4.602 4.602 0 0 1-.723-.43c-4.989-1.606-10.649-9.635-13.756-20.205-3.776-12.845-2.355-24.576 3.176-26.202 4.764-1.4 11.021 5.156 15.077 15.211 5.529-9.008 12.559-14.284 16.969-12.197ZM247.503 117.591c3.358 3.354.991 11.389-5.23 19.411 10.464.885 18.278 4.761 18.408 9.616.154 5.763-10.571 10.724-23.954 11.082-8.747.234-16.464-1.557-20.805-4.434-1.07-.217-1.978-.668-2.681-1.37a4.496 4.496 0 0 1-.537-.648c-4.159-3.19-6.792-12.653-6.167-23.653.76-13.367 6.041-23.938 11.796-23.611 4.958.282 8.647 8.559 9.089 19.393 8.235-6.627 16.628-9.234 20.081-5.786ZM112.344 139.976c4.68.785 7.412 8.703 6.996 18.846 9.038-5.348 17.652-6.722 20.574-2.842 3.467 4.605-2.392 14.867-13.088 22.92-6.99 5.263-14.315 8.28-19.52 8.454-.998.443-1.999.603-2.979.439a4.566 4.566 0 0 1-.814-.217c-5.238-.187-12.87-6.369-18.74-15.692-7.134-11.33-8.962-23.005-4.084-26.076 4.202-2.646 12.008 1.957 18.65 10.526 2.866-10.173 8.192-17.165 13.005-16.358Z"/>
+            </g>
+        </svg>
+    );
+}
+
+

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"

resources/js/hooks/use-parallax.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+export function useParallax<T extends HTMLElement>(speed: number = 0.15) {
+    const ref = useRef<T>(null);
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+
+        let rafId: number;
+        let ticking = false;
+
+        const update = () => {
+            el.style.transform = `translateY(${window.scrollY * speed}px)`;
+            ticking = false;
+        };
+
+        const onScroll = () => {
+            if (!ticking) {
+                rafId = requestAnimationFrame(update);
+                ticking = true;
+            }
+        };
+
+        window.addEventListener('scroll', onScroll, { passive: true });
+
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+            cancelAnimationFrame(rafId);
+        };
+    }, [speed]);
+
+    return ref;
+}

resources/js/img/utils/penguin-paws.svg

@@ -0,0 +1,10 @@
+<svg width="396" height="347" viewBox="0 0 396 347" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.35">
+<path d="M31.1294 292.304C35.7403 291.179 41.373 297.379 44.9911 306.863C51.1878 298.385 58.5611 293.725 62.7766 296.139C67.779 299.003 66.4409 310.744 59.7878 322.363C55.4402 329.955 49.8983 335.615 45.184 337.827C44.442 338.629 43.5848 339.171 42.6191 339.407C42.3446 339.474 42.0664 339.513 41.7853 339.529C36.8981 341.422 27.4458 338.751 18.3753 332.498C7.35225 324.9 1.06811 314.892 4.33959 310.146C7.1581 306.057 16.1472 307.21 25.6314 312.465C24.252 301.986 26.3892 293.46 31.1294 292.304Z" fill="#8A8A8A"/>
+<path d="M228.85 25.324C233.259 27.0801 234.256 35.3969 231.706 45.2229C241.67 41.9058 250.379 42.3828 252.415 46.793C254.831 52.0268 246.935 60.8186 234.78 66.4297C226.835 70.0967 219.038 71.4973 213.914 70.5672C212.845 70.79 211.833 70.7348 210.91 70.3671C210.647 70.2626 210.398 70.1332 210.16 69.9832C205.08 68.6932 198.926 61.0376 195.159 50.6849C190.581 38.1036 191.261 26.3061 196.678 24.3347C201.344 22.6367 208.001 28.7864 212.683 38.5661C217.633 29.2274 224.317 23.519 228.85 25.324Z" fill="#8A8A8A"/>
+<path d="M145.999 243.334C150.289 245.365 150.759 253.728 147.596 263.374C157.749 260.691 166.411 261.716 168.165 266.246C170.246 271.621 161.812 279.898 149.327 284.732C141.168 287.891 133.299 288.797 128.243 287.546C127.162 287.702 126.155 287.583 125.256 287.158C125.001 287.037 124.761 286.892 124.533 286.728C119.544 285.121 113.884 277.092 110.777 266.522C107 253.677 108.422 241.946 113.953 240.32C118.717 238.919 124.973 245.476 129.03 255.532C134.559 246.523 141.589 241.247 145.999 243.334Z" fill="#8A8A8A"/>
+<path d="M366.871 13.7083C371.161 15.7387 371.631 24.1017 368.468 33.7476C378.621 31.0649 387.283 32.0897 389.037 36.6195C391.118 41.9951 382.684 50.2719 370.199 55.106C362.04 58.2651 354.17 59.1716 349.114 57.9206C348.034 58.0756 347.027 57.9567 346.128 57.5316C345.873 57.4109 345.633 57.266 345.405 57.1016C340.416 55.4951 334.756 47.4663 331.649 36.896C327.873 24.051 329.294 12.3198 334.825 10.6939C339.589 9.29333 345.846 15.8502 349.902 25.9055C355.431 16.8972 362.461 11.6211 366.871 13.7083Z" fill="#8A8A8A"/>
+<path d="M247.503 117.591C250.861 120.945 248.494 128.98 242.273 137.002C252.737 137.887 260.551 141.763 260.681 146.618C260.835 152.381 250.11 157.342 236.727 157.7C227.98 157.934 220.263 156.143 215.922 153.266C214.852 153.049 213.944 152.598 213.241 151.896C213.041 151.697 212.863 151.48 212.704 151.248C208.545 148.058 205.912 138.595 206.537 127.595C207.297 114.228 212.578 103.657 218.333 103.984C223.291 104.266 226.98 112.543 227.422 123.377C235.657 116.75 244.05 114.143 247.503 117.591Z" fill="#8A8A8A"/>
+<path d="M112.344 139.976C117.024 140.761 119.756 148.679 119.34 158.822C128.378 153.474 136.992 152.1 139.914 155.98C143.381 160.585 137.522 170.847 126.826 178.9C119.836 184.163 112.511 187.18 107.306 187.354C106.308 187.797 105.307 187.957 104.327 187.793C104.049 187.746 103.777 187.673 103.513 187.576C98.275 187.389 90.6421 181.207 84.7724 171.884C77.6392 160.554 75.8108 148.879 80.6887 145.808C84.891 143.162 92.6967 147.765 99.3398 156.334C102.205 146.161 107.531 139.169 112.344 139.976Z" fill="#8A8A8A"/>
+</g>
+</svg>