From d43927ce2914bb0978f1616ea2fc0d2d0c5dadfa Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 19:53:54 +0000
Subject: [PATCH] Update src/components/sections/pricing/PricingCardEight.tsx

---
 .../sections/pricing/PricingCardEight.tsx     | 291 ++++--------------
 1 file changed, 58 insertions(+), 233 deletions(-)

diff --git a/src/components/sections/pricing/PricingCardEight.tsx b/src/components/sections/pricing/PricingCardEight.tsx
index 5c00d72..02a57c9 100644
--- a/src/components/sections/pricing/PricingCardEight.tsx
+++ b/src/components/sections/pricing/PricingCardEight.tsx
@@ -1,248 +1,73 @@
 "use client";
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import Button from "@/components/button/Button";
-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 = {
-    id: string;
-    badge: string;
-    badgeIcon?: LucideIcon;
-    price: string;
-    subtitle: string;
-    buttons: ButtonConfig[];
-    features: string[];
-};
+import React from 'react';
 
 interface PricingCardEightProps {
-    plans: PricingPlan[];
-    carouselMode?: "auto" | "buttons";
-    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;
+  plans: Array<{
+    id: string;
+    badge: string;
+    badgeIcon?: React.ComponentType<any>;
+    price: string;
+    subtitle: string;
+    buttons: Array<{ text: string; onClick?: () => void; href?: string }>;
+    features: string[];
+  }>;
+  animationType?: string;
+  title?: string;
+  description?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
 }
 
-interface PricingCardItemProps {
-    plan: PricingPlan;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    subtitleClassName?: string;
-    planButtonContainerClassName?: string;
-    planButtonClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-}
+const PricingCardEight: React.FC<PricingCardEightProps> = ({
+  plans,
+  title,
+  description,
+  useInvertedBackground = false,
+}) => {
+  return (
+    <div className={`w-full py-20 px-4 ${useInvertedBackground ? 'bg-background-accent' : ''}`}>
+      <div className="max-w-6xl mx-auto">
+        {title && <h2 className="text-4xl font-bold mb-4">{title}</h2>}
+        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
 
-const PricingCardItem = memo(({
-    plan,
-    shouldUseLightText,
-    cardClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    subtitleClassName = "",
-    planButtonContainerClassName = "",
-    planButtonClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-}: PricingCardItemProps) => {
-    const theme = useTheme();
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {plans.map((plan) => (
+            <div key={plan.id} className="bg-card rounded-lg p-8 border border-card/50">
+              <div className="flex items-center gap-2 mb-4">
+                {plan.badgeIcon && <plan.badgeIcon className="w-4 h-4" />}
+                <span className="text-sm font-semibold text-primary-cta">{plan.badge}</span>
+              </div>
 
-    const getButtonConfigProps = () => {
-        if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
-        }
-        if (theme.defaultButtonVariant === "icon-arrow") {
-            return { className: "justify-between" };
-        }
-        return {};
-    };
+              <h3 className="text-2xl font-bold mb-2">{plan.price}</h3>
+              <p className="text-foreground/70 mb-6">{plan.subtitle}</p>
 
-    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="space-y-3 mb-8">
+                {plan.buttons.map((btn, idx) => (
+                  <button
+                    key={idx}
+                    onClick={btn.onClick}
+                    className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+                  >
+                    {btn.text}
+                  </button>
+                ))}
+              </div>
 
-                <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}
-                />
+              <ul className="space-y-2">
+                {plan.features.map((feature, idx) => (
+                  <li key={idx} className="text-sm text-foreground/70 flex items-start gap-2">
+                    <span className="text-primary-cta mt-1">✓</span>
+                    {feature}
+                  </li>
+                ))}
+              </ul>
             </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>
-    );
+      </div>
+    </div>
+  );
 };
 
-PricingCardEight.displayName = "PricingCardEight";
-
 export default PricingCardEight;