"use client";
import React, { useState, useEffect } from "react";
import { motion, animate } from "framer-motion";
import { ArrowUpRight } from "lucide-react";
function Counter({ value, suffix = "%", duration = 2 }: { value: number; suffix?: string; duration?: number }) {
const [displayValue, setDisplayValue] = useState(0);
useEffect(() => {
const controls = animate(0, value, {
duration: duration,
onUpdate: (latest: number) => setDisplayValue(Math.round(latest)),
ease: "easeOut" as const,
});
return () => controls.stop();
}, [value, duration]);
return {displayValue}{suffix};
}
interface FeatureCardProps {
brandName: string;
description: string;
percentage: number;
statLabel: string;
suffix?: string;
bgColor: string;
delay?: number;
}
function FeatureCard({
brandName,
description,
percentage,
statLabel,
suffix = "%",
bgColor,
delay = 0,
}: FeatureCardProps) {
return (
{brandName}
{description}
);
}
export default function MetricsWithLogo01Finsyc({ className }: { className?: string }) {
const [isHovered, setIsHovered] = useState(false);
return (
<>
{/* Header Row */}
AGNET infrastructure for scaling rural growth
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
animate={{
paddingLeft: isHovered ? 8 : 20,
paddingRight: isHovered ? 20 : 8,
}}
transition={{
duration: 0.5,
ease: [0.22, 1, 0.36, 1] as const,
opacity: { duration: 0.8 },
x: { duration: 0.8 },
}}
whileTap={{ scale: 0.98 }}
className="flex items-center h-[56px] min-w-fit w-max bg-[#042718] rounded-full group cursor-pointer transition-colors duration-300 hover:bg-[#063b25] overflow-hidden gap-[12px]"
>
View pilot model
{/* Cards Grid */}
);
}