Update src/components/sections/feature/FeatureCardTwentySeven.tsx

src/components/sections/feature/FeatureCardTwentySeven.tsx

@@ -1,127 +1,44 @@
 "use client";
 
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls } from "@/lib/utils";
-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";
+import React, { useMemo } from "react";
+import CardStack from "@/components/card/CardStack";
+import TextBox from "@/components/Textbox";
+import type { CardAnimationType } from "@/types/animations";
+import type { GridVariant } from "@/types/grid";
 
-type FeatureCard = {
-  id: string;
-  title: string;
-  descriptions: string[];
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-};
-
-interface FeatureCardTwentySevenItemProps {
-  title: string;
-  descriptions: string[];
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  className?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-}
-
-const FeatureCardTwentySevenItem = ({
-  title,
-  descriptions,
-  imageSrc,
-  videoSrc,
-  imageAlt = "",
-  className = "",
-  titleClassName = "",
-  descriptionClassName = "",
-}: FeatureCardTwentySevenItemProps) => {
-  const [isFlipped, setIsFlipped] = useState(false);
-
-  return (
-    <div
-      className={cls(
-        "relative w-full h-full min-h-0 group [perspective:3000px] cursor-pointer",
-        className
-      )}
-      onClick={() => setIsFlipped(!isFlipped)}
-    >
-      <div
-        className={cls(
-          "relative w-full h-full transition-transform duration-500 [transform-style:preserve-3d]",
-          isFlipped && "[transform:rotateY(180deg)]"
-        )}
-      >
-        <div className="relative w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col [backface-visibility:hidden]">
-          <div className="flex justify-between items-start">
-            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
-              {title}
-            </h3>
-            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
-              <Plus className="h-1/2 w-1/2 text-primary-cta-text" />
-            </div>
-          </div>
-          <div className="w-full aspect-square md:aspect-[10/11] flex items-center justify-center rounded-theme-capped overflow-hidden">
-            <MediaContent
-              imageSrc={imageSrc}
-              videoSrc={videoSrc}
-              imageAlt={imageAlt}
-              imageClassName="w-full h-full object-cover"
-            />
-          </div>
-        </div>
-
-        <div className="absolute! inset-0 w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col justify-between [backface-visibility:hidden] [transform:rotateY(180deg)]">
-          <div className="flex justify-between items-start">
-            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
-              {title}
-            </h3>
-            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
-              <Plus className="h-1/2 w-1/2 rotate-45 text-primary-cta-text" />
-            </div>
-          </div>
-          <div className="w-full flex flex-col gap-3">
-            {descriptions.map((desc, index) => (
-              <p key={index} className={cls("text-lg text-foreground/75 leading-tight", descriptionClassName)}>
-                {desc}
-              </p>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface FeatureCardTwentySevenProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: GridVariant;
+export interface FeatureCardTwentySevenProps {
+  features?: Array<{
+    id: string;
+    title: string;
+    description: string;
+    icon?: React.ReactNode;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+  }>;
+  gridVariant?: GridVariant;
   uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
+  animationType?: CardAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  useInvertedBackground?: boolean;
   ariaLabel?: string;
   className?: string;
   containerClassName?: string;
   cardClassName?: string;
+  mediaClassName?: string;
   textBoxTitleClassName?: string;
   textBoxTitleImageWrapperClassName?: string;
   textBoxTitleImageClassName?: string;
   textBoxDescriptionClassName?: string;
   cardTitleClassName?: string;
   cardDescriptionClassName?: string;
+  cardIconClassName?: string;
+  cardIconWrapperClassName?: string;
   gridClassName?: string;
   carouselClassName?: string;
   controlsClassName?: string;
@@ -132,90 +49,94 @@ interface FeatureCardTwentySevenProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardTwentySeven = ({
-  features,
-  carouselMode = "buttons",
-  gridVariant,
-  uniformGridCustomHeightClasses = "min-h-none",
-  animationType,
-  title,
+const FeatureCardTwentySeven: React.FC<FeatureCardTwentySevenProps> = ({
+  features = [],
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
   titleSegments,
-  description,
-  tag,
-  tagIcon,
+  description = "",  tag,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureCardTwentySevenProps) => {
+  textboxLayout = "default",  useInvertedBackground = false,
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
+  const cardItems = useMemo(
+    () =>
+      features.map((feature) => (
+        <div
+          key={feature.id}
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
+        >
+          {feature.icon && (
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
+            </div>
+          )}
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
+            {feature.title}
+          </h3>
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
+            {feature.description}
+          </p>
+          {feature.mediaItems && (
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
+              {feature.mediaItems.map((media, idx) => (
+                <img
+                  key={idx}
+                  src={media.src}
+                  alt={media.alt || "Feature media"}
+                  className="w-full h-20 object-cover rounded-lg"
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )),
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
+
   return (
-    <CardStack
-      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}
-      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}
+    <div
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
+      aria-label={ariaLabel}
     >
-      {features.map((feature, index) => (
-        <FeatureCardTwentySevenItem
-          key={`${feature.id}-${index}`}
-          title={feature.title}
-          descriptions={feature.descriptions}
-          imageSrc={feature.imageSrc}
-          videoSrc={feature.videoSrc}
-          imageAlt={feature.imageAlt}
-          className={cardClassName}
-          titleClassName={cardTitleClassName}
-          descriptionClassName={cardDescriptionClassName}
-        />
-      ))}
-    </CardStack>
+      {title && (
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
+          <TextBox
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
+        >
+          {cardItems.map((item) => item)}
+        </CardStack>
+      </div>
+    </div>
   );
 };
 
-FeatureCardTwentySeven.displayName = "FeatureCardTwentySeven";
-
-export default FeatureCardTwentySeven;
+export default FeatureCardTwentySeven;