import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { H as t, T as a, ax as o } from "../index-sdOMz8GW.js";
import { Compass as n, CheckCircle as l, Minimize2 as r, Layers as c, Eye as m } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => /* @__PURE__ */ s("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
  /* @__PURE__ */ e(
    t,
    {
      title: "Design Principles",
      description: "Core principles that guide our design decisions and ensure consistency.",
      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-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ s("section", { className: "space-y-8", children: [
    /* @__PURE__ */ s("div", { className: "text-center", children: [
      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Core Principles" }),
      /* @__PURE__ */ e(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "The foundational values behind every design decision"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
      {
        title: "Consistency",
        description: "Unified visual language and interaction patterns across all components.",
        icon: /* @__PURE__ */ e(l, { className: "h-6 w-6" }),
        iconBgClassName: "from-emerald-500 via-green-500 to-teal-500"
      },
      {
        title: "Simplicity",
        description: "Clean, intuitive interfaces that reduce cognitive load.",
        icon: /* @__PURE__ */ e(r, { className: "h-6 w-6" }),
        iconBgClassName: "from-blue-500 via-cyan-500 to-sky-500"
      },
      {
        title: "Flexibility",
        description: "Adaptable components that work across different contexts.",
        icon: /* @__PURE__ */ e(c, { className: "h-6 w-6" }),
        iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
      },
      {
        title: "Accessibility",
        description: "Inclusive design that works for everyone.",
        icon: /* @__PURE__ */ e(m, { className: "h-6 w-6" }),
        iconBgClassName: "from-orange-500 via-amber-500 to-yellow-500"
      }
    ].map((i) => /* @__PURE__ */ e(
      o,
      {
        layout: "horizontal",
        title: i.title,
        description: i.description,
        icon: i.icon,
        iconBgClassName: i.iconBgClassName
      },
      i.title
    )) })
  ] })
] });
export {
  x as default
};
