From 51bc451f07f0dc5e45dba1fc3f66722bc583be56 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:06:34 +0000
Subject: [PATCH] Update
 src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx

---
 .../FeatureHoverPattern.tsx                   | 167 +++---------------
 1 file changed, 24 insertions(+), 143 deletions(-)

diff --git a/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx b/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx
index 3b99bc9..2c79a9d 100644
--- a/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx
+++ b/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx
@@ -1,165 +1,46 @@
-"use client";
-
-import CardStack from "@/components/cardStack/CardStack";
-import FeatureHoverPatternItem from "./FeatureHoverPatternItem";
-import { 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";
-
-interface FeatureCard {
-  icon: LucideIcon;
-  title: string;
-  description: string;
-  button?: ButtonConfig;
-}
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface FeatureHoverPatternProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
+  features: Array<{
+    id: string;
+    title: string;
+    description: string;
+  }>;
   title: string;
-  titleSegments?: TitleSegment[];
   description: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  iconContainerClassName?: string;
-  iconClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  gradientClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-  cardButtonClassName?: string;
-  cardButtonTextClassName?: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
+  [key: string]: any;
 }
 
-const FeatureHoverPattern = ({
+const FeatureHoverPattern: React.FC<FeatureHoverPatternProps> = ({
   features,
-  carouselMode = "buttons",
-  uniformGridCustomHeightClasses = "min-h-85 2xl:min-h-95",
-  animationType,
   title,
-  titleSegments,
   description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  iconContainerClassName = "",
-  iconClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  gradientClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-  cardButtonClassName = "",
-  cardButtonTextClassName = "",
-}: FeatureHoverPatternProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(
-    useInvertedBackground,
-    theme.cardStyle
-  );
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
     <CardStack
-      mode={carouselMode}
       gridVariant="uniform-all-items-equal"
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
       animationType={animationType}
       title={title}
-      titleSegments={titleSegments}
       description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
       textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      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}
+      {...props}
     >
-      {features.map((feature, index) => (
-        <FeatureHoverPatternItem
-          key={`${feature.title}-${index}`}
-          item={feature}
-          index={index}
-          className={cardClassName}
-          iconContainerClassName={iconContainerClassName}
-          iconClassName={iconClassName}
-          titleClassName={cardTitleClassName}
-          descriptionClassName={cardDescriptionClassName}
-          gradientClassName={gradientClassName}
-          shouldUseLightText={shouldUseLightText}
-          buttonClassName={cardButtonClassName}
-          buttonTextClassName={cardButtonTextClassName}
-        />
-      ))}
+      {featureItems}
     </CardStack>
   );
 };
 
-FeatureHoverPattern.displayName = "FeatureHoverPattern";
-
-export default FeatureHoverPattern;
+export default FeatureHoverPattern;
\ No newline at end of file