import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
import { H as r, T as a, ax as n, C as l } from "../index-sdOMz8GW.js";
import { Zap as o, Library as d, Palette as m, TreeDeciduous as h, Paintbrush as p, Moon as u, Code2 as y } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const k = () => /* @__PURE__ */ t(c, { children: [
  /* @__PURE__ */ e(
    r,
    {
      title: "System Benefits",
      description: "Why the tucu-ui icon system gives you a great developer experience — performance, flexibility, and consistency in one package.",
      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Benefits" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "What makes the tucu-ui icon system stand out"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
      {
        title: "1500+ Lucide Icons",
        description: "Full access to the Lucide React library through a single namespace. Covers virtually every UI need without searching for third-party packs.",
        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6" })
      },
      {
        title: "96 Custom Domain Icons",
        description: "Hand-crafted SVG icons for crypto, layouts, brands, and UI patterns not available in Lucide.",
        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6" })
      },
      {
        title: "Tree-Shakeable Lucide",
        description: "lucide-react is marked as external — your bundler only includes the icons you actually reference, keeping bundle size minimal.",
        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6" })
      },
      {
        title: "Tailwind Native",
        description: "Size with w-*/h-*, color with text-*, opacity, transitions — icons behave like any Tailwind element.",
        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6" })
      },
      {
        title: "Dark Mode Ready",
        description: "Icons inherit color via currentColor. Use dark: variants on the parent and icons adapt automatically.",
        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6" })
      },
      {
        title: "TypeScript Support",
        description: "Full type inference for both icon systems. LucideIcons namespace provides autocomplete for all icon names.",
        icon: /* @__PURE__ */ e(y, { className: "w-6 h-6" })
      }
    ].map((i, s) => /* @__PURE__ */ e(
      n,
      {
        title: i.title,
        description: i.description,
        icon: i.icon
      },
      s
    )) })
  ] }),
  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
    /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Summary" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "The icon system at a glance"
        }
      )
    ] }),
    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-6 text-center", children: [
      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(a, { tag: "h3", className: "text-3xl font-bold text-brand", children: "1500+" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Lucide icons via namespace"
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(a, { tag: "h3", className: "text-3xl font-bold text-brand", children: "96" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Custom domain icons"
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
        /* @__PURE__ */ e(a, { tag: "h3", className: "text-3xl font-bold text-brand", children: "0kb" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400",
            children: "Unused Lucide icons in bundle"
          }
        )
      ] })
    ] }) }) })
  ] })
] });
export {
  k as default
};
