Update src/components/sections/about/AboutMetric.tsx

src/components/sections/about/AboutMetric.tsx

@@ -1,11 +1,7 @@
-"use client";
+'use client';
 
-import TextAnimation from "@/components/text/TextAnimation";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonAnimationType } from "@/types/button";
+import React, { useState } from 'react';
+import { LucideIcon } from 'lucide-react';
 
 interface Metric {
   icon: LucideIcon;
@@ -16,81 +12,99 @@ interface Metric {
 interface AboutMetricProps {
   title: string;
   metrics: Metric[];
-    metricsAnimation: ButtonAnimationType;
-    useInvertedBackground: boolean;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    titleClassName?: string;
-    metricsContainerClassName?: string;
-    metricCardClassName?: string;
-    metricIconClassName?: string;
-    metricLabelClassName?: string;
-    metricValueClassName?: string;
+  metricsAnimation?: string;
+  useInvertedBackground?: boolean;
 }
 
-const AboutMetric = ({
+export default function AboutMetric({
   title,
   metrics,
-    metricsAnimation,
-    useInvertedBackground,
-    ariaLabel = "About metrics section",
-    className = "",
-    containerClassName = "",
-    titleClassName = "",
-    metricsContainerClassName = "",
-    metricCardClassName = "",
-    metricIconClassName = "",
-    metricLabelClassName = "",
-    metricValueClassName = "",
-}: AboutMetricProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-    const { containerRef: metricsContainerRef } = useButtonAnimation({ animationType: metricsAnimation });
+  metricsAnimation = 'slide-up',
+  useInvertedBackground = false,
+}: AboutMetricProps) {
+  const [flipped, setFlipped] = useState<{ [key: number]: boolean }>({});
 
-    const gridColsMap = {
-        2: "md:grid-cols-2",
-        3: "md:grid-cols-3",
-        4: "md:grid-cols-4",
+  const toggleFlip = (index: number) => {
+    setFlipped((prev) => ({
+      ...prev,
+      [index]: !prev[index],
+    }));
+  };
+
+  const bgClass = useInvertedBackground ? 'bg-slate-900' : 'bg-white';
+  const textClass = useInvertedBackground ? 'text-white' : 'text-slate-900';
+
+  const getAnimationDelay = (index: number) => {
+    if (metricsAnimation === 'slide-up') {
+      return {
+        transitionDelay: `${index * 100}ms`,
+      };
+    }
+    return {};
   };
-    const gridCols = gridColsMap[metrics.length as keyof typeof gridColsMap] || "md:grid-cols-4";
 
   return (
-        <section
-            aria-label={ariaLabel}
-            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
-        >
-            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
-                <TextAnimation
-                    type={theme.defaultTextAnimation}
-                    text={title}
-                    variant="words-trigger"
-                    className={cls("text-2xl md:text-5xl font-medium leading-[1.175]", useInvertedBackground && "text-background", titleClassName)}
-                />
+    <section className={`${bgClass} py-16 px-4 sm:px-6 lg:px-8`}>
+      <div className="max-w-6xl mx-auto">
+        <div className="mb-12">
+          <h2 className={`text-3xl sm:text-4xl font-bold ${textClass} text-center`}>
+            {title}
+          </h2>
+        </div>
 
-                <div ref={metricsContainerRef} className={cls("grid grid-cols-1 gap-6", gridCols, metricsContainerClassName)}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
           {metrics.map((metric, index) => {
             const Icon = metric.icon;
+            const isFlipped = flipped[index] || false;
+
             return (
               <div
                 key={index}
-                                className={cls(
-                                    "h-fit card rounded-theme-capped px-6 py-8 md:py-10 flex flex-col items-center justify-center gap-3",
-                                    metricCardClassName
-                                )}
+                className="h-64 cursor-pointer perspective"
+                onClick={() => toggleFlip(index)}
+                style={getAnimationDelay(index)}
               >
-                                <div className="relative z-1 w-full flex items-center justify-center gap-2">
-                                    <div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", metricIconClassName)}>
-                                        <Icon className="h-4/10 text-primary-cta-text" strokeWidth={1.5} />
-                                    </div>
-                                    <h3 className={cls("text-xl truncate", shouldUseLightText && "text-background", metricLabelClassName)}>
+                <div
+                  className="relative w-full h-full transition-transform duration-500 transform-gpu"
+                  style={{
+                    transformStyle: 'preserve-3d',
+                    transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
+                  }}
+                >
+                  {/* Front Side */}
+                  <div
+                    className={`absolute w-full h-full ${bgClass} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
+                    style={{
+                      backfaceVisibility: 'hidden',
+                    }}
+                  >
+                    <Icon className={`w-12 h-12 ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'} mb-4`} />
+                    <p className={`text-sm font-semibold ${textClass} text-center mb-2`}>
                       {metric.label}
-                                    </h3>
-                                </div>
-                                <div className="relative z-1 w-full flex items-center justify-center">
-                                    <h4 className={cls("text-6xl font-medium truncate", shouldUseLightText && "text-background", metricValueClassName)}>
+                    </p>
+                    <p className={`text-3xl font-bold ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'}`}>
                       {metric.value}
-                                    </h4>
+                    </p>
+                    <p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
+                      Click to learn more
+                    </p>
+                  </div>
+
+                  {/* Back Side */}
+                  <div
+                    className={`absolute w-full h-full ${useInvertedBackground ? 'bg-slate-800' : 'bg-slate-100'} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
+                    style={{
+                      backfaceVisibility: 'hidden',
+                      transform: 'rotateY(180deg)',
+                    }}
+                  >
+                    <p className={`text-sm ${textClass} text-center leading-relaxed`}>
+                      {metric.label}: {metric.value} represents our commitment to excellence and continuous growth in this area.
+                    </p>
+                    <p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
+                      Click to flip back
+                    </p>
+                  </div>
                 </div>
               </div>
             );
@@ -99,8 +113,4 @@ const AboutMetric = ({
       </div>
     </section>
   );
-};
-
-AboutMetric.displayName = "AboutMetric";
-
-export default AboutMetric;
+}