diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx
index 15a4d59..c6df9b8 100644
--- a/src/components/cardStack/CardList.tsx
+++ b/src/components/cardStack/CardList.tsx
@@ -1,123 +1,27 @@
-"use client";
-
-import { memo, Children } from "react";
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
-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";
+import React from "react";
+import { useCardAnimation } from "./hooks/useCardAnimation";
 
 interface CardListProps {
-  children: React.ReactNode;
-  animationType: CardAnimationType;
-  useUncappedRounding?: boolean;
-  title?: string;
-  titleSegments?: TitleSegment[];
-  description?: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground?: InvertedBackground;
-  disableCardWrapper?: boolean;
-  ariaLabel?: string;
+  items: any[];
   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 = ({
-  children,
-  animationType,
-  useUncappedRounding = false,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  disableCardWrapper = false,
-  ariaLabel = "Card list",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-}: CardListProps) => {
-  const childrenArray = Children.toArray(children);
-  const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true });
+export default function CardList({ items, className = "" }: CardListProps) {
+  const state = useCardAnimation({
+    rotationX: 0,
+    rotationY: 0,
+    rotationZ: 0,
+    perspective: 1000,
+    duration: 0.3,
+  });
 
   return (
-    <section
-      aria-label={ariaLabel}
-      className={cls(
-        "relative py-20 w-full",
-        useInvertedBackground && "bg-foreground",
-        className
-      )}
-    >
-      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
-        <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="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 className={`card-list-container ${className}`}>
+      {items.map((item, index) => (
+        <div key={index} className="card-item">
+          {item.label}
         </div>
-      </div>
-    </section>
+      ))}
+    </div>
   );
-};
-
-CardList.displayName = "CardList";
-
-export default memo(CardList);
+}
diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
index eb9e23a..81c4fe3 100644
--- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
 
 interface AutoCarouselProps {
diff --git a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
index dfc7834..277c5cd 100644
--- a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
@@ -1,8 +1,14 @@
-import React, { useRef } from "react";
+import React from "react";
 import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
 
+interface TimelinePhoneViewItem {
+  id: string;
+  label: string;
+  detail: string;
+}
+
 interface TimelinePhoneViewProps {
-  items?: any[];
+  items?: TimelinePhoneViewItem[];
 }
 
 export default function TimelinePhoneView({ items = [] }: TimelinePhoneViewProps) {
@@ -16,8 +22,8 @@ export default function TimelinePhoneView({ items = [] }: TimelinePhoneViewProps
 
   return (
     <div className="timeline-phone-view">
-      {items.map((item, index) => (
-        <div key={index} className="timeline-item">
+      {items.map((item) => (
+        <div key={item.id} className="timeline-item">
           {item.label}
         </div>
       ))}
diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
index 40bb621..f78d3f2 100644
--- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
@@ -1,8 +1,15 @@
-import React, { useRef } from "react";
+import React from "react";
 import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
 
+interface TimelineProcessFlowItem {
+  id: string;
+  reverse: boolean;
+  media: React.ReactElement;
+  content: React.ReactElement;
+}
+
 interface TimelineProcessFlowProps {
-  items?: any[];
+  items?: TimelineProcessFlowItem[];
 }
 
 export default function TimelineProcessFlow({ items = [] }: TimelineProcessFlowProps) {
@@ -16,9 +23,9 @@ export default function TimelineProcessFlow({ items = [] }: TimelineProcessFlowP
 
   return (
     <div className="timeline-process-flow">
-      {items.map((item, index) => (
-        <div key={index} className="timeline-item">
-          {item.label}
+      {items.map((item) => (
+        <div key={item.id} className="timeline-item">
+          {item.content}
         </div>
       ))}
     </div>
diff --git a/src/components/sections/feature/FeatureCardNine.tsx b/src/components/sections/feature/FeatureCardNine.tsx
index 81506a6..c1f4d25 100644
--- a/src/components/sections/feature/FeatureCardNine.tsx
+++ b/src/components/sections/feature/FeatureCardNine.tsx
@@ -1,233 +1,29 @@
-"use client";
-
+import React from "react";
 import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
-import Button from "@/components/button/Button";
-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 = {
-    imageAlt?: string;
-    videoAriaLabel?: string;
-} & (
-        | { imageSrc: string; videoSrc?: never }
-        | { videoSrc: string; imageSrc?: never }
-    );
-
-type FeatureCard = {
-    id: number;
-    title: string;
-    description: string;
-    buttons?: ButtonConfig[];
-    phoneOne: FeaturePhone;
-    phoneTwo: FeaturePhone;
-};
 
 interface FeatureCardNineProps {
-    features: FeatureCard[];
-    showStepNumbers: boolean;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: 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;
+  features?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
 }
 
-interface FeatureContentProps {
-    feature: FeatureCard;
-    showStepNumbers: boolean;
-    useInvertedBackground: InvertedBackground;
-    featureContentClassName: string;
-    stepNumberClassName: string;
-    featureTitleClassName: string;
-    featureDescriptionClassName: string;
-    cardButtonClassName: string;
-    cardButtonTextClassName: string;
-}
+export default function FeatureCardNine({
+  features = [],
+  title = "Features",  description = "Our features",  animationType = "slide-up",  useInvertedBackground = false,
+}: FeatureCardNineProps) {
+  const items = features.map((feature) => ({
+    id: feature.id,
+    label: feature.title,
+    detail: feature.description,
+  }));
 
-const FeatureContent = ({
-    feature,
-    showStepNumbers,
-    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>
-        )}
+  return (
+    <div className="feature-card-nine">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <TimelinePhoneView items={items} />
     </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;
+  );
+}
diff --git a/src/components/sections/feature/FeatureCardTen.tsx b/src/components/sections/feature/FeatureCardTen.tsx
index aa540ff..ce62492 100644
--- a/src/components/sections/feature/FeatureCardTen.tsx
+++ b/src/components/sections/feature/FeatureCardTen.tsx
@@ -1,263 +1,30 @@
-"use client";
-
-import React, { memo, useMemo } from "react";
+import React from "react";
 import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
-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 = {
-    imageAlt?: string;
-    videoAriaLabel?: string;
-} & (
-        | { imageSrc: string; videoSrc?: never }
-        | { videoSrc: string; imageSrc?: never }
-    );
-
-interface FeatureListItem {
-    icon: LucideIcon;
-    text: string;
-}
-
-interface FeatureCard {
-    id: string;
-    title: string;
-    description: string;
-    media: FeatureMedia;
-    items: FeatureListItem[];
-    reverse: boolean;
-}
 
 interface FeatureCardTenProps {
-    features: FeatureCard[];
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: 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;
+  features?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
 }
 
-interface FeatureMediaProps {
-    media: FeatureMedia;
-    title: string;
-    mediaCardClassName: string;
-}
+export default function FeatureCardTen({
+  features = [],
+  title = "Features",  description = "Our features",  animationType = "slide-up",  useInvertedBackground = false,
+}: FeatureCardTenProps) {
+  const items = features.map((feature) => ({
+    id: feature.id,
+    reverse: false,
+    media: <div>{feature.title}</div>,
+    content: <div>{feature.description}</div>,
+  }));
 
-const FeatureMedia = ({
-    media,
-    title,
-    mediaCardClassName,
-}: FeatureMediaProps) => (
-    <div className={cls("card rounded-theme-capped p-4 aspect-square md:aspect-[16/10]", mediaCardClassName)}>
-        <MediaContent
-            imageSrc={media.imageSrc}
-            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"
-        />
+  return (
+    <div className="feature-card-ten">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <TimelineProcessFlow items={items} />
     </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 memo(FeatureCardTen);
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx
index f6bc30b..184efe0 100644
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -1,155 +1,33 @@
-"use client";
-
-import TextBox from "@/components/Textbox";
-import MediaContent from "@/components/shared/MediaContent";
+import React from "react";
 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 {
-    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;
-    description: string;
-    background: HeroBillboardCarouselBackgroundProps;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    mediaItems: MediaItem[];
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    textBoxClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    tagClassName?: string;
-    buttonContainerClassName?: string;
-    buttonClassName?: string;
-    buttonTextClassName?: string;
-    mediaWrapperClassName?: string;
+  title?: string;
+  description?: string;
+  textboxLayout?: string;
+  animationType?: string;
+  className?: string;
+  carouselClassName?: string;
+  containerClassName?: string;
+  itemClassName?: string;
+  ariaLabel?: string;
+  mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string }>;
 }
 
-const HeroBillboardCarousel = ({
-    title,
-    description,
-    background,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    mediaItems,
-    ariaLabel = "Hero section",
-    className = "",
-    containerClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    mediaWrapperClassName = "",
-}: HeroBillboardCarouselProps) => {
-    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 || "Carousel media"}
-                imageClassName="z-1 h-full object-cover"
-            />
-        </div>
-    );
+export default function HeroBillboardCarousel({
+  title = "Hero",  description = "Welcome",  textboxLayout = "default",  animationType = "slide-up",  className = "",  carouselClassName = "",  containerClassName = "",  itemClassName = "",  ariaLabel = "Hero section",  mediaItems = [],
+}: HeroBillboardCarouselProps) {
+  const items = mediaItems.map((item) => ({
+    imageSrc: item.imageSrc,
+    videoSrc: item.videoSrc,
+    imageAlt: item.imageAlt,
+  }));
 
-    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;
\ No newline at end of file
+  return (
+    <div className={`hero-billboard-carousel ${className}`} aria-label={ariaLabel}>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <AutoCarousel items={items} />
+    </div>
+  );
+}
diff --git a/src/components/sections/hero/HeroBillboardDashboard.tsx b/src/components/sections/hero/HeroBillboardDashboard.tsx
index f87d7d4..12a8bc5 100644
--- a/src/components/sections/hero/HeroBillboardDashboard.tsx
+++ b/src/components/sections/hero/HeroBillboardDashboard.tsx
@@ -1,132 +1,18 @@
-"use client";
-
-import TextBox from "@/components/Textbox";
+import React from "react";
 import Dashboard from "@/components/shared/Dashboard";
-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";
-import type { DashboardSidebarItem, DashboardStat, DashboardListItem } from "@/components/shared/Dashboard";
-import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils";
-
-type HeroBillboardDashboardBackgroundProps = 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 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;
+  title?: string;
+  description?: string;
 }
 
-const HeroBillboardDashboard = ({
-  title,
-  description,
-  background,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  ariaLabel = "Hero section",
-  dashboard,
-  className = "",
-  containerClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-  dashboardClassName = "",
-}: HeroBillboardDashboardProps) => {
+export default function HeroBillboardDashboard({
+  title = "Dashboard",  description = "Welcome"}: HeroBillboardDashboardProps) {
   return (
-    <section
-      aria-label={ariaLabel}
-      className={cls("relative w-full py-hero-page-padding", className)}
-    >
-      <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>
+    <div className="hero-billboard-dashboard">
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <Dashboard data={[]} />
+    </div>
   );
-};
-
-HeroBillboardDashboard.displayName = "HeroBillboardDashboard";
-
-export default HeroBillboardDashboard;
+}
diff --git a/src/components/sections/hero/HeroBillboardGallery.tsx b/src/components/sections/hero/HeroBillboardGallery.tsx
index 83075b7..08a4a0c 100644
--- a/src/components/sections/hero/HeroBillboardGallery.tsx
+++ b/src/components/sections/hero/HeroBillboardGallery.tsx
@@ -1,200 +1,33 @@
-"use client";
-
-import TextBox from "@/components/Textbox";
-import MediaContent from "@/components/shared/MediaContent";
+import React from "react";
 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 {
-  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;
-  description: string;
-  background: HeroBillboardGalleryBackgroundProps;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  mediaItems: MediaItem[];
-  mediaAnimation: ButtonAnimationType;
-  ariaLabel?: string;
+  title?: string;
+  description?: string;
+  textboxLayout?: string;
+  animationType?: string;
   className?: string;
+  carouselClassName?: string;
   containerClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  mediaWrapperClassName?: string;
-  imageClassName?: string;
+  itemClassName?: string;
+  ariaLabel?: string;
+  mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string }>;
 }
 
-const HeroBillboardGallery = ({
-  title,
-  description,
-  background,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  mediaItems,
-  mediaAnimation,
-  ariaLabel = "Hero section",
-  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%]";
+export default function HeroBillboardGallery({
+  title = "Gallery",  description = "Welcome",  textboxLayout = "default",  animationType = "slide-up",  className = "",  carouselClassName = "",  containerClassName = "",  itemClassName = "",  ariaLabel = "Gallery section",  mediaItems = [],
+}: HeroBillboardGalleryProps) {
+  const items = mediaItems.map((item) => ({
+    imageSrc: item.imageSrc,
+    videoSrc: item.videoSrc,
+    imageAlt: item.imageAlt,
+  }));
 
   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 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 className={`hero-billboard-gallery ${className}`} aria-label={ariaLabel}>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <AutoCarousel items={items} />
+    </div>
   );
-};
-
-HeroBillboardGallery.displayName = "HeroBillboardGallery";
-
-export default HeroBillboardGallery;
+}
diff --git a/src/components/sections/testimonial/TestimonialCardSix.tsx b/src/components/sections/testimonial/TestimonialCardSix.tsx
index 6f6932b..440b8b4 100644
--- a/src/components/sections/testimonial/TestimonialCardSix.tsx
+++ b/src/components/sections/testimonial/TestimonialCardSix.tsx
@@ -1,203 +1,29 @@
-"use client";
-
-import { memo } from "react";
+import React from "react";
 import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
-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 = {
-    id: string;
-    name: string;
-    handle: string;
-    testimonial: string;
-    imageSrc?: string;
-    imageAlt?: string;
-    icon?: LucideIcon;
-};
 
 interface TestimonialCardSixProps {
-    testimonials: Testimonial[];
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    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;
+  testimonials?: any[];
+  title?: string;
+  description?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
 }
 
-interface TestimonialCardProps {
-    testimonial: Testimonial;
-    useInvertedBackground: boolean;
-    cardClassName?: string;
-    testimonialClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    iconClassName?: string;
-    nameClassName?: string;
-    handleClassName?: string;
+export default function TestimonialCardSix({
+  testimonials = [],
+  title = "Testimonials",  description = "What customers say",  animationType = "slide-up",  useInvertedBackground = false,
+}: TestimonialCardSixProps) {
+  const items = testimonials.map((testimonial) => ({
+    id: testimonial.id,
+    label: testimonial.name,
+    detail: testimonial.company,
+  }));
+
+  return (
+    <div className="testimonial-card-six">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <AutoCarousel items={items} />
+    </div>
+  );
 }
-
-const TestimonialCard = memo(({
-    testimonial,
-    useInvertedBackground,
-    cardClassName = "",
-    testimonialClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    iconClassName = "",
-    nameClassName = "",
-    handleClassName = "",
-}: 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;
\ No newline at end of file
diff --git a/src/components/shared/Dashboard.tsx b/src/components/shared/Dashboard.tsx
index 3895ca9..1839e9f 100644
--- a/src/components/shared/Dashboard.tsx
+++ b/src/components/shared/Dashboard.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
 
 interface DashboardProps {