@axzydev/axzy_ui_system 1.2.9 → 1.2.12

package/src/components/theme-provider/themeProvider.props.ts

@@ -1,31 +1,49 @@
 export interface ITThemePalette {
+  /** Main brand accent color (hex). Drives primary buttons, active nav items, focus rings, links, and the `--color-primary` CSS variable. @default "#06b6d4" */
   primary: string;
+  /** Secondary/neutral accent color (hex). Used for less prominent actions and secondary badges/buttons. @default "#6b7280" */
   secondary: string;
+  /** Tertiary accent color (hex), used for a third level of emphasis (e.g. alternate badges, chart accents). @default "#8b5cf6" */
   ternary: string;
+  /** Semantic color for destructive/error states (hex): delete buttons, error badges, invalid form fields. @default "#ef4444" */
   danger: string;
+  /** Semantic color for success/confirmation states (hex): success badges, completed steps, positive stats. @default "#22c55e" */
   success: string;
+  /** Semantic color for informational states (hex): info banners/badges, neutral notices. @default "#3b82f6" */
   info: string;
+  /** Semantic color for alert/caution states (hex), distinct from `warning`. Used by components that need a stronger visual cue than warning. @default "#f97316" */
   alert: string;
+  /** Semantic color for warning states (hex): warning badges/banners, pending states. @default "#eab308" */
   warning: string;
+  /** Colors for the app shell's sidebar and top navbar (ITSidebar, ITNavbar, ITTopbar, ITLayout). */
   layout: {
+    /** Background color of the sidebar (hex). @default "#ffffff" */
     sidebarBg: string;
+    /** Text/icon color used on the sidebar. @default "#334155" */
     sidebarText: string;
+    /** Background color of the top navigation bar (hex). @default "#ffffff" */
     navbarBg: string;
+    /** Text/icon color used on the top navigation bar. @default "#1e293b" */
     navbarText: string;
   };
+  /** Colors for ITTable/ITDataTable/ITSearchTable header and rows. */
   table: {
+    /** Background color of the table header row (hex). @default "#f8fafc" */
     headerBg: string;
+    /** Text color of the table header row. @default "#334155" */
     headerText: string;
+    /** Background color of table body rows (hex). @default "#ffffff" */
     rowBg: string;
+    /** Text color of table body rows. @default "#1e293b" */
     rowText: string;
   };
 }
 
 export interface ITThemeProviderProps {
-  /** Partial palette overrides merged with the default theme. Supports primary, secondary, tertiary, danger, success, info, alert, warning, layout, and table colors. */
+  /** Partial palette overrides merged (deep merge) with the default theme. Supports primary, secondary, ternary, danger, success, info, alert, warning, layout, and table colors. Persisted to `localStorage` under `"it-theme-palette"` once the user edits it via the FAB/drawer. */
   theme?: Partial<ITThemePalette>;
-  /** The subtree that receives the theme context and CSS variables. */
+  /** The subtree that receives the theme context and CSS variables. Must wrap your entire app (or the portion that uses AXZY UI System components) once, near the root. */
   children: React.ReactNode;
-  /** Whether to show the floating action button for opening the theme designer drawer. */
+  /** Whether to render the floating action button (bottom-right) that opens the live theme-designer drawer, letting end users tweak colors and persist their choice. Set to `false` to hide the FAB in production and only theme via the `theme` prop. @default true */
   showFab?: boolean;
 }

package/src/components/theme-provider/themeProvider.tsx

@@ -799,23 +799,23 @@ export default function ITThemeProvider({
         color: #cbd5e1;
       }
       .dark .text-slate-800, [data-theme="dark"] .text-slate-800,
-      .dark .text-gray-800, [data-theme="dark"] .text-gray-800 {
+      .dark .text-secondary-800, [data-theme="dark"] .text-secondary-800 {
         color: #f8fafc !important;
       }
       .dark .text-slate-700, [data-theme="dark"] .text-slate-700,
-      .dark .text-gray-700, [data-theme="dark"] .text-gray-700 {
+      .dark .text-secondary-700, [data-theme="dark"] .text-secondary-700 {
         color: #cbd5e1 !important;
       }
       .dark .text-slate-600, [data-theme="dark"] .text-slate-600,
-      .dark .text-gray-600, [data-theme="dark"] .text-gray-600 {
+      .dark .text-secondary-600, [data-theme="dark"] .text-secondary-600 {
         color: #cbd5e1 !important;
       }
       .dark .text-slate-500, [data-theme="dark"] .text-slate-500,
-      .dark .text-gray-500, [data-theme="dark"] .text-gray-500 {
+      .dark .text-secondary-500, [data-theme="dark"] .text-secondary-500 {
         color: #94a3b8 !important;
       }
       .dark .text-slate-400, [data-theme="dark"] .text-slate-400,
-      .dark .text-gray-400, [data-theme="dark"] .text-gray-400 {
+      .dark .text-secondary-400, [data-theme="dark"] .text-secondary-400 {
         color: #64748b !important;
       }
 
@@ -823,25 +823,25 @@ export default function ITThemeProvider({
         background-color: var(--card-bg, #111827) !important;
       }
       .dark .bg-slate-50, [data-theme="dark"] .bg-slate-50,
-      .dark .bg-gray-50, [data-theme="dark"] .bg-gray-50 {
+      .dark .bg-secondary-50, [data-theme="dark"] .bg-secondary-50 {
         background-color: #1f2937 !important;
       }
       .dark .border-slate-100, [data-theme="dark"] .border-slate-100,
-      .dark .border-gray-100, [data-theme="dark"] .border-gray-100,
+      .dark .border-secondary-100, [data-theme="dark"] .border-secondary-100,
       .dark .border-slate-200, [data-theme="dark"] .border-slate-200,
-      .dark .border-gray-200, [data-theme="dark"] .border-gray-200 {
+      .dark .border-secondary-200, [data-theme="dark"] .border-secondary-200 {
         border-color: #374151 !important;
       }
 
-      .dark .bg-gray-100, [data-theme="dark"] .bg-gray-100,
+      .dark .bg-secondary-100, [data-theme="dark"] .bg-secondary-100,
       .dark .bg-slate-100, [data-theme="dark"] .bg-slate-100 {
         background-color: #1f2937 !important;
       }
-      .dark .border-gray-300, [data-theme="dark"] .border-gray-300,
+      .dark .border-secondary-300, [data-theme="dark"] .border-secondary-300,
       .dark .border-slate-300, [data-theme="dark"] .border-slate-300 {
         border-color: #4b5563 !important;
       }
-      .dark .bg-gray-200, [data-theme="dark"] .bg-gray-200,
+      .dark .bg-secondary-200, [data-theme="dark"] .bg-secondary-200,
       .dark .bg-slate-200, [data-theme="dark"] .bg-slate-200 {
         background-color: #374151 !important;
       }
@@ -909,23 +909,23 @@ export default function ITThemeProvider({
       }
 
       [data-theme="light"] .text-slate-800,
-      [data-theme="light"] .text-gray-800 {
+      [data-theme="light"] .text-secondary-800 {
         color: #1e293b !important;
       }
       [data-theme="light"] .text-slate-700,
-      [data-theme="light"] .text-gray-700 {
+      [data-theme="light"] .text-secondary-700 {
         color: #334155 !important;
       }
       [data-theme="light"] .text-slate-600,
-      [data-theme="light"] .text-gray-600 {
+      [data-theme="light"] .text-secondary-600 {
         color: #475569 !important;
       }
       [data-theme="light"] .text-slate-500,
-      [data-theme="light"] .text-gray-500 {
+      [data-theme="light"] .text-secondary-500 {
         color: #64748b !important;
       }
       [data-theme="light"] .text-slate-400,
-      [data-theme="light"] .text-gray-400 {
+      [data-theme="light"] .text-secondary-400 {
         color: #94a3b8 !important;
       }
 
@@ -933,24 +933,24 @@ export default function ITThemeProvider({
         background-color: #ffffff !important;
       }
       [data-theme="light"] .bg-slate-50,
-      [data-theme="light"] .bg-gray-50 {
+      [data-theme="light"] .bg-secondary-50 {
         background-color: #f8fafc !important;
       }
       [data-theme="light"] .border-slate-100,
-      [data-theme="light"] .border-gray-100,
+      [data-theme="light"] .border-secondary-100,
       [data-theme="light"] .border-slate-200,
-      [data-theme="light"] .border-gray-200 {
+      [data-theme="light"] .border-secondary-200 {
         border-color: #e2e8f0 !important;
       }
-      [data-theme="light"] .bg-gray-100,
+      [data-theme="light"] .bg-secondary-100,
       [data-theme="light"] .bg-slate-100 {
         background-color: #f1f5f9 !important;
       }
-      [data-theme="light"] .border-gray-300,
+      [data-theme="light"] .border-secondary-300,
       [data-theme="light"] .border-slate-300 {
         border-color: #cbd5e1 !important;
       }
-      [data-theme="light"] .bg-gray-200,
+      [data-theme="light"] .bg-secondary-200,
       [data-theme="light"] .bg-slate-200 {
         background-color: #e2e8f0 !important;
       }
@@ -978,13 +978,13 @@ export default function ITThemeProvider({
       .hover\\:bg-green-600:hover { background-color: var(--color-success-hover) !important; }
 
       /* Danger overrides (red mappings in UI library) */
-      .bg-red-700 { background-color: var(--color-danger) !important; }
-      .hover\\:bg-red-800:hover { background-color: var(--color-danger-hover) !important; }
-      .focus\\:ring-red-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
-      .text-red-700 { color: var(--color-danger) !important; }
-      .border-red-700 { border-color: var(--color-danger) !important; }
-      .bg-red-500 { background-color: var(--color-danger) !important; }
-      .hover\\:bg-red-600:hover { background-color: var(--color-danger-hover) !important; }
+      .bg-danger-700 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-danger-800:hover { background-color: var(--color-danger-hover) !important; }
+      .focus\\:ring-danger-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
+      .text-danger-700 { color: var(--color-danger) !important; }
+      .border-danger-700 { border-color: var(--color-danger) !important; }
+      .bg-danger-500 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-danger-600:hover { background-color: var(--color-danger-hover) !important; }
 
       /* Warning overrides (yellow mappings in UI library) */
       .bg-yellow-400 { background-color: var(--color-warning) !important; }
@@ -1014,12 +1014,12 @@ export default function ITThemeProvider({
       .border-blue-500 { border-color: var(--color-info) !important; }
 
       /* Secondary elements overrides */
-      button[class*="bg-white"][class*="hover:bg-gray-100"] {
+      button[class*="bg-white"][class*="hover:bg-secondary-100"] {
         background-color: var(--color-secondary) !important;
         border-color: var(--color-secondary-soft-border) !important;
         color: #111827 !important;
       }
-      button[class*="bg-white"][class*="hover:bg-gray-100"]:hover {
+      button[class*="bg-white"][class*="hover:bg-secondary-100"]:hover {
         background-color: var(--color-secondary-hover) !important;
       }
 
@@ -1625,7 +1625,7 @@ export default function ITThemeProvider({
               e.stopPropagation();
               handleDeletePreset(preset.name, e);
             }}
-            className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-red-500/10 hover:text-red-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10"
+            className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-danger-500/10 hover:text-danger-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10"
             title="Eliminar"
           >
             <MdClose size={12} />

package/src/components/time-picker/timePicker.tsx

@@ -227,14 +227,14 @@ export default function ITTimePicker({
       {isOpen && !disabled && (
         <div 
           ref={dropdownRef}
-          className="fixed z-[9999] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
+          className="fixed z-[70] bg-white border border-secondary-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
           style={{
             top: `${dropdownPosition.top}px`,
             left: `${dropdownPosition.left}px`,
           }}
         >
-          <div className="flex bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
-            <ITText as="div" className="flex-1 text-center py-2 border-r border-gray-100">
+          <div className="flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider">
+            <ITText as="div" className="flex-1 text-center py-2 border-r border-secondary-100">
               Horas
             </ITText>
             <ITText as="div" className="flex-1 text-center py-2">Minutos</ITText>
@@ -244,7 +244,7 @@ export default function ITTimePicker({
             {/* Hours Column */}
             <div
               ref={hoursRef}
-              className="flex-1 overflow-y-auto no-scrollbar border-r border-gray-50 scroll-smooth relative"
+              className="flex-1 overflow-y-auto no-scrollbar border-r border-secondary-50 scroll-smooth relative"
             >
               <div className="py-2">
                 {hoursList.map((h) => {
@@ -321,7 +321,7 @@ export default function ITTimePicker({
             <div className="absolute top-1/2 left-0 right-0 h-10 -mt-5 bg-black/5 pointer-events-none border-y border-black/10 z-10" />
           </div>
 
-          <div className="p-3 bg-gray-50 border-t border-gray-100 flex justify-end">
+          <div className="p-3 bg-secondary-50 border-t border-secondary-100 flex justify-end">
             <ITButton
               variant="solid"
               color={color as any}

package/src/components/toast/toast.tsx

@@ -80,7 +80,7 @@ export default function ITToast({
   return (
     <div
       className={clsx(
-        "fixed z-50 p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
+        "fixed z-[80] p-4 rounded-xl shadow-xl flex items-center justify-between gap-4 transition-all duration-300 text-white min-w-[300px]",
         positionStyles[position],
         {
           "opacity-100 translate-y-0 scale-100": isVisible,

package/src/components/tooltip/tooltip.tsx

@@ -62,7 +62,7 @@ export default function ITTooltip({
     >
       {children}
       {visible && (
-        <div className={clsx("absolute z-[200] pointer-events-none", positionClasses[position])}>
+        <div className={clsx("absolute z-[70] pointer-events-none", positionClasses[position])}>
           <div className="bg-slate-800 dark:bg-slate-700 text-white text-xs rounded-lg px-2.5 py-1.5 whitespace-nowrap shadow-lg">
             <ITText as="span">{content}</ITText>
           </div>

package/src/components/topbar/topbar.tsx

@@ -61,8 +61,8 @@ export default function ITTopBar({
       className="sticky top-0 z-40 backdrop-blur-md transition-all duration-300"
       style={{
         backgroundColor: "var(--topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--topbar-border, #e2e8f0)",
-        boxShadow: "none",
+        borderBottom: "1px solid var(--topbar-border, rgba(15, 23, 42, 0.06))",
+        boxShadow: "var(--shadow-xs)",
       }}
     >
       <div className="flex items-center justify-between h-[72px] px-6 lg:px-8">
@@ -105,7 +105,7 @@ export default function ITTopBar({
 
           {/* Top Navigation Items (Desktop) */}
           {navItems && navItems.length > 0 && (
-            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--topbar-border, #e2e8f0)" }}>
+            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--topbar-border, rgba(15, 23, 42, 0.06))" }}>
               {navItems.map((item) => (
                 <button
                   key={item.id}
@@ -136,7 +136,7 @@ export default function ITTopBar({
           <div className="relative">
             <button
               type="button"
-              className="flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-gray-200"
+              className="flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200"
               style={{
                 backgroundColor: isUserMenuOpen ? "var(--topbar-user-hover, #f1f5f9)" : "transparent",
               }}
@@ -186,7 +186,7 @@ export default function ITTopBar({
             <div
               ref={userMenuRef}
               className={`
-                absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-50 overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
+                absolute right-0 mt-3 w-64 rounded-2xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)] z-[70] overflow-hidden transform origin-top-right transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]
                 ${isUserMenuOpen ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-2 pointer-events-none"}
               `}
               style={{ 
@@ -220,9 +220,9 @@ export default function ITTopBar({
                            setIsUserMenuOpen(false);
                         }}
                         className="block w-full text-left px-3 py-2.5 rounded-xl text-[0.875rem] font-medium transition-colors duration-150"
-                        style={{ color: isDestructive ? '#ef4444' : "var(--topbar-user-text, #334155)" }}
+                        style={{ color: isDestructive ? 'var(--color-danger-500)' : "var(--topbar-user-text, #334155)" }}
                         onMouseEnter={(e) => {
-                          e.currentTarget.style.backgroundColor = isDestructive ? '#fef2f2' : "var(--topbar-user-item-hover, #f8fafc)";
+                          e.currentTarget.style.backgroundColor = isDestructive ? 'var(--color-danger-50)' : "var(--topbar-user-item-hover, #f8fafc)";
                         }}
                         onMouseLeave={(e) => {
                           e.currentTarget.style.backgroundColor = "transparent";

package/src/dev.css

@@ -1,2 +1,2 @@
 @import "tailwindcss";
-@import "./index.css";
+@import "./index.css";

package/src/hooks/useClickOutside.ts

@@ -6,6 +6,14 @@ const useClickOutside = (
 ) => {
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element | null;
+      const clickedDialog = target?.closest("[data-it-dialog]");
+      const currentDialog = ref.current?.closest("[data-it-dialog]");
+
+      // Nested dialogs must not close their parent when interacting with the
+      // child overlay or its contents.
+      if (clickedDialog && clickedDialog !== currentDialog) return;
+
       if (ref.current && !ref.current.contains(event.target as Node)) {
         callback();
       }

package/src/hooks/useTableState.ts

@@ -42,11 +42,14 @@ export function useTableState({
 
   const goToPage = useCallback(
     (page: number) => {
-      if (page >= 1 && page <= totalPages) {
+      // No limitar contra `totalPages`: ese estado vive en useTableState y
+      // nunca se sincroniza con el total real (ITDataTable calcula el suyo).
+      // ITPagination ya deshabilita la navegación más allá de la última página.
+      if (page >= 1) {
         setCurrentPage(page);
       }
     },
-    [totalPages]
+    []
   );
 
   const handleItemsPerPageChange = useCallback((value: number) => {

package/src/index.css

@@ -5,7 +5,7 @@
 
 @variant dark (&:is(.dark &));
 
-:root, :host {
+@theme {
   --animate-fadeIn: fadeIn 0.5s ease-out forwards;
   --animate-fade-in: fadeIn 0.5s ease-out forwards;
 
@@ -94,6 +94,29 @@
   --color-info-800: #075985;
   --color-info-900: #0c4a6e;
   --color-info-950: #082f49;
+
+  /* Soft-depth radius scale: larger, more consistent rounding across the system */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.875rem;
+  --radius-xl: 1.125rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2rem;
+
+  /* Soft-depth shadow scale: cool slate-tinted, low-opacity, multi-layer.
+     Overrides Tailwind's default shadow-* tokens system-wide so every
+     existing shadow-* usage picks up the new "floating" look with no
+     per-component changes. */
+  --shadow-2xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
+  --shadow-xs: 0 1px 3px 0 rgb(15 23 42 / 0.05), 0 1px 2px -1px rgb(15 23 42 / 0.04);
+  --shadow-sm: 0 2px 6px -1px rgb(15 23 42 / 0.06), 0 1px 3px -1px rgb(15 23 42 / 0.05);
+  --shadow-md: 0 6px 16px -4px rgb(15 23 42 / 0.08), 0 3px 6px -3px rgb(15 23 42 / 0.05);
+  --shadow-lg: 0 12px 28px -6px rgb(15 23 42 / 0.1), 0 6px 12px -6px rgb(15 23 42 / 0.06);
+  --shadow-xl: 0 20px 40px -8px rgb(15 23 42 / 0.12), 0 10px 20px -8px rgb(15 23 42 / 0.06);
+  --shadow-2xl: 0 32px 64px -16px rgb(15 23 42 / 0.18);
+  --shadow: 0 2px 6px -1px rgb(15 23 42 / 0.06), 0 1px 3px -1px rgb(15 23 42 / 0.05);
+  --shadow-inner: inset 0 2px 4px 0 rgb(15 23 42 / 0.04);
 }
 
 @keyframes fadeIn {

package/src/showcases/HomeShowcase.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { FaCloud, FaCode, FaDatabase, FaDownload, FaGithub, FaLayerGroup, FaLinkedin, FaMapMarkerAlt, FaMobileAlt, FaSearch, FaServer, FaMedium } from "react-icons/fa";
+import { FaArrowRight, FaCheck, FaCloud, FaCode, FaDatabase, FaDownload, FaExternalLinkAlt, FaGithub, FaLayerGroup, FaLinkedin, FaMapMarkerAlt, FaMobileAlt, FaSearch, FaServer, FaMedium } from "react-icons/fa";
+import { SiReact, SiNodedotjs } from "react-icons/si";
 import ITBadget from "../components/badget/badget";
 import ITButton from "../components/button/button";
 import ITCard from "../components/card/card";
@@ -94,7 +95,7 @@ export const HomeShowcase = () => {
                   <div className="w-56 h-56 md:w-64 md:h-64 rounded-full shadow-xl overflow-hidden ring-2 ring-slate-200 dark:ring-slate-700">
                     <img
                       src="/personalFoto.jpg"
-                      alt="Asael Amaroaqui"
+                      alt="Asael Amaro"
                       className="w-full h-full object-cover"
                     />
                   </div>
@@ -109,7 +110,7 @@ export const HomeShowcase = () => {
                 <ITStack spacing={2}>
                   <ITBadget label="Portafolio Personal" color="primary" variant="outlined" className="w-fit" />
                   <ITText as="h1" className="text-4xl md:text-5xl font-bold tracking-tight text-slate-900 dark:text-white">
-                    Hola, soy <span className="text-primary-600 dark:text-primary-400">Asael Amaroaqui</span>
+                    Hola, soy <span className="text-primary-600 dark:text-primary-400">Asael Amaro</span>
                   </ITText>
                   <ITText as="p" muted className="text-base leading-relaxed max-w-xl">
                     Fullstack Developer con 4+ años de experiencia creando aplicaciones web modernas. 
@@ -299,6 +300,97 @@ export const HomeShowcase = () => {
           </ITText>
         </ITStack>
       </ITCard>
+
+      {/* ─── MIS PRODUCTOS ─── */}
+      <ITCard
+        title="Mis Productos"
+        className="border-slate-200/60 dark:border-slate-800/60 shadow-sm"
+      >
+        <ITText as="p" muted className="!text-sm !mb-4">
+          Productos destacados que he construido.
+        </ITText>
+        <ITGrid container spacing={5}>
+          {/* AXZY UI System */}
+          <ITGrid item xs={12} md={6}>
+            <a
+              href="#ui-system"
+              className="group block h-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/50 p-6 hover:border-primary-400/40 hover:shadow-lg hover:-translate-y-1 transition-all duration-200"
+            >
+              <ITStack spacing={4} className="h-full" justifyContent="between">
+                <ITStack spacing={3}>
+                  <ITFlex align="center" justify="between">
+                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-purple-500 text-white flex items-center justify-center shadow-md">
+                      <FaLayerGroup size={20} />
+                    </div>
+                    <ITBadget label="Propio" color="primary" variant="filled" />
+                  </ITFlex>
+                  <div>
+                    <ITText as="h3" className="!text-lg !font-bold flex items-center gap-2">
+                      AXZY UI System
+                      <FaArrowRight size={14} className="text-primary-500 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
+                    </ITText>
+                    <ITText as="p" muted className="!text-sm !leading-relaxed mt-1.5">
+                      Librería de componentes React con Tailwind CSS v4. Más de 50
+                      componentes enterprise con theming en runtime, TypeScript nativo y
+                      accesibilidad.
+                    </ITText>
+                  </div>
+                  <ITFlex gap={2} wrap="wrap">
+                    <ITBadget label="React" color="gray" variant="outlined" />
+                    <ITBadget label="TypeScript" color="gray" variant="outlined" />
+                    <ITBadget label="Tailwind" color="gray" variant="outlined" />
+                    <ITBadget label="npm" color="gray" variant="outlined" />
+                  </ITFlex>
+                </ITStack>
+                <ITText as="span" className="!text-xs !font-semibold !text-primary-600 dark:!text-primary-400 inline-flex items-center gap-1.5">
+                  <SiReact size={12} />
+                  Ver proyecto
+                </ITText>
+              </ITStack>
+            </a>
+          </ITGrid>
+
+          {/* CheckApp */}
+          <ITGrid item xs={12} md={6}>
+            <a
+              href="https://checkapp.axzy.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group block h-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/50 p-6 hover:border-emerald-400/40 hover:shadow-lg hover:-translate-y-1 transition-all duration-200"
+            >
+              <ITStack spacing={4} className="h-full" justifyContent="between">
+                <ITStack spacing={3}>
+                  <ITFlex align="center" justify="between">
+                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white flex items-center justify-center shadow-md">
+                      <FaCheck size={20} />
+                    </div>
+                    <ITBadget label="En vivo" color="gray" variant="outlined" />
+                  </ITFlex>
+                  <div>
+                    <ITText as="h3" className="!text-lg !font-bold flex items-center gap-2">
+                      CheckApp
+                      <FaExternalLinkAlt size={12} className="text-slate-400 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
+                    </ITText>
+                    <ITText as="p" muted className="!text-sm !leading-relaxed mt-1.5">
+                      Aplicación web para consultar información de manera rápida y
+                      sencilla. Desplegada y disponible en línea.
+                    </ITText>
+                  </div>
+                  <ITFlex gap={2} wrap="wrap">
+                    <ITBadget label="Node.js" color="gray" variant="outlined" />
+                    <ITBadget label="React" color="gray" variant="outlined" />
+                    <ITBadget label="Deploy" color="gray" variant="outlined" />
+                  </ITFlex>
+                </ITStack>
+                <ITText as="span" className="!text-xs !font-semibold !text-emerald-600 dark:!text-emerald-400 inline-flex items-center gap-1.5">
+                  <SiNodedotjs size={12} />
+                  Abrir CheckApp
+                </ITText>
+              </ITStack>
+            </a>
+          </ITGrid>
+        </ITGrid>
+      </ITCard>
     </ITStack>
   );
 };