src/components/cardStack/CardStack.tsx

@@ -15,6 +15,12 @@ interface CardStackProps {
   useInvertedBackground?: boolean;
   ariaLabel?: string;
   className?: string;
+  gridVariant?: string;
+  uniformGridCustomHeightClasses?: string;
+  carouselThreshold?: number;
+  carouselMode?: "auto" | "buttons";
+  carouselItemClassName?: string;
+  mode?: "auto" | "buttons";
 }
 
 export const CardStack: React.FC<CardStackProps> = ({
@@ -25,7 +31,8 @@ export const CardStack: React.FC<CardStackProps> = ({
   tag,
   tagIcon: TagIcon,
   textboxLayout = "default",  animationType = "slide-up",  useInvertedBackground = false,
-  ariaLabel = "Card stack section",  className = ""}) => {
+  ariaLabel = "Card stack section",  className = "",  gridVariant = "",  uniformGridCustomHeightClasses = "",  carouselThreshold = 5,
+  carouselMode = "buttons"}) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   return (

src/components/cardStack/hooks/useCardAnimation.ts

@@ -1,12 +1,31 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export function useCardAnimation() {
   const [mounted, setMounted] = useState(false);
   const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+  const bottomContentRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const perspectiveRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  return { mounted, isMobile };
+  const setItemRef = (index: number, el: HTMLElement | null) => {
+    if (!itemRefs.current) {
+      itemRefs.current = [];
+    }
+    itemRefs.current[index] = el;
+  };
+
+  return {
+    mounted,
+    isMobile,
+    itemRefs,
+    setItemRef,
+    bottomContentRef,
+    containerRef,
+    perspectiveRef,
+  };
 }

src/lib/api/product.ts

@@ -4,6 +4,23 @@ export interface Product {
   price: string;
   imageSrc: string;
   imageAlt?: string;
+  rating?: number;
+  reviewCount?: number;
+  brand?: string;
+}
+
+export interface ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  onFavorite?: () => void;
+  isFavorited?: boolean;
+  onProductClick?: () => void;
+  rating?: number;
+  reviewCount?: number;
+  brand?: string;
 }
 
 export async function fetchProduct(id: string) {