src/app/gym-3d/page.tsx

@@ -47,7 +47,7 @@ export default function Gym3DPage() {
     const renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
     renderer.shadowMap.enabled = true;
-    renderer.shadowMap.type = THREE.PCFShadowShadowMap;
+    renderer.shadowMap.type = THREE.PCFShadowMap;
     mountRef.current.appendChild(renderer.domElement);
     rendererRef.current = renderer;
 

src/components/sections/blog/BlogCardOne.tsx

@@ -1,244 +1,222 @@
 "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, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
 
-type BlogCard = BlogPost;
+gsap.registerPlugin(ScrollTrigger);
 
 interface BlogCardOneProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+  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: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  title: string;
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
+  description: string;
+  tag?: string;
+  tagIcon?: React.ComponentType<any>;
+  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,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon: 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 = '',
+}) => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
 
-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>
+  useEffect(() => {
+    if (animationType === 'none' || !sectionRef.current) return;
 
-            <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 cards = cardsRef.current.filter((card): card is HTMLDivElement => card !== null);
+    if (cards.length === 0) return;
 
-                    <h3 className={cls("text-2xl font-medium leading-[1.25] mt-1", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
-                        {blog.title}
-                    </h3>
+    cards.forEach((card, index) => {
+      gsap.set(card, { opacity: 0, y: 20 });
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
-                        {blog.excerpt}
-                    </p>
-                </div>
+      ScrollTrigger.create({
+        trigger: card,
+        onEnter: () => {
+          gsap.to(card, {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            delay: index * 0.1,
+            ease: 'power2.out',
+          });
+        },
+      });
+    });
 
-                <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>
-    );
-});
+    return () => {
+      cards.forEach(() => ScrollTrigger.getAll().forEach(trigger => trigger.kill()));
+    };
+  }, [animationType]);
 
-BlogCardItem.displayName = "BlogCardItem";
+  const gridVariant = blogs.length <= 4 ? 'uniform-all-items-equal' : 'uniform-all-items-equal';
+  const mode = blogs.length >= 5 ? 'auto' : carouselMode;
 
-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);
+  const blogChildren = blogs.map((blog, index) => (
+    <div
+      key={blog.id}
+      ref={el => {
+        cardsRef.current[index] = el;
+      }}
+      className={`cursor-pointer group ${cardClassName}`}
+      onClick={blog.onBlogClick}
+    >
+      {/* Image wrapper with overlay arrow */}
+      <div className={`relative overflow-hidden rounded-lg ${imageWrapperClassName}`}>
+        <img
+          src={blog.imageSrc}
+          alt={blog.imageAlt || blog.title}
+          className={`w-full h-full object-cover transition-transform duration-300 group-hover:scale-110 ${imageClassName}`}
+        />
+        <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+          <div className="text-white text-3xl">→</div>
+        </div>
+      </div>
 
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
-            title={title}
-            titleSegments={titleSegments}
-            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}
-            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}
-                />
-            ))}
-        </CardStack>
-    );
+      {/* Category badge */}
+      <div className={`mt-4 inline-block px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-sm font-semibold ${categoryClassName}`}>
+        {blog.category}
+      </div>
+
+      {/* Title */}
+      <h3 className={`mt-3 text-xl font-bold text-gray-900 dark:text-white line-clamp-2 ${cardTitleClassName}`}>
+        {blog.title}
+      </h3>
+
+      {/* Excerpt */}
+      <p className={`mt-2 text-gray-600 dark:text-gray-300 text-sm line-clamp-2 ${excerptClassName}`}>
+        {blog.excerpt}
+      </p>
+
+      {/* Author info */}
+      <div className={`mt-4 flex items-center gap-3 ${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-semibold text-gray-900 dark:text-white truncate ${authorNameClassName}`}>
+            {blog.authorName}
+          </p>
+          <p className={`text-xs text-gray-500 dark:text-gray-400 ${dateClassName}`}>{blog.date}</p>
+        </div>
+      </div>
+    </div>
+  ));
+
+  return (
+    <section ref={sectionRef} className={`py-12 md:py-20 ${className}`} aria-label={ariaLabel}>
+      <TimelineHorizontalCardStack
+        children={blogChildren}
+        title={title}
+        titleSegments={titleSegments}
+        description={description}
+        tag={tag}
+        tagIcon={TagIcon}
+        tagAnimation={tagAnimation}
+        buttons={buttons}
+        buttonAnimation={buttonAnimation}
+        textboxLayout={textboxLayout}
+        useInvertedBackground={useInvertedBackground}
+        ariaLabel={ariaLabel}
+        className={className}
+        containerClassName={containerClassName}
+        textBoxClassName={textBoxClassName}
+        textBoxTitleClassName={textBoxTitleClassName}
+        textBoxTitleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+        textBoxTitleImageClassName={textBoxTitleImageClassName}
+        textBoxDescriptionClassName={textBoxDescriptionClassName}
+        textBoxTagClassName={textBoxTagClassName}
+        textBoxButtonContainerClassName={textBoxButtonContainerClassName}
+        textBoxButtonClassName={textBoxButtonClassName}
+        textBoxButtonTextClassName={textBoxButtonTextClassName}
+      />
+    </section>
+  );
 };
 
-BlogCardOne.displayName = "BlogCardOne";
-
 export default BlogCardOne;

src/components/sections/blog/BlogCardThree.tsx

@@ -1,288 +1,222 @@
 "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, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
 
-type BlogCard = BlogPost;
+gsap.registerPlugin(ScrollTrigger);
 
 interface BlogCardThreeProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+  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: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  title: string;
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
+  description: string;
+  tag?: string;
+  tagIcon?: React.ComponentType<any>;
+  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,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon: 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 = '',
+}) => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
 
-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);
+  useEffect(() => {
+    if (animationType === 'none' || !sectionRef.current) return;
 
-    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 cards = cardsRef.current.filter((card): card is HTMLDivElement => card !== null);
+    if (cards.length === 0) return;
 
-                <h3 className={cls(
-                    "text-3xl md:text-4xl font-medium leading-tight line-clamp-2",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    cardTitleClassName
-                )}>
-                    {blog.title}
-                </h3>
+    cards.forEach((card, index) => {
+      gsap.set(card, { opacity: 0, y: 20 });
 
-                <p className={cls(
-                    "text-base leading-tight line-clamp-2",
-                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
-                    excerptClassName
-                )}>
-                    {blog.excerpt}
-                </p>
+      ScrollTrigger.create({
+        trigger: card,
+        onEnter: () => {
+          gsap.to(card, {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            delay: index * 0.1,
+            ease: 'power2.out',
+          });
+        },
+      });
+    });
 
-                {(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>
+    return () => {
+      cards.forEach(() => ScrollTrigger.getAll().forEach(trigger => trigger.kill()));
+    };
+  }, [animationType]);
 
-            <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>
-    );
-});
+  const gridVariant = blogs.length <= 4 ? 'uniform-all-items-equal' : 'uniform-all-items-equal';
+  const mode = blogs.length >= 5 ? 'auto' : carouselMode;
 
-BlogCardItem.displayName = "BlogCardItem";
+  const blogChildren = blogs.map((blog, index) => (
+    <div
+      key={blog.id}
+      ref={el => {
+        cardsRef.current[index] = el;
+      }}
+      className={`cursor-pointer group ${cardClassName}`}
+      onClick={blog.onBlogClick}
+    >
+      {/* Image wrapper with overlay arrow */}
+      <div className={`relative overflow-hidden rounded-lg ${imageWrapperClassName}`}>
+        <img
+          src={blog.imageSrc}
+          alt={blog.imageAlt || blog.title}
+          className={`w-full h-full object-cover transition-transform duration-300 group-hover:scale-110 ${imageClassName}`}
+        />
+        <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+          <div className="text-white text-3xl">→</div>
+        </div>
+      </div>
 
-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}
-            
-            title={title}
-            titleSegments={titleSegments}
-            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}
-            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}
-                />
-            ))}
-        </CardStack>
-    );
+      {/* Category badge */}
+      <div className={`mt-4 inline-block px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-sm font-semibold ${categoryClassName}`}>
+        {blog.category}
+      </div>
+
+      {/* Title */}
+      <h3 className={`mt-3 text-xl font-bold text-gray-900 dark:text-white line-clamp-2 ${cardTitleClassName}`}>
+        {blog.title}
+      </h3>
+
+      {/* Excerpt */}
+      <p className={`mt-2 text-gray-600 dark:text-gray-300 text-sm line-clamp-2 ${excerptClassName}`}>
+        {blog.excerpt}
+      </p>
+
+      {/* Author info */}
+      <div className={`mt-4 flex items-center gap-3 ${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-semibold text-gray-900 dark:text-white truncate ${authorNameClassName}`}>
+            {blog.authorName}
+          </p>
+          <p className={`text-xs text-gray-500 dark:text-gray-400 ${dateClassName}`}>{blog.date}</p>
+        </div>
+      </div>
+    </div>
+  ));
+
+  return (
+    <section ref={sectionRef} className={`py-12 md:py-20 ${className}`} aria-label={ariaLabel}>
+      <TimelineHorizontalCardStack
+        children={blogChildren}
+        title={title}
+        titleSegments={titleSegments}
+        description={description}
+        tag={tag}
+        tagIcon={TagIcon}
+        tagAnimation={tagAnimation}
+        buttons={buttons}
+        buttonAnimation={buttonAnimation}
+        textboxLayout={textboxLayout}
+        useInvertedBackground={useInvertedBackground}
+        ariaLabel={ariaLabel}
+        className={className}
+        containerClassName={containerClassName}
+        textBoxClassName={textBoxClassName}
+        textBoxTitleClassName={textBoxTitleClassName}
+        textBoxTitleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+        textBoxTitleImageClassName={textBoxTitleImageClassName}
+        textBoxDescriptionClassName={textBoxDescriptionClassName}
+        textBoxTagClassName={textBoxTagClassName}
+        textBoxButtonContainerClassName={textBoxButtonContainerClassName}
+        textBoxButtonClassName={textBoxButtonClassName}
+        textBoxButtonTextClassName={textBoxButtonTextClassName}
+      />
+    </section>
+  );
 };
 
-BlogCardThree.displayName = "BlogCardThree";
-
 export default BlogCardThree;

src/components/sections/blog/BlogCardTwo.tsx

@@ -1,241 +1,222 @@
 "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, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
 
-type BlogCard = Omit<BlogPost, 'category'> & {
-    category: string | string[];
-};
+gsap.registerPlugin(ScrollTrigger);
 
 interface BlogCardTwoProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+  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: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  title: string;
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
+  description: string;
+  tag?: string;
+  tagIcon?: React.ComponentType<any>;
+  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,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon: 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 = '',
+}) => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
 
-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>
+  useEffect(() => {
+    if (animationType === 'none' || !sectionRef.current) return;
 
-            <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 cards = cardsRef.current.filter((card): card is HTMLDivElement => card !== null);
+    if (cards.length === 0) return;
 
-                    <h3 className={cls("text-2xl font-medium leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
-                        {blog.title}
-                    </h3>
+    cards.forEach((card, index) => {
+      gsap.set(card, { opacity: 0, y: 20 });
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
-                        {blog.excerpt}
-                    </p>
-                </div>
+      ScrollTrigger.create({
+        trigger: card,
+        onEnter: () => {
+          gsap.to(card, {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            delay: index * 0.1,
+            ease: 'power2.out',
+          });
+        },
+      });
+    });
 
-                <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>
-    );
-});
+    return () => {
+      cards.forEach(() => ScrollTrigger.getAll().forEach(trigger => trigger.kill()));
+    };
+  }, [animationType]);
 
-BlogCardItem.displayName = "BlogCardItem";
+  const gridVariant = blogs.length <= 4 ? 'uniform-all-items-equal' : 'uniform-all-items-equal';
+  const mode = blogs.length >= 5 ? 'auto' : carouselMode;
 
-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);
+  const blogChildren = blogs.map((blog, index) => (
+    <div
+      key={blog.id}
+      ref={el => {
+        cardsRef.current[index] = el;
+      }}
+      className={`cursor-pointer group ${cardClassName}`}
+      onClick={blog.onBlogClick}
+    >
+      {/* Image wrapper with overlay arrow */}
+      <div className={`relative overflow-hidden rounded-lg ${imageWrapperClassName}`}>
+        <img
+          src={blog.imageSrc}
+          alt={blog.imageAlt || blog.title}
+          className={`w-full h-full object-cover transition-transform duration-300 group-hover:scale-110 ${imageClassName}`}
+        />
+        <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+          <div className="text-white text-3xl">→</div>
+        </div>
+      </div>
 
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
-            title={title}
-            titleSegments={titleSegments}
-            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}
-            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}
-                />
-            ))}
-        </CardStack>
-    );
+      {/* Category badge */}
+      <div className={`mt-4 inline-block px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-sm font-semibold ${categoryClassName}`}>
+        {blog.category}
+      </div>
+
+      {/* Title */}
+      <h3 className={`mt-3 text-xl font-bold text-gray-900 dark:text-white line-clamp-2 ${cardTitleClassName}`}>
+        {blog.title}
+      </h3>
+
+      {/* Excerpt */}
+      <p className={`mt-2 text-gray-600 dark:text-gray-300 text-sm line-clamp-2 ${excerptClassName}`}>
+        {blog.excerpt}
+      </p>
+
+      {/* Author info */}
+      <div className={`mt-4 flex items-center gap-3 ${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-semibold text-gray-900 dark:text-white truncate ${authorNameClassName}`}>
+            {blog.authorName}
+          </p>
+          <p className={`text-xs text-gray-500 dark:text-gray-400 ${dateClassName}`}>{blog.date}</p>
+        </div>
+      </div>
+    </div>
+  ));
+
+  return (
+    <section ref={sectionRef} className={`py-12 md:py-20 ${className}`} aria-label={ariaLabel}>
+      <TimelineHorizontalCardStack
+        children={blogChildren}
+        title={title}
+        titleSegments={titleSegments}
+        description={description}
+        tag={tag}
+        tagIcon={TagIcon}
+        tagAnimation={tagAnimation}
+        buttons={buttons}
+        buttonAnimation={buttonAnimation}
+        textboxLayout={textboxLayout}
+        useInvertedBackground={useInvertedBackground}
+        ariaLabel={ariaLabel}
+        className={className}
+        containerClassName={containerClassName}
+        textBoxClassName={textBoxClassName}
+        textBoxTitleClassName={textBoxTitleClassName}
+        textBoxTitleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+        textBoxTitleImageClassName={textBoxTitleImageClassName}
+        textBoxDescriptionClassName={textBoxDescriptionClassName}
+        textBoxTagClassName={textBoxTagClassName}
+        textBoxButtonContainerClassName={textBoxButtonContainerClassName}
+        textBoxButtonClassName={textBoxButtonClassName}
+        textBoxButtonTextClassName={textBoxButtonTextClassName}
+      />
+    </section>
+  );
 };
 
-BlogCardTwo.displayName = "BlogCardTwo";
-
 export default BlogCardTwo;