From 923d537aeb7888760c6da8a35654d562ff492cff Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Tue, 20 Jan 2026 15:22:39 +0000
Subject: [PATCH] Update src/components/sections/feature/FeatureCardOne.tsx

---
 .../sections/feature/FeatureCardOne.tsx       | 219 +++++-------------
 1 file changed, 55 insertions(+), 164 deletions(-)

diff --git a/src/components/sections/feature/FeatureCardOne.tsx b/src/components/sections/feature/FeatureCardOne.tsx
index 732a6be..a468a05 100644
--- a/src/components/sections/feature/FeatureCardOne.tsx
+++ b/src/components/sections/feature/FeatureCardOne.tsx
@@ -1,171 +1,62 @@
-"use client";
+import React from 'react';
+import { Zap, Shield, Rocket, Users } 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;
-    }
-    | {
-      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);
+const features = [
+  {
+    icon: <Zap className="h-8 w-8" />,
+    title: "Lightning Fast",    description: "Experience blazing fast performance with our optimized architecture and cutting-edge technology."
+  },
+  {
+    icon: <Shield className="h-8 w-8" />,
+    title: "Secure & Reliable",    description: "Your data is protected with enterprise-grade security measures and 99.9% uptime guarantee."
+  },
+  {
+    icon: <Rocket className="h-8 w-8" />,
+    title: "Scale with Ease",    description: "Grow your business without limits. Our platform scales automatically to meet your needs."
+  },
+  {
+    icon: <Users className="h-8 w-8" />,
+    title: "Team Collaboration",    description: "Work together seamlessly with real-time collaboration tools and shared workspaces."
+  }
+];
 
+const FeatureCardOne: React.FC = () => {
   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-24 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            Why Choose Our Platform?
+          </h2>
+          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+            Discover the features that make us the preferred choice for thousands of businesses worldwide.
+          </p>
         </div>
-      ))}
-    </CardStack>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {features.map((feature, index) => (
+            <div key={index} className="group">
+              <div className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100 hover:border-blue-200">
+                <div className="flex items-center justify-center w-16 h-16 bg-blue-100 rounded-xl mb-6 group-hover:bg-blue-200 transition-colors duration-300">
+                  <div className="text-blue-600">
+                    {feature.icon}
+                  </div>
+                </div>
+                
+                <h3 className="text-xl font-semibold text-gray-900 mb-4">
+                  {feature.title}
+                </h3>
+                
+                <p className="text-gray-600 leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
   );
 };
 
-FeatureCardOne.displayName = "FeatureCardOne";
-
-export default FeatureCardOne;
+export default FeatureCardOne;
\ No newline at end of file