import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
import { H as l, T as a, C as m } from "../index-sdOMz8GW.js";
import { Star as c, CheckCircle as d, ArrowRight as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => /* @__PURE__ */ t(n, { children: [
  /* @__PURE__ */ e(
    l,
    {
      title: "Best Practices",
      description: "Guidelines for optimal layout system implementation and common patterns.",
      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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { 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("div", { className: "text-center", children: [
    /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Best Practices" }),
    /* @__PURE__ */ e(
      a,
      {
        tag: "p",
        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
        children: "Guidelines for optimal layout system implementation"
      }
    )
  ] }),
  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
    {
      category: "Layout Selection",
      items: [
        "Admin: Use for complex applications with many navigation items and sidebar menus",
        "Horizontal: Use for content-focused sites and simple applications with top navigation",
        "Clean: Use for authentication flows, landing pages, and standalone content"
      ]
    },
    {
      category: "ThemeProvider Setup",
      items: [
        "Always wrap your application with ThemeProvider before using layouts",
        "Provide menuItems prop for Admin and Horizontal layouts",
        "Use layout prop to control which layout is rendered",
        "Theme settings are automatically persisted to localStorage"
      ]
    },
    {
      category: "Responsive Design",
      items: [
        "Always test layouts on mobile devices",
        "Use provided breakpoint system for responsive behavior",
        "Consider touch interactions for mobile navigation",
        "Admin layout automatically shows drawer on mobile"
      ]
    },
    {
      category: "Accessibility",
      items: [
        "Provide meaningful menu item names",
        "Use semantic HTML structure",
        "Test keyboard navigation",
        "Ensure proper color contrast in all themes",
        "Support RTL/LTR for international users"
      ]
    }
  ].map((s, i) => /* @__PURE__ */ e(
    m,
    {
      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
      children: /* @__PURE__ */ t("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-md", children: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-lg", children: s.category })
        ] }),
        /* @__PURE__ */ e("ul", { className: "space-y-2", children: s.items.map((r, o) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
          /* @__PURE__ */ e(p, { className: "w-4 h-4 text-primary mt-0.5 shrink-0" }),
          /* @__PURE__ */ e(
            a,
            {
              tag: "span",
              className: "text-sm text-gray-600 dark:text-gray-400",
              children: r
            }
          )
        ] }, o)) })
      ] })
    },
    i
  )) })
] });
export {
  x as default
};
