fix rbuild

src/components/ClickableGallery.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, useRef } from 'react'
 import Image from 'next/image'
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence, useInView } from 'framer-motion'
 import { wrap } from 'popmotion'
 import { Button } from '@/components/Button';
 import { H2, P, H4 } from '@/components/Texts';
@@ -34,6 +34,8 @@ const AUTOPLAY_MS = 3200
 export function ClickableGallery() {
   const [active, setActive] = useState(0)
   const [hovering, setHovering] = useState(false)
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
 
   // autoplay
   useEffect(() => {
@@ -51,17 +53,20 @@ export function ClickableGallery() {
   const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
 
   return (
-    <>
+    <div ref={ref}>
       <div className="relative isolate pt-24 pb-0 text-center w-full">
-        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="mx-auto max-w-5xl">
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.1 }} className="mx-auto max-w-5xl">
           <H2 className="text-center">One Agent, Endless Possibilities.</H2>
         </motion.div>
-        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="mx-auto max-w-4xl mt-6">
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.8, delay: 0.2 }} className="mx-auto max-w-4xl mt-6">
           <P className="text-center" color="custom">
             The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
           </P>
         </motion.div>
-        <div
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 1, delay: 0.3 }}
           aria-hidden="true"
           className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
         >
@@ -72,9 +77,12 @@ export function ClickableGallery() {
             }}
             className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
           />
-        </div>
+        </motion.div>
       </div>
-      <section
+      <motion.section
+        initial={{ opacity: 0 }}
+        animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+        transition={{ duration: 1, delay: 0.4 }}
         className="relative w-full flex items-center justify-center overflow-hidden bg-background -mt-16 pt-0 pb-32"
         onMouseEnter={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
@@ -180,7 +188,7 @@ export function ClickableGallery() {
           </div>
         </div>
       </div>
-    </section>
-    </>
+    </motion.section>
+    </div>
   )
 }