From 7d8a7ae55eac6c4c359bac011bbabefd94d914ca Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:28:11 +0000
Subject: [PATCH] Update src/components/sections/blog/BlogCardThree.tsx

---
 .../sections/blog/BlogCardThree.tsx           | 29 +++----------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/components/sections/blog/BlogCardThree.tsx b/src/components/sections/blog/BlogCardThree.tsx
index 499398e..07f144a 100644
--- a/src/components/sections/blog/BlogCardThree.tsx
+++ b/src/components/sections/blog/BlogCardThree.tsx
@@ -3,9 +3,6 @@
 import React, { useState } from "react";
 import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
 import TextBox from "@/components/Textbox";
-import { CardStack } from "@/components/card/CardStack";
-import type { CardStackProps } from "@/components/card/CardStack";
-import type { CardAnimationType } from "@/components/card/types";
 
 export interface BlogCardThreeProps {
   blogs: Array<{
@@ -22,7 +19,7 @@ export interface BlogCardThreeProps {
   }>;
   carouselMode?: "auto" | "buttons";
   uniformGridCustomHeightClasses?: string;
-  animationType?: CardAnimationType;
+  animationType?: string;
   title?: string;
   titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
   description?: string;
@@ -69,26 +66,8 @@ const BlogCardThree: React.FC<BlogCardThreeProps> = ({
   buttons,
   buttonAnimation,
   textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Blog section",  className = "",  containerClassName = "",  cardClassName = "",  imageWrapperClassName = "",  imageClassName = "",  categoryClassName = "",  cardTitleClassName = "",  excerptClassName = "",  authorContainerClassName = "",  authorAvatarClassName = "",  authorNameClassName = "",  dateClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
+  ariaLabel = "Blog section",  className = "",  containerClassName = "",  cardClassName = "",  imageWrapperClassName = "",  imageClassName = "",  categoryClassName = "",  cardTitleClassName = "",  excerptClassName = "",  authorContainerClassName = "",  authorAvatarClassName = "",  authorNameClassName = "",  dateClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "" }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const shouldCarousel = blogs.length > 4;
-  const mode = shouldCarousel ? "buttons" : "auto";
-
-  const cardStackProps: Omit<CardStackProps, "children"> = {
-    gridVariant: "uniform-all-items-equal",    uniformGridCustomHeightClasses,
-    animationType: animationType as CardAnimationType,
-    carouselMode: mode,
-    carouselThreshold: 4,
-    currentIndex: shouldCarousel ? currentIndex : undefined,
-    onCarouselChange: shouldCarousel ? setCurrentIndex : undefined,
-    ariaLabel,
-    className,
-    containerClassName,
-    cardClassName,
-    gridClassName,
-    carouselClassName,
-    controlsClassName,
-  };
 
   const blogCards = blogs.map((blog) => (
     <div
@@ -184,9 +163,9 @@ const BlogCardThree: React.FC<BlogCardThreeProps> = ({
       )}
 
       <div className="max-w-content-width mx-auto px-4">
-        <CardStack {...cardStackProps}>
+        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
           {blogCards}
-        </CardStack>
+        </div>
       </div>
     </div>
   );