From b4f81a34c32809f623c062b09ef0d9fbd9408cd5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 18:42:15 +0000
Subject: [PATCH 1/2] Update src/components/cardStack/hooks/useCardAnimation.ts

---
 .../cardStack/hooks/useCardAnimation.ts       | 58 +++++++++----------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/components/cardStack/hooks/useCardAnimation.ts b/src/components/cardStack/hooks/useCardAnimation.ts
index 2e28fc9..45ac588 100644
--- a/src/components/cardStack/hooks/useCardAnimation.ts
+++ b/src/components/cardStack/hooks/useCardAnimation.ts
@@ -1,37 +1,33 @@
-import { useEffect, useState } from "react";
+import { RefObject, useCallback, useRef } from 'react';
 
-interface UseCardAnimationProps {
-  containerRef: React.RefObject<HTMLDivElement>;
-  cardsOffset?: number;
-  scaleFactor?: number;
-  rotationFactor?: number;
-  animationDuration?: number;
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
+export type BentoAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+export type CardAnimationTypeWith3D = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
+
+export interface UseCardAnimationProps {
+  itemRefs?: RefObject<HTMLDivElement>[];
+  containerRef?: RefObject<HTMLDivElement>;
+  perspectiveRef?: RefObject<HTMLDivElement>;
+  bottomContentRef?: RefObject<HTMLDivElement>;
 }
 
-interface AnimationState {
-  transform: string;
-}
+export const useCardAnimation = (
+  props: UseCardAnimationProps
+) => {
+  const refs = useRef<{ transform: string }>({
+    transform: 'none',
+  });
 
-export const useCardAnimation = ({
-  containerRef,
-  cardsOffset = 10,
-  scaleFactor = 0.08,
-  rotationFactor = 5,
-  animationDuration = 500,
-}: UseCardAnimationProps) => {
-  const [transform, setTransform] = useState<string>("");
+  const updateAnimation = useCallback(() => {
+    // Animation logic here
+  }, []);
 
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const calculateDepth = (index: number, total: number): number => {
-      return index;
-    };
-
-    // Animation logic can be added here
-    setTransform("");
-  }, [containerRef, cardsOffset, scaleFactor, rotationFactor, animationDuration]);
-
-  return { transform };
+  return {
+    ...refs.current,
+    itemRefs: props.itemRefs,
+    containerRef: props.containerRef,
+    perspectiveRef: props.perspectiveRef,
+    bottomContentRef: props.bottomContentRef,
+    updateAnimation,
+  };
 };

From 89b07900347068cac5707eb7065b44d639bb16b0 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 18:42:15 +0000
Subject: [PATCH 2/2] Add src/types/product.ts

---
 src/types/product.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/types/product.ts

diff --git a/src/types/product.ts b/src/types/product.ts
new file mode 100644
index 0000000..f1bf1bc
--- /dev/null
+++ b/src/types/product.ts
@@ -0,0 +1,10 @@
+export interface Product {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt: string;
+  rating: number;
+  reviewCount: number;
+  category: string;
+}