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

src/components/sections/feature/FeatureCardOne.tsx

@@ -1,171 +1,54 @@
-"use client";
+import React from 'react';
+import { Rocket, Shield, Zap } from 'lucide-react';
 
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import Button from "@/components/button/Button";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type FeatureCard = {
-  title: string;
-  description: string;
-  button?: ButtonConfig;
-} & (
-    | {
-      imageSrc: string;
-      imageAlt?: string;
-      videoSrc?: never;
-      videoAriaLabel?: never;
+const FeatureCardOne = () => {
+  const features = [
+    {
+      icon: <Rocket className="w-8 h-8 text-blue-600" />,
+      title: 'Fast Performance',
+      description: 'Optimized for speed and performance with modern web standards.'
+    },
+    {
+      icon: <Shield className="w-8 h-8 text-green-600" />,
+      title: 'Secure by Default',
+      description: 'Built with security best practices and regular updates.'
+    },
+    {
+      icon: <Zap className="w-8 h-8 text-yellow-600" />,
+      title: 'Easy to Use',
+      description: 'Simple API and comprehensive documentation for quick setup.'
     }
-    | {
-      videoSrc: string;
-      videoAriaLabel?: string;
-      imageSrc?: never;
-      imageAlt?: never;
-    }
-  );
-
-interface FeatureCardOneProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: GridVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  buttons?: ButtonConfig[];
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardButtonClassName?: string;
-  cardButtonTextClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-}
-
-const FeatureCardOne = ({
-  features,
-  carouselMode = "buttons",
-  gridVariant,
-  uniformGridCustomHeightClasses,
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  buttons,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  mediaClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  cardButtonClassName = "",
-  cardButtonTextClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureCardOneProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  ];
 
   return (
-    <CardStack
-      mode={carouselMode}
-      gridVariant={gridVariant}
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-      animationType={animationType}
-      
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      buttons={buttons}
-      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}
-    >
-      {features.map((feature, index) => (
-        <div
-          key={`${feature.title}-${index}`}
-          className={cls("card flex flex-col gap-4 p-4 rounded-theme-capped min-h-0 h-full", cardClassName)}
-        >
-          <MediaContent
-            imageSrc={feature.imageSrc}
-            videoSrc={feature.videoSrc}
-            imageAlt={feature.imageAlt || "Feature image"}
-            videoAriaLabel={feature.videoAriaLabel || "Feature video"}
-            imageClassName={cls("relative z-1 min-h-0 h-full", mediaClassName)}
-          />
-          <div className="relative z-1 flex flex-col gap-1">
-            <h3 className={cls("text-2xl font-medium", shouldUseLightText && "text-background", cardTitleClassName)}>
-              {feature.title}
-            </h3>
-            <p className={cls("text-sm leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
-              {feature.description}
-            </p>
-          </div>
-          {feature.button && (
-            <Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("w-full", cardButtonClassName), cardButtonTextClassName)} />
-          )}
+    <section className="py-20 bg-white dark:bg-gray-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            Why Choose Our Components?
+          </h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+            Everything you need to build modern web applications.
+          </p>
         </div>
-      ))}
-    </CardStack>
+        <div className="grid md:grid-cols-3 gap-8">
+          {features.map((feature, index) => (
+            <div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl text-center">
+              <div className="flex justify-center mb-4">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+                {feature.title}
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
   );
 };
 
-FeatureCardOne.displayName = "FeatureCardOne";
-
-export default FeatureCardOne;
+export default FeatureCardOne;