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

src/components/sections/feature/FeatureCardTwentyOne.tsx

@@ -1,235 +1,120 @@
 "use client";
 
-import { useState } from "react";
-import TextBox from "@/components/Textbox";
-import Accordion from "@/components/Accordion";
-import MediaContent from "@/components/shared/MediaContent";
-import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React, { useState } from "react";
+import { LucideIcon } from "lucide-react";
 
-type MediaProps =
-    | {
-        imageSrc: string;
-        imageAlt?: string;
-        videoSrc?: never;
-        videoAriaLabel?: never;
-    }
-    | {
-        videoSrc: string;
-        videoAriaLabel?: string;
-        imageSrc?: never;
-        imageAlt?: never;
-    };
+interface AccordionItem {
+  id: string;
+  title: string;
+  content: string;
+}
 
-type AccordionItem = {
-    id: string;
-    title: string;
-    content: string;
-};
+interface FeatureCardTwentyOneProps {
+  title: string;
+  description: string;
+  tag: string;
+  tagIcon: LucideIcon;
+  tagAnimation?: string;
+  accordionItems: AccordionItem[];
+}
 
-type FeatureCardTwentyOneProps = MediaProps & {
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    mediaAnimation: ButtonAnimationType;
-    accordionItems: AccordionItem[];
-    useInvertedBackground: InvertedBackground;
-    mediaPosition?: "left" | "right";
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    contentClassName?: string;
-    textBoxClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    tagClassName?: string;
-    buttonContainerClassName?: string;
-    buttonClassName?: string;
-    buttonTextClassName?: string;
-    titleImageWrapperClassName?: string;
-    titleImageClassName?: string;
-    accordionContainerClassName?: string;
-    accordionClassName?: string;
-    accordionTitleClassName?: string;
-    accordionContentClassName?: string;
-    accordionIconContainerClassName?: string;
-    accordionIconClassName?: string;
-};
+export default function FeatureCardTwentyOne({
+  title,
+  description,
+  tag,
+  tagIcon: TagIcon,
+  accordionItems,
+}: FeatureCardTwentyOneProps) {
+  const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
 
-const FeatureCardTwentyOne = ({
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    mediaAnimation,
-    accordionItems,
-    imageSrc,
-    imageAlt,
-    videoSrc,
-    videoAriaLabel,
-    useInvertedBackground,
-    mediaPosition = "left",
-    ariaLabel = "Feature section",
-    className = "",
-    containerClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    contentClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    accordionContainerClassName = "",
-    accordionClassName = "",
-    accordionTitleClassName = "",
-    accordionContentClassName = "",
-    accordionIconContainerClassName = "",
-    accordionIconClassName = "",
-}: FeatureCardTwentyOneProps) => {
-    const [activeAccordion, setActiveAccordion] = useState<number>(0);
-    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+  const toggleFlip = (id: string) => {
+    setFlipped((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
 
-    const handleAccordionToggle = (index: number) => {
-        setActiveAccordion(activeAccordion === index ? -1 : index);
-    };
-
-    const mediaElement = (
-        <div
-            ref={mediaContainerRef}
-            className={cls(
-                "w-full md:w-1/2 h-[50svh] md:h-auto card rounded-theme-capped overflow-hidden",
-                mediaWrapperClassName
-            )}
-        >
-            <MediaContent
-                imageSrc={imageSrc}
-                videoSrc={videoSrc}
-                imageAlt={imageAlt}
-                videoAriaLabel={videoAriaLabel}
-                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
-            />
+  return (
+    <section className="w-full py-12 md:py-20 lg:py-24">
+      <div className="container mx-auto px-4 md:px-6">
+        {/* Header Section */}
+        <div className="mb-12 md:mb-16 text-center">
+          <div className="inline-flex items-center gap-2 mb-4 px-4 py-2 bg-blue-50 rounded-full">
+            <TagIcon className="w-4 h-4 text-blue-600" />
+            <span className="text-sm font-semibold text-blue-600">{tag}</span>
+          </div>
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
+            {title}
+          </h2>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            {description}
+          </p>
         </div>
-    );
 
-    const contentElement = (
-        <div className={cls(
-            "w-full md:w-1/2 flex flex-col",
-            contentClassName
-        )}>
-            {/* Mobile */}
-            <TextBox
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                useInvertedBackground={useInvertedBackground}
-                className={cls("flex flex-col gap-1 md:hidden", textBoxClassName)}
-                titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
-                descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
-                tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
-                buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={cls("text-base", buttonTextClassName)}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                center={true}
-            />
-            {/* Desktop */}
-            <TextBox
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                useInvertedBackground={useInvertedBackground}
-                className={cls("hidden md:flex flex-col gap-1", textBoxClassName)}
-                titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
-                descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
-                tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
-                buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={cls("text-base", buttonTextClassName)}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                center={false}
-            />
+        {/* Flip Cards Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          {accordionItems.map((item) => (
+            <div
+              key={item.id}
+              className="h-80 cursor-pointer perspective"
+              onClick={() => toggleFlip(item.id)}
+            >
+              <div
+                className="relative w-full h-full transition-transform duration-500 transform-gpu"
+                style={{
+                  transformStyle: "preserve-3d",
+                  transform: flipped[item.id]
+                    ? "rotateY(180deg)"
+                    : "rotateY(0deg)",
+                }}
+              >
+                {/* Front Side */}
+                <div
+                  className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
+                  style={{
+                    backfaceVisibility: "hidden",
+                  }}
+                >
+                  <div>
+                    <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
+                      {item.title}
+                    </h3>
+                    <p className="text-gray-500 text-sm">
+                      Click to read more
+                    </p>
+                  </div>
+                  <div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg">
+                    <span className="text-blue-600 font-bold text-lg">
+                      {item.id}
+                    </span>
+                  </div>
+                </div>
 
-            <div className={cls(
-                "flex flex-col mt-8 divide-y divide-accent/20 border-y border-accent/20",
-                accordionContainerClassName
-            )}>
-                {accordionItems.map((item, index) => (
-                    <Accordion
-                        key={item.id}
-                        index={index}
-                        isActive={activeAccordion === index}
-                        onToggle={handleAccordionToggle}
-                        title={item.title}
-                        content={item.content}
-                        showCard={false}
-                        useInvertedBackground={!useInvertedBackground ? undefined : useInvertedBackground}
-                        className={cls("py-4 md:py-6", accordionClassName)}
-                        titleClassName={cls("text-xl md:text-2xl", accordionTitleClassName)}
-                        contentClassName={accordionContentClassName}
-                        iconContainerClassName={accordionIconContainerClassName}
-                        iconClassName={accordionIconClassName}
-                    />
-                ))}
+                {/* Back Side */}
+                <div
+                  className="absolute w-full h-full bg-blue-600 rounded-lg shadow-lg p-6 flex flex-col justify-between border border-blue-700"
+                  style={{
+                    backfaceVisibility: "hidden",
+                    transform: "rotateY(180deg)",
+                  }}
+                >
+                  <div>
+                    <h3 className="text-xl md:text-2xl font-bold text-white mb-4">
+                      {item.title}
+                    </h3>
+                    <p className="text-blue-50 text-sm leading-relaxed">
+                      {item.content}
+                    </p>
+                  </div>
+                  <p className="text-blue-200 text-xs text-center">
+                    Click to flip back
+                  </p>
+                </div>
+              </div>
             </div>
+          ))}
         </div>
-    );
-
-    return (
-        <section
-            aria-label={ariaLabel}
-            className={cls("relative w-full py-20", useInvertedBackground && "bg-foreground", className)}
-        >
-            <div className={cls(
-                "w-content-width mx-auto flex flex-col md:flex-row gap-8 md:gap-15",
-                containerClassName
-            )}>
-                {mediaPosition === "left" ? (
-                    <>
-                        {mediaElement}
-                        {contentElement}
-                    </>
-                ) : (
-                    <>
-                        {contentElement}
-                        {mediaElement}
-                    </>
-                )}
-            </div>
-        </section>
-    );
-};
-
-FeatureCardTwentyOne.displayName = "FeatureCardTwentyOne";
-
-export default FeatureCardTwentyOne;
+      </div>
+    </section>
+  );
+}