57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { MaterialIcon } from "./MaterialIcon";
|
|
import { fadeUp, staggerContainer, viewport } from "@/lib/animations";
|
|
|
|
type FeatureStatsItem = {
|
|
icon: string;
|
|
title: string;
|
|
desc?: string;
|
|
};
|
|
|
|
type FeatureStatsRowProps = {
|
|
items: FeatureStatsItem[];
|
|
className?: string;
|
|
};
|
|
|
|
export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
|
|
return (
|
|
<motion.div
|
|
className={`w-full py-6 md:py-8 ${className}`}
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
<div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-y-6 gap-x-4 lg:gap-0">
|
|
{items.map((item, index) => (
|
|
<motion.div
|
|
key={item.title}
|
|
variants={fadeUp}
|
|
className={`flex items-center gap-3.5 lg:flex-1 px-3 lg:px-8 text-left ${
|
|
index < items.length - 1
|
|
? "lg:border-r lg:border-[#6330D6]/10"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="w-9 h-9 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
|
|
<MaterialIcon icon={item.icon} size={18} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight truncate">
|
|
{item.title}
|
|
</h4>
|
|
{item.desc && (
|
|
<p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-tight truncate">
|
|
{item.desc}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|