fx

src/components/BentoReviews.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { H1, H2, H3, H4, P, CT, CP, NL } from "@/components/Texts";
-import React, { useRef } from "react";
-import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
-import { motion, AnimatePresence, useInView } from 'framer-motion'
+import { H2, P } from "@/components/Texts";
+import React from "react";
+import { BentoGrid, MotionBentoGridItem } from "@/components/ui/bento-grid";
+import { FadeIn } from "./FadeIn";
 
 const items = [
   {
@@ -53,44 +53,39 @@ const items = [
 ];
 
 export function BentoReviews() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
-
   return (
-    <div ref={ref}>
+    <div>
       <div className="relative isolate pt-24 pb-12 bg-black text-center w-full">
-        <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">Mycelium Technologies</H2>
-        </motion.div>
-        <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 mb-8"
-        >
-          <P className="text-center" color="primary">
-          A robust infrastructure layer for autonomous AI agents, our technology stack
-          delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
-          </P>
-        </motion.div>
+        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
+          <div className="mx-auto max-w-5xl">
+            <H2 className="text-center">Mycelium Technologies</H2>
+          </div>
+        </FadeIn>
+        <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
+          <div className="mx-auto max-w-4xl mt-6 mb-8">
+            <P className="text-center" color="primary">
+            A robust infrastructure layer for autonomous AI agents, our technology stack
+            delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
+            </P>
+          </div>
+        </FadeIn>
       </div>
       <BentoGrid className="max-w-8xl px-12 pb-12 lg:grid-cols-3">
-      {items.map((item, i) => (
-        <BentoGridItem
-          key={i}
-          title={item.title}
-          subtitle={item.subtitle}
-          description={item.description}
-          video={item.video}
-          className={i === 3 || i === 6 ? "md:col-span-2" : ""}
-        />
-      ))}
-    </BentoGrid>
+        {items.map((item, i) => (
+          <MotionBentoGridItem
+            key={i}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: false, margin: '0px 0px -100px 0px' }}
+            transition={{ duration: 0.8, delay: 0.3 + i * 0.1 }}
+            className={cn(i === 3 || i === 6 ? "md:col-span-2" : "", "h-full")}
+            title={item.title}
+            subtitle={item.subtitle}
+            description={item.description}
+            video={item.video}
+          />
+        ))}
+      </BentoGrid>
     </div>
   );
 }