From e0e655c575d0bbf5a90038ac0e951b730cc83a6a Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 16 Apr 2026 06:00:29 +0000
Subject: [PATCH 1/3] Bob AI: Implement a 3D parallax effect on the feature
 cards in the '

---
 .../sections/features/FeaturesRevealCards.tsx | 75 +++++++++++--------
 src/hooks/useParallax.ts                      | 36 +++++++++
 src/styles/animations.css                     |  9 +++
 3 files changed, 89 insertions(+), 31 deletions(-)
 create mode 100644 src/hooks/useParallax.ts

diff --git a/src/components/sections/features/FeaturesRevealCards.tsx b/src/components/sections/features/FeaturesRevealCards.tsx
index 128f215..c3773f2 100644
--- a/src/components/sections/features/FeaturesRevealCards.tsx
+++ b/src/components/sections/features/FeaturesRevealCards.tsx
@@ -1,9 +1,11 @@
 import { motion } from "motion/react";
 import { Info } from "lucide-react";
+import { useRef } from "react";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
 import Button from "@/components/ui/Button";
+import { useParallax } from "@/hooks/useParallax";
 
 type FeatureItem = {
   title: string;
@@ -19,6 +21,47 @@ interface FeaturesRevealCardsProps {
   items: FeatureItem[];
 }
 
+const ParallaxFeatureCard = ({ item, index }: { item: FeatureItem; index: number }) => {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const transform = useParallax(cardRef, { maxRotate: 5 });
+
+  return (
+    <div ref={cardRef} className="group relative overflow-hidden aspect-6/7 rounded parallax-card-container">
+      <div className="w-full h-full parallax-card" style={{ transform }}>
+        <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="absolute inset-0" />
+
+        <div className="absolute top-5 left-5 z-20 perspective-[1000px]">
+          <div className="relative size-8 transform-3d transition-transform duration-400 group-hover:rotate-y-180">
+            <div className="absolute inset-0 flex items-center justify-center rounded bg-background backface-hidden">
+              <span className="text-sm font-medium text-foreground">{index + 1}</span>
+            </div>
+            <div className="absolute inset-0 flex items-center justify-center rounded bg-background backface-hidden rotate-y-180">
+              <Info className="h-1/2 w-1/2 text-foreground" strokeWidth={1.5} />
+            </div>
+          </div>
+        </div>
+
+        <div className="absolute inset-x-0 bottom-0 h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
+
+        <div className="absolute inset-x-0 bottom-0 z-10 p-1">
+          <div className="relative flex flex-col gap-1 p-3">
+            <div className="absolute inset-0 -z-10 card rounded translate-y-full opacity-0 transition-all duration-400 ease-out group-hover:translate-y-0 group-hover:opacity-100" />
+
+            <h3 className="text-2xl font-semibold leading-tight text-background transition-colors duration-400 group-hover:text-foreground">
+              {item.title}
+            </h3>
+            <div className="grid grid-rows-[0fr] transition-all duration-400 ease-out group-hover:grid-rows-[1fr]">
+              <p className="overflow-hidden text-sm leading-tight text-foreground opacity-0 transition-opacity duration-400 group-hover:opacity-100">
+                {item.description}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const FeaturesRevealCards = ({
   tag,
   title,
@@ -63,37 +106,7 @@ const FeaturesRevealCards = ({
         >
           <GridOrCarousel>
             {items.map((item, index) => (
-              <div key={item.title} className="group relative overflow-hidden aspect-6/7 rounded">
-                <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="absolute inset-0" />
-
-                <div className="absolute top-5 left-5 z-20 perspective-[1000px]">
-                  <div className="relative size-8 transform-3d transition-transform duration-400 group-hover:rotate-y-180">
-                    <div className="absolute inset-0 flex items-center justify-center rounded bg-background backface-hidden">
-                      <span className="text-sm font-medium text-foreground">{index + 1}</span>
-                    </div>
-                    <div className="absolute inset-0 flex items-center justify-center rounded bg-background backface-hidden rotate-y-180">
-                      <Info className="h-1/2 w-1/2 text-foreground" strokeWidth={1.5} />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="absolute inset-x-0 bottom-0 h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
-
-                <div className="absolute inset-x-0 bottom-0 z-10 p-1">
-                  <div className="relative flex flex-col gap-1 p-3">
-                    <div className="absolute inset-0 -z-10 card rounded translate-y-full opacity-0 transition-all duration-400 ease-out group-hover:translate-y-0 group-hover:opacity-100" />
-
-                    <h3 className="text-2xl font-semibold leading-tight text-background transition-colors duration-400 group-hover:text-foreground">
-                      {item.title}
-                    </h3>
-                    <div className="grid grid-rows-[0fr] transition-all duration-400 ease-out group-hover:grid-rows-[1fr]">
-                      <p className="overflow-hidden text-sm leading-tight text-foreground opacity-0 transition-opacity duration-400 group-hover:opacity-100">
-                        {item.description}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <ParallaxFeatureCard key={item.title} item={item} index={index} />
             ))}
           </GridOrCarousel>
         </motion.div>
diff --git a/src/hooks/useParallax.ts b/src/hooks/useParallax.ts
new file mode 100644
index 0000000..2d159ca
--- /dev/null
+++ b/src/hooks/useParallax.ts
@@ -0,0 +1,36 @@
+import { useState, useEffect, RefObject } from "react";
+
+export const useParallax = (ref: RefObject<HTMLElement>, options?: { maxRotate?: number }) => {
+  const [transform, setTransform] = useState("rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
+  const maxRotate = options?.maxRotate || 5;
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const { left, top, width, height } = element.getBoundingClientRect();
+      const x = e.clientX - left;
+      const y = e.clientY - top;
+
+      const rotateX = ((y / height) - 0.5) * -maxRotate * 2;
+      const rotateY = ((x / width) - 0.5) * maxRotate * 2;
+
+      setTransform(`rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`);
+    };
+
+    const handleMouseLeave = () => {
+      setTransform("rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
+    };
+
+    element.addEventListener("mousemove", handleMouseMove);
+    element.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      element.removeEventListener("mousemove", handleMouseMove);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [ref, maxRotate]);
+
+  return transform;
+};
\ No newline at end of file
diff --git a/src/styles/animations.css b/src/styles/animations.css
index ba23101..fc45cac 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -168,3 +168,12 @@
 .animate-marquee-horizontal-reverse {
   animation: marquee-horizontal-reverse 15s linear infinite;
 }
+
+.parallax-card-container {
+  perspective: 1000px;
+}
+
+.parallax-card {
+  transform-style: preserve-3d;
+  transition: transform 0.1s ease-out;
+}
-- 
2.49.1


From 40d71e0f0acf2360dd26bdf934a8e2a52007396d Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 16 Apr 2026 06:01:21 +0000
Subject: [PATCH 2/3] Bob AI: fix build errors (attempt 1)

---
 src/components/sections/features/FeaturesRevealCards.tsx | 2 +-
 src/hooks/useParallax.ts                                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sections/features/FeaturesRevealCards.tsx b/src/components/sections/features/FeaturesRevealCards.tsx
index c3773f2..f5ef54d 100644
--- a/src/components/sections/features/FeaturesRevealCards.tsx
+++ b/src/components/sections/features/FeaturesRevealCards.tsx
@@ -22,7 +22,7 @@ interface FeaturesRevealCardsProps {
 }
 
 const ParallaxFeatureCard = ({ item, index }: { item: FeatureItem; index: number }) => {
-  const cardRef = useRef<HTMLDivElement>(null);
+  const cardRef = useRef<HTMLElement>(null);
   const transform = useParallax(cardRef, { maxRotate: 5 });
 
   return (
diff --git a/src/hooks/useParallax.ts b/src/hooks/useParallax.ts
index 2d159ca..5e5a3a5 100644
--- a/src/hooks/useParallax.ts
+++ b/src/hooks/useParallax.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, RefObject } from "react";
+import { useState, useEffect, type RefObject } from "react";
 
 export const useParallax = (ref: RefObject<HTMLElement>, options?: { maxRotate?: number }) => {
   const [transform, setTransform] = useState("rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)");
-- 
2.49.1


From b76d2874f63d273a5dbfdd60fe8e6d3c87eed0a0 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 16 Apr 2026 06:02:33 +0000
Subject: [PATCH 3/3] Bob AI: fix build errors (attempt 2)

---
 src/components/sections/features/FeaturesRevealCards.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sections/features/FeaturesRevealCards.tsx b/src/components/sections/features/FeaturesRevealCards.tsx
index f5ef54d..c3773f2 100644
--- a/src/components/sections/features/FeaturesRevealCards.tsx
+++ b/src/components/sections/features/FeaturesRevealCards.tsx
@@ -22,7 +22,7 @@ interface FeaturesRevealCardsProps {
 }
 
 const ParallaxFeatureCard = ({ item, index }: { item: FeatureItem; index: number }) => {
-  const cardRef = useRef<HTMLElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
   const transform = useParallax(cardRef, { maxRotate: 5 });
 
   return (
-- 
2.49.1