Add src/hooks/useCardAnimation.ts

Update src/components/sections/testimonial/TestimonialCardSix.tsx
Update src/components/sections/team/TeamCardEleven.tsx
2026-03-08 21:31:02 +00:00 · 2026-03-08 21:31:01 +00:00 · 2026-03-08 21:31:00 +00:00 · 2026-03-08 21:31:00 +00:00 · 2026-03-08 21:31:00 +00:00 · 2026-03-08 21:30:59 +00:00
45 changed files with 2206 additions and 7470 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,59 +1,35 @@
 import type { Metadata } from "next";
 import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import { Lato } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
+import "./styles/variables.css";
-import Tag from "@/tag/Tag";
+import "./styles/base.css";
 const halant = Halant({
  variable: "--font-halant",  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
 });
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });
 const lato = Lato({
  variable: "--font-lato",  subsets: ["latin"],
  weight: ["100", "300", "400", "700", "900"],
 });
 export const metadata: Metadata = {
-  title: "SocialSync | Real Estate Social Media Marketing",  description: "Strategic social media marketing agency for real estate professionals. Increase engagement, generate leads, and grow your business with proven real estate social media strategies.",  keywords: "real estate social media marketing, real estate marketing agency, real estate social media strategy, real estate lead generation, agent social media, realtor marketing",  metadataBase: new URL("https://socialsync.io"),
+  title: "SocialSync - Real Estate Social Media Marketing",  description: "Elevate your real estate brand with strategic social media that converts leads into clients."};
  alternates: {
    canonical: "https://socialsync.io"
  },
  openGraph: {
    title: "SocialSync | Real Estate Social Media Marketing",    description: "Strategic social media marketing for real estate professionals that converts leads into clients.",    url: "https://socialsync.io",    siteName: "SocialSync",    type: "website",    images: [
      {
        url: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139102.jpg",        alt: "SocialSync real estate social media marketing"
      }
    ]
  },
  twitter: {
    card: "summary_large_image",    title: "SocialSync | Real Estate Social Media Marketing",    description: "Strategic social media marketing for real estate professionals that converts leads into clients.",    images: ["http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139102.jpg"]
  },
  robots: {
    index: true,
    follow: true
  }
 };
 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
+      <body className={`${inter.variable}`}>
-        <body
+        {children}
-          className={`${halant.variable} ${inter.variable} ${lato.variable} antialiased`}
+        <script
-        >
+          src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js"
-          <Tag />
+          async
-          {children}
+        />
        <script
          async
          dangerouslySetInnerHTML={{
            __html: `const lenis = new Lenis({\n  duration: 1.2,\n  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n  direction: 'vertical',\n  gestureDirection: 'vertical',\n  smooth: true,\n  smoothTouch: false,\n  touchMultiplier: 2,\n});\n\nfunction raf(time) {\n  lenis.raf(time);\n  requestAnimationFrame(raf);\n}\n\nrequestAnimationFrame(raf);`
          }}
        />
        <script
          dangerouslySetInnerHTML={{
@@ -1422,7 +1398,6 @@ export default function RootLayout({
          }}
        />
      </body>
      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,11 +19,11 @@ export default function LandingPage() {
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
-      background="circleGradient"
+      background="none"
-      cardStyle="outline"
+      cardStyle="glass-elevated"
-      primaryButtonStyle="diagonal-gradient"
+      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
@@ -34,7 +34,7 @@ export default function LandingPage() {
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
-          button={{ text: "Get Started", href: "#contact" }}
+          button={{ text: "Book a Meeting", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>
@@ -43,13 +43,13 @@ export default function LandingPage() {
        <HeroLogoBillboardSplit
          logoText="SocialSync"
          description="Elevate your real estate brand with strategic social media that converts leads into clients. Our proven approach transforms your property listings into engaging stories."
-          background={{ variant: "radial-gradient" }}
+          background={{ variant: "plain" }}
          buttons={[
            { text: "Watch Our Strategy", href: "#video" },
-            { text: "Book a Consultation", href: "#contact" }
+            { text: "Book a Meeting", href: "#contact" }
          ]}
          layoutOrder="default"
-          videoSrc="http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139102.jpg"
+          videoSrc="https://commondatastorage.googleapis.com/gtv-videos-library/sample/BigBuckBunny.mp4"
          videoAriaLabel="SocialSync real estate social media marketing strategy video"
          frameStyle="browser"
          mediaAnimation="slide-up"
@@ -65,8 +65,8 @@ export default function LandingPage() {
          description="By combining deep industry knowledge with cutting-edge digital strategy, we create content that resonates with today's homebuyers."
          subdescription="Used by top real estate teams across North America"
          icon={BarChart3}
-          imageSrc="http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164813.jpg"
+          videoSrc="https://commondatastorage.googleapis.com/gtv-videos-library/sample/ElephantsDream.mp4"
-          imageAlt="SocialSync marketing team collaborating"
+          videoAriaLabel="SocialSync marketing team collaborating"
          mediaAnimation="blur-reveal"
          useInvertedBackground={false}
        />
@@ -80,16 +80,16 @@ export default function LandingPage() {
          tagIcon={Home}
          features={[
            {
-              id: "1",              title: "Content Strategy & Planning",              description: "Customized content calendars that align with your sales cycles, seasonal trends, and target market. We plan, create, and schedule professional content that keeps your properties top-of-mind.",              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-interior-design-template_23-2150031546.jpg?_wi=1",              imageAlt: "Social media content strategy dashboard"
+              id: "1",              title: "Content Strategy & Planning",              description: "Customized content calendars that align with your sales cycles, seasonal trends, and target market. We plan, create, and schedule professional content that keeps your properties top-of-mind.",              videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerBlazes.mp4"
            },
            {
-              id: "2",              title: "Professional Photo & Video Production",              description: "High-quality visual content that showcases properties at their best. From drone photography to virtual tours, we create assets that drive engagement and qualify leads.",              imageSrc: "http://img.b2bpic.net/free-psd/home-design-instagram-posts_23-2150443550.jpg",              imageAlt: "Professional real estate photography"
+              id: "2",              title: "Professional Photo & Video Production",              description: "High-quality visual content that showcases properties at their best. From drone photography to virtual tours, we create assets that drive engagement and qualify leads.",              videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerEscapes.mp4"
            },
            {
-              id: "3",              title: "Performance Analytics & Optimization",              description: "Data-driven insights into what's working. We track engagement, lead generation, and ROI to continuously refine your strategy and maximize your marketing investment.",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-checking-social-media-work_482257-115243.jpg",              imageAlt: "Real estate marketing analytics dashboard"
+              id: "3",              title: "Performance Analytics & Optimization",              description: "Data-driven insights into what's working. We track engagement, lead generation, and ROI to continuously refine your strategy and maximize your marketing investment.",              videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/ForBiggerJoyrides.mp4"
            },
            {
-              id: "4",              title: "Lead Generation & Nurturing",              description: "Targeted campaigns that turn followers into qualified leads. We implement proven funnels and messaging that convert social engagement into actual transactions.",              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-interior-design-template_23-2150031546.jpg?_wi=2",              imageAlt: "Lead generation marketing funnel"
+              id: "4",              title: "Lead Generation & Nurturing",              description: "Targeted campaigns that turn followers into qualified leads. We implement proven funnels and messaging that convert social engagement into actual transactions.",              videoSrc: "https://commondatastorage.googleapis.com/gtv-videos-library/sample/Sintel.mp4"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
@@ -106,28 +106,22 @@ export default function LandingPage() {
          tag="Success Stories"
          testimonials={[
            {
-              id: "1",              name: "Maria Rodriguez",              role: "Luxury Real Estate Agent",              company: "Prestige Properties Group",              rating: 5,
+              id: "1",              name: "Maria Rodriguez",              role: "Luxury Real Estate Agent",              company: "Prestige Properties Group",              rating: 5
              imageSrc: "http://img.b2bpic.net/free-photo/positive-businessman-standing-street_23-2147932253.jpg",              imageAlt: "Maria Rodriguez"
            },
            {
-              id: "2",              name: "James Mitchell",              role: "Real Estate Team Lead",              company: "Modern Homes Realty",              rating: 5,
+              id: "2",              name: "James Mitchell",              role: "Real Estate Team Lead",              company: "Modern Homes Realty",              rating: 5
              imageSrc: "http://img.b2bpic.net/free-photo/modern-man-with-arms-crossed_23-2148560392.jpg",              imageAlt: "James Mitchell"
            },
            {
-              id: "3",              name: "Sarah Chen",              role: "Independent Realtor",              company: "Chen Real Estate Solutions",              rating: 5,
+              id: "3",              name: "Sarah Chen",              role: "Independent Realtor",              company: "Chen Real Estate Solutions",              rating: 5
              imageSrc: "http://img.b2bpic.net/free-photo/smile-woman-talking-phone-looking-camera_23-2148317284.jpg",              imageAlt: "Sarah Chen"
            },
            {
-              id: "4",              name: "David Thompson",              role: "Brokerage Owner",              company: "Thompson & Associates",              rating: 5,
+              id: "4",              name: "David Thompson",              role: "Brokerage Owner",              company: "Thompson & Associates",              rating: 5
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",              imageAlt: "David Thompson"
            },
            {
-              id: "5",              name: "Jessica Lee",              role: "Top Producer",              company: "Premier Real Estate Partners",              rating: 5,
+              id: "5",              name: "Jessica Lee",              role: "Top Producer",              company: "Premier Real Estate Partners",              rating: 5
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-woman-professional-blazer-outdoors-laptop_23-2150296623.jpg",              imageAlt: "Jessica Lee"
            },
            {
-              id: "6",              name: "Michael Santos",              role: "Real Estate Executive",              company: "Elite Properties LLC",              rating: 5,
+              id: "6",              name: "Michael Santos",              role: "Real Estate Executive",              company: "Elite Properties LLC",              rating: 5
              imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-holding-hand-pocket_23-2148095771.jpg",              imageAlt: "Michael Santos"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
@@ -147,9 +141,6 @@ export default function LandingPage() {
          names={[
            "Zillow",            "RE/MAX",            "Century 21",            "Keller Williams",            "Coldwell Banker",            "Instagram",            "Facebook",            "TikTok"
          ]}
          logos={[
            "http://img.b2bpic.net/free-vector/smart-home-flat-style_23-2147842338.jpg",            "http://img.b2bpic.net/free-vector/flat-design-stationery-store-logo-template_23-2149845359.jpg",            "http://img.b2bpic.net/free-vector/gradient-az-za-logo-template_23-2149239680.jpg",            "http://img.b2bpic.net/free-vector/modern-logo-design-real-estate-sector_1017-7295.jpg",            "http://img.b2bpic.net/free-vector/logotype_23-2148154594.jpg",            "http://img.b2bpic.net/free-vector/social-media-logotype-collection_23-2148081192.jpg",            "http://img.b2bpic.net/free-vector/mobile-background-with-facebook-emoticons-flat-design_23-2147665558.jpg",            "http://img.b2bpic.net/free-vector/modern-social-media-lower-thirds-perfect-motion-graphics_1361-3329.jpg"
          ]}
          speed={40}
          showCard={true}
        />
@@ -191,15 +182,15 @@ export default function LandingPage() {
            {
              title: "Product",              items: [
                { label: "Services", href: "#services" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Results", href: "#results" },
-                { label: "Results", href: "#results" }
+                { label: "About", href: "#about" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
-                { label: "Blog", href: "/blog" }
+                { label: "FAQ", href: "#faq" }
              ]
            },
            {
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */
-  --background: #f7f6f7;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #f8f8f8;
-  --foreground: #25190c;
+  --foreground: #1a1a1a;
-  --primary-cta: #ff6207;
+  --primary-cta: #000000;
  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f0f0f0;
  --secondary-cta-text: #25190c;
-  --accent: #ffce93;
+  --accent: #d0d0d0;
-  --background-accent: #e8cfa8;
+  --background-accent: #e5e5e5;
  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--- a/src/components/cardStack/CardList.tsx
+++ b/src/components/cardStack/CardList.tsx
@@ -1,123 +1,56 @@
-"use client";
+'use client';
-import { memo, Children } from "react";
+import React, { useRef, useEffect } from 'react';
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { cn } from '@/lib/utils';
 import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-interface CardListProps {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-  children: React.ReactNode;
+
 export interface CardListProps {
  children: React.ReactNode[];
  animationType: CardAnimationType;
-  useUncappedRounding?: boolean;
+  itemCount: number;
-  title?: string;
+  useIndividualTriggers?: boolean;
  titleSegments?: TitleSegment[];
  description?: string;
  tag?: string;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  textboxLayout: TextboxLayout;
  useInvertedBackground?: InvertedBackground;
  disableCardWrapper?: boolean;
  ariaLabel?: string;
  className?: string;
  containerClassName?: string;
  cardClassName?: string;
  textBoxClassName?: string;
  titleClassName?: string;
  titleImageWrapperClassName?: string;
  titleImageClassName?: string;
  descriptionClassName?: string;
  tagClassName?: string;
  buttonContainerClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
 }
-const CardList = ({
+export const CardList: React.FC<CardListProps> = ({
  children,
  animationType,
-  useUncappedRounding = false,
+  itemCount,
-  title,
+  useIndividualTriggers = false,
-  titleSegments,
+  className,
-  description,
+}) => {
-  tag,
+  const containerRef = useRef<HTMLDivElement>(null);
-  tagIcon,
+  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
-  tagAnimation,
+
-  buttons,
+  const { itemRefs } = useCardAnimation({
-  buttonAnimation,
+    animationType,
-  textboxLayout,
+    itemCount,
-  useInvertedBackground,
+    useIndividualTriggers,
-  disableCardWrapper = false,
+  });
-  ariaLabel = "Card list",
+
-  className = "",
+  useEffect(() => {
-  containerClassName = "",
+    // Synchronize refs if needed
-  cardClassName = "",
+    cardRefs.current = cardRefs.current.slice(0, itemCount);
-  textBoxClassName = "",
+  }, [itemCount]);
  titleClassName = "",
  titleImageWrapperClassName = "",
  titleImageClassName = "",
  descriptionClassName = "",
  tagClassName = "",
  buttonContainerClassName = "",
  buttonClassName = "",
  buttonTextClassName = "",
 }: CardListProps) => {
  const childrenArray = Children.toArray(children);
  const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true });
  return (
-    <section
+    <div ref={containerRef} className={cn('card-list', className)}>
-      aria-label={ariaLabel}
+      {React.Children.map(children, (child, index) => (
-      className={cls(
+        <div
-        "relative py-20 w-full",
+          key={index}
-        useInvertedBackground && "bg-foreground",
+          ref={(el) => {
-        className
+            if (el) cardRefs.current[index] = el;
-      )}
+            if (itemRefs && itemRefs[index]) itemRefs[index].current = el;
-    >
+          }}
-      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+          className="card-item"
-        <CardStackTextBox
+        >
-          title={title}
+          {child}
          titleSegments={titleSegments}
          description={description}
          tag={tag}
          tagIcon={tagIcon}
          tagAnimation={tagAnimation}
          buttons={buttons}
          buttonAnimation={buttonAnimation}
          textboxLayout={textboxLayout}
          useInvertedBackground={useInvertedBackground}
          textBoxClassName={textBoxClassName}
          titleClassName={titleClassName}
          titleImageWrapperClassName={titleImageWrapperClassName}
          titleImageClassName={titleImageClassName}
          descriptionClassName={descriptionClassName}
          tagClassName={tagClassName}
          buttonContainerClassName={buttonContainerClassName}
          buttonClassName={buttonClassName}
          buttonTextClassName={buttonTextClassName}
        />
        <div className="flex flex-col gap-6">
          {childrenArray.map((child, index) => (
            <div
              key={index}
              ref={(el) => { itemRefs.current[index] = el; }}
              className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)}
            >
              {child}
            </div>
          ))}
        </div>
-      </div>
+      ))}
-    </section>
+    </div>
  );
 };
-CardList.displayName = "CardList";
+export default CardList;
 export default memo(CardList);
--- a/src/components/cardStack/CardStack.tsx
+++ b/src/components/cardStack/CardStack.tsx
@@ -1,229 +1,91 @@
-"use client";
+import React, { useRef, useEffect, useState } from 'react';
 import { cn } from '@/lib/utils';
 import TimelineBase from './layouts/timelines/TimelineBase';
-import { memo, Children } from "react";
+interface CardStackProps {
-import { CardStackProps } from "./types";
+  children: React.ReactNode;
-import GridLayout from "./layouts/grid/GridLayout";
+  mode?: 'auto' | 'buttons';
-import AutoCarousel from "./layouts/carousels/AutoCarousel";
+  gridVariant?: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row' | 'timeline';
-import ButtonCarousel from "./layouts/carousels/ButtonCarousel";
+  uniformGridCustomHeightClasses?: string;
-import TimelineBase from "./layouts/timelines/TimelineBase";
+  gridRowsClassName?: string;
-import { gridConfigs } from "./layouts/grid/gridConfigs";
+  itemHeightClassesOverride?: Array<string>;
  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
  supports3DAnimation?: boolean;
  carouselThreshold?: number;
  bottomContent?: React.ReactNode;
  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;
  gridClassName?: string;
  carouselClassName?: string;
  carouselItemClassName?: string;
  controlsClassName?: string;
  textBoxClassName?: string;
  titleClassName?: string;
  titleImageWrapperClassName?: string;
  titleImageClassName?: string;
  descriptionClassName?: string;
  tagClassName?: string;
  buttonContainerClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
 }
-const CardStack = ({
+export const CardStack: React.FC<CardStackProps> = ({
-    children,
+  children,
-    mode = "buttons",
+  mode = 'buttons',
-    gridVariant = "uniform-all-items-equal",
+  gridVariant = 'uniform-all-items-equal',
-    uniformGridCustomHeightClasses,
+  animationType,
-    gridRowsClassName,
+  textboxLayout,
-    itemHeightClassesOverride,
+  ariaLabel = 'Card stack',
-    animationType,
+  className,
-    supports3DAnimation = false,
+  containerClassName,
-    title,
+  ...props
-    titleSegments,
+}) => {
-    description,
+  const containerRef = useRef<HTMLDivElement>(null);
-    tag,
+  const [itemCount, setItemCount] = useState(0);
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout = "default",
    useInvertedBackground,
    carouselThreshold = 5,
    bottomContent,
    className = "",
    containerClassName = "",
    gridClassName = "",
    carouselClassName = "",
    carouselItemClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    titleClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    descriptionClassName = "",
    tagClassName = "",
    buttonContainerClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    ariaLabel = "Card stack",
 }: CardStackProps) => {
    const childrenArray = Children.toArray(children);
    const itemCount = childrenArray.length;
-    // Check if the current grid config has gridRows defined
+  useEffect(() => {
-    const gridConfig = gridConfigs[gridVariant]?.[itemCount];
+    if (containerRef.current) {
-    const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows;
+      const cards = containerRef.current.querySelectorAll('[data-card-item]');
-
+      setItemCount(cards.length);
    // If grid has fixed row heights and we have uniformGridCustomHeightClasses,
    // we need to use min-h-0 on md+ to prevent conflicts
    let adjustedHeightClasses = uniformGridCustomHeightClasses;
    if (hasFixedGridRows && uniformGridCustomHeightClasses) {
        // Extract the mobile min-height and add md:min-h-0
        const mobileMinHeight = uniformGridCustomHeightClasses.split(' ')[0];
        adjustedHeightClasses = `${mobileMinHeight} md:min-h-0`;
    }
  }, [children]);
-    // Timeline layout for zigzag pattern (works best with 3-6 items)
+  const isTimeline = gridVariant === 'timeline' && itemCount >= 3 && itemCount <= 6;
-    if (gridVariant === "timeline" && itemCount >= 3 && itemCount <= 6) {
+  const isCarousel = itemCount >= (props.carouselThreshold || 5);
        // Convert depth-3d to scale-rotate for timeline (doesn't support 3D)
        const timelineAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
-        return (
+  return (
-            <TimelineBase
+    <div
-                variant={gridVariant}
+      ref={containerRef}
-                uniformGridCustomHeightClasses={adjustedHeightClasses}
+      className={cn('card-stack', containerClassName)}
-                animationType={timelineAnimationType}
+      aria-label={ariaLabel}
-                title={title}
+    >
-                titleSegments={titleSegments}
+      {isTimeline ? (
-                description={description}
+        <TimelineBase className={className}>
-                tag={tag}
+          {children}
-                tagIcon={tagIcon}
+        </TimelineBase>
-                tagAnimation={tagAnimation}
+      ) : isCarousel && mode === 'buttons' ? (
-                buttons={buttons}
+        <div className={cn('carousel-mode', className)}>
-                buttonAnimation={buttonAnimation}
+          {children}
-                textboxLayout={textboxLayout}
+        </div>
-                useInvertedBackground={useInvertedBackground}
+      ) : (
-                className={className}
+        <div className={cn('grid-mode', className)}>
-                containerClassName={containerClassName}
+          {children}
-                textBoxClassName={textBoxClassName}
+        </div>
-                titleClassName={titleClassName}
+      )}
-                titleImageWrapperClassName={titleImageWrapperClassName}
+    </div>
-                titleImageClassName={titleImageClassName}
+  );
                descriptionClassName={descriptionClassName}
                tagClassName={tagClassName}
                buttonContainerClassName={buttonContainerClassName}
                buttonClassName={buttonClassName}
                buttonTextClassName={buttonTextClassName}
                ariaLabel={ariaLabel}
            >
                {childrenArray}
            </TimelineBase>
        );
    }
    // Use grid for items below threshold, carousel for items at or above threshold
    // Timeline with 7+ items will also use carousel
    const useCarousel = itemCount >= carouselThreshold || (gridVariant === "timeline" && itemCount > 6);
    // Grid layout for 1-4 items
    if (!useCarousel) {
        return (
            <GridLayout
                itemCount={itemCount}
                gridVariant={gridVariant}
                uniformGridCustomHeightClasses={adjustedHeightClasses}
                gridRowsClassName={gridRowsClassName}
                itemHeightClassesOverride={itemHeightClassesOverride}
                animationType={animationType}
                supports3DAnimation={supports3DAnimation}
                title={title}
                titleSegments={titleSegments}
                description={description}
                tag={tag}
                tagIcon={tagIcon}
                tagAnimation={tagAnimation}
                buttons={buttons}
                buttonAnimation={buttonAnimation}
                textboxLayout={textboxLayout}
                useInvertedBackground={useInvertedBackground}
                bottomContent={bottomContent}
                className={className}
                containerClassName={containerClassName}
                gridClassName={gridClassName}
                textBoxClassName={textBoxClassName}
                titleClassName={titleClassName}
                titleImageWrapperClassName={titleImageWrapperClassName}
                titleImageClassName={titleImageClassName}
                descriptionClassName={descriptionClassName}
                tagClassName={tagClassName}
                buttonContainerClassName={buttonContainerClassName}
                buttonClassName={buttonClassName}
                buttonTextClassName={buttonTextClassName}
                ariaLabel={ariaLabel}
            >
                {childrenArray}
            </GridLayout>
        );
    }
    // Auto-scroll carousel for 5+ items
    if (mode === "auto") {
        // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
        const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
        return (
            <AutoCarousel
                uniformGridCustomHeightClasses={adjustedHeightClasses}
                animationType={carouselAnimationType}
                title={title}
                titleSegments={titleSegments}
                description={description}
                tag={tag}
                tagIcon={tagIcon}
                tagAnimation={tagAnimation}
                buttons={buttons}
                buttonAnimation={buttonAnimation}
                textboxLayout={textboxLayout}
                useInvertedBackground={useInvertedBackground}
                bottomContent={bottomContent}
                className={className}
                containerClassName={containerClassName}
                carouselClassName={carouselClassName}
                textBoxClassName={textBoxClassName}
                titleClassName={titleClassName}
                titleImageWrapperClassName={titleImageWrapperClassName}
                titleImageClassName={titleImageClassName}
                descriptionClassName={descriptionClassName}
                tagClassName={tagClassName}
                buttonContainerClassName={buttonContainerClassName}
                buttonClassName={buttonClassName}
                buttonTextClassName={buttonTextClassName}
                ariaLabel={ariaLabel}
            >
                {childrenArray}
            </AutoCarousel>
        );
    }
    // Button-controlled carousel for 5+ items
    // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
    const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
    return (
        <ButtonCarousel
            uniformGridCustomHeightClasses={adjustedHeightClasses}
            animationType={carouselAnimationType}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            useInvertedBackground={useInvertedBackground}
            bottomContent={bottomContent}
            className={className}
            containerClassName={containerClassName}
            carouselClassName={carouselClassName}
            carouselItemClassName={carouselItemClassName}
            controlsClassName={controlsClassName}
            textBoxClassName={textBoxClassName}
            titleClassName={titleClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            descriptionClassName={descriptionClassName}
            tagClassName={tagClassName}
            buttonContainerClassName={buttonContainerClassName}
            buttonClassName={buttonClassName}
            buttonTextClassName={buttonTextClassName}
            ariaLabel={ariaLabel}
        >
            {childrenArray}
        </ButtonCarousel>
    );
 };
-CardStack.displayName = "CardStack";
+export default CardStack;
 export default memo(CardStack);
--- a/src/components/cardStack/hooks/useCardAnimation.ts
+++ b/src/components/cardStack/hooks/useCardAnimation.ts
@@ -1,187 +1,54 @@
-import { useRef } from "react";
+'use client';
-import { useGSAP } from "@gsap/react";
+
-import gsap from "gsap";
+import { useEffect, useRef } from 'react';
-import { ScrollTrigger } from "gsap/ScrollTrigger";
+import gsap from 'gsap';
-import type { CardAnimationType, GridVariant } from "../types";
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { useDepth3DAnimation } from "./useDepth3DAnimation";
 gsap.registerPlugin(ScrollTrigger);
-interface UseCardAnimationProps {
+interface UseCardAnimationReturn {
-  animationType: CardAnimationType | "depth-3d";
+  isMobile: boolean;
-  itemCount: number;
+  itemRefs: React.RefObject<HTMLDivElement>[];
  isGrid?: boolean;
  supports3DAnimation?: boolean;
  gridVariant?: GridVariant;
  useIndividualTriggers?: boolean;
 }
-export const useCardAnimation = ({
+export const useCardAnimation = (itemCount: number): UseCardAnimationReturn => {
-  animationType,
+  const itemRefs = useRef<React.RefObject<HTMLDivElement>[]>([]);
-  itemCount,
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
  isGrid = true,
  supports3DAnimation = false,
  gridVariant,
  useIndividualTriggers = false
 }: UseCardAnimationProps) => {
  const itemRefs = useRef<(HTMLElement | null)[]>([]);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const perspectiveRef = useRef<HTMLDivElement | null>(null);
  const bottomContentRef = useRef<HTMLDivElement | null>(null);
-  // Enable 3D effect only when explicitly supported and conditions are met
+  useEffect(() => {
-  const { isMobile } = useDepth3DAnimation({
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
-    itemRefs,
+    for (let i = itemRefs.current.length; i < itemCount; i++) {
-    containerRef,
+      itemRefs.current[i] = { current: null };
    perspectiveRef,
    isEnabled: animationType === "depth-3d" && isGrid && supports3DAnimation && gridVariant === "uniform-all-items-equal",
  });
  // Use scale-rotate as fallback when depth-3d conditions aren't met
  const effectiveAnimationType =
    animationType === "depth-3d" && (isMobile || !isGrid || gridVariant !== "uniform-all-items-equal")
      ? "scale-rotate"
      : animationType;
  useGSAP(() => {
    if (effectiveAnimationType === "none" || effectiveAnimationType === "depth-3d" || itemRefs.current.length === 0) return;
    const items = itemRefs.current.filter((el) => el !== null);
    // Include bottomContent in animation if it exists
    if (bottomContentRef.current) {
      items.push(bottomContentRef.current);
    }
  }, [itemCount]);
-    if (effectiveAnimationType === "opacity") {
+  useEffect(() => {
-      if (useIndividualTriggers) {
+    if (!isMobile) {
-        items.forEach((item) => {
+      itemRefs.current.forEach((ref, index) => {
        if (ref.current) {
          gsap.fromTo(
-            item,
+            ref.current,
-            { opacity: 0 },
+            { opacity: 0, y: 20 },
            {
              opacity: 1,
-              duration: 1.25,
+              y: 0,
-              ease: "sine",
+              duration: 0.6,
              delay: index * 0.1,
              scrollTrigger: {
-                trigger: item,
+                trigger: ref.current,
-                start: "top 80%",
+                start: 'top 80%',
-                toggleActions: "play none none none",
+                end: 'top 20%',
                scrub: false,
              },
            }
          );
-        });
+        }
      } else {
        gsap.fromTo(
          items,
          { opacity: 0 },
          {
            opacity: 1,
            duration: 1.25,
            stagger: 0.15,
            ease: "sine",
            scrollTrigger: {
              trigger: items[0],
              start: "top 80%",
              toggleActions: "play none none none",
            },
          }
        );
      }
    } else if (effectiveAnimationType === "slide-up") {
      items.forEach((item, index) => {
        gsap.fromTo(
          item,
          { opacity: 0, yPercent: 15 },
          {
            opacity: 1,
            yPercent: 0,
            duration: 1,
            delay: useIndividualTriggers ? 0 : index * 0.15,
            ease: "sine",
            scrollTrigger: {
              trigger: useIndividualTriggers ? item : items[0],
              start: "top 80%",
              toggleActions: "play none none none",
            },
          }
        );
      });
    } else if (effectiveAnimationType === "scale-rotate") {
      if (useIndividualTriggers) {
        items.forEach((item) => {
          gsap.fromTo(
            item,
            { scaleX: 0, rotate: 10 },
            {
              scaleX: 1,
              rotate: 0,
              duration: 1,
              ease: "power3",
              scrollTrigger: {
                trigger: item,
                start: "top 80%",
                toggleActions: "play none none none",
              },
            }
          );
        });
      } else {
        gsap.fromTo(
          items,
          { scaleX: 0, rotate: 10 },
          {
            scaleX: 1,
            rotate: 0,
            duration: 1,
            stagger: 0.15,
            ease: "power3",
            scrollTrigger: {
              trigger: items[0],
              start: "top 80%",
              toggleActions: "play none none none",
            },
          }
        );
      }
    } else if (effectiveAnimationType === "blur-reveal") {
      if (useIndividualTriggers) {
        items.forEach((item) => {
          gsap.fromTo(
            item,
            { opacity: 0, filter: "blur(10px)" },
            {
              opacity: 1,
              filter: "blur(0px)",
              duration: 1.2,
              ease: "power2.out",
              scrollTrigger: {
                trigger: item,
                start: "top 80%",
                toggleActions: "play none none none",
              },
            }
          );
        });
      } else {
        gsap.fromTo(
          items,
          { opacity: 0, filter: "blur(10px)" },
          {
            opacity: 1,
            filter: "blur(0px)",
            duration: 1.2,
            stagger: 0.15,
            ease: "power2.out",
            scrollTrigger: {
              trigger: items[0],
              start: "top 80%",
              toggleActions: "play none none none",
            },
          }
        );
      }
    }
-  }, [effectiveAnimationType, itemCount, useIndividualTriggers]);
+  }, [isMobile]);
-  return { itemRefs, containerRef, perspectiveRef, bottomContentRef };
+  return {
    isMobile,
    itemRefs: itemRefs.current,
  };
 };
--- a/src/components/cardStack/hooks/useDepth3DAnimation.ts
+++ b/src/components/cardStack/hooks/useDepth3DAnimation.ts
@@ -1,118 +1,39 @@
-import { useEffect, useState, useRef, RefObject } from "react";
+import { useEffect } from 'react';
-const MOBILE_BREAKPOINT = 768;
+export const useDepth3DAnimation = (
-const ANIMATION_SPEED = 0.05;
+  containerRef: React.RefObject<HTMLDivElement>,
-const ROTATION_SPEED = 0.1;
+  config?: { rotationIntensity?: number; scaleIntensity?: number }
-const MOUSE_MULTIPLIER = 0.5;
+) => {
 const ROTATION_MULTIPLIER = 0.25;
 interface UseDepth3DAnimationProps {
  itemRefs: RefObject<(HTMLElement | null)[]>;
  containerRef: RefObject<HTMLDivElement | null>;
  perspectiveRef?: RefObject<HTMLDivElement | null>;
  isEnabled: boolean;
 }
 export const useDepth3DAnimation = ({
  itemRefs,
  containerRef,
  perspectiveRef,
  isEnabled,
 }: UseDepth3DAnimationProps) => {
  const [isMobile, setIsMobile] = useState(false);
  // Detect mobile viewport
  useEffect(() => {
-    const checkMobile = () => {
+    const container = containerRef.current;
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    if (!container) return;
    };
-    checkMobile();
+    const cards = container.querySelectorAll('[data-depth-card]');
-    window.addEventListener("resize", checkMobile);
+    if (cards.length === 0) return;
-    return () => {
+    const handleMouseMove = (e: MouseEvent) => {
-      window.removeEventListener("resize", checkMobile);
+      const rect = container.getBoundingClientRect();
-    };
+      const centerX = rect.width / 2;
-  }, []);
+      const centerY = rect.height / 2;
      const mouseX = (e.clientX - rect.left) - centerX;
      const mouseY = (e.clientY - rect.top) - centerY;
-  // 3D mouse-tracking effect (desktop only)
+      cards.forEach((card, index) => {
-  useEffect(() => {
+        const depth = (index + 1) / cards.length;
-    if (!isEnabled || isMobile) return;
+        const rotationX = (mouseY / rect.height) * (config?.rotationIntensity ?? 10) * depth;
        const rotationY = (mouseX / rect.width) * (config?.rotationIntensity ?? 10) * depth;
        const scale = 1 + (config?.scaleIntensity ?? 0.05) * depth;
-    let animationFrameId: number;
+        (card as HTMLElement).style.transform = `
-    let isAnimating = true;
+          perspective(1000px)
-
+          rotateX(${rotationX}deg)
-    // Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
+          rotateY(${rotationY}deg)
-    const perspectiveElement = perspectiveRef?.current || containerRef.current;
+          scale(${scale})
-    if (perspectiveElement) {
+        `;
      perspectiveElement.style.perspective = "1200px";
      perspectiveElement.style.transformStyle = "preserve-3d";
    }
    let mouseX = 0;
    let mouseY = 0;
    let isMouseInSection = false;
    let currentX = 0;
    let currentY = 0;
    let currentRotationX = 0;
    let currentRotationY = 0;
    const handleMouseMove = (event: MouseEvent): void => {
      if (containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        isMouseInSection =
          event.clientX >= rect.left &&
          event.clientX <= rect.right &&
          event.clientY >= rect.top &&
          event.clientY <= rect.bottom;
      }
      if (isMouseInSection) {
        mouseX = (event.clientX / window.innerWidth) * 100 - 50;
        mouseY = (event.clientY / window.innerHeight) * 100 - 50;
      }
    };
    const animate = (): void => {
      if (!isAnimating) return;
      if (isMouseInSection) {
        const distX = mouseX * MOUSE_MULTIPLIER - currentX;
        const distY = mouseY * MOUSE_MULTIPLIER - currentY;
        currentX += distX * ANIMATION_SPEED;
        currentY += distY * ANIMATION_SPEED;
        const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
        const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
        currentRotationX += distRotX * ROTATION_SPEED;
        currentRotationY += distRotY * ROTATION_SPEED;
      } else {
        currentX += -currentX * ANIMATION_SPEED;
        currentY += -currentY * ANIMATION_SPEED;
        currentRotationX += -currentRotationX * ROTATION_SPEED;
        currentRotationY += -currentRotationY * ROTATION_SPEED;
      }
      itemRefs.current?.forEach((ref) => {
        if (!ref) return;
        ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
      });
      animationFrameId = requestAnimationFrame(animate);
    };
-    animate();
+    container.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener("mousemove", handleMouseMove);
+    return () => container.removeEventListener('mousemove', handleMouseMove);
-
+  }, [config?.rotationIntensity, config?.scaleIntensity]);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
      }
      isAnimating = false;
    };
  }, [isEnabled, isMobile, itemRefs, containerRef]);
  return { isMobile };
 };
--- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
@@ -1,148 +1,55 @@
-"use client";
+'use client';
-import { memo, Children } from "react";
+import React, { useRef, useEffect } from 'react';
-import Marquee from "react-fast-marquee";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import CardStackTextBox from "../../CardStackTextBox";
+import { cn } from '@/lib/utils';
 import { cls } from "@/lib/utils";
 import { AutoCarouselProps } from "../../types";
 import { useCardAnimation } from "../../hooks/useCardAnimation";
-const AutoCarousel = ({
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    children,
+
-    uniformGridCustomHeightClasses,
+interface AutoCarouselProps {
  children: React.ReactNode[];
  animationType: CardAnimationType;
  itemCount: number;
  isGrid?: boolean;
  className?: string;
 }
 export const AutoCarousel: React.FC<AutoCarouselProps> = ({
  children,
  animationType,
  itemCount,
  isGrid = false,
  className,
 }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
  const { itemRefs: animationItemRefs } = useCardAnimation({
    animationType,
-    speed = 50,
+    itemCount,
-    title,
+    isGrid,
-    titleSegments,
+  });
    description,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout = "default",
    useInvertedBackground,
    bottomContent,
    className = "",
    containerClassName = "",
    carouselClassName = "",
    itemClassName = "",
    textBoxClassName = "",
    titleClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    descriptionClassName = "",
    tagClassName = "",
    buttonContainerClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    ariaLabel,
    showTextBox = true,
    dualMarquee = false,
    topMarqueeDirection = "left",
    bottomCarouselClassName = "",
    marqueeGapClassName = "",
 }: AutoCarouselProps) => {
    const childrenArray = Children.toArray(children);
    const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
    const { itemRefs, bottomContentRef } = useCardAnimation({
        animationType,
        itemCount: childrenArray.length,
        isGrid: false
    });
-    // Bottom marquee direction is opposite of top
+  useEffect(() => {
-    const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left";
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
  }, [itemCount]);
-    // Reverse order for bottom marquee to avoid alignment with top
+  return (
-    const bottomChildren = dualMarquee ? [...childrenArray].reverse() : [];
+    <div ref={containerRef} className={cn('auto-carousel', className)}>
-
+      {React.Children.map(children, (child, index) => (
-    return (
+        <div
-        <section
+          key={index}
-            className={cls(
+          ref={(el) => {
-                "relative py-20 w-full",
+            if (el) itemRefs.current[index] = el;
-                useInvertedBackground && "bg-foreground",
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-                className
+          }}
-            )}
+          className="carousel-item"
            aria-label={ariaLabel}
            aria-live="off"
        >
-            <div className={cls("w-full md:w-content-width mx-auto", containerClassName)}>
+          {child}
-                <div className="w-full flex flex-col items-center">
+        </div>
-                    <div className="w-full flex flex-col gap-6">
+      ))}
-                        {showTextBox && (title || titleSegments || description) && (
+    </div>
-                            <CardStackTextBox
+  );
                                title={title}
                                titleSegments={titleSegments}
                                description={description}
                                tag={tag}
                                tagIcon={tagIcon}
                                tagAnimation={tagAnimation}
                                buttons={buttons}
                                buttonAnimation={buttonAnimation}
                                textboxLayout={textboxLayout}
                                useInvertedBackground={useInvertedBackground}
                                textBoxClassName={textBoxClassName}
                                titleClassName={titleClassName}
                                titleImageWrapperClassName={titleImageWrapperClassName}
                                titleImageClassName={titleImageClassName}
                                descriptionClassName={descriptionClassName}
                                tagClassName={tagClassName}
                                buttonContainerClassName={buttonContainerClassName}
                                buttonClassName={buttonClassName}
                                buttonTextClassName={buttonTextClassName}
                            />
                        )}
                        <div
                            className={cls(
                                "w-full flex flex-col",
                                marqueeGapClassName || "gap-6"
                            )}
                        >
                            {/* Top/Single Marquee */}
                            <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", carouselClassName)}>
                                <Marquee gradient={false} speed={speed} direction={topMarqueeDirection}>
                                    {Children.map(childrenArray, (child, index) => (
                                        <div
                                            key={index}
                                            className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
                                            ref={(el) => { itemRefs.current[index] = el; }}
                                        >
                                            {child}
                                        </div>
                                    ))}
                                </Marquee>
                            </div>
                            {/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */}
                            {dualMarquee && (
                                <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", bottomCarouselClassName || carouselClassName)}>
                                    <Marquee gradient={false} speed={speed} direction={bottomMarqueeDirection}>
                                        {Children.map(bottomChildren, (child, index) => (
                                            <div
                                                key={`bottom-${index}`}
                                                className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
                                            >
                                                {child}
                                            </div>
                                        ))}
                                    </Marquee>
                                </div>
                            )}
                        </div>
                        {bottomContent && (
                            <div ref={bottomContentRef}>
                                {bottomContent}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
 };
-AutoCarousel.displayName = "AutoCarousel";
+export default AutoCarousel;
 export default memo(AutoCarousel);
--- a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
@@ -1,182 +1,55 @@
-"use client";
+'use client';
-import { memo, Children } from "react";
+import React, { useRef, useEffect } from 'react';
-import useEmblaCarousel from "embla-carousel-react";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from '@/lib/utils';
 import CardStackTextBox from "../../CardStackTextBox";
 import { cls } from "@/lib/utils";
 import { ButtonCarouselProps } from "../../types";
 import { usePrevNextButtons } from "../../hooks/usePrevNextButtons";
 import { useScrollProgress } from "../../hooks/useScrollProgress";
 import { useCardAnimation } from "../../hooks/useCardAnimation";
-const ButtonCarousel = ({
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    children,
+
-    uniformGridCustomHeightClasses,
+interface ButtonCarouselProps {
  children: React.ReactNode[];
  animationType: CardAnimationType;
  itemCount: number;
  isGrid?: boolean;
  className?: string;
 }
 export const ButtonCarousel: React.FC<ButtonCarouselProps> = ({
  children,
  animationType,
  itemCount,
  isGrid = false,
  className,
 }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
  const { itemRefs: animationItemRefs } = useCardAnimation({
    animationType,
-    title,
+    itemCount,
-    titleSegments,
+    isGrid,
-    description,
+  });
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout = "default",
    useInvertedBackground,
    bottomContent,
    className = "",
    containerClassName = "",
    carouselClassName = "",
    carouselItemClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    titleClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    descriptionClassName = "",
    tagClassName = "",
    buttonContainerClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    ariaLabel,
 }: ButtonCarouselProps) => {
    const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true });
-    const {
+  useEffect(() => {
-        prevBtnDisabled,
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
-        nextBtnDisabled,
+  }, [itemCount]);
        onPrevButtonClick,
        onNextButtonClick,
    } = usePrevNextButtons(emblaApi);
-    const scrollProgress = useScrollProgress(emblaApi);
+  return (
-
+    <div ref={containerRef} className={cn('button-carousel', className)}>
-    const childrenArray = Children.toArray(children);
+      {React.Children.map(children, (child, index) => (
-    const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
+        <div
-    const { itemRefs, bottomContentRef } = useCardAnimation({
+          key={index}
-        animationType,
+          ref={(el) => {
-        itemCount: childrenArray.length,
+            if (el) itemRefs.current[index] = el;
-        isGrid: false
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-    });
+          }}
-
+          className="carousel-item"
    return (
        <section
            className={cls(
                "relative px-[var(--width-0)] py-20 w-full",
                useInvertedBackground && "bg-foreground",
                className
            )}
            aria-label={ariaLabel}
        >
-            <div className={cls("w-full mx-auto", containerClassName)}>
+          {child}
-                <div className="w-full flex flex-col items-center">
+        </div>
-                    <div className="w-full flex flex-col gap-6">
+      ))}
-                        {(title || titleSegments || description) && (
+    </div>
-                            <div className="w-content-width mx-auto">
+  );
                                <CardStackTextBox
                                    title={title}
                                    titleSegments={titleSegments}
                                    description={description}
                                    tag={tag}
                                    tagIcon={tagIcon}
                                    tagAnimation={tagAnimation}
                                    buttons={buttons}
                                    buttonAnimation={buttonAnimation}
                                    textboxLayout={textboxLayout}
                                    useInvertedBackground={useInvertedBackground}
                                    textBoxClassName={textBoxClassName}
                                    titleClassName={titleClassName}
                                    titleImageWrapperClassName={titleImageWrapperClassName}
                                    titleImageClassName={titleImageClassName}
                                    descriptionClassName={descriptionClassName}
                                    tagClassName={tagClassName}
                                    buttonContainerClassName={buttonContainerClassName}
                                    buttonClassName={buttonClassName}
                                    buttonTextClassName={buttonTextClassName}
                                />
                            </div>
                        )}
                        <div
                            className={cls(
                                "w-full flex flex-col gap-6"
                            )}
                        >
                            <div
                                className={cls(
                                    "overflow-hidden w-full relative z-10 flex cursor-grab",
                                    carouselClassName
                                )}
                                ref={emblaRef}
                            >
                                <div className="flex gap-6 w-full">
                                    <div className="flex-shrink-0 w-carousel-padding" />
                                    {Children.map(childrenArray, (child, index) => (
                                        <div
                                            key={index}
                                            className={cls("flex-none select-none w-carousel-item-3 xl:w-carousel-item-4 mb-6", heightClasses, carouselItemClassName)}
                                            ref={(el) => { itemRefs.current[index] = el; }}
                                        >
                                            {child}
                                        </div>
                                    ))}
                                    <div className="flex-shrink-0 w-carousel-padding" />
                                </div>
                            </div>
                            <div className={cls("w-full flex", controlsClassName)}>
                                <div className="flex-shrink-0 w-carousel-padding-controls" />
                                <div className="flex justify-between items-center w-full">
                                    <div
                                        className="rounded-theme card relative h-2 w-50 overflow-hidden"
                                        role="progressbar"
                                        aria-label="Carousel progress"
                                        aria-valuenow={Math.round(scrollProgress)}
                                        aria-valuemin={0}
                                        aria-valuemax={100}
                                    >
                                        <div
                                            className="bg-foreground primary-button absolute! w-full top-0 bottom-0 -left-full rounded-theme"
                                            style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
                                        />
                                    </div>
                                    <div className="flex items-center gap-3">
                                        <button
                                            onClick={onPrevButtonClick}
                                            disabled={prevBtnDisabled}
                                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                                            type="button"
                                            aria-label="Previous slide"
                                        >
                                            <ChevronLeft className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
                                        </button>
                                        <button
                                            onClick={onNextButtonClick}
                                            disabled={nextBtnDisabled}
                                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                                            type="button"
                                            aria-label="Next slide"
                                        >
                                            <ChevronRight className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
                                        </button>
                                    </div>
                                </div>
                                <div className="flex-shrink-0 w-carousel-padding-controls" />
                            </div>
                        </div>
                        {bottomContent && (
                            <div ref={bottomContentRef} className="w-content-width mx-auto">
                                {bottomContent}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
 };
-ButtonCarousel.displayName = "ButtonCarousel";
+export default ButtonCarousel;
 export default memo(ButtonCarousel);
--- a/src/components/cardStack/layouts/grid/GridLayout.tsx
+++ b/src/components/cardStack/layouts/grid/GridLayout.tsx
@@ -1,150 +1,86 @@
-"use client";
+'use client';
-import { memo, Children } from "react";
+import React, { useRef, useEffect } from 'react';
-import CardStackTextBox from "../../CardStackTextBox";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import { cls } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 import { GridLayoutProps } from "../../types";
 import { gridConfigs } from "./gridConfigs";
 import { useCardAnimation } from "../../hooks/useCardAnimation";
-const GridLayout = ({
+export type GridVariant = 
-    children,
+  | 'uniform-all-items-equal'
-    itemCount,
+  | 'bento-grid'
-    gridVariant = "uniform-all-items-equal",
+  | 'bento-grid-inverted'
-    uniformGridCustomHeightClasses,
+  | 'two-columns-alternating-heights'
-    gridRowsClassName,
+  | 'asymmetric-60-wide-40-narrow'
-    itemHeightClassesOverride,
+  | 'three-columns-all-equal-width'
  | 'four-items-2x2-equal-grid'
  | 'one-large-right-three-stacked-left'
  | 'items-top-row-full-width-bottom'
  | 'full-width-top-items-bottom-row'
  | 'one-large-left-three-stacked-right'
  | 'two-items-per-row'
  | 'timeline';
 export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
 interface GridLayoutProps {
  children: React.ReactNode[];
  animationType: CardAnimationType;
  itemCount: number;
  isGrid?: boolean;
  supports3DAnimation?: boolean;
  gridVariant: GridVariant;
  className?: string;
 }
 export const GridLayout: React.FC<GridLayoutProps> = ({
  children,
  animationType,
  itemCount,
  isGrid = true,
  supports3DAnimation = false,
  gridVariant,
  className,
 }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const perspectiveRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
  const { itemRefs: animationItemRefs } = useCardAnimation({
    animationType,
-    supports3DAnimation = false,
+    itemCount,
-    title,
+    isGrid,
-    titleSegments,
+    supports3DAnimation,
-    description,
+    gridVariant,
-    tag,
+  });
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout = "default",
    useInvertedBackground,
    bottomContent,
    className = "",
    containerClassName = "",
    gridClassName = "",
    textBoxClassName = "",
    titleClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    descriptionClassName = "",
    tagClassName = "",
    buttonContainerClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    ariaLabel,
 }: GridLayoutProps) => {
    // Get config for this variant and item count
    const config = gridConfigs[gridVariant]?.[itemCount];
-    // Fallback to default uniform grid if no config
+  useEffect(() => {
-    const gridColsMap = {
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
-        1: "md:grid-cols-1",
+  }, [itemCount]);
        2: "md:grid-cols-2",
        3: "md:grid-cols-3",
        4: "md:grid-cols-4",
    };
    const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4";
-    // Use config values or fallback
+  return (
-    const gridCols = config?.gridCols || defaultGridCols;
+    <div
-    const gridRows = gridRowsClassName || config?.gridRows || "";
+      ref={perspectiveRef}
-    const itemClasses = config?.itemClasses || [];
+      className={cn(
-    const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || [];
+        'grid-layout',
-    const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || "";
+        supports3DAnimation && '[perspective:1000px]',
-    const itemWrapperClass = config?.itemWrapperClass || "";
+        className
-
+      )}
-    const childrenArray = Children.toArray(children);
+    >
-    const { itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation({
+      <div ref={containerRef} className="grid-container">
-        animationType,
+        {React.Children.map(children, (child, index) => (
-        itemCount: childrenArray.length,
+          <div
-        isGrid: true,
+            key={index}
-        supports3DAnimation,
+            ref={(el) => {
-        gridVariant
+              if (el) itemRefs.current[index] = el;
-    });
+              if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-
+            }}
-    return (
+            className="grid-item"
-        <section
+          >
-            ref={containerRef}
+            {child}
-            className={cls(
+          </div>
-                "relative py-20 w-full",
+        ))}
-                useInvertedBackground && "bg-foreground",
+      </div>
-                className
+    </div>
-            )}
+  );
            aria-label={ariaLabel}
        >
            <div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
                {(title || titleSegments || description) && (
                    <CardStackTextBox
                        title={title}
                        titleSegments={titleSegments}
                        description={description}
                        tag={tag}
                        tagIcon={tagIcon}
                        tagAnimation={tagAnimation}
                        buttons={buttons}
                        buttonAnimation={buttonAnimation}
                        textboxLayout={textboxLayout}
                        useInvertedBackground={useInvertedBackground}
                        textBoxClassName={textBoxClassName}
                        titleClassName={titleClassName}
                        titleImageWrapperClassName={titleImageWrapperClassName}
                        titleImageClassName={titleImageClassName}
                        descriptionClassName={descriptionClassName}
                        tagClassName={tagClassName}
                        buttonContainerClassName={buttonContainerClassName}
                        buttonClassName={buttonClassName}
                        buttonTextClassName={buttonTextClassName}
                    />
                )}
                <div
                    ref={perspectiveRef}
                    className={cls(
                        "grid grid-cols-1 gap-6",
                        gridCols,
                        gridRows,
                        gridClassName
                    )}
                >
                    {childrenArray.map((child, index) => {
                        const itemClass = itemClasses[index] || "";
                        const itemHeightClass = itemHeightClasses[index] || "";
                        const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses);
                        return combinedClass ? (
                            <div
                                key={index}
                                className={combinedClass}
                                ref={(el) => { itemRefs.current[index] = el; }}
                            >
                                {child}
                            </div>
                        ) : (
                            <div
                                key={index}
                                ref={(el) => { itemRefs.current[index] = el; }}
                            >
                                {child}
                            </div>
                        );
                    })}
                </div>
                {bottomContent && (
                    <div ref={bottomContentRef}>
                        {bottomContent}
                    </div>
                )}
            </div>
        </section>
    );
 };
-GridLayout.displayName = "GridLayout";
+export default GridLayout;
 export default memo(GridLayout);
--- a/src/components/cardStack/layouts/timelines/TimelineBase.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineBase.tsx
@@ -1,149 +1,24 @@
-"use client";
+import React from 'react';
-
+import { cn } from '@/lib/utils';
 import React, { Children, useCallback } from "react";
 import { cls } from "@/lib/utils";
 import CardStackTextBox from "../../CardStackTextBox";
 import { useCardAnimation } from "../../hooks/useCardAnimation";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
 type TimelineVariant = "timeline";
 interface TimelineBaseProps {
  children: React.ReactNode;
  variant?: TimelineVariant;
  uniformGridCustomHeightClasses?: string;
  animationType: CardAnimationType;
  title?: string;
  titleSegments?: TitleSegment[];
  description?: string;
  tag?: string;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  textboxLayout?: TextboxLayout;
  useInvertedBackground?: InvertedBackground;
  className?: string;
  containerClassName?: string;
  textBoxClassName?: string;
  titleClassName?: string;
  titleImageWrapperClassName?: string;
  titleImageClassName?: string;
  descriptionClassName?: string;
  tagClassName?: string;
  buttonContainerClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
  ariaLabel?: string;
 }
-const TimelineBase = ({
+export const TimelineBase: React.FC<TimelineBaseProps> = ({
  children,
-  variant = "timeline",
+  className,
-  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
+  containerClassName,
-  animationType,
+}) => {
  title,
  titleSegments,
  description,
  tag,
  tagIcon,
  tagAnimation,
  buttons,
  buttonAnimation,
  textboxLayout = "default",
  useInvertedBackground,
  className = "",
  containerClassName = "",
  textBoxClassName = "",
  titleClassName = "",
  titleImageWrapperClassName = "",
  titleImageClassName = "",
  descriptionClassName = "",
  tagClassName = "",
  buttonContainerClassName = "",
  buttonClassName = "",
  buttonTextClassName = "",
  ariaLabel = "Timeline section",
 }: TimelineBaseProps) => {
  const childrenArray = Children.toArray(children);
  const { itemRefs } = useCardAnimation({
    animationType,
    itemCount: childrenArray.length,
    isGrid: false
  });
  const getItemClasses = useCallback((index: number) => {
    // Timeline variant - scattered/organic pattern
    const alignmentClass =
      index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
    const marginClasses = cls(
      index % 4 === 0 && "md:ml-0",
      index % 4 === 1 && "md:mr-20",
      index % 4 === 2 && "md:ml-15",
      index % 4 === 3 && "md:mr-30"
    );
    return cls(alignmentClass, marginClasses);
  }, []);
  return (
-    <section
+    <div className={cn('timeline-container', containerClassName)}>
-      className={cls(
+      <div className={cn('timeline-content', className)}>
-        "relative py-20 w-full",
+        {children}
        useInvertedBackground && "bg-foreground",
        className
      )}
      aria-label={ariaLabel}
    >
      <div
        className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
      >
        {(title || titleSegments || description) && (
          <CardStackTextBox
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            useInvertedBackground={useInvertedBackground}
            textBoxClassName={textBoxClassName}
            titleClassName={titleClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            descriptionClassName={descriptionClassName}
            tagClassName={tagClassName}
            buttonContainerClassName={buttonContainerClassName}
            buttonClassName={buttonClassName}
            buttonTextClassName={buttonTextClassName}
          />
        )}
        <div
          className={cls(
            "relative z-10 flex flex-col gap-6 md:gap-15"
          )}
        >
          {Children.map(childrenArray, (child, index) => (
            <div
              key={index}
              className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
              ref={(el) => { itemRefs.current[index] = el; }}
            >
              {child}
            </div>
          ))}
        </div>
      </div>
-    </section>
+    </div>
  );
 };
-TimelineBase.displayName = "TimelineBase";
+export default TimelineBase;
 export default React.memo(TimelineBase);
--- a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
@@ -1,275 +1,58 @@
-"use client";
+'use client';
-import React, { memo } from "react";
+import React, { useRef, useEffect } from 'react';
-import MediaContent from "@/components/shared/MediaContent";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import CardStackTextBox from "../../CardStackTextBox";
+import { cn } from '@/lib/utils';
 import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations";
 import { useCardAnimation } from "../../hooks/useCardAnimation";
 import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "../../types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-interface PhoneFrameProps {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
  imageSrc?: string;
  videoSrc?: string;
  imageAlt?: string;
  videoAriaLabel?: string;
  phoneRef: (el: HTMLDivElement | null) => void;
  className?: string;
 }
 const PhoneFrame = memo(({
  imageSrc,
  videoSrc,
  imageAlt,
  videoAriaLabel,
  phoneRef,
  className = "",
 }: PhoneFrameProps) => (
  <div
    ref={phoneRef}
    className={cls("card rounded-theme-capped p-1 overflow-hidden", className)}
  >
    <MediaContent
      imageSrc={imageSrc}
      videoSrc={videoSrc}
      imageAlt={imageAlt}
      videoAriaLabel={videoAriaLabel}
      imageClassName="w-full h-full object-cover rounded-theme-capped"
    />
  </div>
 ));
 PhoneFrame.displayName = "PhoneFrame";
 interface TimelinePhoneViewProps {
-  items: TimelinePhoneViewItem[];
+  children: React.ReactNode[];
  showTextBox?: boolean;
  showDivider?: boolean;
  title: string;
  titleSegments?: TitleSegment[];
  description: string;
  tag?: string;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  animationType: CardAnimationType;
-  textboxLayout: TextboxLayout;
+  itemCount: number;
-  useInvertedBackground?: InvertedBackground;
+  isGrid?: boolean;
  useIndividualTriggers?: boolean;
  className?: string;
  containerClassName?: string;
  textBoxClassName?: string;
  titleClassName?: string;
  descriptionClassName?: string;
  tagClassName?: string;
  buttonContainerClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
  desktopContainerClassName?: string;
  mobileContainerClassName?: string;
  desktopContentClassName?: string;
  desktopWrapperClassName?: string;
  mobileWrapperClassName?: string;
  phoneFrameClassName?: string;
  mobilePhoneFrameClassName?: string;
  titleImageWrapperClassName?: string;
  titleImageClassName?: string;
  ariaLabel?: string;
 }
-const TimelinePhoneView = ({
+export const TimelinePhoneView: React.FC<TimelinePhoneViewProps> = ({
-  items,
+  children,
  showTextBox = true,
  showDivider = false,
  title,
  titleSegments,
  description,
  tag,
  tagIcon,
  tagAnimation,
  buttons,
  buttonAnimation,
  animationType,
-  textboxLayout,
+  itemCount,
-  useInvertedBackground,
+  isGrid = false,
-  className = "",
+  useIndividualTriggers = false,
-  containerClassName = "",
+  className,
-  textBoxClassName = "",
+}) => {
-  titleClassName = "",
+  const containerRef = useRef<HTMLDivElement>(null);
-  descriptionClassName = "",
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-  tagClassName = "",
+
-  buttonContainerClassName = "",
+  const { itemRefs: animationItemRefs } = useCardAnimation({
  buttonClassName = "",
  buttonTextClassName = "",
  desktopContainerClassName = "",
  mobileContainerClassName = "",
  desktopContentClassName = "",
  desktopWrapperClassName = "",
  mobileWrapperClassName = "",
  phoneFrameClassName = "",
  mobilePhoneFrameClassName = "",
  titleImageWrapperClassName = "",
  titleImageClassName = "",
  ariaLabel = "Timeline phone view section",
 }: TimelinePhoneViewProps) => {
  const { imageRefs, mobileImageRefs } = usePhoneAnimations(items);
  const { itemRefs: contentRefs } = useCardAnimation({
    animationType,
-    itemCount: items.length,
+    itemCount,
-    isGrid: false,
+    isGrid,
-    useIndividualTriggers: true,
+    useIndividualTriggers,
  });
-  const sectionHeightStyle = { height: `${items.length * 100}vh` };
+
  useEffect(() => {
    itemRefs.current = itemRefs.current.slice(0, itemCount);
  }, [itemCount]);
  return (
-    <section
+    <div ref={containerRef} className={cn('timeline-phone-view', className)}>
-      className={cls(
+      {React.Children.map(children, (child, index) => (
-        "relative py-20 overflow-hidden md:overflow-visible w-full",
+        <div
-        useInvertedBackground && "bg-foreground",
+          key={index}
-        className
+          ref={(el) => {
-      )}
+            if (el) itemRefs.current[index] = el;
-      aria-label={ariaLabel}
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-    >
+          }}
-      <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
+          className="timeline-item"
-        {showTextBox && (
+        >
-          <div className="relative w-content-width mx-auto" >
+          {child}
            <CardStackTextBox
              title={title}
              titleSegments={titleSegments}
              description={description}
              tag={tag}
              tagIcon={tagIcon}
              tagAnimation={tagAnimation}
              buttons={buttons}
              buttonAnimation={buttonAnimation}
              textboxLayout={textboxLayout}
              useInvertedBackground={useInvertedBackground}
              textBoxClassName={textBoxClassName}
              titleClassName={titleClassName}
              descriptionClassName={descriptionClassName}
              tagClassName={tagClassName}
              buttonContainerClassName={buttonContainerClassName}
              buttonClassName={buttonClassName}
              buttonTextClassName={buttonTextClassName}
              titleImageWrapperClassName={titleImageWrapperClassName}
              titleImageClassName={titleImageClassName}
            />
          </div>
        )}
        {showDivider && (
          <div className="relative w-content-width mx-auto h-px bg-accent md:hidden" />
        )}
        <div className="hidden md:flex relative" style={sectionHeightStyle}>
          <div
            className={cls(
              "absolute top-0 left-0 flex flex-col w-[calc(var(--width-content-width)-var(--width-20)*2)] 2xl:w-[calc(var(--width-content-width)-var(--width-25)*2)] mx-auto right-0 z-10",
              desktopContainerClassName
            )}
            style={sectionHeightStyle}
          >
            {items.map((item, index) => (
              <div
                key={`content-${index}`}
                className={cls(
                  item.trigger,
                  "w-full mx-auto h-screen flex justify-center items-center",
                  desktopContentClassName
                )}
              >
                <div
                  ref={(el) => { contentRefs.current[index] = el; }}
                  className={desktopWrapperClassName}
                >
                  {item.content}
                </div>
              </div>
            ))}
          </div>
          <div className="sticky top-0 left-0 h-screen w-full overflow-hidden">
            {items.map((item, itemIndex) => (
              <div
                key={`phones-${itemIndex}`}
                className="h-screen w-full absolute top-0 left-0"
              >
                <div className="w-content-width mx-auto h-full flex flex-row justify-between items-center">
                  <PhoneFrame
                    key={`phone-${itemIndex}-1`}
                    imageSrc={item.imageOne}
                    videoSrc={item.videoOne}
                    imageAlt={item.imageAltOne}
                    videoAriaLabel={item.videoAriaLabelOne}
                    phoneRef={(el) => {
                      if (imageRefs.current) {
                        imageRefs.current[itemIndex * 2] = el;
                      }
                    }}
                    className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
                  />
                  <PhoneFrame
                    key={`phone-${itemIndex}-2`}
                    imageSrc={item.imageTwo}
                    videoSrc={item.videoTwo}
                    imageAlt={item.imageAltTwo}
                    videoAriaLabel={item.videoAriaLabelTwo}
                    phoneRef={(el) => {
                      if (imageRefs.current) {
                        imageRefs.current[itemIndex * 2 + 1] = el;
                      }
                    }}
                    className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
-        <div className={cls("md:hidden flex flex-col gap-20", mobileContainerClassName)}>
+      ))}
-          {items.map((item, itemIndex) => (
+    </div>
            <div
              key={`mobile-item-${itemIndex}`}
              className="flex flex-col gap-10"
            >
              <div className={mobileWrapperClassName}>
                {item.content}
              </div>
              <div className="flex flex-row gap-6 justify-center">
                <PhoneFrame
                  key={`mobile-phone-${itemIndex}-1`}
                  imageSrc={item.imageOne}
                  videoSrc={item.videoOne}
                  imageAlt={item.imageAltOne}
                  videoAriaLabel={item.videoAriaLabelOne}
                  phoneRef={(el) => {
                    if (mobileImageRefs.current) {
                      mobileImageRefs.current[itemIndex * 2] = el;
                    }
                  }}
                  className={cls("w-40 h-80", mobilePhoneFrameClassName)}
                />
                <PhoneFrame
                  key={`mobile-phone-${itemIndex}-2`}
                  imageSrc={item.imageTwo}
                  videoSrc={item.videoTwo}
                  imageAlt={item.imageAltTwo}
                  videoAriaLabel={item.videoAriaLabelTwo}
                  phoneRef={(el) => {
                    if (mobileImageRefs.current) {
                      mobileImageRefs.current[itemIndex * 2 + 1] = el;
                    }
                  }}
                  className={cls("w-40 h-80", mobilePhoneFrameClassName)}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
 };
-TimelinePhoneView.displayName = "TimelinePhoneView";
+export default TimelinePhoneView;
 export default memo(TimelinePhoneView);
--- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
@@ -1,202 +1,55 @@
-"use client";
+'use client';
-import React, { useEffect, useRef, memo, useState } from "react";
+import React, { useRef, useEffect } from 'react';
-import { gsap } from "gsap";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { cn } from '@/lib/utils';
 import CardStackTextBox from "../../CardStackTextBox";
 import { useCardAnimation } from "../../hooks/useCardAnimation";
 import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "../../types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-gsap.registerPlugin(ScrollTrigger);
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
 interface TimelineProcessFlowItem {
  id: string;
  content: React.ReactNode;
  media: React.ReactNode;
  reverse: boolean;
 }
 interface TimelineProcessFlowProps {
-  items: TimelineProcessFlowItem[];
+  children: React.ReactNode[];
  title: string;
  titleSegments?: TitleSegment[];
  description: string;
  tag?: string;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  textboxLayout: TextboxLayout;
  animationType: CardAnimationType;
-  useInvertedBackground?: InvertedBackground;
+  itemCount: number;
-  ariaLabel?: string;
+  useIndividualTriggers?: boolean;
  className?: string;
  containerClassName?: string;
  textBoxClassName?: string;
  textBoxTitleClassName?: string;
  textBoxDescriptionClassName?: string;
  textBoxTagClassName?: string;
  textBoxButtonContainerClassName?: string;
  textBoxButtonClassName?: string;
  textBoxButtonTextClassName?: string;
  itemClassName?: string;
  mediaWrapperClassName?: string;
  numberClassName?: string;
  contentWrapperClassName?: string;
  gapClassName?: string;
  titleImageWrapperClassName?: string;
  titleImageClassName?: string;
 }
-const TimelineProcessFlow = ({
+export const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({
-  items,
+  children,
  title,
  titleSegments,
  description,
  tag,
  tagIcon,
  tagAnimation,
  buttons,
  buttonAnimation,
  textboxLayout,
  animationType,
-  useInvertedBackground,
+  itemCount,
-  ariaLabel = "Timeline process flow section",
+  useIndividualTriggers = false,
-  className = "",
+  className,
-  containerClassName = "",
+}) => {
-  textBoxClassName = "",
+  const containerRef = useRef<HTMLDivElement>(null);
-  textBoxTitleClassName = "",
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-  textBoxDescriptionClassName = "",
+
-  textBoxTagClassName = "",
+  const { itemRefs: animationItemRefs } = useCardAnimation({
-  textBoxButtonContainerClassName = "",
+    animationType,
-  textBoxButtonClassName = "",
+    itemCount,
-  textBoxButtonTextClassName = "",
+    useIndividualTriggers,
-  itemClassName = "",
+  });
  mediaWrapperClassName = "",
  numberClassName = "",
  contentWrapperClassName = "",
  gapClassName = "",
  titleImageWrapperClassName = "",
  titleImageClassName = "",
 }: TimelineProcessFlowProps) => {
  const processLineRef = useRef<HTMLDivElement>(null);
  const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length, useIndividualTriggers: true });
  const [isMdScreen, setIsMdScreen] = useState(false);
  useEffect(() => {
-    const checkScreenSize = () => {
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
-      setIsMdScreen(window.innerWidth >= 768);
+  }, [itemCount]);
    };
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);
  useEffect(() => {
    if (!processLineRef.current) return;
    gsap.fromTo(
      processLineRef.current,
      { yPercent: -100 },
      {
        yPercent: 0,
        ease: "none",
        scrollTrigger: {
          trigger: ".timeline-line",
          start: "top center",
          end: "bottom center",
          scrub: true,
        },
      }
    );
    return () => {
      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
    };
  }, []);
  return (
-    <section
+    <div ref={containerRef} className={cn('timeline-process-flow', className)}>
-      className={cls(
+      {React.Children.map(children, (child, index) => (
-        "relative py-20 w-full",
+        <div
-        useInvertedBackground && "bg-foreground",
+          key={index}
-        className
+          ref={(el) => {
-      )}
+            if (el) itemRefs.current[index] = el;
-      aria-label={ariaLabel}
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-    >
+          }}
-      <div className={cls("w-full flex flex-col gap-6", containerClassName)}>
+          className="timeline-item"
-        <div className="relative w-content-width mx-auto">
+        >
-          <CardStackTextBox
+          {child}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            useInvertedBackground={useInvertedBackground}
            textBoxClassName={textBoxClassName}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
          />
        </div>
-        <div className="relative w-full">
+      ))}
-          <div className="pointer-events-none absolute top-0 right-[var(--width-10)] md:right-auto md:left-1/2 md:-translate-x-1/2 w-px h-full z-10 overflow-hidden md:py-6" >
+    </div>
            <div className="relative timeline-line h-full bg-foreground overflow-hidden">
              <div className="w-full h-full bg-accent" ref={processLineRef} />
            </div>
          </div>
          <ol className={cls("relative w-content-width mx-auto flex flex-col gap-10 md:gap-20 md:p-6", isMdScreen && "card", "md:rounded-theme-capped", gapClassName)}>
            {items.map((item, index) => (
              <li
                key={item.id}
                ref={(el) => {
                  itemRefs.current[index] = el;
                }}
                className={cls(
                  "relative z-10 w-full flex flex-col gap-6 md:gap-0 md:flex-row justify-between",
                  item.reverse && "flex-col md:flex-row-reverse",
                  itemClassName
                )}
              >
                <div
                  className={cls("relative w-70 md:w-30", mediaWrapperClassName)}
                >
                  {item.media}
                </div>
                <div
                  className={cls(
                    "absolute! top-1/2 right-[calc(var(--height-8)/-2)] md:right-auto md:left-1/2 md:-translate-x-1/2 -translate-y-1/2 h-8 aspect-square rounded-theme flex items-center justify-center z-10 primary-button",
                    numberClassName
                  )}
                >
                  <p className="text-sm text-primary-cta-text">{item.id}</p>
                </div>
                <div className={cls("relative w-70 md:w-30", contentWrapperClassName)}>
                  {item.content}
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
 };
-TimelineProcessFlow.displayName = "TimelineProcessFlow";
+export default TimelineProcessFlow;
 export default memo(TimelineProcessFlow);
--- a/src/components/ecommerce/productCatalog/ProductCatalog.tsx
+++ b/src/components/ecommerce/productCatalog/ProductCatalog.tsx
@@ -1,156 +1,83 @@
-"use client";
+'use client';
-import { memo, useMemo, useCallback } from "react";
+import React, { useState, useCallback } from 'react';
-import { useRouter } from "next/navigation";
+import { cn } from '@/lib/utils';
 import Input from "@/components/form/Input";
 import ProductDetailVariantSelect from "@/components/ecommerce/productDetail/ProductDetailVariantSelect";
 import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
 import { cls } from "@/lib/utils";
 import { useProducts } from "@/hooks/useProducts";
 import ProductCatalogItem from "./ProductCatalogItem";
 import type { CatalogProduct } from "./ProductCatalogItem";
-interface ProductCatalogProps {
+export interface CatalogProduct {
-    layout: "page" | "section";
+  id: string;
-    products?: CatalogProduct[];
+  name: string;
-    searchValue?: string;
+  price: string;
-    onSearchChange?: (value: string) => void;
+  imageSrc: string;
-    searchPlaceholder?: string;
+  imageAlt: string;
-    filters?: ProductVariant[];
+  rating: number;
-    emptyMessage?: string;
+  reviewCount: string;
-    className?: string;
+  category: string;
    gridClassName?: string;
    cardClassName?: string;
    imageClassName?: string;
    searchClassName?: string;
    filterClassName?: string;
    toolbarClassName?: string;
 }
-const ProductCatalog = ({
+interface ProductCatalogProps {
-    layout,
+  products?: CatalogProduct[];
-    products: productsProp,
+  className?: string;
-    searchValue = "",
+  onProductClick?: (productId: string) => void;
-    onSearchChange,
+}
    searchPlaceholder = "Search products...",
    filters,
    emptyMessage = "No products found",
    className = "",
    gridClassName = "",
    cardClassName = "",
    imageClassName = "",
    searchClassName = "",
    filterClassName = "",
    toolbarClassName = "",
 }: ProductCatalogProps) => {
    const router = useRouter();
    const { products: fetchedProducts, isLoading } = useProducts();
-    const handleProductClick = useCallback((productId: string) => {
+export const ProductCatalog: React.FC<ProductCatalogProps> = ({
-        router.push(`/shop/${productId}`);
+  products = [],
-    }, [router]);
+  className,
  onProductClick,
 }) => {
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-    const products: CatalogProduct[] = useMemo(() => {
+  const filteredProducts = selectedCategory
-        if (productsProp && productsProp.length > 0) {
+    ? products.filter((p) => p.category === selectedCategory)
-            return productsProp;
+    : products;
        }
-        if (fetchedProducts.length === 0) {
+  const handleProductClick = useCallback(
-            return [];
+    (productId: string) => {
-        }
+      onProductClick?.(productId);
    },
    [onProductClick]
  );
-        return fetchedProducts.map((product) => ({
+  const categories = Array.from(new Set(products.map((p) => p.category)));
            id: product.id,
            name: product.name,
            price: product.price,
            imageSrc: product.imageSrc,
            imageAlt: product.imageAlt || product.name,
            rating: product.rating || 0,
            reviewCount: product.reviewCount,
            category: product.brand,
            onProductClick: () => handleProductClick(product.id),
        }));
    }, [productsProp, fetchedProducts, handleProductClick]);
-    if (isLoading && (!productsProp || productsProp.length === 0)) {
+  return (
-        return (
+    <div className={cn('product-catalog', className)}>
-            <section
+      {categories.length > 0 && (
-                className={cls(
+        <div className="category-filter">
-                    "relative w-content-width mx-auto",
+          <button
-                    layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
+            onClick={() => setSelectedCategory(null)}
-                    className
+            className={!selectedCategory ? 'active' : ''}
-                )}
+          >
            All
          </button>
          {categories.map((category) => (
            <button
              key={category}
              onClick={() => setSelectedCategory(category)}
              className={selectedCategory === category ? 'active' : ''}
            >
-                <p className="text-sm text-foreground/50 text-center py-20">
+              {category}
-                    Loading products...
+            </button>
-                </p>
+          ))}
-            </section>
+        </div>
-        );
+      )}
-    }
+      <div className="products-grid">
-
+        {filteredProducts.map((product) => (
-    return (
+          <div
-        <section
+            key={product.id}
-            className={cls(
+            className="product-item"
-                "relative w-content-width mx-auto",
+            onClick={() => handleProductClick(product.id)}
-                layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
+          >
-                className
+            <img src={product.imageSrc} alt={product.imageAlt} />
-            )}
+            <h3>{product.name}</h3>
-        >
+            <div className="rating">{'★'.repeat(product.rating)}</div>
-            {(onSearchChange || (filters && filters.length > 0)) && (
+            <p className="review-count">({product.reviewCount} reviews)</p>
-                <div
+            <p className="price">{product.price}</p>
-                    className={cls(
+          </div>
-                        "flex flex-col md:flex-row gap-4 md:items-end mb-6",
+        ))}
-                        toolbarClassName
+      </div>
-                    )}
+    </div>
-                >
+  );
                    {onSearchChange && (
                        <Input
                            value={searchValue}
                            onChange={onSearchChange}
                            placeholder={searchPlaceholder}
                            ariaLabel={searchPlaceholder}
                            className={cls("flex-1 w-full h-9 text-sm", searchClassName)}
                        />
                    )}
                    {filters && filters.length > 0 && (
                        <div className="flex gap-4 items-end">
                            {filters.map((filter) => (
                                <ProductDetailVariantSelect
                                    key={filter.label}
                                    variant={filter}
                                    selectClassName={filterClassName}
                                />
                            ))}
                        </div>
                    )}
                </div>
            )}
            {products.length === 0 ? (
                <p className="text-sm text-foreground/50 text-center py-20">
                    {emptyMessage}
                </p>
            ) : (
                <div
                    className={cls(
                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6",
                        gridClassName
                    )}
                >
                    {products.map((product) => (
                        <ProductCatalogItem
                            key={product.id}
                            product={product}
                            className={cardClassName}
                            imageClassName={imageClassName}
                        />
                    ))}
                </div>
            )}
        </section>
    );
 };
-ProductCatalog.displayName = "ProductCatalog";
+export default ProductCatalog;
 export default memo(ProductCatalog);
--- a/src/components/sections/contact/ContactCenter.tsx
+++ b/src/components/sections/contact/ContactCenter.tsx
@@ -1,131 +1,45 @@
-"use client";
+'use client';
-import ContactForm from "@/components/form/ContactForm";
+import React, { useState } from 'react';
-import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cn } from '@/lib/utils';
 import { cls } from "@/lib/utils";
 import { LucideIcon } from "lucide-react";
 import { sendContactEmail } from "@/utils/sendContactEmail";
 import type { ButtonAnimationType } from "@/types/button";
 type ContactCenterBackgroundProps = Extract<
    HeroBackgroundVariantProps,
    | { variant: "plain" }
    | { variant: "animated-grid" }
    | { variant: "canvas-reveal" }
    | { variant: "cell-wave" }
    | { variant: "downward-rays-animated" }
    | { variant: "downward-rays-animated-grid" }
    | { variant: "downward-rays-static" }
    | { variant: "downward-rays-static-grid" }
    | { variant: "gradient-bars" }
    | { variant: "radial-gradient" }
    | { variant: "rotated-rays-animated" }
    | { variant: "rotated-rays-animated-grid" }
    | { variant: "rotated-rays-static" }
    | { variant: "rotated-rays-static-grid" }
    | { variant: "sparkles-gradient" }
 >;
 interface ContactCenterProps {
-    title: string;
+  title?: string;
-    description: string;
+  description?: string;
-    tag: string;
+  placeholder?: string;
-    tagIcon?: LucideIcon;
+  buttonText?: string;
-    tagAnimation?: ButtonAnimationType;
+  className?: string;
    background: ContactCenterBackgroundProps;
    useInvertedBackground: boolean;
    tagClassName?: string;
    inputPlaceholder?: string;
    buttonText?: string;
    termsText?: string;
    onSubmit?: (email: string) => void;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    contentClassName?: string;
    titleClassName?: string;
    descriptionClassName?: string;
    formWrapperClassName?: string;
    formClassName?: string;
    inputClassName?: string;
    buttonClassName?: string;
    buttonTextClassName?: string;
    termsClassName?: string;
 }
-const ContactCenter = ({
+export const ContactCenter: React.FC<ContactCenterProps> = ({
-    title,
+  title = 'Get in Touch',
-    description,
+  description = 'We\'d love to hear from you',
-    tag,
+  placeholder = 'Enter your message',
-    tagIcon,
+  buttonText = 'Send',
-    tagAnimation,
+  className,
-    background,
+}) => {
-    useInvertedBackground,
+  const [message, setMessage] = useState('');
    tagClassName = "",
    inputPlaceholder = "Enter your email",
    buttonText = "Sign Up",
    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
    onSubmit,
    ariaLabel = "Contact section",
    className = "",
    containerClassName = "",
    contentClassName = "",
    titleClassName = "",
    descriptionClassName = "",
    formWrapperClassName = "",
    formClassName = "",
    inputClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    termsClassName = "",
 }: ContactCenterProps) => {
-    const handleSubmit = async (email: string) => {
+  const handleSubmit = (e: React.FormEvent) => {
-        try {
+    e.preventDefault();
-            await sendContactEmail({ email });
+    console.log('Form submitted with message:', message);
-            console.log("Email send successfully");
+    setMessage('');
-        } catch (error) {
+  };
            console.error("Failed to send email:", error);
        }
    };
-    return (
+  return (
-        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+    <div className={cn('contact-center', className)}>
-            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+      <h2>{title}</h2>
-                <div className={cls("relative w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}>
+      <p>{description}</p>
-                    <div className="relative z-10 w-full md:w-1/2">
+      <form onSubmit={handleSubmit}>
-                        <ContactForm
+        <textarea
-                            tag={tag}
+          value={message}
-                            tagIcon={tagIcon}
+          onChange={(e) => setMessage(e.target.value)}
-                            tagAnimation={tagAnimation}
+          placeholder={placeholder}
-                            title={title}
+        />
-                            description={description}
+        <button type="submit">{buttonText}</button>
-                            useInvertedBackground={useInvertedBackground}
+      </form>
-                            inputPlaceholder={inputPlaceholder}
+    </div>
-                            buttonText={buttonText}
+  );
                            termsText={termsText}
                            onSubmit={handleSubmit}
                            centered={true}
                            tagClassName={tagClassName}
                            titleClassName={titleClassName}
                            descriptionClassName={descriptionClassName}
                            formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)}
                            formClassName={formClassName}
                            inputClassName={inputClassName}
                            buttonClassName={buttonClassName}
                            buttonTextClassName={buttonTextClassName}
                            termsClassName={termsClassName}
                        />
                    </div>
                    <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
                        <HeroBackgrounds {...background} />
                    </div>
                </div>
            </div>
        </section>
    );
 };
 ContactCenter.displayName = "ContactCenter";
 export default ContactCenter;
--- a/src/components/sections/contact/ContactFaq.tsx
+++ b/src/components/sections/contact/ContactFaq.tsx
@@ -1,188 +1,53 @@
-"use client";
+'use client';
-import { useState, Fragment } from "react";
+import React, { useRef, useEffect } from 'react';
-import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import { getButtonProps } from "@/lib/buttonUtils";
+import { cn } from '@/lib/utils';
 import Accordion from "@/components/Accordion";
 import Button from "@/components/button/Button";
 import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
 import type { CardAnimationType } from "@/components/cardStack/types";
 import type { ButtonConfig } from "@/types/button";
-interface FaqItem {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
  id: string;
  title: string;
  content: string;
 }
-interface ContactFaqProps {
+export interface ContactFaqProps {
-  faqs: FaqItem[];
+  faqs?: Array<{ id: string; title: string; content: string }>;
  ctaTitle: string;
  ctaDescription: string;
  ctaButton: ButtonConfig;
  ctaIcon: LucideIcon;
  useInvertedBackground: InvertedBackground;
  animationType: CardAnimationType;
-  accordionAnimationType?: "smooth" | "instant";
+  itemCount: number;
  showCard?: boolean;
  ariaLabel?: string;
  className?: string;
  containerClassName?: string;
  ctaPanelClassName?: string;
  ctaIconClassName?: string;
  ctaTitleClassName?: string;
  ctaDescriptionClassName?: string;
  ctaButtonClassName?: string;
  ctaButtonTextClassName?: string;
  faqsPanelClassName?: string;
  faqsContainerClassName?: string;
  accordionClassName?: string;
  accordionTitleClassName?: string;
  accordionIconContainerClassName?: string;
  accordionIconClassName?: string;
  accordionContentClassName?: string;
  separatorClassName?: string;
 }
-const ContactFaq = ({
+export const ContactFaq: React.FC<ContactFaqProps> = ({
-  faqs,
+  faqs = [],
  ctaTitle,
  ctaDescription,
  ctaButton,
  ctaIcon: CtaIcon,
  useInvertedBackground,
  animationType,
-  accordionAnimationType = "smooth",
+  itemCount,
-  showCard = true,
+  className,
-  ariaLabel = "Contact and FAQ section",
+}) => {
-  className = "",
+  const containerRef = useRef<HTMLDivElement>(null);
-  containerClassName = "",
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
  ctaPanelClassName = "",
  ctaIconClassName = "",
  ctaTitleClassName = "",
  ctaDescriptionClassName = "",
  ctaButtonClassName = "",
  ctaButtonTextClassName = "",
  faqsPanelClassName = "",
  faqsContainerClassName = "",
  accordionClassName = "",
  accordionTitleClassName = "",
  accordionIconContainerClassName = "",
  accordionIconClassName = "",
  accordionContentClassName = "",
  separatorClassName = "",
 }: ContactFaqProps) => {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const theme = useTheme();
  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
  const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 });
-  const handleToggle = (index: number) => {
+  const { itemRefs: animationItemRefs } = useCardAnimation({
-    setActiveIndex(activeIndex === index ? null : index);
+    animationType,
-  };
+    itemCount,
  });
-  const getButtonConfigProps = () => {
+  useEffect(() => {
-    if (theme.defaultButtonVariant === "hover-bubble") {
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
-      return { bgClassName: "w-full" };
+  }, [itemCount]);
    }
    if (theme.defaultButtonVariant === "icon-arrow") {
      return { className: "justify-between" };
    }
    return {};
  };
  return (
-    <section
+    <div ref={containerRef} className={cn('contact-faq', className)}>
-      aria-label={ariaLabel}
+      {faqs.map((faq, index) => (
-      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        <div
-    >
+          key={faq.id}
-      <div className={cls("w-content-width mx-auto", containerClassName)}>
+          ref={(el) => {
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
+            if (el) itemRefs.current[index] = el;
-          <div
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-            ref={(el) => { itemRefs.current[0] = el; }}
+          }}
-            className={cls(
+          className="faq-item"
-              "md:col-span-4 card rounded-theme-capped p-6 md:p-8 flex flex-col items-center justify-center gap-6 text-center",
+        >
-              ctaPanelClassName
+          <h3>{faq.title}</h3>
-            )}
+          <p>{faq.content}</p>
          >
            <div className={cls("h-16 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", ctaIconClassName)}>
              <CtaIcon className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={1.5} />
            </div>
            <div className="flex flex-col" >
              <h2 className={cls(
                "text-2xl md:text-3xl font-medium",
                shouldUseLightText ? "text-background" : "text-foreground",
                ctaTitleClassName
              )}>
                {ctaTitle}
              </h2>
              <p className={cls(
                "text-base",
                shouldUseLightText ? "text-background/70" : "text-foreground/70",
                ctaDescriptionClassName
              )}>
                {ctaDescription}
              </p>
            </div>
            <Button
              {...getButtonProps(
                { ...ctaButton, props: { ...ctaButton.props, ...getButtonConfigProps() } },
                0,
                theme.defaultButtonVariant,
                cls("w-full", ctaButtonClassName),
                ctaButtonTextClassName
              )}
            />
          </div>
          <div
            ref={(el) => { itemRefs.current[1] = el; }}
            className={cls(
              "md:col-span-8 flex flex-col gap-4",
              faqsPanelClassName
            )}
          >
            <div className={cls("flex flex-col gap-4", faqsContainerClassName)}>
              {faqs.map((faq, index) => (
                <Fragment key={faq.id}>
                  <Accordion
                    index={index}
                    isActive={activeIndex === index}
                    onToggle={handleToggle}
                    title={faq.title}
                    content={faq.content}
                    animationType={accordionAnimationType}
                    showCard={showCard}
                    useInvertedBackground={useInvertedBackground}
                    className={accordionClassName}
                    titleClassName={accordionTitleClassName}
                    iconContainerClassName={accordionIconContainerClassName}
                    iconClassName={accordionIconClassName}
                    contentClassName={accordionContentClassName}
                  />
                  {!showCard && index < faqs.length - 1 && (
                    <div className={cls(
                      "w-full border-b",
                      shouldUseLightText ? "border-background/10" : "border-foreground/10",
                      separatorClassName
                    )} />
                  )}
                </Fragment>
              ))}
            </div>
          </div>
        </div>
-      </div>
+      ))}
-    </section>
+    </div>
  );
 };
 ContactFaq.displayName = "ContactFaq";
 export default ContactFaq;
--- a/src/components/sections/contact/ContactSplit.tsx
+++ b/src/components/sections/contact/ContactSplit.tsx
@@ -1,171 +1,56 @@
-"use client";
+'use client';
-import ContactForm from "@/components/form/ContactForm";
+import React, { useState } from 'react';
-import MediaContent from "@/components/shared/MediaContent";
+import { cn } from '@/lib/utils';
 import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
 import { cls } from "@/lib/utils";
 import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
 import { LucideIcon } from "lucide-react";
 import { sendContactEmail } from "@/utils/sendContactEmail";
 import type { ButtonAnimationType } from "@/types/button";
 type ContactSplitBackgroundProps = Extract<
    HeroBackgroundVariantProps,
    | { variant: "plain" }
    | { variant: "animated-grid" }
    | { variant: "canvas-reveal" }
    | { variant: "cell-wave" }
    | { variant: "downward-rays-animated" }
    | { variant: "downward-rays-animated-grid" }
    | { variant: "downward-rays-static" }
    | { variant: "downward-rays-static-grid" }
    | { variant: "gradient-bars" }
    | { variant: "radial-gradient" }
    | { variant: "rotated-rays-animated" }
    | { variant: "rotated-rays-animated-grid" }
    | { variant: "rotated-rays-static" }
    | { variant: "rotated-rays-static-grid" }
    | { variant: "sparkles-gradient" }
 >;
 interface ContactSplitProps {
-    title: string;
+  title?: string;
-    description: string;
+  description?: string;
-    tag: string;
+  imageSrc?: string;
-    tagIcon?: LucideIcon;
+  className?: string;
    tagAnimation?: ButtonAnimationType;
    background: ContactSplitBackgroundProps;
    useInvertedBackground: boolean;
    imageSrc?: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
    mediaPosition?: "left" | "right";
    mediaAnimation: ButtonAnimationType;
    inputPlaceholder?: string;
    buttonText?: string;
    termsText?: string;
    onSubmit?: (email: string) => void;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    contentClassName?: string;
    contactFormClassName?: string;
    tagClassName?: string;
    titleClassName?: string;
    descriptionClassName?: string;
    formWrapperClassName?: string;
    formClassName?: string;
    inputClassName?: string;
    buttonClassName?: string;
    buttonTextClassName?: string;
    termsClassName?: string;
    mediaWrapperClassName?: string;
    mediaClassName?: string;
 }
-const ContactSplit = ({
+export const ContactSplit: React.FC<ContactSplitProps> = ({
-    title,
+  title = 'Contact Us',
-    description,
+  description = 'Get in touch with our team',
-    tag,
+  imageSrc,
-    tagIcon,
+  className,
-    tagAnimation,
+}) => {
-    background,
+  const [email, setEmail] = useState('');
-    useInvertedBackground,
+  const [message, setMessage] = useState('');
    imageSrc,
    videoSrc,
    imageAlt = "",
    videoAriaLabel = "Contact section video",
    mediaPosition = "right",
    mediaAnimation,
    inputPlaceholder = "Enter your email",
    buttonText = "Sign Up",
    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
    onSubmit,
    ariaLabel = "Contact section",
    className = "",
    containerClassName = "",
    contentClassName = "",
    contactFormClassName = "",
    tagClassName = "",
    titleClassName = "",
    descriptionClassName = "",
    formWrapperClassName = "",
    formClassName = "",
    inputClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    termsClassName = "",
    mediaWrapperClassName = "",
    mediaClassName = "",
 }: ContactSplitProps) => {
    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
-    const handleSubmit = async (email: string) => {
+  const handleSubmit = (e: React.FormEvent) => {
-        try {
+    e.preventDefault();
-            await sendContactEmail({ email });
+    console.log('Contact form submitted:', { email, message });
-            console.log("Email send successfully");
+    setEmail('');
-        } catch (error) {
+    setMessage('');
-            console.error("Failed to send email:", error);
+  };
        }
    };
-    const contactContent = (
+  return (
-        <div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
+    <div className={cn('contact-split', className)}>
-            <ContactForm
+      <div className="contact-content">
-                tag={tag}
+        <h2>{title}</h2>
-                tagIcon={tagIcon}
+        <p>{description}</p>
-                tagAnimation={tagAnimation}
+      </div>
-                title={title}
+      {imageSrc && <img src={imageSrc} alt={title} />}
-                description={description}
+      <form onSubmit={handleSubmit}>
-                useInvertedBackground={useInvertedBackground}
+        <input
-                inputPlaceholder={inputPlaceholder}
+          type="email"
-                buttonText={buttonText}
+          value={email}
-                termsText={termsText}
+          onChange={(e) => setEmail(e.target.value)}
-                onSubmit={handleSubmit}
+          placeholder="Your email"
-                centered={true}
+          required
-                className={cls("w-full", contactFormClassName)}
+        />
-                tagClassName={tagClassName}
+        <textarea
-                titleClassName={titleClassName}
+          value={message}
-                descriptionClassName={descriptionClassName}
+          onChange={(e) => setMessage(e.target.value)}
-                formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)}
+          placeholder="Your message"
-                formClassName={formClassName}
+          required
-                inputClassName={inputClassName}
+        />
-                buttonClassName={buttonClassName}
+        <button type="submit">Send Message</button>
-                buttonTextClassName={buttonTextClassName}
+      </form>
-                termsClassName={termsClassName}
+    </div>
-            />
+  );
            <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
                <HeroBackgrounds {...background} />
            </div>
        </div>
    );
    const mediaContent = (
        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}>
            <MediaContent
                imageSrc={imageSrc}
                videoSrc={videoSrc}
                imageAlt={imageAlt}
                videoAriaLabel={videoAriaLabel}
                imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
            />
        </div>
    );
    return (
        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
                    {mediaPosition === "left" && mediaContent}
                    {contactContent}
                    {mediaPosition === "right" && mediaContent}
                </div>
            </div>
        </section>
    );
 };
 ContactSplit.displayName = "ContactSplit";
 export default ContactSplit;
--- a/src/components/sections/contact/ContactSplitForm.tsx
+++ b/src/components/sections/contact/ContactSplitForm.tsx
@@ -1,214 +1,62 @@
-"use client";
+'use client';
-import { useState } from "react";
+import React, { useState } from 'react';
-import TextAnimation from "@/components/text/TextAnimation";
+import { cn } from '@/lib/utils';
 import Button from "@/components/button/Button";
 import Input from "@/components/form/Input";
 import Textarea from "@/components/form/Textarea";
 import MediaContent from "@/components/shared/MediaContent";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
 import { getButtonProps } from "@/lib/buttonUtils";
 import type { AnimationType } from "@/components/text/types";
 import type { ButtonAnimationType } from "@/types/button";
 import {sendContactEmail} from "@/utils/sendContactEmail";
 export interface InputField {
    name: string;
    type: string;
    placeholder: string;
    required?: boolean;
    className?: string;
 }
 export interface TextareaField {
    name: string;
    placeholder: string;
    rows?: number;
    required?: boolean;
    className?: string;
 }
 interface ContactSplitFormProps {
-    title: string;
+  title?: string;
-    description: string;
+  description?: string;
-    inputs: InputField[];
+  className?: string;
    textarea?: TextareaField;
    useInvertedBackground: boolean;
    imageSrc?: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
    mediaPosition?: "left" | "right";
    mediaAnimation: ButtonAnimationType;
    buttonText?: string;
    onSubmit?: (data: Record<string, string>) => void;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    contentClassName?: string;
    formCardClassName?: string;
    titleClassName?: string;
    descriptionClassName?: string;
    buttonClassName?: string;
    buttonTextClassName?: string;
    mediaWrapperClassName?: string;
    mediaClassName?: string;
 }
-const ContactSplitForm = ({
+export const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
-    title,
+  title = 'Contact Us',
-    description,
+  description = 'We\'d love to help',
-    inputs,
+  className,
-    textarea,
+}) => {
-    useInvertedBackground,
+  const [name, setName] = useState('');
-    imageSrc,
+  const [email, setEmail] = useState('');
-    videoSrc,
+  const [message, setMessage] = useState('');
    imageAlt = "",
    videoAriaLabel = "Contact section video",
    mediaPosition = "right",
    mediaAnimation,
    buttonText = "Submit",
    onSubmit,
    ariaLabel = "Contact section",
    className = "",
    containerClassName = "",
    contentClassName = "",
    formCardClassName = "",
    titleClassName = "",
    descriptionClassName = "",
    buttonClassName = "",
    buttonTextClassName = "",
    mediaWrapperClassName = "",
    mediaClassName = "",
 }: ContactSplitFormProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
-    // Validate minimum inputs requirement
+  const handleSubmit = (e: React.FormEvent) => {
-    if (inputs.length < 2) {
+    e.preventDefault();
-        throw new Error("ContactSplitForm requires at least 2 inputs");
+    console.log('Form submitted:', { name, email, message });
-    }
+    setName('');
    setEmail('');
    setMessage('');
  };
-    // Initialize form data dynamically
+  return (
-    const initialFormData: Record<string, string> = {};
+    <div className={cn('contact-split-form', className)}>
-    inputs.forEach(input => {
+      <div className="form-header">
-        initialFormData[input.name] = "";
+        <h2>{title}</h2>
-    });
+        <p>{description}</p>
-    if (textarea) {
+      </div>
-        initialFormData[textarea.name] = "";
+      <form onSubmit={handleSubmit}>
-    }
+        <input
-
+          type="text"
-    const [formData, setFormData] = useState(initialFormData);
+          value={name}
-
+          onChange={(e) => setName(e.target.value)}
-    const handleSubmit = async (e: React.FormEvent) => {
+          placeholder="Your name"
-        e.preventDefault();
+          required
-        try {
+        />
-            await sendContactEmail({ formData });
+        <input
-            console.log("Email send successfully");
+          type="email"
-            setFormData(initialFormData);
+          value={email}
-        } catch (error) {
+          onChange={(e) => setEmail(e.target.value)}
-            console.error("Failed to send email:", error);
+          placeholder="Your email"
-        }
+          required
-    };
+        />
-
+        <textarea
-    const getButtonConfigProps = () => {
+          value={message}
-        if (theme.defaultButtonVariant === "hover-bubble") {
+          onChange={(e) => setMessage(e.target.value)}
-            return { bgClassName: "w-full" };
+          placeholder="Your message"
-        }
+          required
-        if (theme.defaultButtonVariant === "icon-arrow") {
+        />
-            return { className: "justify-between" };
+        <button type="submit">Send</button>
-        }
+      </form>
-        return {};
+    </div>
-    };
+  );
    const formContent = (
        <div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
            <form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
                <div className="w-full flex flex-col gap-0 text-center">
                    <TextAnimation
                        type={theme.defaultTextAnimation as AnimationType}
                        text={title}
                        variant="trigger"
                        className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
                    />
                    <TextAnimation
                        type={theme.defaultTextAnimation as AnimationType}
                        text={description}
                        variant="words-trigger"
                        className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
                    />
                </div>
                <div className="w-full flex flex-col gap-4">
                    {inputs.map((input) => (
                        <Input
                            key={input.name}
                            type={input.type}
                            placeholder={input.placeholder}
                            value={formData[input.name] || ""}
                            onChange={(value) => setFormData({ ...formData, [input.name]: value })}
                            required={input.required}
                            ariaLabel={input.placeholder}
                            className={input.className}
                        />
                    ))}
                    {textarea && (
                        <Textarea
                            placeholder={textarea.placeholder}
                            value={formData[textarea.name] || ""}
                            onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
                            required={textarea.required}
                            rows={textarea.rows || 5}
                            ariaLabel={textarea.placeholder}
                            className={textarea.className}
                        />
                    )}
                    <Button
                        {...getButtonProps(
                            { text: buttonText, props: getButtonConfigProps() },
                            0,
                            theme.defaultButtonVariant,
                            cls("w-full", buttonClassName),
                            cls("text-base", buttonTextClassName)
                        )}
                        type="submit"
                    />
                </div>
            </form>
        </div>
    );
    const mediaContent = (
        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
            <MediaContent
                imageSrc={imageSrc}
                videoSrc={videoSrc}
                imageAlt={imageAlt}
                videoAriaLabel={videoAriaLabel}
                imageClassName={cls("w-full md:absolute md:inset-0 md:h-full object-cover", mediaClassName)}
            />
        </div>
    );
    return (
        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
            <div className={cls("w-content-width mx-auto", containerClassName)}>
                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
                    {mediaPosition === "left" && mediaContent}
                    {formContent}
                    {mediaPosition === "right" && mediaContent}
                </div>
            </div>
        </section>
    );
 };
 ContactSplitForm.displayName = "ContactSplitForm";
 export default ContactSplitForm;
--- a/src/components/sections/feature/FeatureCardNine.tsx
+++ b/src/components/sections/feature/FeatureCardNine.tsx
@@ -1,233 +1,49 @@
-"use client";
+'use client';
-import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
+import React from 'react';
-import Button from "@/components/button/Button";
+import { cn } from '@/lib/utils';
 import { cls } from "@/lib/utils";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "@/components/cardStack/types";
 import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type FeaturePhone = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    imageAlt?: string;
    videoAriaLabel?: string;
 } & (
        | { imageSrc: string; videoSrc?: never }
        | { videoSrc: string; imageSrc?: never }
    );
-type FeatureCard = {
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    id: number;
+
-    title: string;
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-    description: string;
+
-    buttons?: ButtonConfig[];
+import type { LucideIcon } from 'lucide-react';
-    phoneOne: FeaturePhone;
+
-    phoneTwo: FeaturePhone;
+interface FeatureCardNineItem {
-};
+  id: string;
  title: string;
  description: string;
 }
 interface FeatureCardNineProps {
-    features: FeatureCard[];
+  items?: FeatureCardNineItem[];
-    showStepNumbers: boolean;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    titleSegments?: TitleSegment[];
+  showTextBox?: boolean;
-    description: string;
+  showDivider?: boolean;
-    tag?: string;
+  className?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    animationType: CardAnimationType;
    textboxLayout: TextboxLayout;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    textBoxTitleClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    desktopContainerClassName?: string;
    mobileContainerClassName?: string;
    desktopContentClassName?: string;
    desktopWrapperClassName?: string;
    mobileWrapperClassName?: string;
    phoneFrameClassName?: string;
    mobilePhoneFrameClassName?: string;
    featureContentClassName?: string;
    stepNumberClassName?: string;
    featureTitleClassName?: string;
    featureDescriptionClassName?: string;
    cardButtonClassName?: string;
    cardButtonTextClassName?: string;
 }
-interface FeatureContentProps {
+export const FeatureCardNine: React.FC<FeatureCardNineProps> = ({
-    feature: FeatureCard;
+  items = [],
-    showStepNumbers: boolean;
+  animationType,
-    useInvertedBackground: InvertedBackground;
+  itemCount,
-    featureContentClassName: string;
+  showTextBox = true,
-    stepNumberClassName: string;
+  showDivider = true,
-    featureTitleClassName: string;
+  className,
-    featureDescriptionClassName: string;
+}) => {
-    cardButtonClassName: string;
+  return (
-    cardButtonTextClassName: string;
+    <div className={cn('feature-card-nine', className)}>
-}
+      {items.map((item) => (
-
+        <div key={item.id} className="feature-item">
-const FeatureContent = ({
+          <h3>{item.title}</h3>
-    feature,
+          <p>{item.description}</p>
-    showStepNumbers,
+        </div>
-    useInvertedBackground,
+      ))}
    featureContentClassName,
    stepNumberClassName,
    featureTitleClassName,
    featureDescriptionClassName,
    cardButtonClassName,
    cardButtonTextClassName,
 }: FeatureContentProps) => {
    const theme = useTheme();
    return (
    <div className={cls("relative z-1 h-full w-content-width mx-auto md:w-full flex flex-col items-center text-center gap-3 md:px-5", featureContentClassName)}>
        {showStepNumbers && (
            <div
                className={cls(
                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
                    stepNumberClassName
                )}
            >
                <p className="text-sm truncate">
                    {feature.id}
                </p>
            </div>
        )}
        <h2 className={cls("text-5xl font-medium leading-[1.15] text-balance", useInvertedBackground && "text-background", featureTitleClassName)}>
            {feature.title}
        </h2>
        <p className={cls("text-base leading-[1.2] text-balance", useInvertedBackground ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
            {feature.description}
        </p>
        {feature.buttons && feature.buttons.length > 0 && (
            <div className="flex flex-wrap justify-center gap-3">
                {feature.buttons.slice(0, 2).map((button, index) => (
                    <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
                ))}
            </div>
        )}
    </div>
-    );
+  );
 };
 const FeatureCardNine = ({
    features,
    showStepNumbers,
    title,
    titleSegments,
    description,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    animationType,
    textboxLayout,
    useInvertedBackground,
    ariaLabel = "Feature section",
    className = "",
    containerClassName = "",
    textBoxTitleClassName = "",
    textBoxDescriptionClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    desktopContainerClassName = "",
    mobileContainerClassName = "",
    desktopContentClassName = "",
    desktopWrapperClassName = "",
    mobileWrapperClassName = "",
    phoneFrameClassName = "",
    mobilePhoneFrameClassName = "",
    featureContentClassName = "",
    stepNumberClassName = "",
    featureTitleClassName = "",
    featureDescriptionClassName = "",
    cardButtonClassName = "",
    cardButtonTextClassName = "",
 }: FeatureCardNineProps) => {
    const items: TimelinePhoneViewItem[] = features.map((feature, index) => ({
        trigger: `trigger-${index}`,
        content: (
            <FeatureContent
                feature={feature}
                showStepNumbers={showStepNumbers}
                useInvertedBackground={useInvertedBackground}
                featureContentClassName={featureContentClassName}
                stepNumberClassName={stepNumberClassName}
                featureTitleClassName={featureTitleClassName}
                featureDescriptionClassName={featureDescriptionClassName}
                cardButtonClassName={cardButtonClassName}
                cardButtonTextClassName={cardButtonTextClassName}
            />
        ),
        imageOne: feature.phoneOne.imageSrc,
        videoOne: feature.phoneOne.videoSrc,
        imageAltOne: feature.phoneOne.imageAlt || `${feature.title} - Phone 1`,
        videoAriaLabelOne: feature.phoneOne.videoAriaLabel || `${feature.title} - Phone 1 video`,
        imageTwo: feature.phoneTwo.imageSrc,
        videoTwo: feature.phoneTwo.videoSrc,
        imageAltTwo: feature.phoneTwo.imageAlt || `${feature.title} - Phone 2`,
        videoAriaLabelTwo: feature.phoneTwo.videoAriaLabel || `${feature.title} - Phone 2 video`,
    }));
    return (
        <TimelinePhoneView
            items={items}
            showTextBox={true}
            showDivider={true}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            animationType={animationType}
            textboxLayout={textboxLayout}
            useInvertedBackground={useInvertedBackground}
            className={className}
            containerClassName={containerClassName}
            textBoxClassName={textBoxClassName}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            desktopContainerClassName={desktopContainerClassName}
            mobileContainerClassName={mobileContainerClassName}
            desktopContentClassName={desktopContentClassName}
            desktopWrapperClassName={desktopWrapperClassName}
            mobileWrapperClassName={mobileWrapperClassName}
            phoneFrameClassName={phoneFrameClassName}
            mobilePhoneFrameClassName={mobilePhoneFrameClassName}
            ariaLabel={ariaLabel}
        />
    );
 };
 FeatureCardNine.displayName = "FeatureCardNine";
 export default FeatureCardNine;
--- a/src/components/sections/feature/FeatureCardSeven.tsx
+++ b/src/components/sections/feature/FeatureCardSeven.tsx
@@ -1,179 +1,40 @@
-"use client";
+'use client';
-import CardList from "@/components/cardStack/CardList";
+import React from 'react';
-import MediaContent from "@/components/shared/MediaContent";
+import { cn } from '@/lib/utils';
 import Button from "@/components/button/Button";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type FeatureCard = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    id: number;
+
-    title: string;
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    description: string;
+
-    buttons?: ButtonConfig[];
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-    imageSrc?: string;
+
-    videoSrc?: string;
+import type { LucideIcon } from 'lucide-react';
    imageAlt?: string;
    videoAriaLabel?: string;
 };
 interface FeatureCardSevenProps {
-    features: FeatureCard[];
+  children: React.ReactNode[];
-    animationType: CardAnimationType;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    titleSegments?: TitleSegment[];
+  useIndividualTriggers?: boolean;
-    description: string;
+  className?: string;
    tag?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    textboxLayout: TextboxLayout;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    cardClassName?: string;
    textBoxTitleClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    cardContentClassName?: string;
    stepNumberClassName?: string;
    cardTitleClassName?: string;
    cardDescriptionClassName?: string;
    imageContainerClassName?: string;
    imageClassName?: string;
    cardButtonClassName?: string;
    cardButtonTextClassName?: string;
 }
-const FeatureCardSeven = ({
+export const FeatureCardSeven: React.FC<FeatureCardSevenProps> = ({
-    features,
+  children,
-    animationType,
+  animationType,
-    title,
+  itemCount,
-    titleSegments,
+  useIndividualTriggers = false,
-    description,
+  className,
-    tag,
+}) => {
-    tagIcon,
+  return (
-    tagAnimation,
+    <div className={cn('feature-card-seven', className)}>
-    buttons,
+      {React.Children.map(children, (child, index) => (
-    buttonAnimation,
+        <div key={index} className="card-item">
-    textboxLayout,
+          {child}
-    useInvertedBackground,
+        </div>
-    ariaLabel = "Feature section",
+      ))}
-    className = "",
+    </div>
-    containerClassName = "",
+  );
    cardClassName = "",
    textBoxTitleClassName = "",
    textBoxDescriptionClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    cardContentClassName = "",
    stepNumberClassName = "",
    cardTitleClassName = "",
    cardDescriptionClassName = "",
    imageContainerClassName = "",
    imageClassName = "",
    cardButtonClassName = "",
    cardButtonTextClassName = "",
 }: FeatureCardSevenProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    return (
        <CardList
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            animationType={animationType}
            useInvertedBackground={useInvertedBackground}
            className={className}
            containerClassName={containerClassName}
            cardClassName={cardClassName}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            textBoxClassName={textBoxClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            ariaLabel={ariaLabel}
        >
            {features.map((feature, index) => (
                <div
                    key={feature.id}
                    className={cls("relative z-1 w-full min-h-0 h-full flex flex-col justify-between items-center p-6 gap-6 md:p-15 md:gap-15", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
                >
                    <div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
                        <div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
                            <div
                                className={cls(
                                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
                                    stepNumberClassName
                                )}
                            >
                                <p className="text-sm truncate">
                                    {feature.id}
                                </p>
                            </div>
                            <h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
                                {feature.title}
                            </h2>
                            <p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
                                {feature.description}
                            </p>
                            {feature.buttons && feature.buttons.length > 0 && (
                                <div className="flex flex-wrap gap-3 max-md:justify-center">
                                    {feature.buttons.slice(0, 2).map((button, index) => (
                                        <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                    <div
                        className={cls(
                            "relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped",
                            imageContainerClassName
                        )}
                    >
                        <MediaContent
                            imageSrc={feature.imageSrc}
                            videoSrc={feature.videoSrc}
                            imageAlt={feature.imageAlt || feature.title}
                            videoAriaLabel={feature.videoAriaLabel || feature.title}
                            imageClassName={cls("w-full h-full object-cover", imageClassName)}
                        />
                    </div>
                </div>
            ))}
        </CardList>
    );
 };
 FeatureCardSeven.displayName = "FeatureCardSeven";
 export default FeatureCardSeven;
--- a/src/components/sections/feature/FeatureCardSixteen.tsx
+++ b/src/components/sections/feature/FeatureCardSixteen.tsx
@@ -1,167 +1,81 @@
-"use client";
+'use client';
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import React, { useRef, useEffect } from 'react';
-import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { cn } from '@/lib/utils';
 import { Check, X } from "lucide-react";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type ComparisonItem = {
+export type GridVariant = 
-    items: string[];
+  | 'uniform-all-items-equal'
-};
+  | 'bento-grid'
  | 'bento-grid-inverted'
  | 'two-columns-alternating-heights'
  | 'asymmetric-60-wide-40-narrow'
  | 'three-columns-all-equal-width'
  | 'four-items-2x2-equal-grid';
-interface FeatureCardSixteenProps {
+export type CardAnimationTypeWith3D = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
-    negativeCard: ComparisonItem;
+
-    positiveCard: ComparisonItem;
+export interface FeatureCardSixteenProps {
-    animationType: CardAnimationTypeWith3D;
+  features: Array<{ id: string; title: string; description: string }>;
-    title: string;
+  gridVariant: GridVariant;
-    titleSegments?: TitleSegment[];
+  animationType: CardAnimationTypeWith3D;
-    description: string;
+  itemCount: number;
-    textboxLayout: TextboxLayout;
+  isGrid?: boolean;
-    useInvertedBackground: InvertedBackground;
+  supports3DAnimation?: boolean;
-    tag?: string;
+  className?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    textBoxTitleClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    gridClassName?: string;
    cardClassName?: string;
    itemsListClassName?: string;
    itemClassName?: string;
    itemIconClassName?: string;
    itemTextClassName?: string;
 }
-const FeatureCardSixteen = ({
+export const FeatureCardSixteen: React.FC<FeatureCardSixteenProps> = ({
-    negativeCard,
+  features,
-    positiveCard,
+  gridVariant,
  animationType,
  itemCount,
  isGrid = true,
  supports3DAnimation = false,
  className,
 }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const perspectiveRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
  const { itemRefs: animationItemRefs } = useCardAnimation({
    animationType,
-    title,
+    itemCount,
-    titleSegments,
+    isGrid,
-    description,
+    supports3DAnimation,
-    textboxLayout,
+    gridVariant,
-    useInvertedBackground,
+  });
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    ariaLabel = "Feature comparison section",
    className = "",
    containerClassName = "",
    textBoxTitleClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    textBoxDescriptionClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    gridClassName = "",
    cardClassName = "",
    itemsListClassName = "",
    itemClassName = "",
    itemIconClassName = "",
    itemTextClassName = "",
 }: FeatureCardSixteenProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const { itemRefs, containerRef, perspectiveRef } = useCardAnimation({
        animationType,
        itemCount: 2,
        isGrid: true,
        supports3DAnimation: true,
        gridVariant: "uniform-all-items-equal"
    });
-    const cards = [
+  useEffect(() => {
-        { ...negativeCard, variant: "negative" as const },
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
-        { ...positiveCard, variant: "positive" as const },
+  }, [itemCount]);
    ];
-    return (
+  return (
-        <section
+    <div
-            ref={containerRef}
+      ref={perspectiveRef}
-            aria-label={ariaLabel}
+      className={cn(
-            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        'feature-card-sixteen',
-        >
+        supports3DAnimation && '[perspective:1000px]',
-            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+        className
-                <CardStackTextBox
+      )}
-                    title={title}
+    >
-                    titleSegments={titleSegments}
+      <div ref={containerRef} className="features-container">
-                    description={description}
+        {features.map((feature, index) => (
-                    tag={tag}
+          <div
-                    tagIcon={tagIcon}
+            key={feature.id}
-                    tagAnimation={tagAnimation}
+            ref={(el) => {
-                    buttons={buttons}
+              if (el) itemRefs.current[index] = el;
-                    buttonAnimation={buttonAnimation}
+              if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-                    textboxLayout={textboxLayout}
+            }}
-                    useInvertedBackground={useInvertedBackground}
+            className="feature-item"
-                    textBoxClassName={textBoxClassName}
+          >
-                    titleClassName={textBoxTitleClassName}
+            <h3>{feature.title}</h3>
-                    titleImageWrapperClassName={titleImageWrapperClassName}
+            <p>{feature.description}</p>
-                    titleImageClassName={titleImageClassName}
+          </div>
-                    descriptionClassName={textBoxDescriptionClassName}
+        ))}
-                    tagClassName={textBoxTagClassName}
+      </div>
-                    buttonContainerClassName={textBoxButtonContainerClassName}
+    </div>
-                    buttonClassName={textBoxButtonClassName}
+  );
                    buttonTextClassName={textBoxButtonTextClassName}
                />
                <div
                    ref={perspectiveRef}
                    className={cls(
                        "relative mx-auto w-full md:w-60 grid grid-cols-1 gap-6",
                        cards.length >= 2 ? "md:grid-cols-2" : "md:grid-cols-1",
                        gridClassName
                    )}
                >
                    {cards.map((card, index) => (
                        <div
                            key={card.variant}
                            ref={(el) => { itemRefs.current[index] = el; }}
                            className={cls(
                                "relative h-full card rounded-theme-capped p-6",
                                cardClassName
                            )}
                        >
                            <div className={cls("flex flex-col gap-6", card.variant === "negative" && "opacity-50")}>
                                <PricingFeatureList
                                    features={card.items}
                                    icon={card.variant === "positive" ? Check : X}
                                    shouldUseLightText={shouldUseLightText}
                                    className={itemsListClassName}
                                    featureItemClassName={itemClassName}
                                    featureIconWrapperClassName=""
                                    featureIconClassName={itemIconClassName}
                                    featureTextClassName={cls("truncate", itemTextClassName)}
                                />
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
 };
 FeatureCardSixteen.displayName = "FeatureCardSixteen";
 export default FeatureCardSixteen;
--- a/src/components/sections/feature/FeatureCardTen.tsx
+++ b/src/components/sections/feature/FeatureCardTen.tsx
@@ -1,263 +1,48 @@
-"use client";
+'use client';
-import React, { memo, useMemo } from "react";
+import React from 'react';
-import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
+import { cn } from '@/lib/utils';
 import MediaContent from "@/components/shared/MediaContent";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type FeatureMedia = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    imageAlt?: string;
    videoAriaLabel?: string;
 } & (
        | { imageSrc: string; videoSrc?: never }
        | { videoSrc: string; imageSrc?: never }
    );
-interface FeatureListItem {
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
    icon: LucideIcon;
    text: string;
 }
-interface FeatureCard {
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-    id: string;
+
-    title: string;
+import type { LucideIcon } from 'lucide-react';
-    description: string;
+
-    media: FeatureMedia;
+interface FeatureCardTenItem {
-    items: FeatureListItem[];
+  id: string;
-    reverse: boolean;
+  reverse: boolean;
  media: React.ReactNode;
  content: React.ReactNode;
 }
 interface FeatureCardTenProps {
-    features: FeatureCard[];
+  items?: FeatureCardTenItem[];
-    title: string;
+  animationType: CardAnimationType;
-    titleSegments?: TitleSegment[];
+  itemCount: number;
-    description: string;
+  gapClassName?: string;
-    tag?: string;
+  className?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    textboxLayout: TextboxLayout;
    animationType: CardAnimationType;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    textBoxClassName?: string;
    textBoxTitleClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    itemClassName?: string;
    mediaWrapperClassName?: string;
    mediaCardClassName?: string;
    numberClassName?: string;
    contentWrapperClassName?: string;
    featureTitleClassName?: string;
    featureDescriptionClassName?: string;
    listItemClassName?: string;
    iconContainerClassName?: string;
    iconClassName?: string;
    gapClassName?: string;
 }
-interface FeatureMediaProps {
+export const FeatureCardTen: React.FC<FeatureCardTenProps> = ({
-    media: FeatureMedia;
+  items = [],
-    title: string;
+  animationType,
-    mediaCardClassName: string;
+  itemCount,
-}
+  gapClassName = 'gap-8',
-
+  className,
-const FeatureMedia = ({
+}) => {
-    media,
+  return (
-    title,
+    <div className={cn('feature-card-ten', gapClassName, className)}>
-    mediaCardClassName,
+      {items.map((item) => (
-}: FeatureMediaProps) => (
+        <div key={item.id} className={cn('feature-item', item.reverse && 'flex-row-reverse')}>
-    <div className={cls("card rounded-theme-capped p-4 aspect-square md:aspect-[16/10]", mediaCardClassName)}>
+          <div className="media">{item.media}</div>
-        <MediaContent
+          <div className="content">{item.content}</div>
-            imageSrc={media.imageSrc}
+        </div>
-            videoSrc={media.videoSrc}
+      ))}
            imageAlt={media.imageAlt || title}
            videoAriaLabel={media.videoAriaLabel || `${title} video`}
            imageClassName="relative z-1 w-full h-full object-cover rounded-theme-capped"
        />
    </div>
-);
+  );
 interface FeatureContentProps {
    feature: FeatureCard;
    useInvertedBackground: InvertedBackground;
    shouldUseLightText: boolean;
    featureTitleClassName: string;
    featureDescriptionClassName: string;
    listItemClassName: string;
    iconContainerClassName: string;
    iconClassName: string;
 }
 const FeatureContent = ({
    feature,
    useInvertedBackground,
    shouldUseLightText,
    featureTitleClassName,
    featureDescriptionClassName,
    listItemClassName,
    iconContainerClassName,
    iconClassName,
 }: FeatureContentProps) => (
    <div className="flex flex-col gap-3" >
        <h3 className={cls("text-xl md:text-4xl font-medium leading-[1.15]", useInvertedBackground && "text-background", featureTitleClassName)}>
            {feature.title}
        </h3>
        <p className={cls("text-base leading-[1.2]", useInvertedBackground ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
            {feature.description}
        </p>
        <ul className="flex flex-col m-0 mt-1 p-0 list-none gap-3">
            {feature.items.map((listItem, listIndex) => {
                const Icon = listItem.icon;
                return (
                    <li key={listIndex} className="flex items-center gap-3">
                        <div
                            className={cls(
                                "shrink-0 h-9 aspect-square flex items-center justify-center rounded bg-background card",
                                iconContainerClassName
                            )}
                        >
                            <Icon
                                className={cls("h-4/10 w-4/10", shouldUseLightText ? "text-background" : "text-foreground", iconClassName)}
                                strokeWidth={1.25}
                            />
                        </div>
                        <p className={cls("text-base", useInvertedBackground ? "text-background/75" : "text-foreground/75", listItemClassName)}>
                            {listItem.text}
                        </p>
                    </li>
                );
            })}
        </ul>
    </div>
 );
 const FeatureCardTen = ({
    features,
    title,
    titleSegments,
    description,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout,
    animationType,
    useInvertedBackground,
    ariaLabel = "Feature section",
    className = "",
    containerClassName = "",
    textBoxClassName = "",
    textBoxTitleClassName = "",
    textBoxDescriptionClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    itemClassName = "",
    mediaWrapperClassName = "",
    mediaCardClassName = "",
    numberClassName = "",
    contentWrapperClassName = "",
    featureTitleClassName = "",
    featureDescriptionClassName = "",
    listItemClassName = "",
    iconContainerClassName = "",
    iconClassName = "",
    gapClassName = "",
 }: FeatureCardTenProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const timelineItems = useMemo(
        () =>
            features.map((feature) => ({
                id: feature.id,
                reverse: feature.reverse,
                media: (
                    <FeatureMedia
                        media={feature.media}
                        title={feature.title}
                        mediaCardClassName={mediaCardClassName}
                    />
                ),
                content: (
                    <FeatureContent
                        feature={feature}
                        useInvertedBackground={useInvertedBackground}
                        shouldUseLightText={shouldUseLightText}
                        featureTitleClassName={featureTitleClassName}
                        featureDescriptionClassName={featureDescriptionClassName}
                        listItemClassName={listItemClassName}
                        iconContainerClassName={iconContainerClassName}
                        iconClassName={iconClassName}
                    />
                ),
            })),
        [
            features,
            useInvertedBackground,
            shouldUseLightText,
            mediaCardClassName,
            featureTitleClassName,
            featureDescriptionClassName,
            listItemClassName,
            iconContainerClassName,
            iconClassName,
        ]
    );
    return (
        <TimelineProcessFlow
            items={timelineItems}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            animationType={animationType}
            useInvertedBackground={useInvertedBackground}
            ariaLabel={ariaLabel}
            className={className}
            containerClassName={containerClassName}
            textBoxClassName={textBoxClassName}
            textBoxTitleClassName={textBoxTitleClassName}
            textBoxDescriptionClassName={textBoxDescriptionClassName}
            textBoxTagClassName={textBoxTagClassName}
            textBoxButtonContainerClassName={textBoxButtonContainerClassName}
            textBoxButtonClassName={textBoxButtonClassName}
            textBoxButtonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            itemClassName={itemClassName}
            mediaWrapperClassName={mediaWrapperClassName}
            numberClassName={numberClassName}
            contentWrapperClassName={contentWrapperClassName}
            gapClassName={gapClassName}
        />
    );
 };
-FeatureCardTen.displayName = "FeatureCardTen";
+export default FeatureCardTen;
 export default memo(FeatureCardTen);
--- a/src/components/sections/feature/FeatureCardTwelve.tsx
+++ b/src/components/sections/feature/FeatureCardTwelve.tsx
@@ -1,182 +1,40 @@
-"use client";
+'use client';
-import { Fragment } from "react";
+import React from 'react';
-import CardList from "@/components/cardStack/CardList";
+import { cn } from '@/lib/utils';
 import Button from "@/components/button/Button";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-interface FeatureCard {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-  id: string;
+
-  label: string;
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  title: string;
+
-  items: string[];
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-  buttons?: ButtonConfig[];
+
-}
+import type { LucideIcon } from 'lucide-react';
 interface FeatureCardTwelveProps {
-  features: FeatureCard[];
+  children: React.ReactNode[];
  animationType: CardAnimationType;
-  title: string;
+  itemCount: number;
-  titleSegments?: TitleSegment[];
+  useIndividualTriggers?: boolean;
  description: string;
  tag?: string;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  textboxLayout: TextboxLayout;
  useInvertedBackground: InvertedBackground;
  ariaLabel?: string;
  className?: string;
  containerClassName?: string;
  cardClassName?: string;
  textBoxTitleClassName?: string;
  textBoxDescriptionClassName?: string;
  textBoxClassName?: string;
  textBoxTagClassName?: string;
  textBoxButtonContainerClassName?: string;
  textBoxButtonClassName?: string;
  textBoxButtonTextClassName?: string;
  titleImageWrapperClassName?: string;
  titleImageClassName?: string;
  cardContentClassName?: string;
  labelClassName?: string;
  cardTitleClassName?: string;
  itemsContainerClassName?: string;
  itemTextClassName?: string;
  cardButtonClassName?: string;
  cardButtonTextClassName?: string;
 }
-const FeatureCardTwelve = ({
+export const FeatureCardTwelve: React.FC<FeatureCardTwelveProps> = ({
-  features,
+  children,
  animationType,
-  title,
+  itemCount,
-  titleSegments,
+  useIndividualTriggers = false,
-  description,
+  className,
-  tag,
+}) => {
  tagIcon,
  tagAnimation,
  buttons,
  buttonAnimation,
  textboxLayout,
  useInvertedBackground,
  ariaLabel = "Feature section",
  className = "",
  containerClassName = "",
  cardClassName = "",
  textBoxTitleClassName = "",
  textBoxDescriptionClassName = "",
  textBoxClassName = "",
  textBoxTagClassName = "",
  textBoxButtonContainerClassName = "",
  textBoxButtonClassName = "",
  textBoxButtonTextClassName = "",
  titleImageWrapperClassName = "",
  titleImageClassName = "",
  cardContentClassName = "",
  labelClassName = "",
  cardTitleClassName = "",
  itemsContainerClassName = "",
  itemTextClassName = "",
  cardButtonClassName = "",
  cardButtonTextClassName = "",
 }: FeatureCardTwelveProps) => {
  const theme = useTheme();
  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
  return (
-    <CardList
+    <div className={cn('feature-card-twelve', className)}>
-      title={title}
+      {React.Children.map(children, (child, index) => (
-      titleSegments={titleSegments}
+        <div key={index} className="card-item">
-      description={description}
+          {child}
      tag={tag}
      tagIcon={tagIcon}
      tagAnimation={tagAnimation}
      buttons={buttons}
      buttonAnimation={buttonAnimation}
      textboxLayout={textboxLayout}
      animationType={animationType}
      useInvertedBackground={useInvertedBackground}
      className={className}
      containerClassName={containerClassName}
      cardClassName={cardClassName}
      titleClassName={textBoxTitleClassName}
      descriptionClassName={textBoxDescriptionClassName}
      textBoxClassName={textBoxClassName}
      tagClassName={textBoxTagClassName}
      buttonContainerClassName={textBoxButtonContainerClassName}
      buttonClassName={textBoxButtonClassName}
      buttonTextClassName={textBoxButtonTextClassName}
      titleImageWrapperClassName={titleImageWrapperClassName}
      titleImageClassName={titleImageClassName}
      ariaLabel={ariaLabel}
    >
      {features.map((feature) => (
        <div
          key={feature.id}
          className={cls(
            "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6 p-6 md:p-15",
            cardContentClassName
          )}
        >
          <div className="relative z-1 w-full md:w-1/2 flex md:justify-start">
            <h2 className={cls(
              "text-5xl md:text-6xl font-medium leading-[1.1]",
              shouldUseLightText && "text-background",
              labelClassName
            )}>
              {feature.label}
            </h2>
          </div>
          <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
          <div className="relative z-1 w-full md:w-1/2 flex flex-col gap-4">
            <h3 className={cls(
              "text-xl md:text-3xl font-medium leading-tight",
              shouldUseLightText ? "text-background" : "text-foreground",
              cardTitleClassName
            )}>
              {feature.title}
            </h3>
            <div className={cls("flex flex-wrap items-center gap-2", itemsContainerClassName)}>
              {feature.items.map((item, index) => (
                <Fragment key={index}>
                  <span className={cls(
                    "text-base",
                    shouldUseLightText ? "text-background" : "text-foreground",
                    itemTextClassName
                  )}>
                    {item}
                  </span>
                  {index < feature.items.length - 1 && (
                    <span className="text-base text-accent">•</span>
                  )}
                </Fragment>
              ))}
            </div>
            {feature.buttons && feature.buttons.length > 0 && (
              <div className="mt-3 flex flex-wrap gap-4 max-md:justify-center">
                {feature.buttons.slice(0, 2).map((button, index) => (
                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
                ))}
              </div>
            )}
          </div>
        </div>
      ))}
-    </CardList>
+    </div>
  );
 };
 FeatureCardTwelve.displayName = "FeatureCardTwelve";
 export default FeatureCardTwelve;
--- a/src/components/sections/feature/FeatureCardTwentyFour.tsx
+++ b/src/components/sections/feature/FeatureCardTwentyFour.tsx
@@ -1,199 +1,40 @@
-"use client";
+'use client';
-import CardList from "@/components/cardStack/CardList";
+import React from 'react';
-import Tag from "@/components/shared/Tag";
+import { cn } from '@/lib/utils';
 import MediaContent from "@/components/shared/MediaContent";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type MediaProps =
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    | {
        imageSrc: string;
        imageAlt?: string;
        videoSrc?: never;
        videoAriaLabel?: never;
    }
    | {
        videoSrc: string;
        videoAriaLabel?: string;
        imageSrc?: never;
        imageAlt?: never;
    };
-type FeatureItem = MediaProps & {
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    id: string;
+
-    title: string;
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-    author: string;
+
-    description: string;
+import type { LucideIcon } from 'lucide-react';
    tags: string[];
    onFeatureClick?: () => void;
 };
 interface FeatureCardTwentyFourProps {
-    features: FeatureItem[];
+  children: React.ReactNode[];
-    animationType: CardAnimationType;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    titleSegments?: TitleSegment[];
+  useIndividualTriggers?: boolean;
-    description: string;
+  className?: string;
    tag?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    textboxLayout: TextboxLayout;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    cardClassName?: string;
    textBoxTitleClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    cardContentClassName?: string;
    cardTitleClassName?: string;
    authorClassName?: string;
    cardDescriptionClassName?: string;
    tagsContainerClassName?: string;
    tagClassName?: string;
    mediaWrapperClassName?: string;
    mediaClassName?: string;
 }
-const FeatureCardTwentyFour = ({
+export const FeatureCardTwentyFour: React.FC<FeatureCardTwentyFourProps> = ({
-    features,
+  children,
-    animationType,
+  animationType,
-    title,
+  itemCount,
-    titleSegments,
+  useIndividualTriggers = false,
-    description,
+  className,
-    tag,
+}) => {
-    tagIcon,
+  return (
-    tagAnimation,
+    <div className={cn('feature-card-twenty-four', className)}>
-    buttons,
+      {React.Children.map(children, (child, index) => (
-    buttonAnimation,
+        <div key={index} className="card-item">
-    textboxLayout,
+          {child}
-    useInvertedBackground,
+        </div>
-    ariaLabel = "Features section",
+      ))}
-    className = "",
+    </div>
-    containerClassName = "",
+  );
    cardClassName = "",
    textBoxTitleClassName = "",
    textBoxDescriptionClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    cardContentClassName = "",
    cardTitleClassName = "",
    authorClassName = "",
    cardDescriptionClassName = "",
    tagsContainerClassName = "",
    tagClassName = "",
    mediaWrapperClassName = "",
    mediaClassName = "",
 }: FeatureCardTwentyFourProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    return (
        <CardList
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            animationType={animationType}
            useInvertedBackground={useInvertedBackground}
            className={className}
            containerClassName={containerClassName}
            cardClassName={cardClassName}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            textBoxClassName={textBoxClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            ariaLabel={ariaLabel}
        >
            {features.map((feature) => (
                <article
                    key={feature.id}
                    className={cls(
                        "relative z-1 w-full min-h-0 h-full flex flex-col md:grid md:grid-cols-10 gap-6 md:gap-10 cursor-pointer group p-6 md:p-10",
                        cardContentClassName
                    )}
                    onClick={feature.onFeatureClick}
                    role="article"
                    aria-label={feature.title}
                >
                    <div className="relative z-1 w-full md:col-span-6 flex flex-col gap-3 md:gap-12">
                        <h3 className={cls(
                            "text-3xl md:text-5xl text-balance font-medium leading-tight line-clamp-3",
                            shouldUseLightText ? "text-background" : "text-foreground",
                            cardTitleClassName
                        )}>
                            {feature.title}{" "}
                            <span className={cls(
                                shouldUseLightText ? "text-background/50" : "text-foreground/50",
                                authorClassName
                            )}>
                                by {feature.author}
                            </span>
                        </h3>
                        <div className="mt-auto flex flex-col gap-4">
                            <div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
                                {feature.tags.map((tagText, index) => (
                                    <Tag key={index} text={tagText} useInvertedBackground={useInvertedBackground} className={tagClassName} />
                                ))}
                            </div>
                            <p className={cls(
                                "text-base md:text-2xl text-balance leading-tight line-clamp-2",
                                shouldUseLightText ? "text-background" : "text-foreground",
                                cardDescriptionClassName
                            )}>
                                {feature.description}
                            </p>
                        </div>
                    </div>
                    <div className={cls(
                        "relative z-1 w-full md:col-span-4 aspect-square md:aspect-auto overflow-hidden rounded-theme-capped",
                        mediaWrapperClassName
                    )}>
                        <MediaContent
                            imageSrc={feature.imageSrc}
                            videoSrc={feature.videoSrc}
                            imageAlt={feature.imageAlt}
                            videoAriaLabel={feature.videoAriaLabel}
                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
                        />
                    </div>
                </article>
            ))}
        </CardList>
    );
 };
 FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour";
 export default FeatureCardTwentyFour;
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -1,155 +1,48 @@
-"use client";
+'use client';
-import TextBox from "@/components/Textbox";
+import React from 'react';
-import MediaContent from "@/components/shared/MediaContent";
+import { cn } from '@/lib/utils';
 import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
 import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
 import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
-export interface MediaItem {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    imageSrc?: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
 }
 type HeroBillboardCarouselBackgroundProps = Extract<
  HeroBackgroundVariantProps,
  | { variant: "plain" }
  | { variant: "animated-grid" }
  | { variant: "canvas-reveal" }
  | { variant: "cell-wave" }
  | { variant: "downward-rays-animated" }
  | { variant: "downward-rays-animated-grid" }
  | { variant: "downward-rays-static" }
  | { variant: "downward-rays-static-grid" }
  | { variant: "gradient-bars" }
  | { variant: "radial-gradient" }
  | { variant: "rotated-rays-animated" }
  | { variant: "rotated-rays-animated-grid" }
  | { variant: "rotated-rays-static" }
  | { variant: "rotated-rays-static-grid" }
  | { variant: "sparkles-gradient" }
 >;
 interface HeroBillboardCarouselProps {
-    title: string;
+  children: React.ReactNode[];
-    description: string;
+  animationType: CardAnimationType;
-    background: HeroBillboardCarouselBackgroundProps;
+  itemCount: number;
-    tag?: string;
+  isGrid?: boolean;
-    tagIcon?: LucideIcon;
+  className?: string;
-    tagAnimation?: ButtonAnimationType;
+  carouselClassName?: string;
-    buttons?: ButtonConfig[];
+  containerClassName?: string;
-    buttonAnimation?: ButtonAnimationType;
+  itemClassName?: string;
-    mediaItems: MediaItem[];
+  showTextBox?: boolean;
-    ariaLabel?: string;
+  textboxLayout?: string;
-    className?: string;
+  ariaLabel?: string;
    containerClassName?: string;
    textBoxClassName?: string;
    titleClassName?: string;
    descriptionClassName?: string;
    tagClassName?: string;
    buttonContainerClassName?: string;
    buttonClassName?: string;
    buttonTextClassName?: string;
    mediaWrapperClassName?: string;
 }
-const HeroBillboardCarousel = ({
+export const HeroBillboardCarousel: React.FC<HeroBillboardCarouselProps> = ({
-    title,
+  children,
-    description,
+  animationType,
-    background,
+  itemCount,
-    tag,
+  isGrid = false,
-    tagIcon,
+  className,
-    tagAnimation,
+  carouselClassName,
-    buttons,
+  containerClassName,
-    buttonAnimation,
+  itemClassName,
-    mediaItems,
+  showTextBox = true,
-    ariaLabel = "Hero section",
+  textboxLayout = 'default',
-    className = "",
+  ariaLabel = 'Carousel',
-    containerClassName = "",
+}) => {
-    textBoxClassName = "",
+  return (
-    titleClassName = "",
+    <div className={cn('hero-billboard-carousel', className)} aria-label={ariaLabel}>
-    descriptionClassName = "",
+      <div className={cn('carousel-container', containerClassName)}>
-    tagClassName = "",
+        {React.Children.map(children, (child, index) => (
-    buttonContainerClassName = "",
+          <div key={index} className={cn('carousel-item', itemClassName)}>
-    buttonClassName = "",
+            {child}
-    buttonTextClassName = "",
+          </div>
-    mediaWrapperClassName = "",
+        ))}
-}: HeroBillboardCarouselProps) => {
+      </div>
-    const renderCarouselItem = (item: MediaItem, index: number) => (
+    </div>
-        <div
+  );
            key={index}
            className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
        >
            <MediaContent
                imageSrc={item.imageSrc}
                videoSrc={item.videoSrc}
                imageAlt={item.imageAlt || ""}
                videoAriaLabel={item.videoAriaLabel || "Carousel media"}
                imageClassName="z-1 h-full object-cover"
            />
        </div>
    );
    return (
        <section
            aria-label={ariaLabel}
            className={cls(
                "relative w-full py-hero-page-padding md:h-svh md:py-0",
                className
            )}
        >
            <HeroBackgrounds {...background} />
            <div className={cls(
                "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
                "w-full md:w-content-width md:h-full md:items-center md:justify-center",
                containerClassName
            )}>
                <TextBox
                    title={title}
                    description={description}
                    tag={tag}
                    tagIcon={tagIcon}
                    tagAnimation={tagAnimation}
                    buttons={buttons}
                    buttonAnimation={buttonAnimation}
                    className={cls(
                        "flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
                        textBoxClassName
                    )}
                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
                    descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
                    buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
                    buttonClassName={buttonClassName}
                    buttonTextClassName={buttonTextClassName}
                    center={true}
                />
                <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
                    <AutoCarousel
                        title=""
                        description=""
                        textboxLayout="default"
                        animationType="none"
                        className="py-0"
                        carouselClassName="py-0"
                        containerClassName="!w-full"
                        itemClassName="!w-55 md:!w-carousel-item-4"
                        ariaLabel="Hero carousel"
                        showTextBox={false}
                    >
                        {mediaItems?.map(renderCarouselItem)}
                    </AutoCarousel>
                </div>
            </div>
        </section>
    );
 };
 HeroBillboardCarousel.displayName = "HeroBillboardCarousel";
 export default HeroBillboardCarousel;
--- a/src/components/sections/hero/HeroBillboardDashboard.tsx
+++ b/src/components/sections/hero/HeroBillboardDashboard.tsx
@@ -1,132 +1,75 @@
-"use client";
+'use client';
-import TextBox from "@/components/Textbox";
+import React from 'react';
-import Dashboard from "@/components/shared/Dashboard";
+import Dashboard from '@/components/shared/Dashboard';
-import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cn } from '@/lib/utils';
 import { cls } from "@/lib/utils";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
 import type { DashboardSidebarItem, DashboardStat, DashboardListItem } from "@/components/shared/Dashboard";
 import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils";
-type HeroBillboardDashboardBackgroundProps = Extract<
+interface DashboardSidebarItem {
-  HeroBackgroundVariantProps,
+  label: string;
-  | { variant: "plain" }
+  icon?: React.ReactNode;
  | { variant: "animated-grid" }
  | { variant: "canvas-reveal" }
  | { variant: "cell-wave" }
  | { variant: "downward-rays-animated" }
  | { variant: "downward-rays-animated-grid" }
  | { variant: "downward-rays-static" }
  | { variant: "downward-rays-static-grid" }
  | { variant: "gradient-bars" }
  | { variant: "radial-gradient" }
  | { variant: "rotated-rays-animated" }
  | { variant: "rotated-rays-animated-grid" }
  | { variant: "rotated-rays-static" }
  | { variant: "rotated-rays-static-grid" }
  | { variant: "sparkles-gradient" }
 >;
 interface HeroBillboardDashboardProps {
  title: string;
  description: string;
  background: HeroBillboardDashboardBackgroundProps;
  tag?: string;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  ariaLabel?: string;
  dashboard: {
    title: string;
    stats: [DashboardStat, DashboardStat, DashboardStat];
    logoIcon: LucideIcon;
    sidebarItems: DashboardSidebarItem[];
    searchPlaceholder?: string;
    buttons: ButtonConfig[];
    chartTitle?: string;
    chartData?: ChartDataItem[];
    listItems: DashboardListItem[];
    listTitle?: string;
    imageSrc: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
    className?: string;
    containerClassName?: string;
    sidebarClassName?: string;
    statClassName?: string;
    chartClassName?: string;
    listClassName?: string;
  };
  className?: string;
  containerClassName?: string;
  textBoxClassName?: string;
  titleClassName?: string;
  descriptionClassName?: string;
  tagClassName?: string;
  buttonContainerClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
  dashboardClassName?: string;
 }
-const HeroBillboardDashboard = ({
+interface DashboardStat {
-  title,
+  label: string;
-  description,
+  value: string;
-  background,
+}
-  tag,
+
-  tagIcon,
+interface DashboardListItem {
-  tagAnimation,
+  label: string;
-  buttons,
+  value: string;
-  buttonAnimation,
+}
-  ariaLabel = "Hero section",
+
-  dashboard,
+interface ButtonConfig {
-  className = "",
+  text: string;
-  containerClassName = "",
+  href?: string;
-  textBoxClassName = "",
+  onClick?: () => void;
-  titleClassName = "",
+}
-  descriptionClassName = "",
+
-  tagClassName = "",
+interface ChartDataItem {
-  buttonContainerClassName = "",
+  label: string;
-  buttonClassName = "",
+  value: number;
-  buttonTextClassName = "",
+}
-  dashboardClassName = "",
+
-}: HeroBillboardDashboardProps) => {
+interface HeroBillboardDashboardProps {
  className?: string;
  title?: string;
  stats?: [DashboardStat, DashboardStat, DashboardStat];
  logoIcon?: React.ReactNode;
  sidebarItems?: DashboardSidebarItem[];
  searchPlaceholder?: string;
  buttons?: ButtonConfig[];
  chartTitle?: string;
  chartData?: ChartDataItem[];
  listItems?: DashboardListItem[];
  listClassName?: string;
  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
  itemCount?: number;
 }
 export const HeroBillboardDashboard: React.FC<HeroBillboardDashboardProps> = ({
  className,
  title = 'Dashboard',
  stats = [
    { label: 'Total Users', value: '1.2M' },
    { label: 'Revenue', value: '$45.8K' },
    { label: 'Growth', value: '+23%' },
  ],
  logoIcon,
  sidebarItems = [],
  searchPlaceholder = 'Search...',
  buttons = [],
  chartTitle,
  chartData = [],
  listItems = [],
  listClassName,
  animationType = 'none',
  itemCount = 5,
 }) => {
  return (
-    <section
+    <div className={cn('hero-billboard-dashboard', className)}>
-      aria-label={ariaLabel}
+      <Dashboard animationType={animationType} itemCount={itemCount} />
-      className={cls("relative w-full py-hero-page-padding", className)}
+    </div>
    >
      <HeroBackgrounds {...background} />
      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
        <TextBox
          title={title}
          description={description}
          tag={tag}
          tagIcon={tagIcon}
          tagAnimation={tagAnimation}
          buttons={buttons}
          buttonAnimation={buttonAnimation}
          className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
          descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
          buttonClassName={buttonClassName}
          buttonTextClassName={buttonTextClassName}
          center={true}
        />
        <Dashboard
          {...dashboard}
          className={cls(dashboard.className, dashboardClassName)}
        />
      </div>
    </section>
  );
 };
 HeroBillboardDashboard.displayName = "HeroBillboardDashboard";
 export default HeroBillboardDashboard;
--- a/src/components/sections/hero/HeroBillboardGallery.tsx
+++ b/src/components/sections/hero/HeroBillboardGallery.tsx
@@ -1,200 +1,48 @@
-"use client";
+'use client';
-import TextBox from "@/components/Textbox";
+import React from 'react';
-import MediaContent from "@/components/shared/MediaContent";
+import { cn } from '@/lib/utils';
 import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
 import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
 import { cls } from "@/lib/utils";
 import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
-export interface MediaItem {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
  imageSrc?: string;
  videoSrc?: string;
  imageAlt?: string;
  videoAriaLabel?: string;
 }
 type HeroBillboardGalleryBackgroundProps = Extract<
  HeroBackgroundVariantProps,
  | { variant: "plain" }
  | { variant: "animated-grid" }
  | { variant: "canvas-reveal" }
  | { variant: "cell-wave" }
  | { variant: "downward-rays-animated" }
  | { variant: "downward-rays-animated-grid" }
  | { variant: "downward-rays-static" }
  | { variant: "downward-rays-static-grid" }
  | { variant: "gradient-bars" }
  | { variant: "radial-gradient" }
  | { variant: "rotated-rays-animated" }
  | { variant: "rotated-rays-animated-grid" }
  | { variant: "rotated-rays-static" }
  | { variant: "rotated-rays-static-grid" }
  | { variant: "sparkles-gradient" }
 >;
 interface HeroBillboardGalleryProps {
-  title: string;
+  children: React.ReactNode[];
-  description: string;
+  animationType: CardAnimationType;
-  background: HeroBillboardGalleryBackgroundProps;
+  itemCount: number;
-  tag?: string;
+  isGrid?: boolean;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  mediaItems: MediaItem[];
  mediaAnimation: ButtonAnimationType;
  ariaLabel?: string;
  className?: string;
  carouselClassName?: string;
  containerClassName?: string;
-  textBoxClassName?: string;
+  itemClassName?: string;
-  titleClassName?: string;
+  showTextBox?: boolean;
-  descriptionClassName?: string;
+  textboxLayout?: string;
-  tagClassName?: string;
+  ariaLabel?: string;
  buttonContainerClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
  mediaWrapperClassName?: string;
  imageClassName?: string;
 }
-const HeroBillboardGallery = ({
+export const HeroBillboardGallery: React.FC<HeroBillboardGalleryProps> = ({
-  title,
+  children,
-  description,
+  animationType,
-  background,
+  itemCount,
-  tag,
+  isGrid = false,
-  tagIcon,
+  className,
-  tagAnimation,
+  carouselClassName,
-  buttons,
+  containerClassName,
-  buttonAnimation,
+  itemClassName,
-  mediaItems,
+  showTextBox = true,
-  mediaAnimation,
+  textboxLayout = 'default',
-  ariaLabel = "Hero section",
+  ariaLabel = 'Gallery',
-  className = "",
+}) => {
  containerClassName = "",
  textBoxClassName = "",
  titleClassName = "",
  descriptionClassName = "",
  tagClassName = "",
  buttonContainerClassName = "",
  buttonClassName = "",
  buttonTextClassName = "",
  mediaWrapperClassName = "",
  imageClassName = "",
 }: HeroBillboardGalleryProps) => {
  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
  const renderCarouselItem = (item: MediaItem, index: number) => (
    <div
      key={index}
      className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
    >
      <MediaContent
        imageSrc={item.imageSrc}
        videoSrc={item.videoSrc}
        imageAlt={item.imageAlt || ""}
        videoAriaLabel={item.videoAriaLabel || "Gallery media"}
        imageClassName="h-full object-cover"
      />
    </div>
  );
  const itemCount = mediaItems?.length || 0;
  const desktopWidthClass = itemCount === 3 ? "md:w-[24%]" : itemCount === 4 ? "md:w-[24%]" : "md:w-[23%]";
  return (
-    <section
+    <div className={cn('hero-billboard-gallery', className)} aria-label={ariaLabel}>
-      aria-label={ariaLabel}
+      <div className={cn('gallery-container', containerClassName)}>
-      className={cls(
+        {React.Children.map(children, (child, index) => (
-        "relative w-full py-hero-page-padding md:h-svh md:py-0",
+          <div key={index} className={cn('gallery-item', itemClassName)}>
-        className
+            {child}
      )}
    >
      <HeroBackgrounds {...background} />
      <div className={cls(
        "mx-auto flex flex-col gap-14 relative z-10",
        "w-full md:w-content-width md:h-full md:items-center md:justify-center",
        containerClassName
      )}>
        <TextBox
          title={title}
          description={description}
          tag={tag}
          tagIcon={tagIcon}
          tagAnimation={tagAnimation}
          buttons={buttons}
          buttonAnimation={buttonAnimation}
          className={cls(
            "flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
            textBoxClassName
          )}
          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
          descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
          buttonClassName={buttonClassName}
          buttonTextClassName={buttonTextClassName}
          center={true}
        />
        <div className={cls("w-full", mediaWrapperClassName)}>
          <div className="block md:hidden -mx-[var(--content-padding)]">
            <AutoCarousel
              title=""
              description=""
              textboxLayout="default"
              animationType="none"
              className="py-0"
              carouselClassName="py-0"
              containerClassName="!w-full"
              itemClassName="!w-55"
              ariaLabel="Hero gallery carousel"
              showTextBox={false}
            >
              {mediaItems?.slice(0, 5).map(renderCarouselItem)}
            </AutoCarousel>
          </div>
-
+        ))}
          <div ref={mediaContainerRef} className="hidden md:flex justify-center items-center pt-2">
            <div className="relative flex items-center justify-center w-full">
              {mediaItems?.slice(0, 5).map((item, index) => {
                const rotations = ["-rotate-6", "rotate-6", "-rotate-6", "rotate-6", "-rotate-6"];
                const zIndexes = ["z-10", "z-20", "z-30", "z-40", "z-50"];
                const translates = ["-translate-y-5", "translate-y-5", "-translate-y-5", "translate-y-5", "-translate-y-5"];
                const marginClass = index > 0 ? "-ml-12 md:-ml-15" : "";
                return (
                  <div
                    key={index}
                    className={cls(
                      "relative aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg transition-transform duration-500 ease-out hover:scale-110",
                      desktopWidthClass,
                      rotations[index],
                      zIndexes[index],
                      translates[index],
                      marginClass
                    )}
                  >
                    <MediaContent
                      imageSrc={item.imageSrc}
                      videoSrc={item.videoSrc}
                      imageAlt={item.imageAlt || ""}
                      videoAriaLabel={item.videoAriaLabel || "Gallery media"}
                      imageClassName={cls("z-1 h-full object-cover", imageClassName)}
                    />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
-    </section>
+    </div>
  );
 };
 HeroBillboardGallery.displayName = "HeroBillboardGallery";
 export default HeroBillboardGallery;
--- a/src/components/sections/metrics/MetricCardEleven.tsx
+++ b/src/components/sections/metrics/MetricCardEleven.tsx
@@ -1,274 +1,58 @@
-"use client";
+'use client';
-import { memo } from "react";
+import React, { useRef, useEffect } from 'react';
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import MediaContent from "@/components/shared/MediaContent";
+import { cn } from '@/lib/utils';
 import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 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";
-type MediaProps =
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    | {
        imageSrc: string;
        imageAlt?: string;
        videoSrc?: never;
        videoAriaLabel?: never;
    }
    | {
        videoSrc: string;
        videoAriaLabel?: string;
        imageSrc?: never;
        imageAlt?: never;
    };
-type Metric = MediaProps & {
+export interface MetricCardElevenProps {
-    id: string;
+  metrics: Array<{ id: string; value: string; title: string; items: string[] }>;
-    value: string;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    description: string;
+  className?: string;
 };
 interface MetricCardElevenProps {
    metrics: Metric[];
    animationType: CardAnimationType;
    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;
    textBoxClassName?: string;
    textBoxTitleClassName?: string;
    textBoxTitleImageWrapperClassName?: string;
    textBoxTitleImageClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    gridClassName?: string;
    cardClassName?: string;
    valueClassName?: string;
    cardTitleClassName?: string;
    cardDescriptionClassName?: string;
    mediaCardClassName?: string;
    mediaClassName?: string;
 }
-interface MetricTextCardProps {
+export const MetricCardEleven: React.FC<MetricCardElevenProps> = ({
-    metric: Metric;
+  metrics,
-    shouldUseLightText: boolean;
+  animationType,
-    cardClassName?: string;
+  itemCount,
-    valueClassName?: string;
+  className,
-    cardTitleClassName?: string;
+}) => {
-    cardDescriptionClassName?: string;
+  const containerRef = useRef<HTMLDivElement>(null);
-}
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-interface MetricMediaCardProps {
+  const { itemRefs: animationItemRefs } = useCardAnimation({
    metric: Metric;
    mediaCardClassName?: string;
    mediaClassName?: string;
 }
 const MetricTextCard = memo(({
    metric,
    shouldUseLightText,
    cardClassName = "",
    valueClassName = "",
    cardTitleClassName = "",
    cardDescriptionClassName = "",
 }: MetricTextCardProps) => {
    return (
        <div className={cls(
            "relative w-full min-w-0 max-w-full h-full card text-foreground rounded-theme-capped flex flex-col justify-between p-6 md:p-8",
            cardClassName
        )}>
            <h3 className={cls(
                "text-5xl md:text-6xl font-medium leading-tight truncate",
                shouldUseLightText ? "text-background" : "text-foreground",
                valueClassName
            )}>
                {metric.value}
            </h3>
            <div className="w-full min-w-0 flex flex-col gap-2 mt-auto">
                <p className={cls(
                    "text-xl md:text-2xl font-medium leading-tight truncate",
                    shouldUseLightText ? "text-background" : "text-foreground",
                    cardTitleClassName
                )}>
                    {metric.title}
                </p>
                <div className="w-full h-px bg-accent" />
                <p className={cls(
                    "text-base truncate leading-tight",
                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
                    cardDescriptionClassName
                )}>
                    {metric.description}
                </p>
            </div>
        </div>
    );
 });
 MetricTextCard.displayName = "MetricTextCard";
 const MetricMediaCard = memo(({
    metric,
    mediaCardClassName = "",
    mediaClassName = "",
 }: MetricMediaCardProps) => {
    return (
        <div className={cls(
            "relative h-full rounded-theme-capped overflow-hidden",
            mediaCardClassName
        )}>
            <MediaContent
                imageSrc={metric.imageSrc}
                videoSrc={metric.videoSrc}
                imageAlt={metric.imageAlt}
                videoAriaLabel={metric.videoAriaLabel}
                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
            />
        </div>
    );
 });
 MetricMediaCard.displayName = "MetricMediaCard";
 const MetricCardEleven = ({
    metrics,
    animationType,
-    title,
+    itemCount,
-    titleSegments,
+  });
    description,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout,
    useInvertedBackground,
    ariaLabel = "Metrics section",
    className = "",
    containerClassName = "",
    textBoxClassName = "",
    textBoxTitleClassName = "",
    textBoxTitleImageWrapperClassName = "",
    textBoxTitleImageClassName = "",
    textBoxDescriptionClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    gridClassName = "",
    cardClassName = "",
    valueClassName = "",
    cardTitleClassName = "",
    cardDescriptionClassName = "",
    mediaCardClassName = "",
    mediaClassName = "",
 }: MetricCardElevenProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-    // Inner grid for each metric item (text + media side by side)
+  useEffect(() => {
-    const innerGridCols = "grid-cols-2";
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
  }, [itemCount]);
-    const { itemRefs } = useCardAnimation({ animationType, itemCount: metrics.length });
+  return (
-
+    <div ref={containerRef} className={cn('metric-card-eleven', className)}>
-    return (
+      {metrics.map((metric, index) => (
-        <section
+        <div
-            aria-label={ariaLabel}
+          key={metric.id}
-            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+          ref={(el) => {
            if (el) itemRefs.current[index] = el;
            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
          }}
          className="metric-item"
        >
-            <div className={cls("w-content-width mx-auto", containerClassName)}>
+          <div className="value">{metric.value}</div>
-                <CardStackTextBox
+          <h3>{metric.title}</h3>
-                    title={title}
+          <ul>
-                    titleSegments={titleSegments}
+            {metric.items.map((item, i) => (
-                    description={description}
+              <li key={i}>{item}</li>
-                    tag={tag}
+            ))}
-                    tagIcon={tagIcon}
+          </ul>
-                    tagAnimation={tagAnimation}
+        </div>
-                    buttons={buttons}
+      ))}
-                    buttonAnimation={buttonAnimation}
+    </div>
-                    textboxLayout={textboxLayout}
+  );
                    useInvertedBackground={useInvertedBackground}
                    textBoxClassName={textBoxClassName}
                    titleClassName={textBoxTitleClassName}
                    titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
                    titleImageClassName={textBoxTitleImageClassName}
                    descriptionClassName={textBoxDescriptionClassName}
                    tagClassName={textBoxTagClassName}
                    buttonContainerClassName={textBoxButtonContainerClassName}
                    buttonClassName={textBoxButtonClassName}
                    buttonTextClassName={textBoxButtonTextClassName}
                />
                <div className={cls(
                    "grid gap-4 mt-8 md:mt-12",
                    metrics.length === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
                    gridClassName
                )}>
                    {metrics.map((metric, index) => {
                        const isLastItem = index === metrics.length - 1;
                        const isOddTotal = metrics.length % 2 !== 0;
                        const isSingleItem = metrics.length === 1;
                        const shouldSpanFull = isSingleItem || (isLastItem && isOddTotal);
                        // On mobile, even items (2nd, 4th, 6th - index 1, 3, 5) have media first
                        const isEvenItem = (index + 1) % 2 === 0;
                        return (
                            <div
                                key={`${metric.id}-${index}`}
                                ref={(el) => { itemRefs.current[index] = el; }}
                                className={cls(
                                    "grid gap-4",
                                    innerGridCols,
                                    shouldSpanFull && "md:col-span-2"
                                )}
                            >
                                <MetricTextCard
                                    metric={metric}
                                    shouldUseLightText={shouldUseLightText}
                                    cardClassName={cls(
                                        shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
                                        isEvenItem && "order-2 md:order-1",
                                        cardClassName
                                    )}
                                    valueClassName={valueClassName}
                                    cardTitleClassName={cardTitleClassName}
                                    cardDescriptionClassName={cardDescriptionClassName}
                                />
                                <MetricMediaCard
                                    metric={metric}
                                    mediaCardClassName={cls(
                                        shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
                                        isEvenItem && "order-1 md:order-2",
                                        mediaCardClassName
                                    )}
                                    mediaClassName={mediaClassName}
                                />
                            </div>
                        );
                    })}
                </div>
            </div>
        </section>
    );
 };
 MetricCardEleven.displayName = "MetricCardEleven";
 export default MetricCardEleven;
--- a/src/components/sections/pricing/PricingCardEight.tsx
+++ b/src/components/sections/pricing/PricingCardEight.tsx
@@ -1,248 +1,51 @@
-"use client";
+'use client';
-import { memo } from "react";
+import React from 'react';
-import CardStack from "@/components/cardStack/CardStack";
+import { cn } from '@/lib/utils';
-import Button from "@/components/button/Button";
+import { CheckCircle } from 'lucide-react';
 import PricingBadge from "@/components/shared/PricingBadge";
 import PricingFeatureList from "@/components/shared/PricingFeatureList";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 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";
-type PricingPlan = {
+interface PricingPlan {
-    id: string;
+  id: string;
-    badge: string;
+  name: string;
-    badgeIcon?: LucideIcon;
+  price: string;
-    price: string;
+  description: string;
-    subtitle: string;
+  features: string[];
-    buttons: ButtonConfig[];
+}
    features: string[];
 };
 interface PricingCardEightProps {
-    plans: PricingPlan[];
+  plans: PricingPlan[];
-    carouselMode?: "auto" | "buttons";
+  className?: string;
    uniformGridCustomHeightClasses?: string;
    animationType: CardAnimationType;
    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;
    textBoxTitleClassName?: string;
    textBoxTitleImageWrapperClassName?: string;
    textBoxTitleImageClassName?: string;
    textBoxDescriptionClassName?: string;
    badgeClassName?: string;
    priceClassName?: string;
    subtitleClassName?: string;
    planButtonContainerClassName?: string;
    planButtonClassName?: string;
    featuresClassName?: string;
    featureItemClassName?: string;
    gridClassName?: string;
    carouselClassName?: string;
    controlsClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
 }
-interface PricingCardItemProps {
+export const PricingCardEight: React.FC<PricingCardEightProps> = ({
-    plan: PricingPlan;
+  plans,
-    shouldUseLightText: boolean;
+  className,
-    cardClassName?: string;
+}) => {
-    badgeClassName?: string;
+  return (
-    priceClassName?: string;
+    <div className={cn('pricing-cards-eight', className)}>
-    subtitleClassName?: string;
+      {plans.map((plan) => (
-    planButtonContainerClassName?: string;
+        <div key={plan.id} className="pricing-card">
-    planButtonClassName?: string;
+          <div className="card-header">
-    featuresClassName?: string;
+            <h3>{plan.name}</h3>
-    featureItemClassName?: string;
+            <div className="price-section">
-}
+              <span className="price-value">{plan.price}</span>
 const PricingCardItem = memo(({
    plan,
    shouldUseLightText,
    cardClassName = "",
    badgeClassName = "",
    priceClassName = "",
    subtitleClassName = "",
    planButtonContainerClassName = "",
    planButtonClassName = "",
    featuresClassName = "",
    featureItemClassName = "",
 }: PricingCardItemProps) => {
    const theme = useTheme();
    const getButtonConfigProps = () => {
        if (theme.defaultButtonVariant === "hover-bubble") {
            return { bgClassName: "w-full" };
        }
        if (theme.defaultButtonVariant === "icon-arrow") {
            return { className: "justify-between" };
        }
        return {};
    };
    return (
        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-3 flex flex-col gap-3", cardClassName)}>
            <div className="relative secondary-button p-3 flex flex-col gap-3 rounded-theme-capped" >
                <PricingBadge
                    badge={plan.badge}
                    badgeIcon={plan.badgeIcon}
                    className={badgeClassName}
                />
                <div className="relative z-1 flex flex-col gap-1">
                    <div className="text-5xl font-medium text-foreground">
                        {plan.price}
                    </div>
                    <p className="text-base text-foreground">
                        {plan.subtitle}
                    </p>
                </div>
                {plan.buttons && plan.buttons.length > 0 && (
                    <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
                        {plan.buttons.slice(0, 2).map((button, index) => (
                            <Button
                                key={`${button.text}-${index}`}
                                {...getButtonProps(
                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
                                    index,
                                    theme.defaultButtonVariant,
                                    cls("w-full", planButtonClassName)
                                )}
                            />
                        ))}
                    </div>
                )}
            </div>
            <div className="p-3 pt-0" >
                <PricingFeatureList
                    features={plan.features}
                    shouldUseLightText={shouldUseLightText}
                    className={cls("mt-1", featuresClassName)}
                    featureItemClassName={featureItemClassName}
                />
            </div>
            <p className="description">{plan.description}</p>
          </div>
          <div className="card-body">
            <ul className="features-list">
              {plan.features.map((feature, index) => (
                <li key={index} className="feature-item">
                  <CheckCircle className="feature-icon" size={20} />
                  <span className="feature-text">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
-    );
+      ))}
-});
+    </div>
-
+  );
 PricingCardItem.displayName = "PricingCardItem";
 const PricingCardEight = ({
    plans,
    carouselMode = "buttons",
    uniformGridCustomHeightClasses,
    animationType,
    title,
    titleSegments,
    description,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout,
    useInvertedBackground,
    ariaLabel = "Pricing section",
    className = "",
    containerClassName = "",
    cardClassName = "",
    textBoxTitleClassName = "",
    textBoxTitleImageWrapperClassName = "",
    textBoxTitleImageClassName = "",
    textBoxDescriptionClassName = "",
    badgeClassName = "",
    priceClassName = "",
    subtitleClassName = "",
    planButtonContainerClassName = "",
    planButtonClassName = "",
    featuresClassName = "",
    featureItemClassName = "",
    gridClassName = "",
    carouselClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
 }: PricingCardEightProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    return (
        <CardStack
            useInvertedBackground={useInvertedBackground}
            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}
            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}
            ariaLabel={ariaLabel}
        >
            {plans.map((plan, index) => (
                <PricingCardItem
                    key={`${plan.id}-${index}`}
                    plan={plan}
                    shouldUseLightText={shouldUseLightText}
                    cardClassName={cardClassName}
                    badgeClassName={badgeClassName}
                    priceClassName={priceClassName}
                    subtitleClassName={subtitleClassName}
                    planButtonContainerClassName={planButtonContainerClassName}
                    planButtonClassName={planButtonClassName}
                    featuresClassName={featuresClassName}
                    featureItemClassName={featureItemClassName}
                />
            ))}
        </CardStack>
    );
 };
 PricingCardEight.displayName = "PricingCardEight";
 export default PricingCardEight;
--- a/src/components/sections/pricing/PricingCardFive.tsx
+++ b/src/components/sections/pricing/PricingCardFive.tsx
@@ -1,231 +1,40 @@
-"use client";
+'use client';
-import { Check } from "lucide-react";
+import React from 'react';
-import CardList from "@/components/cardStack/CardList";
+import { cn } from '@/lib/utils';
 import Tag from "@/components/shared/Tag";
 import Button from "@/components/button/Button";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type PricingPlan = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    id: string;
+
-    tag: string;
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    tagIcon?: LucideIcon;
+
-    price: string;
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-    period: string;
+
-    description: string;
+import type { LucideIcon } from 'lucide-react';
    button: ButtonConfig;
    featuresTitle: string;
    features: string[];
 };
 interface PricingCardFiveProps {
-    plans: PricingPlan[];
+  children: React.ReactNode[];
-    animationType: CardAnimationType;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    titleSegments?: TitleSegment[];
+  useIndividualTriggers?: boolean;
-    description: string;
+  className?: string;
    tag?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    textboxLayout: TextboxLayout;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    cardClassName?: string;
    textBoxTitleClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    cardContentClassName?: string;
    planTagClassName?: string;
    planPriceClassName?: string;
    planPeriodClassName?: string;
    planDescriptionClassName?: string;
    planButtonClassName?: string;
    planButtonTextClassName?: string;
    featuresTitleClassName?: string;
    featuresListClassName?: string;
    featureItemClassName?: string;
    featureIconClassName?: string;
    featureTextClassName?: string;
 }
-const PricingCardFive = ({
+export const PricingCardFive: React.FC<PricingCardFiveProps> = ({
-    plans,
+  children,
-    animationType,
+  animationType,
-    title,
+  itemCount,
-    titleSegments,
+  useIndividualTriggers = false,
-    description,
+  className,
-    tag,
+}) => {
-    tagIcon,
+  return (
-    tagAnimation,
+    <div className={cn('pricing-card-five', className)}>
-    buttons,
+      {React.Children.map(children, (child, index) => (
-    buttonAnimation,
+        <div key={index} className="pricing-item">
-    textboxLayout,
+          {child}
-    useInvertedBackground,
+        </div>
-    ariaLabel = "Pricing section",
+      ))}
-    className = "",
+    </div>
-    containerClassName = "",
+  );
    cardClassName = "",
    textBoxTitleClassName = "",
    textBoxDescriptionClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    cardContentClassName = "",
    planTagClassName = "",
    planPriceClassName = "",
    planPeriodClassName = "",
    planDescriptionClassName = "",
    planButtonClassName = "",
    planButtonTextClassName = "",
    featuresTitleClassName = "",
    featuresListClassName = "",
    featureItemClassName = "",
    featureIconClassName = "",
    featureTextClassName = "",
 }: PricingCardFiveProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const getButtonConfigProps = () => {
        if (theme.defaultButtonVariant === "hover-bubble") {
            return { bgClassName: "w-full" };
        }
        if (theme.defaultButtonVariant === "icon-arrow") {
            return { className: "justify-between" };
        }
        return {};
    };
    return (
        <CardList
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            animationType={animationType}
            useInvertedBackground={useInvertedBackground}
            className={className}
            containerClassName={containerClassName}
            cardClassName={cardClassName}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            textBoxClassName={textBoxClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            ariaLabel={ariaLabel}
        >
            {plans.map((plan) => (
                <div
                    key={plan.id}
                    className={cls(
                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between items-stretch gap-8 md:gap-15 p-6 md:p-15",
                        cardContentClassName
                    )}
                >
                    <div className="w-full md:w-1/2 min-w-0 flex flex-col justify-between gap-6">
                        <div className="flex flex-col gap-4">
                            <Tag
                                text={plan.tag}
                                icon={plan.tagIcon}
                                className={planTagClassName}
                            />
                            <div className="flex items-baseline gap-1 mt-1">
                                <span className={cls(
                                    "text-5xl md:text-6xl font-medium",
                                    shouldUseLightText ? "text-background" : "text-foreground",
                                    planPriceClassName
                                )}>
                                    {plan.price}
                                </span>
                                <span className={cls(
                                    "text-xl",
                                    shouldUseLightText ? "text-background" : "text-foreground",
                                    planPeriodClassName
                                )}>
                                    {plan.period}
                                </span>
                            </div>
                            <p className={cls(
                                "text-2xl leading-tight text-balance",
                                shouldUseLightText ? "text-background" : "text-foreground",
                                planDescriptionClassName
                            )}>
                                {plan.description}
                            </p>
                        </div>
                        <Button
                            {...getButtonProps(
                                { ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
                                0,
                                theme.defaultButtonVariant,
                                cls("w-full h-12", planButtonClassName),
                                planButtonTextClassName
                            )}
                        />
                    </div>
                    <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
                    <div className="w-full md:w-1/2 min-w-0 flex flex-col gap-4">
                        <h3 className={cls(
                            "text-xl",
                            shouldUseLightText ? "text-background" : "text-foreground",
                            featuresTitleClassName
                        )}>
                            {plan.featuresTitle}
                        </h3>
                        <ul className={cls("flex flex-col gap-3", featuresListClassName)}>
                            {plan.features.map((feature, index) => (
                                <li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
                                    <div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
                                        <Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
                                    </div>
                                    <span className={cls(
                                        "text-sm leading-[1.4]",
                                        shouldUseLightText ? "text-background/80" : "text-foreground/80",
                                        featureTextClassName
                                    )}>
                                        {feature}
                                    </span>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            ))}
        </CardList>
    );
 };
 PricingCardFive.displayName = "PricingCardFive";
 export default PricingCardFive;
--- a/src/components/sections/pricing/PricingCardNine.tsx
+++ b/src/components/sections/pricing/PricingCardNine.tsx
@@ -1,216 +1,40 @@
-"use client";
+'use client';
-import { Check } from "lucide-react";
+import React from 'react';
-import CardList from "@/components/cardStack/CardList";
+import { cn } from '@/lib/utils';
 import Button from "@/components/button/Button";
 import MediaContent from "@/components/shared/MediaContent";
 import Tag from "@/components/shared/Tag";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 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";
-type PricingPlan = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    id: string;
+
-    title: string;
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    price: string;
+
-    period: string;
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-    features: string[];
+
-    button: ButtonConfig;
+import type { LucideIcon } from 'lucide-react';
    imageSrc?: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
 };
 interface PricingCardNineProps {
-    plans: PricingPlan[];
+  children: React.ReactNode[];
-    animationType: CardAnimationType;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    titleSegments?: TitleSegment[];
+  useIndividualTriggers?: boolean;
-    description: string;
+  className?: string;
    tag?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    textboxLayout: TextboxLayout;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    cardClassName?: string;
    textBoxTitleClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    cardContentClassName?: string;
    planImageWrapperClassName?: string;
    planImageClassName?: string;
    planTitleClassName?: string;
    planPriceClassName?: string;
    planButtonClassName?: string;
    planButtonTextClassName?: string;
    featuresListClassName?: string;
    featureItemClassName?: string;
    featureIconClassName?: string;
    featureTextClassName?: string;
 }
-const PricingCardNine = ({
+export const PricingCardNine: React.FC<PricingCardNineProps> = ({
-    plans,
+  children,
-    animationType,
+  animationType,
-    title,
+  itemCount,
-    titleSegments,
+  useIndividualTriggers = false,
-    description,
+  className,
-    tag,
+}) => {
-    tagIcon,
+  return (
-    tagAnimation,
+    <div className={cn('pricing-card-nine', className)}>
-    buttons,
+      {React.Children.map(children, (child, index) => (
-    buttonAnimation,
+        <div key={index} className="pricing-item">
-    textboxLayout,
+          {child}
-    useInvertedBackground,
+        </div>
-    ariaLabel = "Pricing section",
+      ))}
-    className = "",
+    </div>
-    containerClassName = "",
+  );
    cardClassName = "",
    textBoxTitleClassName = "",
    textBoxDescriptionClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    cardContentClassName = "",
    planImageWrapperClassName = "",
    planImageClassName = "",
    planTitleClassName = "",
    planPriceClassName = "",
    planButtonClassName = "",
    planButtonTextClassName = "",
    featuresListClassName = "",
    featureItemClassName = "",
    featureIconClassName = "",
    featureTextClassName = "",
 }: PricingCardNineProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const getButtonConfigProps = () => {
        if (theme.defaultButtonVariant === "hover-bubble") {
            return { bgClassName: "w-full" };
        }
        if (theme.defaultButtonVariant === "icon-arrow") {
            return { className: "justify-between" };
        }
        return {};
    };
    return (
        <CardList
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            animationType={animationType}
            useInvertedBackground={useInvertedBackground}
            className={className}
            containerClassName={containerClassName}
            cardClassName={cardClassName}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            textBoxClassName={textBoxClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            ariaLabel={ariaLabel}
        >
            {plans.map((plan) => (
                <div
                    key={plan.id}
                    className={cls(
                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row items-stretch gap-6 md:gap-10 p-4 md:p-6",
                        cardContentClassName
                    )}
                >
                    <div className={cls("w-full md:w-1/2 min-w-0 aspect-square md:aspect-[4/3]", planImageWrapperClassName)}>
                        <MediaContent
                            imageSrc={plan.imageSrc}
                            videoSrc={plan.videoSrc}
                            imageAlt={plan.imageAlt || plan.title}
                            videoAriaLabel={plan.videoAriaLabel || plan.title}
                            imageClassName={cls("w-full h-full object-cover rounded-theme", planImageClassName)}
                        />
                    </div>
                    <div className="w-full md:w-1/2 min-w-0 flex flex-col justify-center gap-6 py-2">
                        <div className="flex flex-col gap-4">
                            <Tag
                                text={`${plan.price}${plan.period}`}
                                useInvertedBackground={useInvertedBackground}
                                className={planPriceClassName}
                            />
                            <h3 className={cls(
                                "text-4xl md:text-5xl font-medium mb-1 truncate",
                                shouldUseLightText ? "text-background" : "text-foreground",
                                planTitleClassName
                            )}>
                                {plan.title}
                            </h3>
                            <ul className={cls("flex flex-col gap-3", featuresListClassName)}>
                                {plan.features.map((feature, index) => (
                                    <li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
                                        <div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
                                            <Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
                                        </div>
                                        <span className={cls(
                                            "text-sm leading-[1.4]",
                                            shouldUseLightText ? "text-background/80" : "text-foreground/80",
                                            featureTextClassName
                                        )}>
                                            {feature}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <Button
                            {...getButtonProps(
                                { ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
                                0,
                                theme.defaultButtonVariant,
                                planButtonClassName,
                                planButtonTextClassName
                            )}
                        />
                    </div>
                </div>
            ))}
        </CardList>
    );
 };
 PricingCardNine.displayName = "PricingCardNine";
 export default PricingCardNine;
--- a/src/components/sections/product/ProductCardFour.tsx
+++ b/src/components/sections/product/ProductCardFour.tsx
@@ -1,39 +1,38 @@
-"use client";
+'use client';
-import { memo, useCallback } from "react";
+import React, { useState } from 'react';
-import { useRouter } from "next/navigation";
+import { Heart, ArrowRight } from 'lucide-react';
-import CardStack from "@/components/cardStack/CardStack";
+import { cn } from '@/lib/utils';
 import ProductImage from "@/components/shared/ProductImage";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useProducts } from "@/hooks/useProducts";
 import type { Product } from "@/lib/api/product";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type ProductCardFourGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+export interface ProductCard {
-
+  id: string;
-type ProductCard = Product & {
+  name: string;
-  variant: string;
+  price: string;
-};
+  imageSrc: string;
  imageAlt?: string;
  rating: number;
  reviewCount: string;
  isFavorited?: boolean;
  onFavorite?: () => void;
  onProductClick?: () => void;
 }
 interface ProductCardFourProps {
  products?: ProductCard[];
-  carouselMode?: "auto" | "buttons";
+  carouselMode?: 'auto' | 'buttons';
-  gridVariant: ProductCardFourGridVariant;
+  gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid';
  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
  uniformGridCustomHeightClasses?: string;
  animationType: CardAnimationType;
  title: string;
-  titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
  description: string;
  tag?: string;
-  tagIcon?: LucideIcon;
+  tagIcon?: React.ComponentType<any>;
-  tagAnimation?: ButtonAnimationType;
+  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  buttons?: ButtonConfig[];
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: ButtonAnimationType;
+  buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  textboxLayout: TextboxLayout;
+  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-  useInvertedBackground: InvertedBackground;
+  useInvertedBackground: boolean;
  ariaLabel?: string;
  className?: string;
  containerClassName?: string;
@@ -43,11 +42,11 @@ interface ProductCardFourProps {
  textBoxTitleImageWrapperClassName?: string;
  textBoxTitleImageClassName?: string;
  textBoxDescriptionClassName?: string;
  cardBrandClassName?: string;
  cardNameClassName?: string;
  cardPriceClassName?: string;
-  cardVariantClassName?: string;
+  cardRatingClassName?: string;
  actionButtonClassName?: string;
  gridClassName?: string;
  carouselClassName?: string;
  controlsClassName?: string;
  textBoxClassName?: string;
@@ -57,182 +56,97 @@ interface ProductCardFourProps {
  textBoxButtonTextClassName?: string;
 }
-interface ProductCardItemProps {
+export const ProductCardFour: React.FC<ProductCardFourProps> = ({
-  product: ProductCard;
+  products = [],
  shouldUseLightText: boolean;
  cardClassName?: string;
  imageClassName?: string;
  cardNameClassName?: string;
  cardPriceClassName?: string;
  cardVariantClassName?: string;
  actionButtonClassName?: string;
 }
 const ProductCardItem = memo(({
  product,
  shouldUseLightText,
  cardClassName = "",
  imageClassName = "",
  cardNameClassName = "",
  cardPriceClassName = "",
  cardVariantClassName = "",
  actionButtonClassName = "",
 }: ProductCardItemProps) => {
  return (
    <article
      className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
      onClick={product.onProductClick}
      role="article"
      aria-label={`${product.name} - ${product.price}`}
    >
      <ProductImage
        imageSrc={product.imageSrc}
        imageAlt={product.imageAlt || product.name}
        isFavorited={product.isFavorited}
        onFavoriteToggle={product.onFavorite}
        showActionButton={true}
        actionButtonAriaLabel={`View ${product.name} details`}
        imageClassName={imageClassName}
        actionButtonClassName={actionButtonClassName}
      />
      <div className="flex flex-col gap-2">
        <div className="flex items-center justify-between gap-4">
          <div className="flex flex-col gap-0 flex-1 min-w-0">
            <h3 className={cls("text-base font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
              {product.name}
            </h3>
            <p className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background/60" : "text-foreground/60", cardVariantClassName)}>
              {product.variant}
            </p>
          </div>
          <p className={cls("text-base font-medium leading-[1.3] flex-shrink-0", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
            {product.price}
          </p>
        </div>
      </div>
    </article>
  );
 });
 ProductCardItem.displayName = "ProductCardItem";
 const ProductCardFour = ({
  products: productsProp,
  carouselMode = "buttons",
  gridVariant,
  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
  animationType,
  title,
  titleSegments,
  description,
  tag,
  tagIcon,
  tagAnimation,
  buttons,
  buttonAnimation,
  textboxLayout,
  useInvertedBackground,
-  ariaLabel = "Product section",
+  ariaLabel = 'Product section',
-  className = "",
+  className,
-  containerClassName = "",
+  containerClassName,
-  cardClassName = "",
+  cardClassName,
-  imageClassName = "",
+  imageClassName,
-  textBoxTitleClassName = "",
+}) => {
-  textBoxTitleImageWrapperClassName = "",
+  const [favorites, setFavorites] = useState<Set<string>>(new Set());
  textBoxTitleImageClassName = "",
  textBoxDescriptionClassName = "",
  cardNameClassName = "",
  cardPriceClassName = "",
  cardVariantClassName = "",
  actionButtonClassName = "",
  gridClassName = "",
  carouselClassName = "",
  controlsClassName = "",
  textBoxClassName = "",
  textBoxTagClassName = "",
  textBoxButtonContainerClassName = "",
  textBoxButtonClassName = "",
  textBoxButtonTextClassName = "",
 }: ProductCardFourProps) => {
  const theme = useTheme();
  const router = useRouter();
  const { products: fetchedProducts, isLoading } = useProducts();
  const isFromApi = fetchedProducts.length > 0;
  const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-  const handleProductClick = useCallback((product: ProductCard) => {
+  const toggleFavorite = (productId: string) => {
-    if (isFromApi) {
+    const newFavorites = new Set(favorites);
-      router.push(`/shop/${product.id}`);
+    if (newFavorites.has(productId)) {
      newFavorites.delete(productId);
    } else {
-      product.onProductClick?.();
+      newFavorites.add(productId);
    }
-  }, [isFromApi, router]);
+    setFavorites(newFavorites);
  };
-
+  const handleProductClick = (product: ProductCard) => {
-  if (isLoading && !productsProp) {
+    product.onProductClick?.();
-    return (
+  };
      <div className="w-content-width mx-auto py-20 text-center">
        <p className="text-foreground">Loading products...</p>
      </div>
    );
  }
  if (!products || products.length === 0) {
    return null;
  }
  return (
-    <CardStack
+    <div className={cn('product-card-four', containerClassName)} aria-label={ariaLabel}>
-      mode={carouselMode}
+      <div className="header">
-      gridVariant={gridVariant}
+        <h2>{title}</h2>
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+        <p>{description}</p>
-      animationType={animationType}
+      </div>
-      title={title}
+      <div className={cn('products-grid')}>
-      titleSegments={titleSegments}
+        {products.map((product) => (
-      description={description}
+          <div key={product.id} className={cn('product-card', cardClassName)}>
-      tag={tag}
+            <div className="image-wrapper relative">
-      tagIcon={tagIcon}
+              <img
-      tagAnimation={tagAnimation}
+                src={product.imageSrc}
-      buttons={buttons}
+                alt={product.imageAlt || product.name}
-      buttonAnimation={buttonAnimation}
+                className={cn('w-full h-auto', imageClassName)}
-      textboxLayout={textboxLayout}
+              />
-      useInvertedBackground={useInvertedBackground}
+              <button
-      className={className}
+                onClick={() => toggleFavorite(product.id)}
-      containerClassName={containerClassName}
+                className="absolute top-2 right-2 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
-      gridClassName={gridClassName}
+                aria-label={`Toggle favorite for ${product.name}`}
-      carouselClassName={carouselClassName}
+              >
-      controlsClassName={controlsClassName}
+                <Heart
-      textBoxClassName={textBoxClassName}
+                  size={20}
-      titleClassName={textBoxTitleClassName}
+                  className={cn(
-      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+                    'transition-colors',
-      titleImageClassName={textBoxTitleImageClassName}
+                    favorites.has(product.id)
-      descriptionClassName={textBoxDescriptionClassName}
+                      ? 'fill-red-500 text-red-500'
-      tagClassName={textBoxTagClassName}
+                      : 'text-gray-400'
-      buttonContainerClassName={textBoxButtonContainerClassName}
+                  )}
-      buttonClassName={textBoxButtonClassName}
+                />
-      buttonTextClassName={textBoxButtonTextClassName}
+              </button>
-      ariaLabel={ariaLabel}
+            </div>
-    >
+            <div className="content">
-      {products?.map((product, index) => (
+              <h3 className="text-lg font-semibold">{product.name}</h3>
-        <ProductCardItem
+              <div className="flex items-center gap-2 mt-2">
-          key={`${product.id}-${index}`}
+                <div className="flex gap-1">
-          product={{ ...product, onProductClick: () => handleProductClick(product) }}
+                  {[1, 2, 3, 4, 5].map((star) => (
-          shouldUseLightText={shouldUseLightText}
+                    <span
-          cardClassName={cardClassName}
+                      key={star}
-          imageClassName={imageClassName}
+                      className={star <= product.rating ? 'text-yellow-400' : 'text-gray-300'}
-          cardNameClassName={cardNameClassName}
+                    >
-          cardPriceClassName={cardPriceClassName}
+                      ★
-          cardVariantClassName={cardVariantClassName}
+                    </span>
-          actionButtonClassName={actionButtonClassName}
+                  ))}
-        />
+                </div>
-      ))}
+                <span className="text-sm text-gray-600">({product.reviewCount})</span>
-    </CardStack>
+              </div>
              <p className="text-2xl font-bold mt-2">{product.price}</p>
              <button
                onClick={() => handleProductClick(product)}
                className="mt-4 w-full px-4 py-2 bg-primary rounded hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
              >
                View Details
                <ArrowRight size={18} />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
 };
 ProductCardFour.displayName = "ProductCardFour";
 export default ProductCardFour;
--- a/src/components/sections/product/ProductCardOne.tsx
+++ b/src/components/sections/product/ProductCardOne.tsx
@@ -1,226 +1,145 @@
-"use client";
+'use client';
-import { memo, useCallback } from "react";
+import React, { useState, useRef } from 'react';
-import { useRouter } from "next/navigation";
+import { Heart } from 'lucide-react';
-import { ArrowUpRight } from "lucide-react";
+import { cn } from '@/lib/utils';
-import CardStack from "@/components/cardStack/CardStack";
+import gsap from 'gsap';
-import ProductImage from "@/components/shared/ProductImage";
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useProducts } from "@/hooks/useProducts";
 import type { Product } from "@/lib/api/product";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type ProductCardOneGridVariant = Exclude<GridVariant, "timeline">;
+gsap.registerPlugin(ScrollTrigger);
-type ProductCard = Product;
+export interface Product {
  id: string;
  name: string;
  price: string;
  imageSrc: string;
  imageAlt?: string;
  isFavorited?: boolean;
  onFavorite?: () => void;
  onProductClick?: () => void;
 }
 interface ProductCardOneProps {
-    products?: ProductCard[];
+  products?: Product[];
-    carouselMode?: "auto" | "buttons";
+  carouselMode?: 'auto' | 'buttons';
-    gridVariant: ProductCardOneGridVariant;
+  gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid';
-    uniformGridCustomHeightClasses?: string;
+  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    animationType: CardAnimationType;
+  uniformGridCustomHeightClasses?: string;
-    title: string;
+  title: string;
-    titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
-    description: string;
+  description: string;
-    tag?: string;
+  tag?: string;
-    tagIcon?: LucideIcon;
+  tagIcon?: React.ComponentType<any>;
-    tagAnimation?: ButtonAnimationType;
+  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    buttons?: ButtonConfig[];
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    buttonAnimation?: ButtonAnimationType;
+  buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    textboxLayout: TextboxLayout;
+  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-    useInvertedBackground: InvertedBackground;
+  useInvertedBackground: boolean;
-    ariaLabel?: string;
+  ariaLabel?: string;
-    className?: string;
+  className?: string;
-    containerClassName?: string;
+  containerClassName?: string;
-    cardClassName?: string;
+  cardClassName?: string;
-    imageClassName?: string;
+  imageClassName?: string;
-    textBoxTitleClassName?: string;
+  textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
+  textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
+  textBoxDescriptionClassName?: string;
-    cardNameClassName?: string;
+  cardBrandClassName?: string;
-    cardPriceClassName?: string;
+  cardNameClassName?: string;
-    gridClassName?: string;
+  cardPriceClassName?: string;
-    carouselClassName?: string;
+  cardRatingClassName?: string;
-    controlsClassName?: string;
+  actionButtonClassName?: string;
-    textBoxClassName?: string;
+  carouselClassName?: string;
-    textBoxTagClassName?: string;
+  controlsClassName?: string;
-    textBoxButtonContainerClassName?: string;
+  textBoxClassName?: string;
-    textBoxButtonClassName?: string;
+  textBoxTagClassName?: string;
-    textBoxButtonTextClassName?: string;
+  textBoxButtonContainerClassName?: string;
  textBoxButtonClassName?: string;
  textBoxButtonTextClassName?: string;
 }
-interface ProductCardItemProps {
+export const ProductCardOne: React.FC<ProductCardOneProps> = ({
-    product: ProductCard;
+  products = [],
-    shouldUseLightText: boolean;
+  gridVariant,
-    cardClassName?: string;
+  animationType,
-    imageClassName?: string;
+  title,
-    cardNameClassName?: string;
+  description,
-    cardPriceClassName?: string;
+  textboxLayout,
-}
+  useInvertedBackground,
  ariaLabel = 'Product section',
  className,
  containerClassName,
  cardClassName,
  imageClassName,
 }) => {
  const [favorites, setFavorites] = useState<Set<string>>(new Set());
  const containerRef = useRef<HTMLDivElement>(null);
-const ProductCardItem = memo(({
+  const toggleFavorite = (productId: string) => {
-    product,
+    const newFavorites = new Set(favorites);
-    shouldUseLightText,
+    if (newFavorites.has(productId)) {
-    cardClassName = "",
+      newFavorites.delete(productId);
-    imageClassName = "",
+    } else {
-    cardNameClassName = "",
+      newFavorites.add(productId);
    cardPriceClassName = "",
 }: ProductCardItemProps) => {
    return (
        <article
            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
            onClick={product.onProductClick}
            role="article"
            aria-label={`${product.name} - ${product.price}`}
        >
            <ProductImage
                imageSrc={product.imageSrc}
                imageAlt={product.imageAlt || product.name}
                isFavorited={product.isFavorited}
                onFavoriteToggle={product.onFavorite}
                imageClassName={imageClassName}
            />
            <div className="relative z-1 flex items-center justify-between gap-4">
                <div className="flex-1 min-w-0">
                    <h3 className={cls("text-base font-medium truncate leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
                        {product.name}
                    </h3>
                    <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
                        {product.price}
                    </p>
                </div>
                <button
                    className="relative cursor-pointer primary-button h-10 w-auto aspect-square rounded-theme flex items-center justify-center flex-shrink-0"
                    aria-label={`View ${product.name} details`}
                    type="button"
                >
                    <ArrowUpRight className="h-4/10 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
                </button>
            </div>
        </article>
    );
 });
 ProductCardItem.displayName = "ProductCardItem";
 const ProductCardOne = ({
    products: productsProp,
    carouselMode = "buttons",
    gridVariant,
    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
    animationType,
    title,
    titleSegments,
    description,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    textboxLayout,
    useInvertedBackground,
    ariaLabel = "Product section",
    className = "",
    containerClassName = "",
    cardClassName = "",
    imageClassName = "",
    textBoxTitleClassName = "",
    textBoxTitleImageWrapperClassName = "",
    textBoxTitleImageClassName = "",
    textBoxDescriptionClassName = "",
    cardNameClassName = "",
    cardPriceClassName = "",
    gridClassName = "",
    carouselClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
 }: ProductCardOneProps) => {
    const theme = useTheme();
    const router = useRouter();
    const { products: fetchedProducts, isLoading } = useProducts();
    const isFromApi = fetchedProducts.length > 0;
    const products = isFromApi ? fetchedProducts : productsProp;
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const handleProductClick = useCallback((product: ProductCard) => {
        if (isFromApi) {
            router.push(`/shop/${product.id}`);
        } else {
            product.onProductClick?.();
        }
    }, [isFromApi, router]);
    if (isLoading && !productsProp) {
        return (
            <div className="w-content-width mx-auto py-20 text-center">
                <p className="text-foreground">Loading products...</p>
            </div>
        );
    }
    setFavorites(newFavorites);
  };
-    if (!products || products.length === 0) {
+  const handleProductClick = (product: Product) => {
-        return null;
+    product.onProductClick?.();
-    }
+  };
-    return (
+  return (
-        <CardStack
+    <div
-            mode={carouselMode}
+      ref={containerRef}
-            gridVariant={gridVariant}
+      className={cn('product-card-one', containerClassName)}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      aria-label={ariaLabel}
-            animationType={animationType}
+    >
      <div className="header">
        <h2>{title}</h2>
        <p>{description}</p>
      </div>
-            title={title}
+      <div className={cn('products-grid')}>
-            titleSegments={titleSegments}
+        {products.map((product) => (
-            description={description}
+          <div key={product.id} className={cn('product-card', cardClassName)}>
-            tag={tag}
+            <div className="image-wrapper relative">
-            tagIcon={tagIcon}
+              <img
-            tagAnimation={tagAnimation}
+                src={product.imageSrc}
-            buttons={buttons}
+                alt={product.imageAlt || product.name}
-            buttonAnimation={buttonAnimation}
+                className={cn('w-full h-auto', imageClassName)}
-            textboxLayout={textboxLayout}
+              />
-            useInvertedBackground={useInvertedBackground}
+              <button
-            className={className}
+                onClick={() => toggleFavorite(product.id)}
-            containerClassName={containerClassName}
+                className="absolute top-2 right-2 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
-            gridClassName={gridClassName}
+                aria-label={`Toggle favorite for ${product.name}`}
-            carouselClassName={carouselClassName}
+              >
-            controlsClassName={controlsClassName}
+                <Heart
-            textBoxClassName={textBoxClassName}
+                  size={20}
-            titleClassName={textBoxTitleClassName}
+                  className={cn(
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+                    'transition-colors',
-            titleImageClassName={textBoxTitleImageClassName}
+                    favorites.has(product.id)
-            descriptionClassName={textBoxDescriptionClassName}
+                      ? 'fill-red-500 text-red-500'
-            tagClassName={textBoxTagClassName}
+                      : 'text-gray-400'
-            buttonContainerClassName={textBoxButtonContainerClassName}
+                  )}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            ariaLabel={ariaLabel}
        >
            {products?.map((product, index) => (
                <ProductCardItem
                    key={`${product.id}-${index}`}
                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
                    shouldUseLightText={shouldUseLightText}
                    cardClassName={cardClassName}
                    imageClassName={imageClassName}
                    cardNameClassName={cardNameClassName}
                    cardPriceClassName={cardPriceClassName}
                />
-            ))}
+              </button>
-        </CardStack>
+            </div>
-    );
+            <div className="content">
              <h3 className="text-lg font-semibold">{product.name}</h3>
              <p className="text-xl font-bold">{product.price}</p>
              <button
                onClick={() => handleProductClick(product)}
                className="mt-4 px-4 py-2 bg-primary rounded hover:opacity-90 transition-opacity"
              >
                View Product
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
 };
 ProductCardOne.displayName = "ProductCardOne";
 export default ProductCardOne;
--- a/src/components/sections/product/ProductCardThree.tsx
+++ b/src/components/sections/product/ProductCardThree.tsx
@@ -1,283 +1,155 @@
-"use client";
+'use client';
-import { memo, useState, useCallback } from "react";
+import React, { useState } from 'react';
-import { useRouter } from "next/navigation";
+import { Heart, ShoppingCart } from 'lucide-react';
-import { Plus, Minus } from "lucide-react";
+import { cn } from '@/lib/utils';
 import CardStack from "@/components/cardStack/CardStack";
 import ProductImage from "@/components/shared/ProductImage";
 import QuantityButton from "@/components/shared/QuantityButton";
 import Button from "@/components/button/Button";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useProducts } from "@/hooks/useProducts";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import type { Product } from "@/lib/api/product";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, ButtonAnimationType, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
 import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type ProductCardThreeGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+export interface ProductCard {
-
+  id: string;
-type ProductCard = Product & {
+  name: string;
-    onQuantityChange?: (quantity: number) => void;
+  price: string;
-    initialQuantity?: number;
+  imageSrc: string;
-    priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
+  imageAlt?: string;
-};
+  rating: number;
  reviewCount: string;
  isFavorited?: boolean;
  onFavorite?: () => void;
  onProductClick?: () => void;
 }
 interface ProductCardThreeProps {
-    products?: ProductCard[];
+  products?: ProductCard[];
-    carouselMode?: "auto" | "buttons";
+  carouselMode?: 'auto' | 'buttons';
-    gridVariant: ProductCardThreeGridVariant;
+  gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid';
-    uniformGridCustomHeightClasses?: string;
+  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    animationType: CardAnimationType;
+  uniformGridCustomHeightClasses?: string;
-    title: string;
+  title: string;
-    titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
-    description: string;
+  description: string;
-    tag?: string;
+  tag?: string;
-    tagIcon?: LucideIcon;
+  tagIcon?: React.ComponentType<any>;
-    tagAnimation?: ButtonAnimationType;
+  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    buttons?: ButtonConfig[];
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    buttonAnimation?: ButtonAnimationType;
+  buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    textboxLayout: TextboxLayout;
+  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-    useInvertedBackground: InvertedBackground;
+  useInvertedBackground: boolean;
-    ariaLabel?: string;
+  ariaLabel?: string;
-    className?: string;
+  className?: string;
-    containerClassName?: string;
+  containerClassName?: string;
-    cardClassName?: string;
+  cardClassName?: string;
-    imageClassName?: string;
+  imageClassName?: string;
-    textBoxTitleClassName?: string;
+  textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
+  textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
+  textBoxDescriptionClassName?: string;
-    cardNameClassName?: string;
+  cardBrandClassName?: string;
-    quantityControlsClassName?: string;
+  cardNameClassName?: string;
-    gridClassName?: string;
+  cardPriceClassName?: string;
-    carouselClassName?: string;
+  cardRatingClassName?: string;
-    controlsClassName?: string;
+  actionButtonClassName?: string;
-    textBoxClassName?: string;
+  carouselClassName?: string;
-    textBoxTagClassName?: string;
+  controlsClassName?: string;
-    textBoxButtonContainerClassName?: string;
+  textBoxClassName?: string;
-    textBoxButtonClassName?: string;
+  textBoxTagClassName?: string;
-    textBoxButtonTextClassName?: string;
+  textBoxButtonContainerClassName?: string;
  textBoxButtonClassName?: string;
  textBoxButtonTextClassName?: string;
 }
 export const ProductCardThree: React.FC<ProductCardThreeProps> = ({
  products = [],
  gridVariant,
  animationType,
  title,
  description,
  textboxLayout,
  useInvertedBackground,
  ariaLabel = 'Product section',
  className,
  containerClassName,
  cardClassName,
  imageClassName,
 }) => {
  const [favorites, setFavorites] = useState<Set<string>>(new Set());
-interface ProductCardItemProps {
+  const toggleFavorite = (productId: string) => {
-    product: ProductCard;
+    const newFavorites = new Set(favorites);
-    shouldUseLightText: boolean;
+    if (newFavorites.has(productId)) {
-    isFromApi: boolean;
+      newFavorites.delete(productId);
-    onBuyClick?: (productId: string, quantity: number) => void;
+    } else {
-    cardClassName?: string;
+      newFavorites.add(productId);
-    imageClassName?: string;
+    }
-    cardNameClassName?: string;
+    setFavorites(newFavorites);
-    quantityControlsClassName?: string;
+  };
 }
-const ProductCardItem = memo(({
+  const handleProductClick = (product: ProductCard) => {
-    product,
+    product.onProductClick?.();
-    shouldUseLightText,
+  };
    isFromApi,
    onBuyClick,
    cardClassName = "",
    imageClassName = "",
    cardNameClassName = "",
    quantityControlsClassName = "",
 }: ProductCardItemProps) => {
    const theme = useTheme();
    const [quantity, setQuantity] = useState(product.initialQuantity || 1);
    const handleIncrement = useCallback((e: React.MouseEvent) => {
        e.stopPropagation();
        const newQuantity = quantity + 1;
        setQuantity(newQuantity);
        product.onQuantityChange?.(newQuantity);
    }, [quantity, product]);
    const handleDecrement = useCallback((e: React.MouseEvent) => {
        e.stopPropagation();
        if (quantity > 1) {
            const newQuantity = quantity - 1;
            setQuantity(newQuantity);
            product.onQuantityChange?.(newQuantity);
        }
    }, [quantity, product]);
    const handleClick = useCallback(() => {
        if (isFromApi && onBuyClick) {
            onBuyClick(product.id, quantity);
        } else {
            product.onProductClick?.();
        }
    }, [isFromApi, onBuyClick, product, quantity]);
  const renderStars = (rating: number) => {
    return (
-        <article
+      <div className="flex gap-1">
-            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+        {[1, 2, 3, 4, 5].map((star) => (
-            onClick={handleClick}
+          <span key={star} className={star <= rating ? 'text-yellow-400' : 'text-gray-300'}>
-            role="article"
+            ★
-            aria-label={`${product.name} - ${product.price}`}
+          </span>
-        >
+        ))}
-            <ProductImage
+      </div>
                imageSrc={product.imageSrc}
                imageAlt={product.imageAlt || product.name}
                isFavorited={product.isFavorited}
                onFavoriteToggle={product.onFavorite}
                imageClassName={imageClassName}
            />
            <div className="relative z-1 flex flex-col gap-3">
                <h3 className={cls("text-xl font-medium leading-[1.15] truncate", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
                    {product.name}
                </h3>
                <div className="flex items-center justify-between gap-4">
                    <div className={cls("flex items-center gap-2", quantityControlsClassName)}>
                        <QuantityButton
                            onClick={handleDecrement}
                            ariaLabel="Decrease quantity"
                            Icon={Minus}
                        />
                        <span className={cls("text-base font-medium min-w-[2ch] text-center leading-[1]", shouldUseLightText ? "text-background" : "text-foreground")}>
                            {quantity}
                        </span>
                        <QuantityButton
                            onClick={handleIncrement}
                            ariaLabel="Increase quantity"
                            Icon={Plus}
                        />
                    </div>
                    <Button
                        {...getButtonProps(
                            {
                                text: product.price,
                                props: product.priceButtonProps,
                            },
                            0,
                            theme.defaultButtonVariant
                        )}
                    />
                </div>
            </div>
        </article>
    );
-});
+  };
-ProductCardItem.displayName = "ProductCardItem";
+  return (
    <div className={cn('product-card-three', containerClassName)} aria-label={ariaLabel}>
      <div className="header">
        <h2>{title}</h2>
        <p>{description}</p>
      </div>
-const ProductCardThree = ({
+      <div className={cn('products-grid')}>
-    products: productsProp,
+        {products.map((product) => (
-    carouselMode = "buttons",
+          <div key={product.id} className={cn('product-card', cardClassName)}>
-    gridVariant,
+            <div className="image-wrapper relative">
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+              <img
-    animationType,
+                src={product.imageSrc}
-    title,
+                alt={product.imageAlt || product.name}
-    titleSegments,
+                className={cn('w-full h-auto', imageClassName)}
-    description,
+              />
-    tag,
+              <button
-    tagIcon,
+                onClick={() => toggleFavorite(product.id)}
-    tagAnimation,
+                className="absolute top-2 right-2 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
-    buttons,
+                aria-label={`Toggle favorite for ${product.name}`}
-    buttonAnimation,
+              >
-    textboxLayout,
+                <Heart
-    useInvertedBackground,
+                  size={20}
-    ariaLabel = "Product section",
+                  className={cn(
-    className = "",
+                    'transition-colors',
-    containerClassName = "",
+                    favorites.has(product.id)
-    cardClassName = "",
+                      ? 'fill-red-500 text-red-500'
-    imageClassName = "",
+                      : 'text-gray-400'
-    textBoxTitleClassName = "",
+                  )}
    textBoxTitleImageWrapperClassName = "",
    textBoxTitleImageClassName = "",
    textBoxDescriptionClassName = "",
    cardNameClassName = "",
    quantityControlsClassName = "",
    gridClassName = "",
    carouselClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
 }: ProductCardThreeProps) => {
    const theme = useTheme();
    const router = useRouter();
    const { products: fetchedProducts, isLoading } = useProducts();
    const isFromApi = fetchedProducts.length > 0;
    const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const handleProductClick = useCallback((product: ProductCard) => {
        if (isFromApi) {
            router.push(`/shop/${product.id}`);
        } else {
            product.onProductClick?.();
        }
    }, [isFromApi, router]);
    if (isLoading && !productsProp) {
        return (
            <div className="w-content-width mx-auto py-20 text-center">
                <p className="text-foreground">Loading products...</p>
            </div>
        );
    }
    if (!products || products.length === 0) {
        return null;
    }
    return (
        <CardStack
            useInvertedBackground={useInvertedBackground}
            mode={carouselMode}
            gridVariant={gridVariant}
            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
            animationType={animationType}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            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}
            ariaLabel={ariaLabel}
        >
            {products?.map((product, index) => (
                <ProductCardItem
                    key={`${product.id}-${index}`}
                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
                    shouldUseLightText={shouldUseLightText}
                    isFromApi={isFromApi}
                    cardClassName={cardClassName}
                    imageClassName={imageClassName}
                    cardNameClassName={cardNameClassName}
                    quantityControlsClassName={quantityControlsClassName}
                />
-            ))}
+              </button>
-        </CardStack>
+            </div>
-    );
+            <div className="content">
              <h3 className="text-lg font-semibold">{product.name}</h3>
              <div className="flex items-center gap-2 mt-2">
                {renderStars(product.rating)}
                <span className="text-sm text-gray-600">({product.reviewCount})</span>
              </div>
              <p className="text-2xl font-bold mt-2">{product.price}</p>
              <button
                onClick={() => handleProductClick(product)}
                className="mt-4 w-full px-4 py-2 bg-primary rounded hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
              >
                <ShoppingCart size={18} />
                Add to Cart
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
 };
 ProductCardThree.displayName = "ProductCardThree";
 export default ProductCardThree;
--- a/src/components/sections/product/ProductCardTwo.tsx
+++ b/src/components/sections/product/ProductCardTwo.tsx
@@ -1,267 +1,158 @@
-"use client";
+'use client';
-import { memo, useCallback } from "react";
+import React, { useState } from 'react';
-import { useRouter } from "next/navigation";
+import { Heart, Star } from 'lucide-react';
-import { Star } from "lucide-react";
+import { cn } from '@/lib/utils';
 import CardStack from "@/components/cardStack/CardStack";
 import ProductImage from "@/components/shared/ProductImage";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { useProducts } from "@/hooks/useProducts";
 import type { Product } from "@/lib/api/product";
 import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
 import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-type ProductCardTwoGridVariant = Exclude<GridVariant, "timeline" | "one-large-right-three-stacked-left" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row" | "one-large-left-three-stacked-right">;
+export interface ProductCard {
-
+  id: string;
-type ProductCard = Product & {
+  name: string;
-    brand: string;
+  price: string;
-    rating: number;
+  imageSrc: string;
-    reviewCount: string;
+  imageAlt?: string;
-};
+  rating: number;
  reviewCount: string;
  brand: string;
  isFavorited?: boolean;
  onFavorite?: () => void;
  onProductClick?: () => void;
 }
 interface ProductCardTwoProps {
-    products?: ProductCard[];
+  products?: ProductCard[];
-    carouselMode?: "auto" | "buttons";
+  carouselMode?: 'auto' | 'buttons';
-    gridVariant: ProductCardTwoGridVariant;
+  gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid';
-    uniformGridCustomHeightClasses?: string;
+  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    animationType: CardAnimationType;
+  uniformGridCustomHeightClasses?: string;
-    title: string;
+  title: string;
-    titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
-    description: string;
+  description: string;
-    tag?: string;
+  tag?: string;
-    tagIcon?: LucideIcon;
+  tagIcon?: React.ComponentType<any>;
-    tagAnimation?: ButtonAnimationType;
+  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    buttons?: ButtonConfig[];
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    buttonAnimation?: ButtonAnimationType;
+  buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    textboxLayout: TextboxLayout;
+  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-    useInvertedBackground: InvertedBackground;
+  useInvertedBackground: boolean;
-    ariaLabel?: string;
+  ariaLabel?: string;
-    className?: string;
+  className?: string;
-    containerClassName?: string;
+  containerClassName?: string;
-    cardClassName?: string;
+  cardClassName?: string;
-    imageClassName?: string;
+  imageClassName?: string;
-    textBoxTitleClassName?: string;
+  textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
+  textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
+  textBoxDescriptionClassName?: string;
-    cardBrandClassName?: string;
+  cardBrandClassName?: string;
-    cardNameClassName?: string;
+  cardNameClassName?: string;
-    cardPriceClassName?: string;
+  cardPriceClassName?: string;
-    cardRatingClassName?: string;
+  cardRatingClassName?: string;
-    actionButtonClassName?: string;
+  actionButtonClassName?: string;
-    gridClassName?: string;
+  carouselClassName?: string;
-    carouselClassName?: string;
+  controlsClassName?: string;
-    controlsClassName?: string;
+  textBoxClassName?: string;
-    textBoxClassName?: string;
+  textBoxTagClassName?: string;
-    textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
-    textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
-    textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
    textBoxButtonTextClassName?: string;
 }
-interface ProductCardItemProps {
+export const ProductCardTwo: React.FC<ProductCardTwoProps> = ({
-    product: ProductCard;
+  products = [],
-    shouldUseLightText: boolean;
+  gridVariant,
-    cardClassName?: string;
+  animationType,
-    imageClassName?: string;
+  title,
-    cardBrandClassName?: string;
+  description,
-    cardNameClassName?: string;
+  textboxLayout,
-    cardPriceClassName?: string;
+  useInvertedBackground,
-    cardRatingClassName?: string;
+  ariaLabel = 'Product section',
-    actionButtonClassName?: string;
+  className,
-}
+  containerClassName,
  cardClassName,
  imageClassName,
 }) => {
  const [favorites, setFavorites] = useState<Set<string>>(new Set());
-const ProductCardItem = memo(({
+  const toggleFavorite = (productId: string) => {
-    product,
+    const newFavorites = new Set(favorites);
-    shouldUseLightText,
+    if (newFavorites.has(productId)) {
-    cardClassName = "",
+      newFavorites.delete(productId);
-    imageClassName = "",
+    } else {
-    cardBrandClassName = "",
+      newFavorites.add(productId);
-    cardNameClassName = "",
+    }
-    cardPriceClassName = "",
+    setFavorites(newFavorites);
-    cardRatingClassName = "",
+  };
-    actionButtonClassName = "",
+
-}: ProductCardItemProps) => {
+  const handleProductClick = (product: ProductCard) => {
    product.onProductClick?.();
  };
  const renderStars = (rating: number) => {
    return (
-        <article
+      <div className="flex gap-1">
-            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+        {[1, 2, 3, 4, 5].map((star) => (
-            onClick={product.onProductClick}
+          <Star
-            role="article"
+            key={star}
-            aria-label={`${product.brand} ${product.name} - ${product.price}`}
+            size={16}
-        >
+            className={star <= rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}
-            <ProductImage
+          />
-                imageSrc={product.imageSrc}
+        ))}
-                imageAlt={product.imageAlt || `${product.brand} ${product.name}`}
+      </div>
                isFavorited={product.isFavorited}
                onFavoriteToggle={product.onFavorite}
                showActionButton={true}
                actionButtonAriaLabel={`View ${product.name} details`}
                imageClassName={imageClassName}
                actionButtonClassName={actionButtonClassName}
            />
            <div className="relative z-1 flex-1 min-w-0 flex flex-col gap-2">
                <p className={cls("text-sm leading-[1]", shouldUseLightText ? "text-background" : "text-foreground", cardBrandClassName)}>
                    {product.brand}
                </p>
                <div className="flex flex-col gap-1" >
                    <h3 className={cls("text-xl font-medium truncate leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
                        {product.name}
                    </h3>
                    <div className={cls("flex items-center gap-2", cardRatingClassName)}>
                        <div className="flex items-center gap-1">
                            {[...Array(5)].map((_, i) => (
                                <Star
                                    key={i}
                                    className={cls(
                                        "h-4 w-auto",
                                        i < Math.floor(product.rating)
                                            ? "text-accent fill-accent"
                                            : "text-accent opacity-20"
                                    )}
                                    strokeWidth={1.5}
                                />
                            ))}
                        </div>
                        <span className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground")}>
                            ({product.reviewCount})
                        </span>
                    </div>
                </div>
                <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
                    {product.price}
                </p>
            </div>
        </article>
    );
-});
+  };
-ProductCardItem.displayName = "ProductCardItem";
+  return (
    <div className={cn('product-card-two', containerClassName)} aria-label={ariaLabel}>
      <div className="header">
        <h2>{title}</h2>
        <p>{description}</p>
      </div>
-const ProductCardTwo = ({
+      <div className={cn('products-grid')}>
-    products: productsProp,
+        {products.map((product) => (
-    carouselMode = "buttons",
+          <div key={product.id} className={cn('product-card', cardClassName)}>
-    gridVariant,
+            <div className="image-wrapper relative">
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+              <img
-    animationType,
+                src={product.imageSrc}
-    title,
+                alt={product.imageAlt || product.name}
-    titleSegments,
+                className={cn('w-full h-auto', imageClassName)}
-    description,
+              />
-    tag,
+              <button
-    tagIcon,
+                onClick={() => toggleFavorite(product.id)}
-    tagAnimation,
+                className="absolute top-2 right-2 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
-    buttons,
+                aria-label={`Toggle favorite for ${product.name}`}
-    buttonAnimation,
+              >
-    textboxLayout,
+                <Heart
-    useInvertedBackground,
+                  size={20}
-    ariaLabel = "Product section",
+                  className={cn(
-    className = "",
+                    'transition-colors',
-    containerClassName = "",
+                    favorites.has(product.id)
-    cardClassName = "",
+                      ? 'fill-red-500 text-red-500'
-    imageClassName = "",
+                      : 'text-gray-400'
-    textBoxTitleClassName = "",
+                  )}
    textBoxTitleImageWrapperClassName = "",
    textBoxTitleImageClassName = "",
    textBoxDescriptionClassName = "",
    cardBrandClassName = "",
    cardNameClassName = "",
    cardPriceClassName = "",
    cardRatingClassName = "",
    actionButtonClassName = "",
    gridClassName = "",
    carouselClassName = "",
    controlsClassName = "",
    textBoxClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
 }: ProductCardTwoProps) => {
    const theme = useTheme();
    const router = useRouter();
    const { products: fetchedProducts, isLoading } = useProducts();
    const isFromApi = fetchedProducts.length > 0;
    const products = (fetchedProducts.length > 0 ? fetchedProducts : productsProp) as ProductCard[];
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const handleProductClick = useCallback((product: ProductCard) => {
        if (isFromApi) {
            router.push(`/shop/${product.id}`);
        } else {
            product.onProductClick?.();
        }
    }, [isFromApi, router]);
    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
        ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
        : undefined;
    if (isLoading && !productsProp) {
        return (
            <div className="w-content-width mx-auto py-20 text-center">
                <p className="text-foreground">Loading products...</p>
            </div>
        );
    }
    if (!products || products.length === 0) {
        return null;
    }
    return (
        <CardStack
            useInvertedBackground={useInvertedBackground}
            mode={carouselMode}
            gridVariant={gridVariant}
            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
            gridRowsClassName={customGridRows}
            animationType={animationType}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            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}
            ariaLabel={ariaLabel}
        >
            {products?.map((product, index) => (
                <ProductCardItem
                    key={`${product.id}-${index}`}
                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
                    shouldUseLightText={shouldUseLightText}
                    cardClassName={cardClassName}
                    imageClassName={imageClassName}
                    cardBrandClassName={cardBrandClassName}
                    cardNameClassName={cardNameClassName}
                    cardPriceClassName={cardPriceClassName}
                    cardRatingClassName={cardRatingClassName}
                    actionButtonClassName={actionButtonClassName}
                />
-            ))}
+              </button>
-        </CardStack>
+            </div>
-    );
+            <div className="content">
              <p className="text-sm text-gray-600">{product.brand}</p>
              <h3 className="text-lg font-semibold">{product.name}</h3>
              <div className="flex items-center gap-2">
                {renderStars(product.rating)}
                <span className="text-sm text-gray-600">({product.reviewCount})</span>
              </div>
              <p className="text-xl font-bold">{product.price}</p>
              <button
                onClick={() => handleProductClick(product)}
                className="mt-4 w-full px-4 py-2 bg-primary rounded hover:opacity-90 transition-opacity"
              >
                View Product
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
 };
 ProductCardTwo.displayName = "ProductCardTwo";
 export default ProductCardTwo;
--- a/src/components/sections/team/TeamCardEleven.tsx
+++ b/src/components/sections/team/TeamCardEleven.tsx
@@ -1,196 +1,40 @@
-"use client";
+'use client';
-import CardList from "@/components/cardStack/CardList";
+import React from 'react';
-import MediaContent from "@/components/shared/MediaContent";
+import { cn } from '@/lib/utils';
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 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";
-type TeamMember = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    id: string;
    title: string;
    subtitle: string;
    detail: string;
    imageSrc?: string;
    imageAlt?: string;
    videoSrc?: string;
    videoAriaLabel?: string;
 };
-type TeamGroup = {
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    id: string;
+
-    groupTitle: string;
+export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string };
-    members: TeamMember[];
+
-};
+import type { LucideIcon } from 'lucide-react';
 interface TeamCardElevenProps {
-    groups: TeamGroup[];
+  children: React.ReactNode[];
-    animationType: CardAnimationType;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    titleSegments?: TitleSegment[];
+  useIndividualTriggers?: boolean;
-    description: string;
+  className?: string;
    tag?: string;
    tagIcon?: LucideIcon;
    tagAnimation?: ButtonAnimationType;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    textboxLayout: TextboxLayout;
    useInvertedBackground: InvertedBackground;
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    cardClassName?: string;
    textBoxClassName?: string;
    textBoxTitleClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
    titleImageWrapperClassName?: string;
    titleImageClassName?: string;
    groupTitleClassName?: string;
    memberClassName?: string;
    memberImageClassName?: string;
    memberTitleClassName?: string;
    memberSubtitleClassName?: string;
    memberDetailClassName?: string;
 }
-const TeamCardEleven = ({
+export const TeamCardEleven: React.FC<TeamCardElevenProps> = ({
-    groups,
+  children,
-    animationType,
+  animationType,
-    title,
+  itemCount,
-    titleSegments,
+  useIndividualTriggers = false,
-    description,
+  className,
-    tag,
+}) => {
-    tagIcon,
+  return (
-    tagAnimation,
+    <div className={cn('team-card-eleven', className)}>
-    buttons,
+      {React.Children.map(children, (child, index) => (
-    buttonAnimation,
+        <div key={index} className="team-item">
-    textboxLayout,
+          {child}
    useInvertedBackground,
    ariaLabel = "Team section",
    className = "",
    containerClassName = "",
    cardClassName = "",
    textBoxClassName = "",
    textBoxTitleClassName = "",
    textBoxDescriptionClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
    titleImageWrapperClassName = "",
    titleImageClassName = "",
    groupTitleClassName = "",
    memberClassName = "",
    memberImageClassName = "",
    memberTitleClassName = "",
    memberSubtitleClassName = "",
    memberDetailClassName = "",
 }: TeamCardElevenProps) => {
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    const renderMemberRow = (member: TeamMember) => (
        <div
            key={member.id}
            className={cls(
                "flex flex-col md:flex-row md:items-center gap-4 py-6",
                memberClassName
            )}
        >
            <div className="flex items-center gap-4 flex-1">
                <div className={cls(
                    "relative h-14 w-auto md:h-16 aspect-square rounded-theme overflow-hidden shrink-0",
                    memberImageClassName
                )}>
                    <MediaContent
                        imageSrc={member.imageSrc}
                        imageAlt={member.imageAlt || member.title}
                        videoSrc={member.videoSrc}
                        videoAriaLabel={member.videoAriaLabel}
                        imageClassName="w-full h-full object-cover"
                    />
                </div>
                <div className="flex flex-col">
                    <p className={cls(
                        "text-lg md:text-xl font-medium",
                        shouldUseLightText ? "text-background" : "text-foreground",
                        memberTitleClassName
                    )}>
                        {member.title}
                    </p>
                    <p className={cls(
                        "text-base",
                        shouldUseLightText ? "text-background/60" : "text-foreground/60",
                        memberSubtitleClassName
                    )}>
                        {member.subtitle}
                    </p>
                </div>
            </div>
            <p className={cls(
                "text-base md:text-lg font-medium",
                shouldUseLightText ? "text-background" : "text-foreground",
                memberDetailClassName
            )}>
                {member.detail}
            </p>
        </div>
-    );
+      ))}
-
+    </div>
-    return (
+  );
        <CardList
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            animationType={animationType}
            useInvertedBackground={useInvertedBackground}
            className={className}
            containerClassName={containerClassName}
            cardClassName={cardClassName}
            titleClassName={textBoxTitleClassName}
            descriptionClassName={textBoxDescriptionClassName}
            textBoxClassName={textBoxClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            titleImageWrapperClassName={titleImageWrapperClassName}
            titleImageClassName={titleImageClassName}
            ariaLabel={ariaLabel}
        >
            {groups.map((group) => (
                <div key={group.id} className="p-6 md:p-8">
                    <h3 className={cls(
                        "text-2xl md:text-3xl font-medium mb-2",
                        shouldUseLightText ? "text-background" : "text-foreground",
                        groupTitleClassName
                    )}>
                        {group.groupTitle}
                    </h3>
                    <div className="flex flex-col divide-y divide-accent/40 border-y border-accent/40">
                        {group.members.map(renderMemberRow)}
                    </div>
                </div>
            ))}
        </CardList>
    );
 };
 TeamCardEleven.displayName = "TeamCardEleven";
 export default TeamCardEleven;
--- a/src/components/sections/team/TeamCardFive.tsx
+++ b/src/components/sections/team/TeamCardFive.tsx
@@ -1,14 +1,12 @@
-"use client";
+'use client';
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import React, { useRef, useEffect } from 'react';
-import MediaContent from "@/components/shared/MediaContent";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { cn } from '@/lib/utils';
 import { cls } from "@/lib/utils";
 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";
-type TeamMember = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
 export interface TeamMember {
  id: string;
  name: string;
  role: string;
@@ -16,133 +14,57 @@ type TeamMember = {
  videoSrc?: string;
  imageAlt?: string;
  videoAriaLabel?: string;
-};
+}
 interface TeamCardFiveProps {
  team: TeamMember[];
  animationType: CardAnimationType;
-  title: string;
+  itemCount: number;
  titleSegments?: TitleSegment[];
  description: string;
  textboxLayout: TextboxLayout;
  useInvertedBackground: InvertedBackground;
  tag?: string;
  tagIcon?: LucideIcon;
  tagAnimation?: ButtonAnimationType;
  buttons?: ButtonConfig[];
  buttonAnimation?: ButtonAnimationType;
  ariaLabel?: string;
  className?: string;
  containerClassName?: string;
  textBoxTitleClassName?: string;
  textBoxTitleImageWrapperClassName?: string;
  textBoxTitleImageClassName?: string;
  textBoxDescriptionClassName?: string;
  textBoxClassName?: string;
  textBoxTagClassName?: string;
  textBoxButtonContainerClassName?: string;
  textBoxButtonClassName?: string;
  textBoxButtonTextClassName?: string;
  gridClassName?: string;
  cardClassName?: string;
  mediaWrapperClassName?: string;
  mediaClassName?: string;
  nameClassName?: string;
  roleClassName?: string;
 }
-const TeamCardFive = ({
+export const TeamCardFive: React.FC<TeamCardFiveProps> = ({
  team,
  animationType,
-  title,
+  itemCount,
-  titleSegments,
+  className,
-  description,
+}) => {
-  textboxLayout,
+  const containerRef = useRef<HTMLDivElement>(null);
-  useInvertedBackground,
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-  tag,
+
-  tagIcon,
+  const { itemRefs: animationItemRefs } = useCardAnimation({
-  tagAnimation,
+    animationType,
-  buttons,
+    itemCount,
-  buttonAnimation,
+  });
-  ariaLabel = "Team section",
+
-  className = "",
+  useEffect(() => {
-  containerClassName = "",
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
-  textBoxTitleClassName = "",
+  }, [itemCount]);
  textBoxTitleImageWrapperClassName = "",
  textBoxTitleImageClassName = "",
  textBoxDescriptionClassName = "",
  textBoxClassName = "",
  textBoxTagClassName = "",
  textBoxButtonContainerClassName = "",
  textBoxButtonClassName = "",
  textBoxButtonTextClassName = "",
  gridClassName = "",
  cardClassName = "",
  mediaWrapperClassName = "",
  mediaClassName = "",
  nameClassName = "",
  roleClassName = "",
 }: TeamCardFiveProps) => {
  const { itemRefs } = useCardAnimation({ animationType, itemCount: team.length });
  return (
-    <section
+    <div ref={containerRef} className={cn('team-card-five', className)}>
-      aria-label={ariaLabel}
+      {team.map((member, index) => (
-      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        <div
-    >
+          key={member.id}
-      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+          ref={(el) => {
-        <CardStackTextBox
+            if (el) itemRefs.current[index] = el;
-          title={title}
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-          titleSegments={titleSegments}
+          }}
-          description={description}
+          className="team-member"
-          tag={tag}
+        >
-          tagIcon={tagIcon}
+          {member.imageSrc && (
-          tagAnimation={tagAnimation}
+            <img
-          buttons={buttons}
+              src={member.imageSrc}
-          buttonAnimation={buttonAnimation}
+              alt={member.imageAlt || member.name}
-          textboxLayout={textboxLayout}
+              className="team-member-image"
-          useInvertedBackground={useInvertedBackground}
+            />
-          textBoxClassName={textBoxClassName}
+          )}
-          titleClassName={textBoxTitleClassName}
+          <h3 className="team-member-name">{member.name}</h3>
-          titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+          <p className="team-member-role">{member.role}</p>
          titleImageClassName={textBoxTitleImageClassName}
          descriptionClassName={textBoxDescriptionClassName}
          tagClassName={textBoxTagClassName}
          buttonContainerClassName={textBoxButtonContainerClassName}
          buttonClassName={textBoxButtonClassName}
          buttonTextClassName={textBoxButtonTextClassName}
        />
        <div className={cls("flex flex-row flex-wrap gap-y-6 md:gap-x-0 justify-center", gridClassName)}>
          {team.map((member, index) => (
            <div
              key={member.id}
              ref={(el) => { itemRefs.current[index] = el; }}
              className={cls("relative flex flex-col items-center text-center w-[55%] md:w-[28%] -mx-[4%] md:-mx-[2%]", cardClassName)}
            >
              <div className={cls("relative card w-full aspect-square rounded-theme overflow-hidden p-2 mb-4", mediaWrapperClassName)}>
                <MediaContent
                  imageSrc={member.imageSrc}
                  videoSrc={member.videoSrc}
                  imageAlt={member.imageAlt || member.name}
                  videoAriaLabel={member.videoAriaLabel || member.name}
                  imageClassName={cls("relative z-1 w-full h-full object-cover rounded-theme!", mediaClassName)}
                />
              </div>
              <h3 className={cls("relative z-1 w-8/10 text-2xl font-medium leading-tight truncate", useInvertedBackground ? "text-background" : "text-foreground", nameClassName)}>
                {member.name}
              </h3>
              <p className={cls("relative z-1 w-8/10 text-base leading-tight mt-1 truncate", useInvertedBackground ? "text-background/75" : "text-foreground/75", roleClassName)}>
                {member.role}
              </p>
            </div>
          ))}
        </div>
-      </div>
+      ))}
-    </section>
+    </div>
  );
 };
 TeamCardFive.displayName = "TeamCardFive";
 export default TeamCardFive;
--- a/src/components/sections/testimonial/TestimonialCardSix.tsx
+++ b/src/components/sections/testimonial/TestimonialCardSix.tsx
@@ -1,203 +1,46 @@
-"use client";
+'use client';
-import { memo } from "react";
+import React from 'react';
-import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import { cn } from '@/lib/utils';
 import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import { Quote } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import type { CardAnimationType, ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
-type Testimonial = {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    id: string;
    name: string;
    handle: string;
    testimonial: string;
    imageSrc?: string;
    imageAlt?: string;
    icon?: LucideIcon;
 };
 interface TestimonialCardSixProps {
-    testimonials: Testimonial[];
+  children: React.ReactNode[];
-    animationType: CardAnimationType;
+  animationType: CardAnimationType;
-    title: string;
+  itemCount: number;
-    titleSegments?: TitleSegment[];
+  uniformGridCustomHeightClasses?: string;
-    description: string;
+  speed?: number;
-    textboxLayout: TextboxLayout;
+  className?: string;
-    useInvertedBackground: InvertedBackground;
+  carouselClassName?: string;
-    tag?: string;
+  containerClassName?: string;
-    tagIcon?: LucideIcon;
+  itemClassName?: string;
-    tagAnimation?: ButtonAnimationType;
+  ariaLabel?: string;
    buttons?: ButtonConfig[];
    buttonAnimation?: ButtonAnimationType;
    speed?: number;
    topMarqueeDirection?: "left" | "right";
    ariaLabel?: string;
    className?: string;
    containerClassName?: string;
    carouselClassName?: string;
    bottomCarouselClassName?: string;
    cardClassName?: string;
    testimonialClassName?: string;
    imageWrapperClassName?: string;
    imageClassName?: string;
    iconClassName?: string;
    nameClassName?: string;
    handleClassName?: string;
    textBoxClassName?: string;
    textBoxTitleClassName?: string;
    textBoxTitleImageWrapperClassName?: string;
    textBoxTitleImageClassName?: string;
    textBoxDescriptionClassName?: string;
    textBoxTagClassName?: string;
    textBoxButtonContainerClassName?: string;
    textBoxButtonClassName?: string;
    textBoxButtonTextClassName?: string;
 }
-interface TestimonialCardProps {
+export const TestimonialCardSix: React.FC<TestimonialCardSixProps> = ({
-    testimonial: Testimonial;
+  children,
-    useInvertedBackground: boolean;
+  animationType,
-    cardClassName?: string;
+  itemCount,
-    testimonialClassName?: string;
+  uniformGridCustomHeightClasses = 'min-h-95 2xl:min-h-105',
-    imageWrapperClassName?: string;
+  speed = 30,
-    imageClassName?: string;
+  className,
-    iconClassName?: string;
+  carouselClassName,
-    nameClassName?: string;
+  containerClassName,
-    handleClassName?: string;
+  itemClassName,
-}
+  ariaLabel = 'Testimonials',
-
+}) => {
-const TestimonialCard = memo(({
+  return (
-    testimonial,
+    <div className={cn('testimonial-card-six', className)} aria-label={ariaLabel}>
-    useInvertedBackground,
+      <div className={cn('carousel-container', containerClassName)}>
-    cardClassName = "",
+        {React.Children.map(children, (child, index) => (
-    testimonialClassName = "",
+          <div key={index} className={cn('carousel-item', itemClassName)}>
-    imageWrapperClassName = "",
+            {child}
-    imageClassName = "",
+          </div>
-    iconClassName = "",
+        ))}
-    nameClassName = "",
+      </div>
-    handleClassName = "",
+    </div>
-}: TestimonialCardProps) => {
+  );
    const Icon = testimonial.icon || Quote;
    const theme = useTheme();
    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
    return (
        <div className={cls("relative h-full card rounded-theme-capped p-6 min-h-0 flex flex-col gap-10", cardClassName)}>
            <p className={cls("relative z-1 text-lg leading-tight line-clamp-2", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
                {testimonial.testimonial}
            </p>
            <TestimonialAuthor
                name={testimonial.name}
                subtitle={testimonial.handle}
                imageSrc={testimonial.imageSrc}
                imageAlt={testimonial.imageAlt}
                icon={Icon}
                useInvertedBackground={useInvertedBackground}
                imageWrapperClassName={imageWrapperClassName}
                imageClassName={imageClassName}
                iconClassName={iconClassName}
                nameClassName={nameClassName}
                subtitleClassName={handleClassName}
            />
        </div>
    );
 });
 TestimonialCard.displayName = "TestimonialCard";
 const TestimonialCardSix = ({
    testimonials,
    animationType,
    title,
    titleSegments,
    description,
    textboxLayout,
    useInvertedBackground,
    tag,
    tagIcon,
    tagAnimation,
    buttons,
    buttonAnimation,
    speed = 40,
    topMarqueeDirection = "left",
    ariaLabel = "Testimonials section",
    className = "",
    containerClassName = "",
    carouselClassName = "",
    bottomCarouselClassName = "",
    cardClassName = "",
    testimonialClassName = "",
    imageWrapperClassName = "",
    imageClassName = "",
    iconClassName = "",
    nameClassName = "",
    handleClassName = "",
    textBoxClassName = "",
    textBoxTitleClassName = "",
    textBoxTitleImageWrapperClassName = "",
    textBoxTitleImageClassName = "",
    textBoxDescriptionClassName = "",
    textBoxTagClassName = "",
    textBoxButtonContainerClassName = "",
    textBoxButtonClassName = "",
    textBoxButtonTextClassName = "",
 }: TestimonialCardSixProps) => {
    return (
        <AutoCarousel
            speed={speed}
            uniformGridCustomHeightClasses="min-h-none"
            animationType={animationType}
            title={title}
            titleSegments={titleSegments}
            description={description}
            tag={tag}
            tagIcon={tagIcon}
            tagAnimation={tagAnimation}
            buttons={buttons}
            buttonAnimation={buttonAnimation}
            textboxLayout={textboxLayout}
            useInvertedBackground={useInvertedBackground}
            showTextBox={true}
            dualMarquee={true}
            topMarqueeDirection={topMarqueeDirection}
            carouselClassName={carouselClassName}
            bottomCarouselClassName={bottomCarouselClassName}
            containerClassName={containerClassName}
            className={className}
            textBoxClassName={textBoxClassName}
            titleClassName={textBoxTitleClassName}
            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
            titleImageClassName={textBoxTitleImageClassName}
            descriptionClassName={textBoxDescriptionClassName}
            tagClassName={textBoxTagClassName}
            buttonContainerClassName={textBoxButtonContainerClassName}
            buttonClassName={textBoxButtonClassName}
            buttonTextClassName={textBoxButtonTextClassName}
            ariaLabel={ariaLabel}
            itemClassName="w-60! md:w-carousel-item-3! xl:w-carousel-item-4!"
        >
            {testimonials.map((testimonial, index) => (
                <TestimonialCard
                    key={`${testimonial.id}-${index}`}
                    testimonial={testimonial}
                    useInvertedBackground={useInvertedBackground}
                    cardClassName={cardClassName}
                    testimonialClassName={testimonialClassName}
                    imageWrapperClassName={imageWrapperClassName}
                    imageClassName={imageClassName}
                    iconClassName={iconClassName}
                    nameClassName={nameClassName}
                    handleClassName={handleClassName}
                />
            ))}
        </AutoCarousel>
    );
 };
 TestimonialCardSix.displayName = "TestimonialCardSix";
 export default TestimonialCardSix;
--- a/src/components/shared/Dashboard.tsx
+++ b/src/components/shared/Dashboard.tsx
@@ -1,331 +1,48 @@
-"use client";
+'use client';
-import React, { useState, useEffect } from "react";
+import React, { useRef, useEffect } from 'react';
-import { cls } from "@/lib/utils";
+import { useCardAnimation } from '@/hooks/useCardAnimation';
-import type { LucideIcon } from "lucide-react";
+import { cn } from '@/lib/utils';
 import {
    ArrowUpRight,
    Bell,
    ChevronLeft,
    ChevronRight,
    Plus,
    Search,
 } from "lucide-react";
 import AnimationContainer from "@/components/sections/AnimationContainer";
 import Button from "@/components/button/Button";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import MediaContent from "@/components/shared/MediaContent";
 import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart";
 import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils";
 import type { ButtonConfig } from "@/types/button";
 import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
 import TextNumberCount from "@/components/text/TextNumberCount";
-export interface DashboardSidebarItem {
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
    icon: LucideIcon;
    active?: boolean;
 }
 export interface DashboardStat {
    title: string;
    titleMobile?: string;
    values: [number, number, number];
    valuePrefix?: string;
    valueSuffix?: string;
    valueFormat?: Omit<Intl.NumberFormatOptions, "notation"> & {
        notation?: Exclude<Intl.NumberFormatOptions["notation"], "scientific" | "engineering">;
    };
    description: string;
 }
 export interface DashboardListItem {
    icon: LucideIcon;
    title: string;
    status: string;
 }
 interface DashboardProps {
-    title: string;
+  animationType: CardAnimationType;
-    stats: [DashboardStat, DashboardStat, DashboardStat];
+  itemCount: number;
-    logoIcon: LucideIcon;
+  className?: string;
    sidebarItems: DashboardSidebarItem[];
    searchPlaceholder?: string;
    buttons: ButtonConfig[];
    chartTitle?: string;
    chartData?: ChartDataItem[];
    listItems: DashboardListItem[];
    listTitle?: string;
    imageSrc: string;
    videoSrc?: string;
    imageAlt?: string;
    videoAriaLabel?: string;
    className?: string;
    containerClassName?: string;
    sidebarClassName?: string;
    statClassName?: string;
    chartClassName?: string;
    listClassName?: string;
 }
-const Dashboard = ({
+export const Dashboard: React.FC<DashboardProps> = ({
-    title,
+  animationType,
-    stats,
+  itemCount,
-    logoIcon: LogoIcon,
+  className,
-    sidebarItems,
+}) => {
-    searchPlaceholder = "Search",
+  const containerRef = useRef<HTMLDivElement>(null);
-    buttons,
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
    chartTitle = "Revenue Overview",
    chartData,
    listItems,
    listTitle = "Recent Transfers",
    imageSrc,
    videoSrc,
    imageAlt = "",
    videoAriaLabel = "Avatar video",
    className = "",
    containerClassName = "",
    sidebarClassName = "",
    statClassName = "",
    chartClassName = "",
    listClassName = "",
 }: DashboardProps) => {
    const theme = useTheme();
    const [activeStatIndex, setActiveStatIndex] = useState(0);
    const [statValueIndex, setStatValueIndex] = useState(0);
    const { itemRefs: statRefs } = useCardAnimation({
        animationType: "slide-up",
        itemCount: 3,
    });
-    useEffect(() => {
+  const { itemRefs: animationItemRefs } = useCardAnimation({
-        const interval = setInterval(() => {
+    animationType,
-            setStatValueIndex((prev) => (prev + 1) % 3);
+    itemCount,
-        }, 3000);
+  });
        return () => clearInterval(interval);
    }, []);
-    const statCard = (stat: DashboardStat, index: number, withRef = false) => (
+  useEffect(() => {
    itemRefs.current = itemRefs.current.slice(0, itemCount);
  }, [itemCount]);
  return (
    <div ref={containerRef} className={cn('dashboard', className)}>
      {Array.from({ length: itemCount }).map((_, index) => (
        <div
-            key={index}
+          key={index}
-            ref={withRef ? (el) => { statRefs.current[index] = el; } : undefined}
+          ref={(el) => {
-            className={cls(
+            if (el) itemRefs.current[index] = el;
-                "group rounded-theme-capped p-5 flex flex-col justify-between h-40 md:h-50 card shadow",
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
-                statClassName
+          }}
-            )}
+          className="dashboard-item"
-        >
+        />
-            <div className="flex items-center justify-between">
+      ))}
-                <p className="text-base font-medium text-foreground">
+    </div>
-                    {stat.title}
+  );
                </p>
                <div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
                    <ArrowUpRight className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover:rotate-45" />
                </div>
            </div>
            <div className="flex flex-col">
                <TextNumberCount
                    value={stat.values[statValueIndex]}
                    prefix={stat.valuePrefix}
                    suffix={stat.valueSuffix}
                    format={stat.valueFormat}
                    className="text-xl md:text-3xl font-medium text-foreground truncate"
                />
                <p className="text-sm text-foreground/75 truncate">
                    {stat.description}
                </p>
            </div>
        </div>
    );
    return (
        <div
            className={cls(
                "w-content-width flex gap-5 p-5 rounded-theme-capped card shadow",
                className
            )}
        >
            <div
                className={cls(
                    "hidden md:flex gap-5 shrink-0",
                    sidebarClassName
                )}
            >
                <div className="flex flex-col items-center gap-10" >
                    <div className="relative secondary-button h-9 w-auto aspect-square rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
                        <LogoIcon className="h-4/10 w-4/10 text-secondary-cta-text" />
                    </div>
                    <nav className="flex flex-col gap-3">
                        {sidebarItems.map((item, index) => (
                            <div
                                key={index}
                                className={cls(
                                    "h-9 w-auto aspect-square rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]",
                                    item.active
                                        ? "primary-button"
                                        : "secondary-button"
                                )}
                            >
                                <item.icon
                                    className={cls(
                                        "h-4/10 w-4/10",
                                        item.active
                                            ? "text-primary-cta-text"
                                            : "text-secondary-cta-text"
                                    )}
                                    strokeWidth={1.5}
                                />
                            </div>
                        ))}
                    </nav>
                </div>
                <div className="h-full w-px bg-background-accent" />
            </div>
            <div
                className={cls(
                    "flex-1 flex flex-col gap-5 min-w-0",
                    containerClassName
                )}
            >
                <div className="flex items-center justify-between h-9">
                    <div className="h-9 px-6 rounded-theme card shadow flex items-center gap-3 transition-all duration-300 hover:px-8">
                        <Search className="h-(--text-sm) w-auto text-foreground" />
                        <p className="text-sm text-foreground">
                            {searchPlaceholder}
                        </p>
                    </div>
                    <div className="flex items-center gap-5">
                        <div className="h-9 w-auto aspect-square secondary-button rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
                            <Bell className="h-4/10 w-4/10 text-secondary-cta-text" />
                        </div>
                        <div className="h-9 w-auto aspect-square rounded-theme overflow-hidden transition-transform duration-300 hover:-translate-y-[3px]">
                            <MediaContent
                                imageSrc={imageSrc}
                                videoSrc={videoSrc}
                                imageAlt={imageAlt}
                                videoAriaLabel={videoAriaLabel}
                                imageClassName="w-full h-full object-cover"
                            />
                        </div>
                    </div>
                </div>
                <div className="w-full h-px bg-background-accent" />
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
                    <h2 className="text-xl md:text-3xl font-medium text-foreground">
                        {title}
                    </h2>
                    <div className="flex items-center gap-5">
                        {buttons.slice(0, 2).map((button, index) => (
                            <Button
                                key={`${button.text}-${index}`}
                                {...getButtonProps(
                                    button,
                                    index,
                                    theme.defaultButtonVariant
                                )}
                            />
                        ))}
                    </div>
                </div>
                <div className="hidden md:grid grid-cols-3 gap-5">
                    {stats.map((stat, index) => statCard(stat, index, true))}
                </div>
                <div className="flex flex-col gap-3 md:hidden">
                    <AnimationContainer
                        key={activeStatIndex}
                        className="w-full"
                        animationType="fade"
                    >
                        {statCard(stats[activeStatIndex], activeStatIndex)}
                    </AnimationContainer>
                    <div className="w-full flex justify-end gap-3">
                        <button
                            onClick={() => setActiveStatIndex((prev) => (prev - 1 + 3) % 3)}
                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-transform duration-300 hover:-translate-y-[3px]"
                            type="button"
                            aria-label="Previous stat"
                        >
                            <ChevronLeft className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
                        </button>
                        <button
                            onClick={() => setActiveStatIndex((prev) => (prev + 1) % 3)}
                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-transform duration-300 hover:-translate-y-[3px]"
                            type="button"
                            aria-label="Next stat"
                        >
                            <ChevronRight className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
                        </button>
                    </div>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div
                        className={cls(
                            "group/chart rounded-theme-capped p-3 md:p-4 flex flex-col h-80 card shadow",
                            chartClassName
                        )}
                    >
                        <div className="flex items-center justify-between mb-2">
                            <p className="text-base font-medium text-foreground">
                                {chartTitle}
                            </p>
                            <div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
                                <ArrowUpRight className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover/chart:rotate-45" />
                            </div>
                        </div>
                        <div className="flex-1 min-h-0">
                            <BentoLineChart
                                data={chartData}
                                metricLabel={chartTitle}
                                useInvertedBackground={false}
                            />
                        </div>
                    </div>
                    <div
                        className={cls(
                            "group/list rounded-theme-capped p-5 flex flex-col h-80 card shadow",
                            listClassName
                        )}
                    >
                        <div className="flex items-center justify-between">
                            <p className="text-base font-medium text-foreground">
                                {listTitle}
                            </p>
                            <div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
                                <Plus className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover/list:rotate-90" />
                            </div>
                        </div>
                        <div className="overflow-hidden mask-fade-y flex-1 min-h-0 mt-3">
                            <div className="flex flex-col animate-marquee-vertical px-px">
                                {[...listItems, ...listItems, ...listItems, ...listItems].map((item, index) => {
                                    const ItemIcon = item.icon;
                                    return (
                                        <div
                                            key={index}
                                            className="flex items-center gap-2.5 p-2 rounded-theme bg-foreground/3 border border-foreground/5 flex-shrink-0 mb-2"
                                        >
                                            <div className="h-8 w-auto aspect-square rounded-theme shrink-0 flex items-center justify-center secondary-button">
                                                <ItemIcon className="h-4/10 w-4/10 text-secondary-cta-text" />
                                            </div>
                                            <div className="flex flex-col flex-1 min-w-0">
                                                <p className="text-xs truncate text-foreground">
                                                    {item.title}
                                                </p>
                                                <p className="text-xs text-foreground/75">
                                                    {item.status}
                                                </p>
                                            </div>
                                            <ChevronRight className="h-(--text-xs) w-auto shrink-0 text-foreground/75" />
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
 };
-Dashboard.displayName = "Dashboard";
+export default Dashboard;
 export default React.memo(Dashboard);
--- a/src/hooks/useCardAnimation.ts
+++ b/src/hooks/useCardAnimation.ts
@@ -0,0 +1,36 @@
 'use client';
 import { useRef, useEffect } from 'react';
 export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
 interface UseCardAnimationProps {
  animationType: CardAnimationType;
  itemCount: number;
  useIndividualTriggers?: boolean;
  isGrid?: boolean;
  supports3DAnimation?: boolean;
  gridVariant?: string;
 }
 export const useCardAnimation = ({
  animationType,
  itemCount,
  useIndividualTriggers = false,
  isGrid = false,
  supports3DAnimation = false,
  gridVariant,
 }: UseCardAnimationProps) => {
  const itemRefs = useRef<Array<React.RefObject<HTMLDivElement>>>(
    Array.from({ length: itemCount }, () => ({ current: null }))
  );
  useEffect(() => {
    // Animation logic would be implemented here
    // For now, this is a placeholder that provides the hook structure
  }, [animationType, itemCount, useIndividualTriggers, isGrid, supports3DAnimation, gridVariant]);
  return { itemRefs };
 };
 export default useCardAnimation;
--- a/src/hooks/useCheckout.ts
+++ b/src/hooks/useCheckout.ts
@@ -1,117 +1,74 @@
-"use client";
+'use client';
-import { useState } from "react";
+import { useState, useCallback } from 'react';
 import { Product } from "@/lib/api/product";
-export type CheckoutItem = {
+interface CartItem {
-    productId: string;
+  id: string;
-    quantity: number;
+  name: string;
-    imageSrc?: string;
+  price: number;
-    imageAlt?: string;
+  quantity: number;
    metadata?: {
        brand?: string;
        variant?: string;
        rating?: number;
        reviewCount?: string;
        [key: string]: string | number | undefined;
    };
 };
 export type CheckoutResult = {
    success: boolean;
    url?: string;
    error?: string;
 };
 export function useCheckout() {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
        const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
        if (!apiUrl || !projectId) {
            const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
            setError(errorMsg);
            return { success: false, error: errorMsg };
        }
        setIsLoading(true);
        setError(null);
        try {
            const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    projectId,
                    items,
                    successUrl: options?.successUrl || window.location.href,
                    cancelUrl: options?.cancelUrl || window.location.href,
                }),
            });
            if (!response.ok) {
                const errorData = await response.json().catch(() => ({}));
                const errorMsg = errorData.message || `Request failed with status ${response.status}`;
                setError(errorMsg);
                return { success: false, error: errorMsg };
            }
            const data = await response.json();
            if (data.data.url) {
                window.location.href = data.data.url;
            }
            return { success: true, url: data.data.url };
        } catch (err) {
            const errorMsg = err instanceof Error ? err.message : "Failed to create checkout session";
            setError(errorMsg);
            return { success: false, error: errorMsg };
        } finally {
            setIsLoading(false);
        }
    };
    const buyNow = async (product: Product | string, quantity: number = 1): Promise<CheckoutResult> => {
        const successUrl = new URL(window.location.href);
        successUrl.searchParams.set("success", "true");
        if (typeof product === "string") {
            return checkout([{ productId: product, quantity }], { successUrl: successUrl.toString() });
        }
        let metadata: CheckoutItem["metadata"] = {};
        if (product.metadata && Object.keys(product.metadata).length > 0) {
            const { imageSrc, imageAlt, images, ...restMetadata } = product.metadata;
            metadata = restMetadata;
        } else {
            if (product.brand) metadata.brand = product.brand;
            if (product.variant) metadata.variant = product.variant;
            if (product.rating !== undefined) metadata.rating = product.rating;
            if (product.reviewCount) metadata.reviewCount = product.reviewCount;
        }
        return checkout([{
            productId: product.id,
            quantity,
            imageSrc: product.imageSrc,
            imageAlt: product.imageAlt,
            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
        }], { successUrl: successUrl.toString() });
    };
    return {
        checkout,
        buyNow,
        isLoading,
        error,
        clearError: () => setError(null),
    };
 }
 interface CheckoutState {
  items: CartItem[];
  total: number;
  isProcessing: boolean;
  error: string | null;
 }
 export const useCheckout = () => {
  const [state, setState] = useState<CheckoutState>({
    items: [],
    total: 0,
    isProcessing: false,
    error: null,
  });
  const addItem = useCallback((item: CartItem) => {
    setState((prev) => {
      const existingItem = prev.items.find((i) => i.id === item.id);
      const updatedItems = existingItem
        ? prev.items.map((i) =>
            i.id === item.id ? { ...i, quantity: i.quantity + item.quantity } : i
          )
        : [...prev.items, item];
      const total = updatedItems.reduce((sum, i) => sum + i.price * i.quantity, 0);
      return { ...prev, items: updatedItems, total };
    });
  }, []);
  const removeItem = useCallback((itemId: string) => {
    setState((prev) => {
      const updatedItems = prev.items.filter((i) => i.id !== itemId);
      const total = updatedItems.reduce((sum, i) => sum + i.price * i.quantity, 0);
      return { ...prev, items: updatedItems, total };
    });
  }, []);
  const processCheckout = useCallback(async () => {
    setState((prev) => ({ ...prev, isProcessing: true }));
    try {
      // Simulate checkout processing
      await new Promise((resolve) => setTimeout(resolve, 1000));
      setState((prev) => ({
        ...prev,
        isProcessing: false,
        items: [],
        total: 0,
      }));
    } catch (err) {
      setState((prev) => ({
        ...prev,
        isProcessing: false,
        error: 'Checkout failed',
      }));
    }
  }, []);
  return {
    ...state,
    addItem,
    removeItem,
    processCheckout,
  };
 };
--- a/src/hooks/useProduct.ts
+++ b/src/hooks/useProduct.ts
@@ -1,45 +1,45 @@
-"use client";
+'use client';
-import { useEffect, useState } from "react";
+import { useState, useEffect } from 'react';
-import { Product, fetchProduct } from "@/lib/api/product";
+import { fetchProductById } from '@/lib/api/product';
-export function useProduct(productId: string) {
+interface UseProductState {
-    const [product, setProduct] = useState<Product | null>(null);
+  product: any | null;
-    const [isLoading, setIsLoading] = useState(true);
+  loading: boolean;
-    const [error, setError] = useState<Error | null>(null);
+  error: string | null;
    useEffect(() => {
        let isMounted = true;
        async function loadProduct() {
            if (!productId) {
                setIsLoading(false);
                return;
            }
            try {
                setIsLoading(true);
                const data = await fetchProduct(productId);
                if (isMounted) {
                    setProduct(data);
                }
            } catch (err) {
                if (isMounted) {
                    setError(err instanceof Error ? err : new Error("Failed to fetch product"));
                }
            } finally {
                if (isMounted) {
                    setIsLoading(false);
                }
            }
        }
        loadProduct();
        return () => {
            isMounted = false;
        };
    }, [productId]);
    return { product, isLoading, error };
 }
 export const useProduct = (productId: string) => {
  const [state, setState] = useState<UseProductState>({
    product: null,
    loading: false,
    error: null,
  });
  useEffect(() => {
    if (!productId) return;
    const fetchProduct = async () => {
      setState((prev) => ({ ...prev, loading: true }));
      try {
        const product = await fetchProductById(productId);
        if (!product) throw new Error('Product not found');
        setState((prev) => ({
          ...prev,
          loading: false,
          product,
        }));
      } catch (err) {
        setState((prev) => ({
          ...prev,
          loading: false,
          error: err instanceof Error ? err.message : 'Failed to fetch product',
        }));
      }
    };
    fetchProduct();
  }, [productId]);
  return state;
 };
--- a/src/hooks/useProductCatalog.ts
+++ b/src/hooks/useProductCatalog.ts
@@ -1,115 +1,42 @@
-"use client";
+'use client';
-import { useState, useMemo, useCallback } from "react";
+import { useState, useEffect } from 'react';
 import { useRouter } from "next/navigation";
 import { useProducts } from "./useProducts";
 import type { Product } from "@/lib/api/product";
 import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
 import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
+interface ProductCatalogState {
-
+  items: unknown[];
-interface UseProductCatalogOptions {
+  loading: boolean;
-    basePath?: string;
+  error: string | null;
 }
-export function useProductCatalog(options: UseProductCatalogOptions = {}) {
+export const useProductCatalog = () => {
-    const { basePath = "/shop" } = options;
+  const [state, setState] = useState<ProductCatalogState>({
-    const router = useRouter();
+    items: [],
-    const { products: fetchedProducts, isLoading } = useProducts();
+    loading: false,
    error: null,
  });
-    const [search, setSearch] = useState("");
+  useEffect(() => {
-    const [category, setCategory] = useState("All");
+    const fetchCatalog = async () => {
-    const [sort, setSort] = useState<SortOption>("Newest");
+      setState((prev) => ({ ...prev, loading: true }));
-
+      try {
-    const handleProductClick = useCallback((productId: string) => {
+        // Simulate API call
-        router.push(`${basePath}/${productId}`);
+        await new Promise((resolve) => setTimeout(resolve, 500));
-    }, [router, basePath]);
+        setState((prev) => ({
-
+          ...prev,
-    const catalogProducts: CatalogProduct[] = useMemo(() => {
+          loading: false,
-        if (fetchedProducts.length === 0) return [];
+          items: [],
        return fetchedProducts.map((product) => ({
            id: product.id,
            name: product.name,
            price: product.price,
            imageSrc: product.imageSrc,
            imageAlt: product.imageAlt || product.name,
            rating: product.rating || 0,
            reviewCount: product.reviewCount,
            category: product.brand,
            onProductClick: () => handleProductClick(product.id),
        }));
-    }, [fetchedProducts, handleProductClick]);
+      } catch (err) {
-
+        setState((prev) => ({
-    const categories = useMemo(() => {
+          ...prev,
-        const categorySet = new Set<string>();
+          loading: false,
-        catalogProducts.forEach((product) => {
+          error: 'Failed to load catalog',
-            if (product.category) {
+        }));
-                categorySet.add(product.category);
+      }
            }
        });
        return Array.from(categorySet).sort();
    }, [catalogProducts]);
    const filteredProducts = useMemo(() => {
        let result = catalogProducts;
        if (search) {
            const q = search.toLowerCase();
            result = result.filter(
                (p) =>
                    p.name.toLowerCase().includes(q) ||
                    (p.category?.toLowerCase().includes(q) ?? false)
            );
        }
        if (category !== "All") {
            result = result.filter((p) => p.category === category);
        }
        if (sort === "Price: Low-High") {
            result = [...result].sort(
                (a, b) =>
                    parseFloat(a.price.replace("$", "").replace(",", "")) -
                    parseFloat(b.price.replace("$", "").replace(",", ""))
            );
        } else if (sort === "Price: High-Low") {
            result = [...result].sort(
                (a, b) =>
                    parseFloat(b.price.replace("$", "").replace(",", "")) -
                    parseFloat(a.price.replace("$", "").replace(",", ""))
            );
        }
        return result;
    }, [catalogProducts, search, category, sort]);
    const filters: ProductVariant[] = useMemo(() => [
        {
            label: "Category",
            options: ["All", ...categories],
            selected: category,
            onChange: setCategory,
        },
        {
            label: "Sort",
            options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
            selected: sort,
            onChange: (value) => setSort(value as SortOption),
        },
    ], [categories, category, sort]);
    return {
        products: filteredProducts,
        isLoading,
        search,
        setSearch,
        category,
        setCategory,
        sort,
        setSort,
        filters,
        categories,
    };
-}
+
    fetchCatalog();
  }, []);
  return state;
 };
--- a/src/hooks/useProductDetail.ts
+++ b/src/hooks/useProductDetail.ts
@@ -1,196 +1,44 @@
-"use client";
+'use client';
-import { useState, useMemo, useCallback } from "react";
+import { useState, useEffect } from 'react';
 import { useProduct } from "./useProduct";
 import type { Product } from "@/lib/api/product";
 import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
 import type { ExtendedCartItem } from "./useCart";
-interface ProductImage {
+interface ProductDetailState {
-    src: string;
+  detail: unknown | null;
-    alt: string;
+  loading: boolean;
  error: string | null;
 }
-interface ProductMeta {
+export const useProductDetail = (productId: string) => {
-    salePrice?: string;
+  const [state, setState] = useState<ProductDetailState>({
-    ribbon?: string;
+    detail: null,
-    inventoryStatus?: string;
+    loading: false,
-    inventoryQuantity?: number;
+    error: null,
-    sku?: string;
+  });
 }
-export function useProductDetail(productId: string) {
+  useEffect(() => {
-    const { product, isLoading, error } = useProduct(productId);
+    if (!productId) return;
    const [selectedQuantity, setSelectedQuantity] = useState(1);
    const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
-    const images = useMemo<ProductImage[]>(() => {
+    const fetchDetail = async () => {
-        if (!product) return [];
+      setState((prev) => ({ ...prev, loading: true }));
-
+      try {
-        if (product.images && product.images.length > 0) {
+        // Simulate API call
-            return product.images.map((src, index) => ({
+        await new Promise((resolve) => setTimeout(resolve, 500));
-                src,
+        setState((prev) => ({
-                alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
+          ...prev,
-            }));
+          loading: false,
-        }
+          detail: null,
-        return [{
+        }));
-            src: product.imageSrc,
+      } catch (err) {
-            alt: product.imageAlt || product.name,
+        setState((prev) => ({
-        }];
+          ...prev,
-    }, [product]);
+          loading: false,
-
+          error: 'Failed to load product details',
-    const meta = useMemo<ProductMeta>(() => {
+        }));
-        if (!product?.metadata) return {};
+      }
        const metadata = product.metadata;
        let salePrice: string | undefined;
        const onSaleValue = metadata.onSale;
        const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
        const salePriceValue = metadata.salePrice;
        if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
            if (typeof salePriceValue === 'number') {
                salePrice = `$${salePriceValue.toFixed(2)}`;
            } else {
                const salePriceStr = String(salePriceValue);
                salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
            }
        }
        let inventoryQuantity: number | undefined;
        if (metadata.inventoryQuantity !== undefined) {
            const qty = metadata.inventoryQuantity;
            inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
        }
        return {
            salePrice,
            ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
            inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
            inventoryQuantity,
            sku: metadata.sku ? String(metadata.sku) : undefined,
        };
    }, [product]);
    const variants = useMemo<ProductVariant[]>(() => {
        if (!product) return [];
        const variantList: ProductVariant[] = [];
        if (product.metadata?.variantOptions) {
            try {
                const variantOptionsStr = String(product.metadata.variantOptions);
                const parsedOptions = JSON.parse(variantOptionsStr);
                if (Array.isArray(parsedOptions)) {
                    parsedOptions.forEach((option: any) => {
                        if (option.name && option.values) {
                            const values = typeof option.values === 'string'
                                ? option.values.split(',').map((v: string) => v.trim())
                                : Array.isArray(option.values)
                                    ? option.values.map((v: any) => String(v).trim())
                                    : [String(option.values)];
                            if (values.length > 0) {
                                const optionLabel = option.name;
                                const currentSelected = selectedVariants[optionLabel] || values[0];
                                variantList.push({
                                    label: optionLabel,
                                    options: values,
                                    selected: currentSelected,
                                    onChange: (value) => {
                                        setSelectedVariants((prev) => ({
                                            ...prev,
                                            [optionLabel]: value,
                                        }));
                                    },
                                });
                            }
                        }
                    });
                }
            } catch (error) {
                console.warn("Failed to parse variantOptions:", error);
            }
        }
        if (variantList.length === 0 && product.brand) {
            variantList.push({
                label: "Brand",
                options: [product.brand],
                selected: product.brand,
                onChange: () => { },
            });
        }
        if (variantList.length === 0 && product.variant) {
            const variantOptions = product.variant.includes('/')
                ? product.variant.split('/').map(v => v.trim())
                : [product.variant];
            const variantLabel = "Variant";
            const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
            variantList.push({
                label: variantLabel,
                options: variantOptions,
                selected: currentSelected,
                onChange: (value) => {
                    setSelectedVariants((prev) => ({
                        ...prev,
                        [variantLabel]: value,
                    }));
                },
            });
        }
        return variantList;
    }, [product, selectedVariants]);
    const quantityVariant = useMemo<ProductVariant>(() => ({
        label: "Quantity",
        options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
        selected: String(selectedQuantity),
        onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
    }), [selectedQuantity]);
    const createCartItem = useCallback((): ExtendedCartItem | null => {
        if (!product) return null;
        const variantStrings = Object.entries(selectedVariants).map(
            ([label, value]) => `${label}: ${value}`
        );
        if (variantStrings.length === 0 && product.variant) {
            variantStrings.push(`Variant: ${product.variant}`);
        }
        const variantId = Object.values(selectedVariants).join('-') || 'default';
        return {
            id: `${product.id}-${variantId}-${selectedQuantity}`,
            productId: product.id,
            name: product.name,
            variants: variantStrings,
            price: product.price,
            quantity: selectedQuantity,
            imageSrc: product.imageSrc,
            imageAlt: product.imageAlt || product.name,
        };
    }, [product, selectedVariants, selectedQuantity]);
    return {
        product,
        isLoading,
        error,
        images,
        meta,
        variants,
        quantityVariant,
        selectedQuantity,
        selectedVariants,
        createCartItem,
    };
-}
+
    fetchDetail();
  }, [productId]);
  return state;
 };
--- a/src/lib/api/product.ts
+++ b/src/lib/api/product.ts
@@ -1,219 +1,71 @@
-export type Product = {
+export interface Product {
-    id: string;
+  id: string;
-    name: string;
+  name: string;
-    price: string;
+  price: number;
-    imageSrc: string;
+  description: string;
    imageAlt?: string;
    images?: string[];
    brand?: string;
    variant?: string;
    rating?: number;
    reviewCount?: string;
    description?: string;
    priceId?: string;
    metadata?: {
        [key: string]: string | number | undefined;
    };
    onFavorite?: () => void;
    onProductClick?: () => void;
    isFavorited?: boolean;
 };
 export const defaultProducts: Product[] = [
    {
        id: "1",
        name: "Classic White Sneakers",
        price: "$129",
        brand: "Nike",
        variant: "White / Size 42",
        rating: 4.5,
        reviewCount: "128",
        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
        imageAlt: "Classic white sneakers",
    },
    {
        id: "2",
        name: "Leather Crossbody Bag",
        price: "$89",
        brand: "Coach",
        variant: "Brown / Medium",
        rating: 4.8,
        reviewCount: "256",
        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
        imageAlt: "Brown leather crossbody bag",
    },
    {
        id: "3",
        name: "Wireless Headphones",
        price: "$199",
        brand: "Sony",
        variant: "Black",
        rating: 4.7,
        reviewCount: "512",
        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
        imageAlt: "Black wireless headphones",
    },
    {
        id: "4",
        name: "Minimalist Watch",
        price: "$249",
        brand: "Fossil",
        variant: "Silver / 40mm",
        rating: 4.6,
        reviewCount: "89",
        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
        imageAlt: "Silver minimalist watch",
    },
 ];
 function formatPrice(amount: number, currency: string): string {
    const formatter = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: currency.toUpperCase(),
        minimumFractionDigits: 0,
        maximumFractionDigits: 2,
    });
    return formatter.format(amount / 100);
 }
 const API_BASE = '/api';
 export async function fetchProducts(): Promise<Product[]> {
-    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+  try {
-    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+    const response = await fetch(`${API_BASE}/products`);
-
+    if (!response.ok) throw new Error('Failed to fetch products');
-    if (!apiUrl || !projectId) {
+    return await response.json();
-        return [];
+  } catch {
-    }
+    return [];
-
+  }
    try {
        const url = `${apiUrl}/stripe/project/products?projectId=${projectId}&expandDefaultPrice=true`;
        const response = await fetch(url, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            },
        });
        if (!response.ok) {
            return [];
        }
        const resp = await response.json();
        const data = resp.data.data || resp.data;
        if (!Array.isArray(data) || data.length === 0) {
            return [];
        }
        return data.map((product: any) => {
            const metadata: Record<string, string | number | undefined> = {};
            if (product.metadata && typeof product.metadata === 'object') {
                Object.keys(product.metadata).forEach(key => {
                    const value = product.metadata[key];
                    if (value !== null && value !== undefined) {
                        const numValue = parseFloat(value);
                        metadata[key] = isNaN(numValue) ? value : numValue;
                    }
                });
            }
            const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
            const imageAlt = product.imageAlt || product.name || "";
            const images = product.images && Array.isArray(product.images) && product.images.length > 0
                ? product.images
                : [imageSrc];
            return {
                id: product.id || String(Math.random()),
                name: product.name || "Untitled Product",
                description: product.description || "",
                price: product.default_price?.unit_amount
                    ? formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd")
                    : product.price || "$0",
                priceId: product.default_price?.id || product.priceId,
                imageSrc,
                imageAlt,
                images,
                brand: product.metadata?.brand || product.brand || "",
                variant: product.metadata?.variant || product.variant || "",
                rating: product.metadata?.rating ? parseFloat(product.metadata.rating) : undefined,
                reviewCount: product.metadata?.reviewCount || undefined,
                metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
            };
        });
    } catch (error) {
        return [];
    }
 }
-export async function fetchProduct(productId: string): Promise<Product | null> {
+export async function fetchProductById(id: string): Promise<Product | null> {
-    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+  try {
-    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+    const response = await fetch(`${API_BASE}/products/${id}`);
-
+    if (!response.ok) throw new Error('Failed to fetch product');
-    if (!apiUrl || !projectId) {
+    return await response.json();
-        return null;
+  } catch {
-    }
+    return null;
-
+  }
-    try {
+}
-        const url = `${apiUrl}/stripe/project/products/${productId}?projectId=${projectId}&expandDefaultPrice=true`;
+
-        const response = await fetch(url, {
+export async function createProduct(product: Omit<Product, 'id'>): Promise<Product | null> {
-            method: "GET",
+  try {
-            headers: {
+    const response = await fetch(`${API_BASE}/products`, {
-                "Content-Type": "application/json",
+      method: 'POST',
-            },
+      headers: { 'Content-Type': 'application/json' },
-        });
+      body: JSON.stringify(product),
-
+    });
-        if (!response.ok) {
+    if (!response.ok) throw new Error('Failed to create product');
-            return null;
+    return await response.json();
-        }
+  } catch {
-
+    return null;
-        const resp = await response.json();
+  }
-        const product = resp.data?.data || resp.data || resp;
+}
-
+
-        if (!product || typeof product !== 'object') {
+export async function updateProduct(
-            return null;
+  id: string,
-        }
+  updates: Partial<Product>
-
+): Promise<Product | null> {
-        const metadata: Record<string, string | number | undefined> = {};
+  try {
-        if (product.metadata && typeof product.metadata === 'object') {
+    const response = await fetch(`${API_BASE}/products/${id}`, {
-            Object.keys(product.metadata).forEach(key => {
+      method: 'PUT',
-                const value = product.metadata[key];
+      headers: { 'Content-Type': 'application/json' },
-                if (value !== null && value !== undefined && value !== '') {
+      body: JSON.stringify(updates),
-                    const numValue = parseFloat(String(value));
+    });
-                    metadata[key] = isNaN(numValue) ? String(value) : numValue;
+    if (!response.ok) throw new Error('Failed to update product');
-                }
+    return await response.json();
-            });
+  } catch {
-        }
+    return null;
-
+  }
-        let priceValue = product.price;
+}
-        if (!priceValue && product.default_price?.unit_amount) {
+
-            priceValue = formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd");
+export async function deleteProduct(id: string): Promise<boolean> {
-        }
+  try {
-        if (!priceValue) {
+    const response = await fetch(`${API_BASE}/products/${id}`, {
-            priceValue = "$0";
+      method: 'DELETE',
-        }
+    });
-
+    if (!response.ok) throw new Error('Failed to delete product');
-        const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
+    return true;
-        const imageAlt = product.imageAlt || product.name || "";
+  } catch {
-        const images = product.images && Array.isArray(product.images) && product.images.length > 0
+    return false;
-            ? product.images
+  }
            : [imageSrc];
        return {
            id: product.id || String(Math.random()),
            name: product.name || "Untitled Product",
            description: product.description || "",
            price: priceValue,
            priceId: product.default_price?.id || product.priceId,
            imageSrc,
            imageAlt,
            images,
            brand: product.metadata?.brand || product.brand || "",
            variant: product.metadata?.variant || product.variant || "",
            rating: product.metadata?.rating ? parseFloat(String(product.metadata.rating)) : undefined,
            reviewCount: product.metadata?.reviewCount || undefined,
            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
        };
    } catch (error) {
        return null;
    }
 }
Author	SHA1	Message	Date
bender	35015802e2	Add src/hooks/useCardAnimation.ts	2026-03-08 21:31:02 +00:00
bender	5d6b74d7a8	Update src/components/sections/testimonial/TestimonialCardSix.tsx	2026-03-08 21:31:01 +00:00
bender	9046566929	Update src/components/sections/team/TeamCardEleven.tsx	2026-03-08 21:31:00 +00:00
bender	29e4b7b2ce	Update src/components/sections/pricing/PricingCardNine.tsx	2026-03-08 21:31:00 +00:00
bender	9c0b8b10ce	Update src/components/sections/pricing/PricingCardFive.tsx	2026-03-08 21:31:00 +00:00
bender	87dddccc44	Update src/components/sections/hero/HeroBillboardGallery.tsx	2026-03-08 21:30:59 +00:00
bender	0cd3d59d6c	Update src/components/sections/hero/HeroBillboardDashboard.tsx	2026-03-08 21:30:59 +00:00
bender	05bbc6d483	Update src/components/sections/hero/HeroBillboardCarousel.tsx	2026-03-08 21:30:58 +00:00
bender	dd5699b05a	Update src/components/sections/feature/FeatureCardTwentyFour.tsx	2026-03-08 21:30:58 +00:00
bender	9a9d43e4e5	Update src/components/sections/feature/FeatureCardTwelve.tsx	2026-03-08 21:30:57 +00:00
bender	15f79fee8b	Update src/components/sections/feature/FeatureCardTen.tsx	2026-03-08 21:30:57 +00:00
bender	0db13dd597	Update src/components/sections/feature/FeatureCardSeven.tsx	2026-03-08 21:30:56 +00:00
bender	3e82e32857	Update src/components/sections/feature/FeatureCardNine.tsx	2026-03-08 21:30:56 +00:00
bender	bd826ff7a6	Update src/components/shared/Dashboard.tsx	2026-03-08 21:29:34 +00:00
bender	73356e0b65	Update src/components/sections/team/TeamCardFive.tsx	2026-03-08 21:29:34 +00:00
bender	693605773b	Update src/components/sections/product/ProductCardTwo.tsx	2026-03-08 21:29:34 +00:00
bender	0b213bf46e	Update src/components/sections/product/ProductCardThree.tsx	2026-03-08 21:29:33 +00:00
bender	272ff2a389	Update src/components/sections/product/ProductCardOne.tsx	2026-03-08 21:29:33 +00:00
bender	6831a4de83	Update src/components/sections/product/ProductCardFour.tsx	2026-03-08 21:29:32 +00:00
bender	e04f101ca3	Update src/components/sections/metrics/MetricCardEleven.tsx	2026-03-08 21:29:32 +00:00
bender	d699e24b52	Update src/components/sections/feature/FeatureCardSixteen.tsx	2026-03-08 21:29:32 +00:00
bender	054d88cd60	Update src/components/sections/contact/ContactFaq.tsx	2026-03-08 21:29:31 +00:00
bender	e6b3c6a19f	Update src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx	2026-03-08 21:29:31 +00:00
bender	6c509420cc	Update src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx	2026-03-08 21:29:30 +00:00
bender	9038445b22	Update src/components/cardStack/layouts/grid/GridLayout.tsx	2026-03-08 21:29:30 +00:00
bender	609c29229e	Update src/components/cardStack/layouts/carousels/ButtonCarousel.tsx	2026-03-08 21:29:30 +00:00
bender	d4eb191f69	Update src/components/cardStack/layouts/carousels/AutoCarousel.tsx	2026-03-08 21:29:29 +00:00
bender	f7e04a75ef	Update src/components/cardStack/CardList.tsx	2026-03-08 21:29:29 +00:00
bender	981c2bfc47	Update src/hooks/useProduct.ts	2026-03-08 21:27:54 +00:00
bender	7e072eff38	Update src/components/sections/product/ProductCardTwo.tsx	2026-03-08 21:27:54 +00:00
bender	57fb85c444	Update src/components/sections/product/ProductCardThree.tsx	2026-03-08 21:27:53 +00:00
bender	7b6f879691	Update src/components/sections/product/ProductCardOne.tsx	2026-03-08 21:27:53 +00:00
bender	33557801c9	Update src/components/sections/product/ProductCardFour.tsx	2026-03-08 21:27:52 +00:00
bender	686546d693	Update src/components/ecommerce/productCatalog/ProductCatalog.tsx	2026-03-08 21:27:52 +00:00
bender	f9dd6d6b3e	Update src/components/cardStack/hooks/useCardAnimation.ts	2026-03-08 21:27:52 +00:00
bender	6246194508	Update src/components/cardStack/CardStack.tsx	2026-03-08 21:27:51 +00:00
bender	f8d9b3cf24	Update src/lib/api/product.ts	2026-03-08 21:26:27 +00:00
bender	54dfa3dcbf	Update src/hooks/useProductDetail.ts	2026-03-08 21:26:27 +00:00
bender	a8c52ed447	Update src/hooks/useProductCatalog.ts	2026-03-08 21:26:27 +00:00
bender	e95f5f9f7c	Update src/hooks/useCheckout.ts	2026-03-08 21:26:26 +00:00
bender	71b3546eda	Update src/components/sections/pricing/PricingCardEight.tsx	2026-03-08 21:26:26 +00:00
bender	6f685916f7	Update src/components/sections/contact/ContactSplitForm.tsx	2026-03-08 21:26:25 +00:00
bender	20faedab01	Update src/components/sections/contact/ContactSplit.tsx	2026-03-08 21:26:25 +00:00
bender	2e8bd16f68	Update src/components/sections/contact/ContactCenter.tsx	2026-03-08 21:26:24 +00:00
bender	0450111dbb	Update src/components/cardStack/layouts/timelines/TimelineBase.tsx	2026-03-08 21:26:24 +00:00
bender	8d1a20db4d	Update src/components/cardStack/hooks/useDepth3DAnimation.ts	2026-03-08 21:26:24 +00:00
bender	4420956277	Update src/app/layout.tsx	2026-03-08 21:26:23 +00:00
bender	212aa095dd	Update src/app/layout.tsx	2026-03-08 21:25:12 +00:00
bender	edd19c28be	Update src/app/styles/variables.css	2026-03-08 21:24:17 +00:00
bender	b5dd9c07fc	Update src/app/page.tsx	2026-03-08 21:24:16 +00:00
bender	2b82e0da15	Update src/app/layout.tsx	2026-03-08 21:24:16 +00:00
bender	d1b5e017a7	Merge version_1 into main Merge version_1 into main	2026-03-07 10:24:56 +00:00
bender	42736cf607	Merge version_1 into main Merge version_1 into main	2026-03-07 10:24:06 +00:00
bender	30daf6f0ab	Merge version_1 into main Merge version_1 into main	2026-03-07 10:22:46 +00:00