update redesign

src/components/ui/FeatureStatsRow.tsx

@@ -0,0 +1,45 @@
+import { MaterialIcon } from "./MaterialIcon";
+
+type FeatureStatsItem = {
+  icon: string;
+  title: string;
+  desc?: string;
+};
+
+type FeatureStatsRowProps = {
+  items: FeatureStatsItem[];
+  className?: string;
+};
+
+export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
+  return (
+    <div className={`w-full py-6 md:py-8 ${className}`}>
+      <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) => (
+          <div
+            key={item.title}
+            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>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}