✨ Add animations to v3 features section

Author: HassanZahirnia

resources/views/components/home/v3-features.blade.php

@@ -1,5 +1,38 @@
 <section class="mx-auto w-full max-w-screen-lg px-5 pt-32">
-    <div class="isolate grid place-items-center">
+    <div
+        x-init="
+            () => {
+                if (reducedMotion) return
+                const timeline = gsap
+                    .timeline({
+                        paused: true,
+                    })
+                    .fromTo(
+                        $el,
+                        {
+                            autoAlpha: 0,
+                            y: -20,
+                        },
+                        {
+                            autoAlpha: 1,
+                            y: 0,
+                            duration: 0.7,
+                            ease: 'power2.out',
+                        },
+                    )
+                motion.inView(
+                    $el,
+                    (element) => {
+                        timeline.play()
+                    },
+                    {
+                        amount: 1,
+                    },
+                )
+            }
+        "
+        class="isolate grid place-items-center"
+    >
         <div class="grid self-center justify-self-center [grid-area:1/-1]">
             <h2
                 class="self-center justify-self-center font-afacad text-6xl font-bold text-slate-800 [grid-area:1/-1]"
@@ -114,15 +147,78 @@ class="relative -z-50 w-[22rem] self-center justify-self-center [grid-area:1/-1]
         />
     </div>
     <h3
+        x-init="
+            () => {
+                if (reducedMotion) return
+                const timeline = gsap
+                    .timeline({
+                        paused: true,
+                    })
+                    .fromTo(
+                        $el,
+                        {
+                            autoAlpha: 0,
+                            y: 20,
+                        },
+                        {
+                            autoAlpha: 1,
+                            y: 0,
+                            duration: 0.7,
+                            ease: 'power2.out',
+                        },
+                    )
+                motion.inView(
+                    $el,
+                    (element) => {
+                        timeline.play()
+                    },
+                    {
+                        amount: 1,
+                    },
+                )
+            }
+        "
         class="mx-auto max-w-3xl pt-3 text-center font-afacad text-2xl leading-normal text-gray-500"
     >
         Discover the enhancements and features in Filament V3, designed to
         elevate your development experience.
     </h3>
     <div
+        x-init="
+            () => {
+                if (reducedMotion) return
+                const timeline = gsap
+                    .timeline({
+                        paused: true,
+                    })
+                    .fromTo(
+                        $refAll('slide-in-left'),
+                        {
+                            autoAlpha: 0,
+                            x: -20,
+                        },
+                        {
+                            autoAlpha: 1,
+                            x: 0,
+                            duration: 0.7,
+                            stagger: 0.1,
+                            ease: 'power2.out',
+                        },
+                    )
+                motion.inView(
+                    $el,
+                    (element) => {
+                        timeline.play()
+                    },
+                    {
+                        amount: 0.25,
+                    },
+                )
+            }
+        "
         class="grid grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] items-center gap-5 pt-10 *:flex *:items-center *:gap-5 *:rounded-2xl *:bg-white *:px-5 *:py-7 *:ring-1 *:ring-black/5"
     >
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -164,7 +260,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -247,7 +343,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -302,7 +398,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -403,7 +499,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -437,7 +533,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"