Modern Feature Grid

import React from "react";
import FeatureGrid from "@/components/ui/modern-feature-grid";
import {
  Zap,
  ShieldCheck,
  Rocket,
  BarChart3,
  Layers,
  Globe,
} from "lucide-react";

const settings = {
  sectionTitle: "Everything you need to ship faster",
  sectionDescription:
    "A complete toolkit designed to help you build, launch, and scale with confidence.",
};

const icons = [Zap, ShieldCheck, Rocket, BarChart3, Layers, Globe];

const featureContent = [
  {
    title: "Lightning Fast",
    description:
      "Optimized performance that keeps your workflow moving without delays.",
  },
  {
    title: "Secure by Default",
    description:
      "Enterprise-grade security baked in so your data stays protected.",
  },
  {
    title: "Easy to Launch",
    description:
      "Go from idea to production in minutes with a streamlined setup.",
  },
  {
    title: "Actionable Insights",
    description: "Real-time analytics that help you make smarter decisions.",
  },
  {
    title: "Modular Design",
    description: "Compose your stack with reusable, flexible building blocks.",
  },
  {
    title: "Global Scale",
    description:
      "Reach users everywhere with a fast, worldwide infrastructure.",
  },
];

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const features = featureContent.map((f, i) => ({ ...f, Icon: icons[i] }));

  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <FeatureGrid
        sectionTitle={s.sectionTitle}
        sectionDescription={s.sectionDescription}
        features={features}
      />
    </div>
  );
}