From 844a98f6a993cc3b21ba59241120611d80c79d82 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:27:11 +0000
Subject: [PATCH 1/3] Update src/components/sections/blog/BlogCardOne.tsx

---
 src/components/sections/blog/BlogCardOne.tsx | 381 ++++++++-----------
 1 file changed, 166 insertions(+), 215 deletions(-)

diff --git a/src/components/sections/blog/BlogCardOne.tsx b/src/components/sections/blog/BlogCardOne.tsx
index dcb77bc..2cbd923 100644
--- a/src/components/sections/blog/BlogCardOne.tsx
+++ b/src/components/sections/blog/BlogCardOne.tsx
@@ -1,244 +1,195 @@
 "use client";
 
-import { memo } from "react";
-import Image from "next/image";
-import CardStack from "@/components/cardStack/CardStack";
-import Badge from "@/components/shared/Badge";
-import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { BlogPost } from "@/lib/api/blog";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React, { useState, useMemo } 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";
 
-type BlogCard = BlogPost;
-
-interface BlogCardOneProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+export interface BlogCardOneProps {
+  blogs: Array<{
+    id: string;
+    category: string;
     title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    categoryClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    authorContainerClassName?: string;
-    authorAvatarClassName?: string;
-    authorNameClassName?: string;
-    dateClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    date: string;
+    onBlogClick?: () => void;
+  }>;
+  carouselMode?: "auto" | "buttons";
+  uniformGridCustomHeightClasses?: string;
+  animationType?: CardAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
+  tag?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  useInvertedBackground?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  imageWrapperClassName?: string;
+  imageClassName?: string;
+  categoryClassName?: string;
+  cardTitleClassName?: string;
+  excerptClassName?: string;
+  authorContainerClassName?: string;
+  authorAvatarClassName?: string;
+  authorNameClassName?: string;
+  dateClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
 }
 
-interface BlogCardItemProps {
-    blog: BlogCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    categoryClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    authorContainerClassName?: string;
-    authorAvatarClassName?: string;
-    authorNameClassName?: string;
-    dateClassName?: string;
-}
+const BlogCardOne: React.FC<BlogCardOneProps> = ({
+  blogs,
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
+  titleSegments,
+  description,
+  tag,
+  tagAnimation,
+  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 = ""}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const shouldCarousel = blogs.length > 4;
+  const mode = shouldCarousel ? "buttons" : "auto";
 
-const BlogCardItem = memo(({
-    blog,
-    shouldUseLightText,
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    categoryClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    authorContainerClassName = "",
-    authorAvatarClassName = "",
-    authorNameClassName = "",
-    dateClassName = "",
-}: BlogCardItemProps) => {
-    return (
-        <article
-            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-            onClick={blog.onBlogClick}
-            role="article"
-            aria-label={`${blog.title} by ${blog.authorName}`}
-        >
-            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
-                <Image
-                    src={blog.imageSrc}
-                    alt={blog.imageAlt || blog.title}
-                    fill
-                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
-                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
-                />
-                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
-            </div>
+  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,
+  };
 
-            <div className="relative z-1 flex flex-col justify-between gap-6 flex-1">
-                <div className="flex flex-col gap-2">
-                    <Badge text={blog.category} variant="primary" className={categoryClassName} />
+  const blogCards = blogs.map((blog) => (
+    <div
+      key={blog.id}
+      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
+        cardClassName || ""
+      }`}
+      onClick={blog.onBlogClick}
+    >
+      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
+        <img
+          src={blog.imageSrc}
+          alt={blog.imageAlt || blog.title}
+          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
+            imageClassName || ""
+          }`}
+        />
+        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
+          <ArrowRight className="w-4 h-4 text-foreground" />
+        </button>
+      </div>
 
-                    <h3 className={cls("text-2xl font-medium leading-[1.25] mt-1", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
-                        {blog.title}
-                    </h3>
+      <div className="flex-1 p-6 flex flex-col gap-3">
+        <span className={`text-xs font-semibold text-primary-cta uppercase ${
+          categoryClassName || ""
+        }`}>
+          {blog.category}
+        </span>
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
-                        {blog.excerpt}
-                    </p>
-                </div>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
+          cardTitleClassName || ""
+        }`}>
+          {blog.title}
+        </h3>
 
-                <div className={cls("flex items-center gap-3", authorContainerClassName)}>
-                    <Image
-                        src={blog.authorAvatar}
-                        alt={blog.authorName}
-                        width={40}
-                        height={40}
-                        className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
-                        unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
-                    />
-                    <div className="flex flex-col">
-                        <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
-                            {blog.authorName}
-                        </p>
-                        <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
-                            {blog.date}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </article>
-    );
-});
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
+          excerptClassName || ""
+        }`}>
+          {blog.excerpt}
+        </p>
 
-BlogCardItem.displayName = "BlogCardItem";
+        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
+          authorContainerClassName || ""
+        }`}>
+          <img
+            src={blog.authorAvatar}
+            alt={blog.authorName}
+            className={`w-8 h-8 rounded-full object-cover ${
+              authorAvatarClassName || ""
+            }`}
+          />
+          <div className="flex-1 min-w-0">
+            <p className={`text-sm font-medium text-foreground truncate ${
+              authorNameClassName || ""
+            }`}>
+              {blog.authorName}
+            </p>
+            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
+              {blog.date}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ));
 
-const BlogCardOne = ({
-    blogs = [],
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    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 = "",
-}: BlogCardOneProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
+  return (
+    <div
+      className={`w-full py-20 ${
+        useInvertedBackground ? "bg-background/50" : ""
+      } ${containerClassName}`}
+      aria-label={ariaLabel}
+    >
+      {title && (
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
+          <TextBox
             title={title}
             titleSegments={titleSegments}
-            description={description}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
+            textboxLayout={textboxLayout || "default"}
             titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
             descriptionClassName={textBoxDescriptionClassName}
             tagClassName={textBoxTagClassName}
             buttonContainerClassName={textBoxButtonContainerClassName}
             buttonClassName={textBoxButtonClassName}
             buttonTextClassName={textBoxButtonTextClassName}
-        >
-            {blogs.map((blog) => (
-                <BlogCardItem
-                    key={blog.id}
-                    blog={blog}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageWrapperClassName={imageWrapperClassName}
-                    imageClassName={imageClassName}
-                    categoryClassName={categoryClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    excerptClassName={excerptClassName}
-                    authorContainerClassName={authorContainerClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorNameClassName={authorNameClassName}
-                    dateClassName={dateClassName}
-                />
-            ))}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack {...cardStackProps}>
+          {blogCards}
         </CardStack>
-    );
+      </div>
+    </div>
+  );
 };
 
-BlogCardOne.displayName = "BlogCardOne";
-
 export default BlogCardOne;
-- 
2.49.1


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

---
 .../sections/blog/BlogCardThree.tsx           | 425 +++++++-----------
 1 file changed, 166 insertions(+), 259 deletions(-)

diff --git a/src/components/sections/blog/BlogCardThree.tsx b/src/components/sections/blog/BlogCardThree.tsx
index 9e1f326..499398e 100644
--- a/src/components/sections/blog/BlogCardThree.tsx
+++ b/src/components/sections/blog/BlogCardThree.tsx
@@ -1,288 +1,195 @@
 "use client";
 
-import { memo } from "react";
-import Image from "next/image";
-import CardStack from "@/components/cardStack/CardStack";
-import Tag from "@/components/shared/Tag";
-import MediaContent from "@/components/shared/MediaContent";
-import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { BlogPost } from "@/lib/api/blog";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+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";
 
-type BlogCard = BlogPost;
-
-interface BlogCardThreeProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+export interface BlogCardThreeProps {
+  blogs: Array<{
+    id: string;
+    category: string;
     title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    cardContentClassName?: string;
-    categoryTagClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    authorContainerClassName?: string;
-    authorAvatarClassName?: string;
-    authorNameClassName?: string;
-    dateClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    date: string;
+    onBlogClick?: () => void;
+  }>;
+  carouselMode?: "auto" | "buttons";
+  uniformGridCustomHeightClasses?: string;
+  animationType?: CardAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
+  tag?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  useInvertedBackground?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  imageWrapperClassName?: string;
+  imageClassName?: string;
+  categoryClassName?: string;
+  cardTitleClassName?: string;
+  excerptClassName?: string;
+  authorContainerClassName?: string;
+  authorAvatarClassName?: string;
+  authorNameClassName?: string;
+  dateClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
 }
 
-interface BlogCardItemProps {
-    blog: BlogCard;
-    useInvertedBackground: boolean;
-    cardClassName?: string;
-    cardContentClassName?: string;
-    categoryTagClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    authorContainerClassName?: string;
-    authorAvatarClassName?: string;
-    authorNameClassName?: string;
-    dateClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-}
+const BlogCardThree: React.FC<BlogCardThreeProps> = ({
+  blogs,
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
+  titleSegments,
+  description,
+  tag,
+  tagAnimation,
+  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 = ""}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const shouldCarousel = blogs.length > 4;
+  const mode = shouldCarousel ? "buttons" : "auto";
 
-const BlogCardItem = memo(({
-    blog,
-    useInvertedBackground,
-    cardClassName = "",
-    cardContentClassName = "",
-    categoryTagClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    authorContainerClassName = "",
-    authorAvatarClassName = "",
-    authorNameClassName = "",
-    dateClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-}: BlogCardItemProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  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,
+  };
 
-    return (
-        <article
-            className={cls(
-                "relative h-full card group flex flex-col justify-between gap-6 p-6 cursor-pointer rounded-theme-capped overflow-hidden",
-                cardClassName
-            )}
-            onClick={blog.onBlogClick}
-            role="article"
-            aria-label={blog.title}
-        >
-            <div className={cls("relative z-1 flex flex-col gap-3", cardContentClassName)}>
-                <Tag
-                    text={blog.category}
-                    useInvertedBackground={useInvertedBackground}
-                    className={categoryTagClassName}
-                />
+  const blogCards = blogs.map((blog) => (
+    <div
+      key={blog.id}
+      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
+        cardClassName || ""
+      }`}
+      onClick={blog.onBlogClick}
+    >
+      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
+        <img
+          src={blog.imageSrc}
+          alt={blog.imageAlt || blog.title}
+          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
+            imageClassName || ""
+          }`}
+        />
+        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
+          <ArrowRight className="w-4 h-4 text-foreground" />
+        </button>
+      </div>
 
-                <h3 className={cls(
-                    "text-3xl md:text-4xl font-medium leading-tight line-clamp-2",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    cardTitleClassName
-                )}>
-                    {blog.title}
-                </h3>
+      <div className="flex-1 p-6 flex flex-col gap-3">
+        <span className={`text-xs font-semibold text-primary-cta uppercase ${
+          categoryClassName || ""
+        }`}>
+          {blog.category}
+        </span>
 
-                <p className={cls(
-                    "text-base leading-tight line-clamp-2",
-                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
-                    excerptClassName
-                )}>
-                    {blog.excerpt}
-                </p>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
+          cardTitleClassName || ""
+        }`}>
+          {blog.title}
+        </h3>
 
-                {(blog.authorName || blog.date) && (
-                    <div className={cls(
-                        "flex",
-                        blog.authorAvatar ? "items-center gap-3" : "flex-row justify-between items-center",
-                        authorContainerClassName
-                    )}>
-                        {blog.authorAvatar && (
-                            <Image
-                                src={blog.authorAvatar}
-                                alt={blog.authorName || "Author"}
-                                width={40}
-                                height={40}
-                                className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
-                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
-                            />
-                        )}
-                        {blog.authorAvatar ? (
-                            <div className="flex flex-col">
-                                {blog.authorName && (
-                                    <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
-                                        {blog.authorName}
-                                    </p>
-                                )}
-                                {blog.date && (
-                                    <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
-                                        {blog.date}
-                                    </p>
-                                )}
-                            </div>
-                        ) : (
-                            <>
-                                {blog.authorName && (
-                                    <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
-                                        {blog.authorName}
-                                    </p>
-                                )}
-                                {blog.date && (
-                                    <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
-                                        {blog.date}
-                                    </p>
-                                )}
-                            </>
-                        )}
-                    </div>
-                )}
-            </div>
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
+          excerptClassName || ""
+        }`}>
+          {blog.excerpt}
+        </p>
 
-            <div className={cls("relative z-1 w-full aspect-square", mediaWrapperClassName)}>
-                <MediaContent
-                    imageSrc={blog.imageSrc}
-                    imageAlt={blog.imageAlt || blog.title}
-                    imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
-                />
-                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
-            </div>
-        </article>
-    );
-});
+        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
+          authorContainerClassName || ""
+        }`}>
+          <img
+            src={blog.authorAvatar}
+            alt={blog.authorName}
+            className={`w-8 h-8 rounded-full object-cover ${
+              authorAvatarClassName || ""
+            }`}
+          />
+          <div className="flex-1 min-w-0">
+            <p className={`text-sm font-medium text-foreground truncate ${
+              authorNameClassName || ""
+            }`}>
+              {blog.authorName}
+            </p>
+            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
+              {blog.date}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ));
 
-BlogCardItem.displayName = "BlogCardItem";
-
-const BlogCardThree = ({
-    blogs = [],
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses = "min-h-none",
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Blog section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    cardContentClassName = "",
-    categoryTagClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    authorContainerClassName = "",
-    authorAvatarClassName = "",
-    authorNameClassName = "",
-    dateClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: BlogCardThreeProps) => {
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
+  return (
+    <div
+      className={`w-full py-20 ${
+        useInvertedBackground ? "bg-background/50" : ""
+      } ${containerClassName}`}
+      aria-label={ariaLabel}
+    >
+      {title && (
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
+          <TextBox
             title={title}
             titleSegments={titleSegments}
-            description={description}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
+            textboxLayout={textboxLayout || "default"}
             titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
             descriptionClassName={textBoxDescriptionClassName}
             tagClassName={textBoxTagClassName}
             buttonContainerClassName={textBoxButtonContainerClassName}
             buttonClassName={textBoxButtonClassName}
             buttonTextClassName={textBoxButtonTextClassName}
-        >
-            {blogs.map((blog) => (
-                <BlogCardItem
-                    key={blog.id}
-                    blog={blog}
-                    useInvertedBackground={useInvertedBackground}
-                    cardClassName={cardClassName}
-                    cardContentClassName={cardContentClassName}
-                    categoryTagClassName={categoryTagClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    excerptClassName={excerptClassName}
-                    authorContainerClassName={authorContainerClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorNameClassName={authorNameClassName}
-                    dateClassName={dateClassName}
-                    mediaWrapperClassName={mediaWrapperClassName}
-                    mediaClassName={mediaClassName}
-                />
-            ))}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack {...cardStackProps}>
+          {blogCards}
         </CardStack>
-    );
+      </div>
+    </div>
+  );
 };
 
-BlogCardThree.displayName = "BlogCardThree";
-
 export default BlogCardThree;
-- 
2.49.1


From 02691a00200d59a417455eec5f911d3cb727a13a Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:27:12 +0000
Subject: [PATCH 3/3] Update src/components/sections/blog/BlogCardTwo.tsx

---
 src/components/sections/blog/BlogCardTwo.tsx | 378 ++++++++-----------
 1 file changed, 166 insertions(+), 212 deletions(-)

diff --git a/src/components/sections/blog/BlogCardTwo.tsx b/src/components/sections/blog/BlogCardTwo.tsx
index c0b3f30..0e2f656 100644
--- a/src/components/sections/blog/BlogCardTwo.tsx
+++ b/src/components/sections/blog/BlogCardTwo.tsx
@@ -1,241 +1,195 @@
 "use client";
 
-import { memo } from "react";
-import Image from "next/image";
-import CardStack from "@/components/cardStack/CardStack";
-import Badge from "@/components/shared/Badge";
-import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { BlogPost } from "@/lib/api/blog";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+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";
 
-type BlogCard = Omit<BlogPost, 'category'> & {
-    category: string | string[];
-};
-
-interface BlogCardTwoProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+export interface BlogCardTwoProps {
+  blogs: Array<{
+    id: string;
+    category: string;
     title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    authorAvatarClassName?: string;
-    authorDateClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    categoryClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    date: string;
+    onBlogClick?: () => void;
+  }>;
+  carouselMode?: "auto" | "buttons";
+  uniformGridCustomHeightClasses?: string;
+  animationType?: CardAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
+  tag?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  useInvertedBackground?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  imageWrapperClassName?: string;
+  imageClassName?: string;
+  categoryClassName?: string;
+  cardTitleClassName?: string;
+  excerptClassName?: string;
+  authorContainerClassName?: string;
+  authorAvatarClassName?: string;
+  authorNameClassName?: string;
+  dateClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
 }
 
-interface BlogCardItemProps {
-    blog: BlogCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    authorAvatarClassName?: string;
-    authorDateClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    categoryClassName?: string;
-}
+const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
+  blogs,
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
+  titleSegments,
+  description,
+  tag,
+  tagAnimation,
+  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 = ""}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const shouldCarousel = blogs.length > 4;
+  const mode = shouldCarousel ? "buttons" : "auto";
 
-const BlogCardItem = memo(({
-    blog,
-    shouldUseLightText,
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    authorAvatarClassName = "",
-    authorDateClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    categoryClassName = "",
-}: BlogCardItemProps) => {
-    return (
-        <article
-            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-            onClick={blog.onBlogClick}
-            role="article"
-            aria-label={`${blog.title} by ${blog.authorName}`}
-        >
-            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
-                <Image
-                    src={blog.imageSrc}
-                    alt={blog.imageAlt || blog.title}
-                    fill
-                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
-                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
-                />
-                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
-            </div>
+  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,
+  };
 
-            <div className="relative z-1 flex flex-col justify-between gap-6 flex-1">
-                <div className="flex flex-col gap-2">
-                    <div className="flex items-center gap-2">
-                        {blog.authorAvatar && (
-                            <Image
-                                src={blog.authorAvatar}
-                                alt={blog.authorName}
-                                width={24}
-                                height={24}
-                                className={cls("h-[var(--text-xs)] w-auto aspect-square rounded-theme object-cover bg-background-accent", authorAvatarClassName)}
-                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
-                            />
-                        )}
-                        <p className={cls("text-xs", shouldUseLightText ? "text-background" : "text-foreground", authorDateClassName)}>
-                            {blog.authorName} • {blog.date}
-                        </p>
-                    </div>
+  const blogCards = blogs.map((blog) => (
+    <div
+      key={blog.id}
+      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
+        cardClassName || ""
+      }`}
+      onClick={blog.onBlogClick}
+    >
+      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
+        <img
+          src={blog.imageSrc}
+          alt={blog.imageAlt || blog.title}
+          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
+            imageClassName || ""
+          }`}
+        />
+        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
+          <ArrowRight className="w-4 h-4 text-foreground" />
+        </button>
+      </div>
 
-                    <h3 className={cls("text-2xl font-medium leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
-                        {blog.title}
-                    </h3>
+      <div className="flex-1 p-6 flex flex-col gap-3">
+        <span className={`text-xs font-semibold text-primary-cta uppercase ${
+          categoryClassName || ""
+        }`}>
+          {blog.category}
+        </span>
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
-                        {blog.excerpt}
-                    </p>
-                </div>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
+          cardTitleClassName || ""
+        }`}>
+          {blog.title}
+        </h3>
 
-                <div className="flex flex-wrap gap-2">
-                    {Array.isArray(blog.category) ? (
-                        blog.category.map((cat, index) => (
-                            <Badge key={`${cat}-${index}`} text={cat} variant="primary" className={categoryClassName} />
-                        ))
-                    ) : (
-                        <Badge text={blog.category} variant="primary" className={categoryClassName} />
-                    )}
-                </div>
-            </div>
-        </article>
-    );
-});
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
+          excerptClassName || ""
+        }`}>
+          {blog.excerpt}
+        </p>
 
-BlogCardItem.displayName = "BlogCardItem";
+        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
+          authorContainerClassName || ""
+        }`}>
+          <img
+            src={blog.authorAvatar}
+            alt={blog.authorName}
+            className={`w-8 h-8 rounded-full object-cover ${
+              authorAvatarClassName || ""
+            }`}
+          />
+          <div className="flex-1 min-w-0">
+            <p className={`text-sm font-medium text-foreground truncate ${
+              authorNameClassName || ""
+            }`}>
+              {blog.authorName}
+            </p>
+            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
+              {blog.date}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ));
 
-const BlogCardTwo = ({
-    blogs = [],
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Blog section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    authorAvatarClassName = "",
-    authorDateClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    categoryClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: BlogCardTwoProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
+  return (
+    <div
+      className={`w-full py-20 ${
+        useInvertedBackground ? "bg-background/50" : ""
+      } ${containerClassName}`}
+      aria-label={ariaLabel}
+    >
+      {title && (
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
+          <TextBox
             title={title}
             titleSegments={titleSegments}
-            description={description}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
+            textboxLayout={textboxLayout || "default"}
             titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
             descriptionClassName={textBoxDescriptionClassName}
             tagClassName={textBoxTagClassName}
             buttonContainerClassName={textBoxButtonContainerClassName}
             buttonClassName={textBoxButtonClassName}
             buttonTextClassName={textBoxButtonTextClassName}
-        >
-            {blogs.map((blog) => (
-                <BlogCardItem
-                    key={blog.id}
-                    blog={blog}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageWrapperClassName={imageWrapperClassName}
-                    imageClassName={imageClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorDateClassName={authorDateClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    excerptClassName={excerptClassName}
-                    categoryClassName={categoryClassName}
-                />
-            ))}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack {...cardStackProps}>
+          {blogCards}
         </CardStack>
-    );
+      </div>
+    </div>
+  );
 };
 
-BlogCardTwo.displayName = "BlogCardTwo";
-
 export default BlogCardTwo;
-- 
2.49.1