oraculo-ui 0.1.4 → 0.1.6

package/dist/index.d.mts

@@ -156,7 +156,7 @@ interface OraculoSeccionDestacadosProps {
 }
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
-interface OraculoTopJuegoItem {
+interface OraculoGameItem {
     orden?: number;
     logo?: string;
     machine?: number | string;
@@ -169,65 +169,33 @@ interface OraculoTopJuegoItem {
     tags?: string;
     lobby_tag?: string | null;
     background?: string;
-    rtp?: number;
+    rtp?: number | null;
     demo_allowed?: boolean;
     gaming_session_required?: boolean;
 }
+
 interface OraculoSeccionTopJuegosProps {
-    items: OraculoTopJuegoItem[];
+    items: OraculoGameItem[];
     title?: string;
     iconUrl?: string;
-    onCardClick?: () => void;
-    className?: string;
+    onCardClick?: (item: OraculoGameItem) => void;
 }
-declare function OraculoSeccionTopJuegos({ items, title, iconUrl, onCardClick, className, }: OraculoSeccionTopJuegosProps): react_jsx_runtime.JSX.Element;
 
-interface OraculoLiveCasinoItem {
-    orden?: number;
-    logo?: string;
-    machine?: number | string;
-    name?: string;
-    web_name?: string;
-    provider?: string;
-    sub_provider?: string;
-    external_id?: string;
-    type?: string;
-    tags?: string;
-    lobby_tag?: string | null;
-    background?: string;
-    rtp?: number;
-    demo_allowed?: boolean;
-    gaming_session_required?: boolean;
-}
+declare function OraculoSeccionTopJuegos({ items, title, iconUrl, onCardClick, }: OraculoSeccionTopJuegosProps): react_jsx_runtime.JSX.Element;
+
 interface OraculoSeccionCasinoEnVivoProps {
-    items: OraculoLiveCasinoItem[];
+    items: OraculoGameItem[];
     title?: string;
     subtitle?: string;
     backgroundMobileUrl?: string;
     backgroundDesktopUrl?: string;
-    onCardClick?: (juego: OraculoLiveCasinoItem, index: number) => void;
+    onCardClick?: (juego: OraculoGameItem, index: number) => void;
     onViewMore?: () => void;
     className?: string;
 }
+
 declare const OraculoSeccionCasinoEnVivo: React.FC<OraculoSeccionCasinoEnVivoProps>;
 
-interface OraculoGameItem {
-    orden?: string | number;
-    logo?: string;
-    machine?: number | string;
-    name?: string;
-    web_name?: string;
-    provider?: string;
-    sub_provider?: string;
-    external_id?: string;
-    type?: string;
-    tags?: string;
-    lobby_tag?: string | null;
-    background?: string;
-    rtp?: number | null;
-    demo_allowed?: boolean;
-    gaming_session_required?: boolean;
-}
 interface OraculoSeccionCasinoProps {
     items: OraculoGameItem[];
     title?: string;
@@ -236,8 +204,8 @@ interface OraculoSeccionCasinoProps {
     onViewMore?: () => void;
     mosaicFirst?: boolean;
     gridSize?: number;
-    className?: string;
 }
+
 declare const OraculoSeccionCasino: React.FC<OraculoSeccionCasinoProps>;
 
 interface OraculoSeccionVirtualesProps {
@@ -248,17 +216,24 @@ interface OraculoSeccionVirtualesProps {
     onViewMore?: () => void;
     mosaicFirst?: boolean;
     gridSize?: number;
-    className?: string;
 }
+
 declare const OraculoSeccionVirtuales: React.FC<OraculoSeccionVirtualesProps>;
 
-interface OraculoSeccionBonoBienvenidaProps {
-    /** Título principal, admite salto con "\n" para dos líneas */
+interface OraculoBonosItem {
+    title?: string;
+    amount?: string;
+    subtitle?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+}
+interface OraculoSeccionBonoProps {
     headline?: string;
-    items: OraculoWelcomeBannerProps[];
+    items: OraculoBonosItem[];
     backgroundImageUrl?: string;
 }
-declare const OraculoSeccionBonoBienvenida: React.FC<OraculoSeccionBonoBienvenidaProps>;
+
+declare const OraculoSeccionBonoBienvenida: React.FC<OraculoSeccionBonoProps>;
 
 interface OraculoSeccionClubOlimpoItem {
     text: string;
@@ -285,4 +260,16 @@ interface OraculoSeccionClubOlimpoItems {
 }
 declare const OraculoSeccionClubOlimpo: React.FC<OraculoSeccionClubOlimpoItems>;
 
-export { OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, type OraculoLiveCasinoItem, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoBienvenidaProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, type OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };
+interface parametros {
+    bonos: OraculoSeccionBonoProps;
+    topJuegos: OraculoSeccionTopJuegosProps;
+    casino: OraculoSeccionCasinoProps;
+    casinoEnVivo: OraculoSeccionCasinoEnVivoProps;
+    virtuales: OraculoSeccionVirtualesProps;
+    clubOlimpo: OraculoSeccionClubOlimpoItem;
+}
+declare function OraculoPageLanding({ props }: {
+    props: parametros;
+}): react_jsx_runtime.JSX.Element;
+
+export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };

package/dist/index.d.ts

@@ -156,7 +156,7 @@ interface OraculoSeccionDestacadosProps {
 }
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
-interface OraculoTopJuegoItem {
+interface OraculoGameItem {
     orden?: number;
     logo?: string;
     machine?: number | string;
@@ -169,65 +169,33 @@ interface OraculoTopJuegoItem {
     tags?: string;
     lobby_tag?: string | null;
     background?: string;
-    rtp?: number;
+    rtp?: number | null;
     demo_allowed?: boolean;
     gaming_session_required?: boolean;
 }
+
 interface OraculoSeccionTopJuegosProps {
-    items: OraculoTopJuegoItem[];
+    items: OraculoGameItem[];
     title?: string;
     iconUrl?: string;
-    onCardClick?: () => void;
-    className?: string;
+    onCardClick?: (item: OraculoGameItem) => void;
 }
-declare function OraculoSeccionTopJuegos({ items, title, iconUrl, onCardClick, className, }: OraculoSeccionTopJuegosProps): react_jsx_runtime.JSX.Element;
 
-interface OraculoLiveCasinoItem {
-    orden?: number;
-    logo?: string;
-    machine?: number | string;
-    name?: string;
-    web_name?: string;
-    provider?: string;
-    sub_provider?: string;
-    external_id?: string;
-    type?: string;
-    tags?: string;
-    lobby_tag?: string | null;
-    background?: string;
-    rtp?: number;
-    demo_allowed?: boolean;
-    gaming_session_required?: boolean;
-}
+declare function OraculoSeccionTopJuegos({ items, title, iconUrl, onCardClick, }: OraculoSeccionTopJuegosProps): react_jsx_runtime.JSX.Element;
+
 interface OraculoSeccionCasinoEnVivoProps {
-    items: OraculoLiveCasinoItem[];
+    items: OraculoGameItem[];
     title?: string;
     subtitle?: string;
     backgroundMobileUrl?: string;
     backgroundDesktopUrl?: string;
-    onCardClick?: (juego: OraculoLiveCasinoItem, index: number) => void;
+    onCardClick?: (juego: OraculoGameItem, index: number) => void;
     onViewMore?: () => void;
     className?: string;
 }
+
 declare const OraculoSeccionCasinoEnVivo: React.FC<OraculoSeccionCasinoEnVivoProps>;
 
-interface OraculoGameItem {
-    orden?: string | number;
-    logo?: string;
-    machine?: number | string;
-    name?: string;
-    web_name?: string;
-    provider?: string;
-    sub_provider?: string;
-    external_id?: string;
-    type?: string;
-    tags?: string;
-    lobby_tag?: string | null;
-    background?: string;
-    rtp?: number | null;
-    demo_allowed?: boolean;
-    gaming_session_required?: boolean;
-}
 interface OraculoSeccionCasinoProps {
     items: OraculoGameItem[];
     title?: string;
@@ -236,8 +204,8 @@ interface OraculoSeccionCasinoProps {
     onViewMore?: () => void;
     mosaicFirst?: boolean;
     gridSize?: number;
-    className?: string;
 }
+
 declare const OraculoSeccionCasino: React.FC<OraculoSeccionCasinoProps>;
 
 interface OraculoSeccionVirtualesProps {
@@ -248,17 +216,24 @@ interface OraculoSeccionVirtualesProps {
     onViewMore?: () => void;
     mosaicFirst?: boolean;
     gridSize?: number;
-    className?: string;
 }
+
 declare const OraculoSeccionVirtuales: React.FC<OraculoSeccionVirtualesProps>;
 
-interface OraculoSeccionBonoBienvenidaProps {
-    /** Título principal, admite salto con "\n" para dos líneas */
+interface OraculoBonosItem {
+    title?: string;
+    amount?: string;
+    subtitle?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+}
+interface OraculoSeccionBonoProps {
     headline?: string;
-    items: OraculoWelcomeBannerProps[];
+    items: OraculoBonosItem[];
     backgroundImageUrl?: string;
 }
-declare const OraculoSeccionBonoBienvenida: React.FC<OraculoSeccionBonoBienvenidaProps>;
+
+declare const OraculoSeccionBonoBienvenida: React.FC<OraculoSeccionBonoProps>;
 
 interface OraculoSeccionClubOlimpoItem {
     text: string;
@@ -285,4 +260,16 @@ interface OraculoSeccionClubOlimpoItems {
 }
 declare const OraculoSeccionClubOlimpo: React.FC<OraculoSeccionClubOlimpoItems>;
 
-export { OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, type OraculoLiveCasinoItem, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoBienvenidaProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, type OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };
+interface parametros {
+    bonos: OraculoSeccionBonoProps;
+    topJuegos: OraculoSeccionTopJuegosProps;
+    casino: OraculoSeccionCasinoProps;
+    casinoEnVivo: OraculoSeccionCasinoEnVivoProps;
+    virtuales: OraculoSeccionVirtualesProps;
+    clubOlimpo: OraculoSeccionClubOlimpoItem;
+}
+declare function OraculoPageLanding({ props }: {
+    props: parametros;
+}): react_jsx_runtime.JSX.Element;
+
+export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };

package/dist/index.js

@@ -38,6 +38,7 @@ __export(index_exports, {
   OraculoGameRankCard: () => OraculoGameRankCard,
   OraculoGameSlide: () => OraculoGameSlide_default,
   OraculoLiveCasinoCard: () => OraculoLiveCasinoCard_default,
+  OraculoPageLanding: () => OraculoPageLanding,
   OraculoSeccionBonoBienvenida: () => OraculoSeccionBonoBienvenida_default,
   OraculoSeccionCasino: () => OraculoSeccionCasino_default,
   OraculoSeccionCasinoEnVivo: () => OraculoSeccionCasinoEnVivo_default,
@@ -46,6 +47,7 @@ __export(index_exports, {
   OraculoSeccionTopJuegos: () => OraculoSeccionTopJuegos,
   OraculoSeccionVirtuales: () => OraculoSeccionVirtuales_default,
   OraculoSectionTitle: () => OraculoSectionTitle,
+  OraculoTopJuegoItem: () => OraculoSeccionTopJuegos,
   OraculoWelcomeBanner: () => OraculoWelcomeBanner_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -316,7 +318,7 @@ function OraculoGameRankCard({
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "img",
                 {
-                  src: imageUrl,
+                  src: `https://olimpo.bet${imageUrl}`,
                   alt: "Juego de casino",
                   loading: "lazy",
                   style: {
@@ -578,7 +580,7 @@ var OraculoGameSlide = ({
                 {
                   imageUrl: it.imageUrl,
                   size: "sm",
-                  onClick: () => onClick == null ? void 0 : onClick(it, index)
+                  onClick: () => onClick == null ? void 0 : onClick(it, index + 1)
                 }
               )
             },
@@ -976,6 +978,7 @@ function OraculoSeccionDestacados({
 }
 
 // src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+var import_react3 = require("react");
 var import_Stack = __toESM(require("@mui/material/Stack"));
 var import_Box6 = __toESM(require("@mui/material/Box"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -983,10 +986,24 @@ function OraculoSeccionTopJuegos({
   items,
   title = "Top Juegos",
   iconUrl,
-  onCardClick,
-  className
+  onCardClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("section", { className, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Stack.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
+  const normalizedItems = (0, import_react3.useMemo)(
+    () => items.map((item, index) => {
+      var _a;
+      return {
+        ...item,
+        // si no viene orden, usamos el índice (1-based)
+        orden: (_a = item.orden) != null ? _a : index + 1,
+        _originalIndex: index
+      };
+    }).sort((a, b) => {
+      if (a.orden != null && b.orden != null) return a.orden - b.orden;
+      return a._originalIndex - b._originalIndex;
+    }),
+    [items]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("section", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Stack.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OraculoSectionTitle, { title, iconUrl, size: "md" }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_Box6.default,
@@ -1001,12 +1018,12 @@ function OraculoSeccionTopJuegos({
           justifyItems: "center",
           width: "100%"
         },
-        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        children: normalizedItems.slice(0, 6).map((juego) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           OraculoGameRankCard,
           {
             imageUrl: juego.logo || "",
-            orden: juego.orden || idx + 1,
-            onClick: () => console.log(juego.machine)
+            orden: juego.orden,
+            onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
           },
           juego.machine
         ))
@@ -1169,7 +1186,7 @@ var OraculoSeccionCasinoEnVivo = ({
 var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
 
 // src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_Stack3 = __toESM(require("@mui/material/Stack"));
 var import_Box8 = __toESM(require("@mui/material/Box"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -1211,11 +1228,10 @@ var OraculoSeccionCasino = ({
   onItemClick,
   onViewMore,
   mosaicFirst = true,
-  gridSize = 4,
-  className
+  gridSize = 4
 }) => {
-  const carouselRef = (0, import_react3.useRef)(null);
-  const [navState, setNavState] = (0, import_react3.useState)({ isStart: true, isEnd: false });
+  const carouselRef = (0, import_react4.useRef)(null);
+  const [navState, setNavState] = (0, import_react4.useState)({ isStart: true, isEnd: false });
   const slides = buildCasinoSlides(items, mosaicFirst, gridSize);
   const handlePrev = () => {
     var _a;
@@ -1228,7 +1244,7 @@ var OraculoSeccionCasino = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Stack3.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Stack3.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       import_Box8.default,
       {
@@ -1326,7 +1342,7 @@ var OraculoSeccionCasino = ({
 var OraculoSeccionCasino_default = OraculoSeccionCasino;
 
 // src/organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_Stack4 = __toESM(require("@mui/material/Stack"));
 var import_Box9 = __toESM(require("@mui/material/Box"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -1368,11 +1384,10 @@ var OraculoSeccionVirtuales = ({
   onItemClick,
   onViewMore,
   mosaicFirst = true,
-  gridSize = 4,
-  className
+  gridSize = 4
 }) => {
-  const carouselRef = (0, import_react4.useRef)(null);
-  const [navState, setNavState] = (0, import_react4.useState)({ isStart: true, isEnd: false });
+  const carouselRef = (0, import_react5.useRef)(null);
+  const [navState, setNavState] = (0, import_react5.useState)({ isStart: true, isEnd: false });
   const slides = buildVirtualSlides(items, mosaicFirst, gridSize);
   const handlePrev = () => {
     var _a;
@@ -1385,7 +1400,7 @@ var OraculoSeccionVirtuales = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Stack4.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Stack4.default, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       import_Box9.default,
       {
@@ -1484,7 +1499,7 @@ var OraculoSeccionVirtuales = ({
 var OraculoSeccionVirtuales_default = OraculoSeccionVirtuales;
 
 // src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_Box10 = __toESM(require("@mui/material/Box"));
 var import_Typography4 = __toESM(require("@mui/material/Typography"));
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
@@ -1540,9 +1555,9 @@ var OraculoSeccionBonoBienvenida = ({
   const showDots = items.length > 1;
   const bgUrl = backgroundImageUrl != null ? backgroundImageUrl : "/assets/img/home/BonoBienvenida/Fondobg.png";
   const sectionSx = buildSectionSx(bgUrl);
-  const carouselRef = (0, import_react5.useRef)(null);
-  const [navState, setNavState] = (0, import_react5.useState)({ isStart: true, isEnd: false });
-  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(0);
+  const carouselRef = (0, import_react6.useRef)(null);
+  const [navState, setNavState] = (0, import_react6.useState)({ isStart: true, isEnd: false });
+  const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
   if (isMobile) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       import_Box10.default,
@@ -1674,7 +1689,7 @@ var OraculoSeccionBonoBienvenida = ({
 var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
 
 // src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var OraculoSeccionClubOlimpo = ({
   className = "",
@@ -1683,12 +1698,12 @@ var OraculoSeccionClubOlimpo = ({
   selectedIndex = 0,
   ariaLabel
 }) => {
-  const rootRef = (0, import_react6.useRef)(null);
-  const bottomRef = (0, import_react6.useRef)(null);
+  const rootRef = (0, import_react7.useRef)(null);
+  const bottomRef = (0, import_react7.useRef)(null);
   if (!items) return null;
   const safeIndex = Math.min(Math.max(selectedIndex, 0), 1);
   const item = items;
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     if (!rootRef.current || !bottomRef.current) return;
     if (typeof ResizeObserver === "undefined") return;
     const root = rootRef.current;
@@ -1730,6 +1745,94 @@ var OraculoSeccionClubOlimpo = ({
   );
 };
 var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
+
+// src/templates/OraculoPageLanding.tsx
+var import_material2 = require("@mui/material");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function OraculoPageLanding({ props }) {
+  const clubOlimpoItems = [
+    {
+      text: "\xA1Canjea bonos, productos \n y las mejores experiencias!",
+      imgAlt: "Club Olimpo",
+      images: {
+        mobile: "/assets/img/home/ClubOlimpo/FondoMobile.png",
+        desktopBg: "/assets/img/home/ClubOlimpo/FondoDesktop.png",
+        desktopLogo: "/assets/img/home/ClubOlimpo/Logo.png"
+      },
+      onClick: () => console.log("CTA Club Olimpo")
+    }
+  ];
+  const listaDestacados = [
+    { id: 1, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
+    { id: 2, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" },
+    { id: 3, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
+    { id: 4, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material2.Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      OraculoSeccionBonoBienvenida_default,
+      {
+        headline: props.bonos.headline,
+        items: props.bonos.items
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material2.Stack, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        OraculoSeccionTopJuegos,
+        {
+          items: props.topJuegos.items,
+          title: props.topJuegos.title,
+          iconUrl: props.topJuegos.iconUrl,
+          onCardClick: props.topJuegos.onCardClick
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        OraculoSeccionCasino_default,
+        {
+          items: props.casino.items,
+          title: props.casino.title,
+          iconUrl: props.casino.iconUrl,
+          onItemClick: props.casino.onItemClick,
+          onViewMore: props.casino.onViewMore
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      OraculoSeccionCasinoEnVivo_default,
+      {
+        items: props.casinoEnVivo.items,
+        title: props.casinoEnVivo.title,
+        subtitle: props.casinoEnVivo.subtitle,
+        backgroundMobileUrl: props.casinoEnVivo.backgroundMobileUrl,
+        backgroundDesktopUrl: props.casinoEnVivo.backgroundDesktopUrl,
+        onCardClick: props.casinoEnVivo.onCardClick,
+        onViewMore: props.casinoEnVivo.onViewMore
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material2.Stack, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        OraculoSeccionVirtuales_default,
+        {
+          items: props.virtuales.items,
+          title: props.virtuales.title,
+          iconUrl: props.virtuales.iconUrl,
+          onItemClick: props.virtuales.onItemClick,
+          onViewMore: props.virtuales.onViewMore
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        OraculoSeccionDestacados,
+        {
+          items: listaDestacados,
+          title: "Destacados",
+          iconUrl: "/assets/img/home/Destacados/starIcon.svg",
+          onViewMore: () => console.log("Ver m\xE1s clickeado")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(OraculoSeccionClubOlimpo_default, { items: props.clubOlimpo })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   OraculoButton,
@@ -1740,6 +1843,7 @@ var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
   OraculoGameRankCard,
   OraculoGameSlide,
   OraculoLiveCasinoCard,
+  OraculoPageLanding,
   OraculoSeccionBonoBienvenida,
   OraculoSeccionCasino,
   OraculoSeccionCasinoEnVivo,
@@ -1748,5 +1852,6 @@ var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
   OraculoSeccionTopJuegos,
   OraculoSeccionVirtuales,
   OraculoSectionTitle,
+  OraculoTopJuegoItem,
   OraculoWelcomeBanner
 });

package/dist/index.mjs

@@ -272,7 +272,7 @@ function OraculoGameRankCard({
               /* @__PURE__ */ jsx5(
                 "img",
                 {
-                  src: imageUrl,
+                  src: `https://olimpo.bet${imageUrl}`,
                   alt: "Juego de casino",
                   loading: "lazy",
                   style: {
@@ -534,7 +534,7 @@ var OraculoGameSlide = ({
                 {
                   imageUrl: it.imageUrl,
                   size: "sm",
-                  onClick: () => onClick == null ? void 0 : onClick(it, index)
+                  onClick: () => onClick == null ? void 0 : onClick(it, index + 1)
                 }
               )
             },
@@ -932,6 +932,7 @@ function OraculoSeccionDestacados({
 }
 
 // src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+import { useMemo } from "react";
 import Stack from "@mui/material/Stack";
 import Box6 from "@mui/material/Box";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -939,10 +940,24 @@ function OraculoSeccionTopJuegos({
   items,
   title = "Top Juegos",
   iconUrl,
-  onCardClick,
-  className
+  onCardClick
 }) {
-  return /* @__PURE__ */ jsx12("section", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsxs9(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
+  const normalizedItems = useMemo(
+    () => items.map((item, index) => {
+      var _a;
+      return {
+        ...item,
+        // si no viene orden, usamos el índice (1-based)
+        orden: (_a = item.orden) != null ? _a : index + 1,
+        _originalIndex: index
+      };
+    }).sort((a, b) => {
+      if (a.orden != null && b.orden != null) return a.orden - b.orden;
+      return a._originalIndex - b._originalIndex;
+    }),
+    [items]
+  );
+  return /* @__PURE__ */ jsx12("section", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs9(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ jsx12(OraculoSectionTitle, { title, iconUrl, size: "md" }),
     /* @__PURE__ */ jsx12(
       Box6,
@@ -957,12 +972,12 @@ function OraculoSeccionTopJuegos({
           justifyItems: "center",
           width: "100%"
         },
-        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ jsx12(
+        children: normalizedItems.slice(0, 6).map((juego) => /* @__PURE__ */ jsx12(
           OraculoGameRankCard,
           {
             imageUrl: juego.logo || "",
-            orden: juego.orden || idx + 1,
-            onClick: () => console.log(juego.machine)
+            orden: juego.orden,
+            onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
           },
           juego.machine
         ))
@@ -1167,8 +1182,7 @@ var OraculoSeccionCasino = ({
   onItemClick,
   onViewMore,
   mosaicFirst = true,
-  gridSize = 4,
-  className
+  gridSize = 4
 }) => {
   const carouselRef = useRef3(null);
   const [navState, setNavState] = useState2({ isStart: true, isEnd: false });
@@ -1184,7 +1198,7 @@ var OraculoSeccionCasino = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ jsx14("section", { className, children: /* @__PURE__ */ jsxs11(Stack3, { direction: "column", spacing: 2, useFlexGap: true, children: [
+  return /* @__PURE__ */ jsx14("section", { children: /* @__PURE__ */ jsxs11(Stack3, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ jsxs11(
       Box8,
       {
@@ -1324,8 +1338,7 @@ var OraculoSeccionVirtuales = ({
   onItemClick,
   onViewMore,
   mosaicFirst = true,
-  gridSize = 4,
-  className
+  gridSize = 4
 }) => {
   const carouselRef = useRef4(null);
   const [navState, setNavState] = useState3({ isStart: true, isEnd: false });
@@ -1341,7 +1354,7 @@ var OraculoSeccionVirtuales = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ jsx15("section", { className, children: /* @__PURE__ */ jsxs12(Stack4, { direction: "column", spacing: 2, useFlexGap: true, children: [
+  return /* @__PURE__ */ jsx15("section", { children: /* @__PURE__ */ jsxs12(Stack4, { direction: "column", spacing: 2, useFlexGap: true, children: [
     /* @__PURE__ */ jsxs12(
       Box9,
       {
@@ -1686,6 +1699,97 @@ var OraculoSeccionClubOlimpo = ({
   );
 };
 var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
+
+// src/templates/OraculoPageLanding.tsx
+import {
+  Container,
+  Stack as Stack5
+} from "@mui/material";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function OraculoPageLanding({ props }) {
+  const clubOlimpoItems = [
+    {
+      text: "\xA1Canjea bonos, productos \n y las mejores experiencias!",
+      imgAlt: "Club Olimpo",
+      images: {
+        mobile: "/assets/img/home/ClubOlimpo/FondoMobile.png",
+        desktopBg: "/assets/img/home/ClubOlimpo/FondoDesktop.png",
+        desktopLogo: "/assets/img/home/ClubOlimpo/Logo.png"
+      },
+      onClick: () => console.log("CTA Club Olimpo")
+    }
+  ];
+  const listaDestacados = [
+    { id: 1, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
+    { id: 2, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" },
+    { id: 3, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
+    { id: 4, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" }
+  ];
+  return /* @__PURE__ */ jsxs14(Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
+    /* @__PURE__ */ jsx18(
+      OraculoSeccionBonoBienvenida_default,
+      {
+        headline: props.bonos.headline,
+        items: props.bonos.items
+      }
+    ),
+    /* @__PURE__ */ jsxs14(Stack5, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ jsx18(
+        OraculoSeccionTopJuegos,
+        {
+          items: props.topJuegos.items,
+          title: props.topJuegos.title,
+          iconUrl: props.topJuegos.iconUrl,
+          onCardClick: props.topJuegos.onCardClick
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        OraculoSeccionCasino_default,
+        {
+          items: props.casino.items,
+          title: props.casino.title,
+          iconUrl: props.casino.iconUrl,
+          onItemClick: props.casino.onItemClick,
+          onViewMore: props.casino.onViewMore
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx18(
+      OraculoSeccionCasinoEnVivo_default,
+      {
+        items: props.casinoEnVivo.items,
+        title: props.casinoEnVivo.title,
+        subtitle: props.casinoEnVivo.subtitle,
+        backgroundMobileUrl: props.casinoEnVivo.backgroundMobileUrl,
+        backgroundDesktopUrl: props.casinoEnVivo.backgroundDesktopUrl,
+        onCardClick: props.casinoEnVivo.onCardClick,
+        onViewMore: props.casinoEnVivo.onViewMore
+      }
+    ),
+    /* @__PURE__ */ jsxs14(Stack5, { direction: "column", spacing: 12, useFlexGap: true, children: [
+      /* @__PURE__ */ jsx18(
+        OraculoSeccionVirtuales_default,
+        {
+          items: props.virtuales.items,
+          title: props.virtuales.title,
+          iconUrl: props.virtuales.iconUrl,
+          onItemClick: props.virtuales.onItemClick,
+          onViewMore: props.virtuales.onViewMore
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        OraculoSeccionDestacados,
+        {
+          items: listaDestacados,
+          title: "Destacados",
+          iconUrl: "/assets/img/home/Destacados/starIcon.svg",
+          onViewMore: () => console.log("Ver m\xE1s clickeado")
+        }
+      ),
+      /* @__PURE__ */ jsx18(OraculoSeccionClubOlimpo_default, { items: props.clubOlimpo })
+    ] })
+  ] });
+}
 export {
   OraculoButton,
   OraculoCarousel_default as OraculoCarousel,
@@ -1695,6 +1799,7 @@ export {
   OraculoGameRankCard,
   OraculoGameSlide_default as OraculoGameSlide,
   OraculoLiveCasinoCard_default as OraculoLiveCasinoCard,
+  OraculoPageLanding,
   OraculoSeccionBonoBienvenida_default as OraculoSeccionBonoBienvenida,
   OraculoSeccionCasino_default as OraculoSeccionCasino,
   OraculoSeccionCasinoEnVivo_default as OraculoSeccionCasinoEnVivo,
@@ -1703,5 +1808,6 @@ export {
   OraculoSeccionTopJuegos,
   OraculoSeccionVirtuales_default as OraculoSeccionVirtuales,
   OraculoSectionTitle,
+  OraculoSeccionTopJuegos as OraculoTopJuegoItem,
   OraculoWelcomeBanner_default as OraculoWelcomeBanner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oraculo-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",