oraculo-ui 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -95,6 +95,30 @@ function OraculoSectionTitle({
   ] });
 }
 
+// src/atoms/OraculoCarouselDots/OraculoCarouselDots.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var OraculoCarouselDots = ({
+  total,
+  active,
+  onSelect,
+  className = ""
+}) => {
+  if (total <= 1) return null;
+  const rootClass = ["orc-dots", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("div", { className: rootClass, role: "tablist", children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx3("span", { className: "orc-dots__cell", children: /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": i === active,
+      "aria-label": `Ir al slide ${i + 1}`,
+      className: "orc-dots__dot" + (i === active ? " orc-dots__dot--active" : ""),
+      onClick: () => onSelect == null ? void 0 : onSelect(i)
+    }
+  ) }, i)) });
+};
+var OraculoCarouselDots_default = OraculoCarouselDots;
+
 // src/molecules/OraculoCarousel/OraculoCarousel.tsx
 import {
   useRef,
@@ -106,7 +130,7 @@ import {
   Splide as SplideRaw,
   SplideSlide as SplideSlideRaw
 } from "@splidejs/react-splide";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Splide = SplideRaw;
 var SplideSlide = SplideSlideRaw;
 var OraculoCarousel = forwardRef(
@@ -155,7 +179,7 @@ var OraculoCarousel = forwardRef(
       },
       [handleMove]
     );
-    return /* @__PURE__ */ jsx3("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsx4(
       Splide,
       {
         ref: splideRef,
@@ -177,7 +201,7 @@ var OraculoCarousel = forwardRef(
         onMounted: handleMounted,
         children: items.map((item, index) => {
           var _a;
-          return /* @__PURE__ */ jsx3(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
+          return /* @__PURE__ */ jsx4(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
         })
       }
     ) });
@@ -187,7 +211,7 @@ var OraculoCarousel_default = OraculoCarousel;
 
 // src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
 import Box from "@mui/material/Box";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function OraculoGameRankCard({
   imageUrl,
   orden = 1,
@@ -245,7 +269,7 @@ function OraculoGameRankCard({
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "img",
                 {
                   src: imageUrl,
@@ -259,7 +283,7 @@ function OraculoGameRankCard({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 Box,
                 {
                   sx: {
@@ -273,7 +297,7 @@ function OraculoGameRankCard({
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Box,
           {
             component: "span",
@@ -306,7 +330,7 @@ function OraculoGameRankCard({
 // src/molecules/OraculoLiveCasinoCard/OraculoLiveCasinoCard.tsx
 import Box2 from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var OraculoLiveCasinoCard = ({
   logo,
   provider,
@@ -339,7 +363,7 @@ var OraculoLiveCasinoCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Box2,
           {
             component: "img",
@@ -355,7 +379,7 @@ var OraculoLiveCasinoCard = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           Box2,
           {
             className: "orc-live-provider-label",
@@ -369,7 +393,7 @@ var OraculoLiveCasinoCard = ({
               transition: "opacity .25s ease",
               pointerEvents: "none"
             },
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx6(
               Typography,
               {
                 sx: {
@@ -391,14 +415,14 @@ var OraculoLiveCasinoCard_default = OraculoLiveCasinoCard;
 
 // src/molecules/OraculoGameCard/OraculoGameCard.tsx
 import Box3 from "@mui/material/Box";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var OraculoGameCard = ({
   imageUrl,
   onClick,
   size = "sm"
 }) => {
   const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     Box3,
     {
       onClick,
@@ -418,7 +442,7 @@ var OraculoGameCard = ({
         },
         opacity: 1
       },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         "img",
         {
           src: imageUrl,
@@ -440,7 +464,7 @@ var OraculoGameCard_default = OraculoGameCard;
 
 // src/molecules/OraculoGameSlide/OraculoGameSlide.tsx
 import Box4 from "@mui/material/Box";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var GAP = 12;
 var OraculoGameSlide = ({
   items,
@@ -474,7 +498,7 @@ var OraculoGameSlide = ({
           justifyItems: "stretch"
         },
         children: [
-          big && /* @__PURE__ */ jsx7(
+          big && /* @__PURE__ */ jsx8(
             Box4,
             {
               sx: {
@@ -485,17 +509,17 @@ var OraculoGameSlide = ({
                 borderRadius: 2,
                 "& > *": { width: "100%", height: "100%" }
               },
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 OraculoGameCard_default,
                 {
                   imageUrl: big.imageUrl,
                   size: "lg",
-                  onClick: () => onClick == null ? void 0 : onClick(big)
+                  onClick: () => onClick == null ? void 0 : onClick(big, 0)
                 }
               )
             }
           ),
-          smalls.map((it) => /* @__PURE__ */ jsx7(
+          smalls.map((it, index) => /* @__PURE__ */ jsx8(
             Box4,
             {
               sx: {
@@ -505,12 +529,12 @@ var OraculoGameSlide = ({
                 borderRadius: 2,
                 "& > *": { width: "100%", height: "100%" }
               },
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx8(
                 OraculoGameCard_default,
                 {
                   imageUrl: it.imageUrl,
                   size: "sm",
-                  onClick: () => onClick == null ? void 0 : onClick(it)
+                  onClick: () => onClick == null ? void 0 : onClick(it, index)
                 }
               )
             },
@@ -520,7 +544,7 @@ var OraculoGameSlide = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Box4,
     {
       sx: {
@@ -540,12 +564,12 @@ var OraculoGameSlide = ({
           "& > *": { width: "100%", height: "100%" }
         }
       },
-      children: items.map((it) => /* @__PURE__ */ jsx7(Box4, { children: /* @__PURE__ */ jsx7(
+      children: items.map((it, index) => /* @__PURE__ */ jsx8(Box4, { children: /* @__PURE__ */ jsx8(
         OraculoGameCard_default,
         {
           imageUrl: it.imageUrl,
           size: "sm",
-          onClick: () => onClick == null ? void 0 : onClick(it)
+          onClick: () => onClick == null ? void 0 : onClick(it, index)
         }
       ) }, it.id))
     }
@@ -553,6 +577,217 @@ var OraculoGameSlide = ({
 };
 var OraculoGameSlide_default = OraculoGameSlide;
 
+// src/molecules/OraculoWelcomeBanner/OraculoWelcomeBanner.tsx
+import Box5 from "@mui/material/Box";
+import Typography2 from "@mui/material/Typography";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var OraculoWelcomeBanner = ({
+  title,
+  amount,
+  subtitle,
+  buttonText,
+  onButtonClick,
+  backgroundImage,
+  alt,
+  className = "",
+  variant = "small"
+}) => {
+  const symbol = amount ? amount.slice(0, 2) : "";
+  const value = amount ? amount.slice(2) : "";
+  const isLarge = variant === "large";
+  return /* @__PURE__ */ jsxs6(
+    Box5,
+    {
+      className,
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: {
+          xs: 328,
+          lg: isLarge ? 618 : 456
+        },
+        mx: "auto"
+      },
+      children: [
+        backgroundImage && /* @__PURE__ */ jsx9(
+          Box5,
+          {
+            sx: {
+              position: "relative",
+              width: "100%",
+              aspectRatio: {
+                xs: "328 / 188",
+                lg: isLarge ? "618 / 346" : "456 / 272"
+              },
+              borderRadius: "14px",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx9(
+              Box5,
+              {
+                component: "img",
+                src: backgroundImage,
+                alt: alt != null ? alt : "Fondo promocional",
+                sx: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  objectPosition: {
+                    xs: "50% 0%",
+                    lg: "45% 0%"
+                  },
+                  display: "block"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          Box5,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              color: "#e7f8ff",
+              textAlign: "center",
+              pl: "14%",
+              pr: { xs: "14%", lg: "15%" }
+            },
+            children: /* @__PURE__ */ jsxs6(
+              Box5,
+              {
+                sx: {
+                  maxWidth: "60%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center"
+                },
+                children: [
+                  title && /* @__PURE__ */ jsx9(
+                    Typography2,
+                    {
+                      sx: {
+                        fontSize: { xs: 12, lg: 20 },
+                        fontWeight: 400,
+                        color: "#e7f8ff"
+                      },
+                      children: title
+                    }
+                  ),
+                  amount && /* @__PURE__ */ jsxs6(
+                    Box5,
+                    {
+                      component: "p",
+                      sx: {
+                        fontFamily: '"secondary", sans-serif',
+                        lineHeight: { xs: 0.9, lg: 0.87 },
+                        m: "4px 0",
+                        background: "linear-gradient(175deg, #EDC421 -12.56%, #FFFABF 17.99%, #EDC421 49.74%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        WebkitTextStroke: "0.5px #fff8c1",
+                        filter: "drop-shadow(0px 4px 0px #8D4406) drop-shadow(0px 4px 4px rgba(28, 28, 28, 0.4))",
+                        display: "flex",
+                        alignItems: "baseline",
+                        justifyContent: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx9(
+                          Box5,
+                          {
+                            component: "span",
+                            sx: { fontSize: { xs: 35, lg: 48 }, mr: 0.5 },
+                            children: symbol
+                          }
+                        ),
+                        /* @__PURE__ */ jsx9(
+                          Box5,
+                          {
+                            component: "span",
+                            sx: { fontSize: { xs: 52, lg: 77 } },
+                            children: value
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  subtitle && /* @__PURE__ */ jsx9(
+                    Typography2,
+                    {
+                      sx: {
+                        pb: "20px",
+                        fontSize: 14,
+                        fontWeight: 600,
+                        color: "#e7f8ff"
+                      },
+                      children: subtitle
+                    }
+                  ),
+                  buttonText && /* @__PURE__ */ jsx9(OraculoButton, { onClick: onButtonClick, children: buttonText })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoWelcomeBanner_default = OraculoWelcomeBanner;
+
+// src/molecules/OraculoClubOlimpoVisual/OraculoClubOlimpoVisual.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var OraculoClubOlimpoVisual = ({
+  text,
+  buttonLabel = "Conoce m\xE1s",
+  onClick,
+  imgAlt = "Club Olimpo",
+  imgSrcMobile,
+  imgSrcDesktopBg,
+  imgSrcDesktopLogo
+}) => {
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx10("div", { className: "orc-co-bgMobile", children: /* @__PURE__ */ jsx10(
+      "img",
+      {
+        src: imgSrcMobile,
+        alt: imgAlt,
+        className: "orc-co-bgMobileImg"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs7("div", { className: "orc-co-bgDesktop", children: [
+      imgSrcDesktopBg && /* @__PURE__ */ jsx10("div", { className: "orc-co-fillHost", children: /* @__PURE__ */ jsx10(
+        "img",
+        {
+          src: imgSrcDesktopBg,
+          alt: `${imgAlt} fondo`,
+          className: "orc-co-bgDesktopImg"
+        }
+      ) }),
+      imgSrcDesktopLogo && /* @__PURE__ */ jsx10("div", { className: "orc-co-logo", children: /* @__PURE__ */ jsx10(
+        "img",
+        {
+          src: imgSrcDesktopLogo,
+          alt: `${imgAlt} logo`,
+          className: "orc-co-logoImg"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs7("div", { className: "orc-co-desktopContent", children: [
+        /* @__PURE__ */ jsx10("p", { className: "orc-co-captionDesktop", children: text }),
+        /* @__PURE__ */ jsx10(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "orc-co-bottom", children: [
+      /* @__PURE__ */ jsx10("p", { className: "orc-co-caption", children: text }),
+      /* @__PURE__ */ jsx10(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
+    ] })
+  ] });
+};
+var OraculoClubOlimpoVisual_default = OraculoClubOlimpoVisual;
+
 // src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
 import { useRef as useRef2, useState } from "react";
 
@@ -572,7 +807,7 @@ var ChevronRightRounded_default = createSvgIcon(/* @__PURE__ */ _jsx2("path", {
 }), "ChevronRightRounded");
 
 // src/organisms/OraculoSeccionDestacados/OraculoSeccionDestacados.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function OraculoSeccionDestacados({
   items,
   title = "Destacados",
@@ -594,8 +829,8 @@ function OraculoSeccionDestacados({
     onViewMore == null ? void 0 : onViewMore();
   };
   const sectionClassName = className || void 0;
-  return /* @__PURE__ */ jsxs6("section", { className: sectionClassName, style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8("section", { className: sectionClassName, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxs8(
       "header",
       {
         style: {
@@ -607,7 +842,7 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx11(
             OraculoSectionTitle,
             {
               title,
@@ -615,7 +850,7 @@ function OraculoSeccionDestacados({
               size: "md"
             }
           ),
-          /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs8(
             "div",
             {
               style: {
@@ -623,24 +858,24 @@ function OraculoSeccionDestacados({
                 gap: 8
               },
               children: [
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11(
                   OraculoButton,
                   {
                     ariaLabel: "Anterior",
                     variant: "secondary",
                     iconOnly: true,
-                    leftIcon: /* @__PURE__ */ jsx8(ChevronLeftRounded_default, {}),
+                    leftIcon: /* @__PURE__ */ jsx11(ChevronLeftRounded_default, {}),
                     onClick: handlePrev,
                     disabled: navState.isStart
                   }
                 ),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11(
                   OraculoButton,
                   {
                     ariaLabel: "Siguiente",
                     variant: "secondary",
                     iconOnly: true,
-                    rightIcon: /* @__PURE__ */ jsx8(ChevronRightRounded_default, {}),
+                    rightIcon: /* @__PURE__ */ jsx11(ChevronRightRounded_default, {}),
                     onClick: handleNext,
                     disabled: navState.isEnd
                   }
@@ -648,11 +883,11 @@ function OraculoSeccionDestacados({
               ]
             }
           ),
-          /* @__PURE__ */ jsx8(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
+          /* @__PURE__ */ jsx11(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -666,14 +901,14 @@ function OraculoSeccionDestacados({
         },
         renderItem: (item) => {
           var _a;
-          return /* @__PURE__ */ jsx8(
+          return /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
                 textAlign: "center",
                 marginTop: 16
               },
-              children: /* @__PURE__ */ jsx8(
+              children: /* @__PURE__ */ jsx11(
                 "img",
                 {
                   src: item.src,
@@ -698,8 +933,8 @@ function OraculoSeccionDestacados({
 
 // src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
 import Stack from "@mui/material/Stack";
-import Box5 from "@mui/material/Box";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import Box6 from "@mui/material/Box";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function OraculoSeccionTopJuegos({
   items,
   title = "Top Juegos",
@@ -707,10 +942,10 @@ function OraculoSeccionTopJuegos({
   onCardClick,
   className
 }) {
-  return /* @__PURE__ */ jsx9("section", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsxs7(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ jsx9(OraculoSectionTitle, { title, iconUrl, size: "md" }),
-    /* @__PURE__ */ jsx9(
-      Box5,
+  return /* @__PURE__ */ jsx12("section", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsxs9(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsx12(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+    /* @__PURE__ */ jsx12(
+      Box6,
       {
         sx: {
           display: "grid",
@@ -722,11 +957,11 @@ function OraculoSeccionTopJuegos({
           justifyItems: "center",
           width: "100%"
         },
-        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ jsx9(
+        children: items.slice(0, 6).map((juego, idx) => /* @__PURE__ */ jsx12(
           OraculoGameRankCard,
           {
             imageUrl: juego.logo || "",
-            orden: juego.orden,
+            orden: juego.orden || idx + 1,
             onClick: () => console.log(juego.machine)
           },
           juego.machine
@@ -737,10 +972,10 @@ function OraculoSeccionTopJuegos({
 }
 
 // src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
-import Box6 from "@mui/material/Box";
+import Box7 from "@mui/material/Box";
 import Stack2 from "@mui/material/Stack";
-import Typography2 from "@mui/material/Typography";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import Typography3 from "@mui/material/Typography";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var OraculoSeccionCasinoEnVivo = ({
   items,
   title = "Casino en vivo",
@@ -751,8 +986,8 @@ var OraculoSeccionCasinoEnVivo = ({
   onViewMore,
   className
 }) => {
-  return /* @__PURE__ */ jsxs8(
-    Box6,
+  return /* @__PURE__ */ jsxs10(
+    Box7,
     {
       className,
       sx: {
@@ -765,8 +1000,8 @@ var OraculoSeccionCasinoEnVivo = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx10(
-          Box6,
+        /* @__PURE__ */ jsx13(
+          Box7,
           {
             sx: {
               position: "absolute",
@@ -790,8 +1025,8 @@ var OraculoSeccionCasinoEnVivo = ({
             }
           }
         ),
-        /* @__PURE__ */ jsxs8(
-          Box6,
+        /* @__PURE__ */ jsxs10(
+          Box7,
           {
             sx: {
               position: "relative",
@@ -808,9 +1043,9 @@ var OraculoSeccionCasinoEnVivo = ({
               textAlign: { xs: "center", md: "left" }
             },
             children: [
-              /* @__PURE__ */ jsxs8(Stack2, { spacing: 3, sx: { maxWidth: { md: 280 } }, children: [
-                /* @__PURE__ */ jsx10(
-                  Typography2,
+              /* @__PURE__ */ jsxs10(Stack2, { spacing: 3, sx: { maxWidth: { md: 280 } }, children: [
+                /* @__PURE__ */ jsx13(
+                  Typography3,
                   {
                     variant: "h4",
                     sx: {
@@ -822,8 +1057,8 @@ var OraculoSeccionCasinoEnVivo = ({
                     children: title
                   }
                 ),
-                /* @__PURE__ */ jsx10(
-                  Typography2,
+                /* @__PURE__ */ jsx13(
+                  Typography3,
                   {
                     sx: {
                       fontSize: { xs: 14, md: 18 },
@@ -834,7 +1069,7 @@ var OraculoSeccionCasinoEnVivo = ({
                     children: subtitle
                   }
                 ),
-                /* @__PURE__ */ jsx10(Box6, { sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx13(Box7, { sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ jsx13(
                   OraculoButton,
                   {
                     variant: "primary",
@@ -844,8 +1079,8 @@ var OraculoSeccionCasinoEnVivo = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx10(
-                Box6,
+              /* @__PURE__ */ jsx13(
+                Box7,
                 {
                   sx: {
                     display: "flex",
@@ -857,7 +1092,7 @@ var OraculoSeccionCasinoEnVivo = ({
                   },
                   children: items.map((juego, idx) => {
                     var _a, _b;
-                    return /* @__PURE__ */ jsx10(
+                    return /* @__PURE__ */ jsx13(
                       OraculoLiveCasinoCard_default,
                       {
                         logo: (_b = juego.logo) != null ? _b : "",
@@ -866,12 +1101,12 @@ var OraculoSeccionCasinoEnVivo = ({
                         machine: juego.machine,
                         onClick: () => onCardClick == null ? void 0 : onCardClick(juego, idx)
                       },
-                      (_a = juego.machine) != null ? _a : idx
+                      (_a = juego.orden) != null ? _a : idx
                     );
                   })
                 }
               ),
-              /* @__PURE__ */ jsx10(Box6, { sx: { display: { xs: "block", md: "none" } }, children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx13(Box7, { sx: { display: { xs: "block", md: "none" } }, children: /* @__PURE__ */ jsx13(
                 OraculoButton,
                 {
                   variant: "primary",
@@ -892,14 +1127,14 @@ var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
 // src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
 import { useRef as useRef3, useState as useState2 } from "react";
 import Stack3 from "@mui/material/Stack";
-import Box7 from "@mui/material/Box";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import Box8 from "@mui/material/Box";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var buildCasinoSlides = (games, mosaicFirst = true, gridSize = 4) => {
   const baseItems = games.map((g, idx) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     return {
-      id: (_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx,
-      imageUrl: (_d = (_c = g.imageUrl) != null ? _c : g.logo) != null ? _d : ""
+      id: (_b = (_a = g.orden) != null ? _a : g.machine) != null ? _b : idx,
+      imageUrl: (_c = g.logo) != null ? _c : ""
     };
   });
   if (!baseItems.length) return [];
@@ -949,9 +1184,9 @@ var OraculoSeccionCasino = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ jsx11("section", { className, children: /* @__PURE__ */ jsxs9(Stack3, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ jsxs9(
-      Box7,
+  return /* @__PURE__ */ jsx14("section", { className, children: /* @__PURE__ */ jsxs11(Stack3, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsxs11(
+      Box8,
       {
         sx: {
           display: "grid",
@@ -961,7 +1196,7 @@ var OraculoSeccionCasino = ({
           rowGap: 1
         },
         children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx14(
             OraculoSectionTitle,
             {
               title,
@@ -969,8 +1204,8 @@ var OraculoSeccionCasino = ({
               size: "md"
             }
           ),
-          /* @__PURE__ */ jsxs9(
-            Box7,
+          /* @__PURE__ */ jsxs11(
+            Box8,
             {
               sx: {
                 display: "flex",
@@ -978,24 +1213,24 @@ var OraculoSeccionCasino = ({
                 justifyContent: "flex-end"
               },
               children: [
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx14(
                   OraculoButton,
                   {
                     ariaLabel: "Anterior",
                     variant: "secondary",
                     iconOnly: true,
-                    leftIcon: /* @__PURE__ */ jsx11(ChevronLeftRounded_default, {}),
+                    leftIcon: /* @__PURE__ */ jsx14(ChevronLeftRounded_default, {}),
                     onClick: handlePrev,
                     disabled: navState.isStart
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx14(
                   OraculoButton,
                   {
                     ariaLabel: "Siguiente",
                     variant: "secondary",
                     iconOnly: true,
-                    rightIcon: /* @__PURE__ */ jsx11(ChevronRightRounded_default, {}),
+                    rightIcon: /* @__PURE__ */ jsx14(ChevronRightRounded_default, {}),
                     onClick: handleNext,
                     disabled: navState.isEnd
                   }
@@ -1003,11 +1238,11 @@ var OraculoSeccionCasino = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx11(Box7, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx11(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+          /* @__PURE__ */ jsx14(Box8, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx14(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx14(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -1023,7 +1258,7 @@ var OraculoSeccionCasino = ({
           drag: true,
           focus: "start"
         },
-        renderItem: (slide) => /* @__PURE__ */ jsx11("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx11(
+        renderItem: (slide) => /* @__PURE__ */ jsx14("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx14(
           OraculoGameSlide_default,
           {
             items: slide.items,
@@ -1031,8 +1266,8 @@ var OraculoSeccionCasino = ({
             onClick: (itm) => {
               const game = items.find(
                 (g, idx) => {
-                  var _a, _b;
-                  return ((_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx) === itm.id;
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
                 }
               );
               if (game) onItemClick == null ? void 0 : onItemClick(game);
@@ -1049,14 +1284,14 @@ var OraculoSeccionCasino_default = OraculoSeccionCasino;
 // src/organisms/OraculoSeccionVirtuales/OraculoSeccionVirtuales.tsx
 import { useRef as useRef4, useState as useState3 } from "react";
 import Stack4 from "@mui/material/Stack";
-import Box8 from "@mui/material/Box";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import Box9 from "@mui/material/Box";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var buildVirtualSlides = (games, mosaicFirst = true, gridSize = 4) => {
   const baseItems = games.map((g, idx) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     return {
-      id: (_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx,
-      imageUrl: (_d = (_c = g.imageUrl) != null ? _c : g.logo) != null ? _d : ""
+      id: (_a = g.orden) != null ? _a : idx,
+      imageUrl: (_b = g.logo) != null ? _b : ""
     };
   });
   if (!baseItems.length) return [];
@@ -1106,9 +1341,9 @@ var OraculoSeccionVirtuales = ({
   const handleViewMore = () => {
     onViewMore == null ? void 0 : onViewMore();
   };
-  return /* @__PURE__ */ jsx12("section", { className, children: /* @__PURE__ */ jsxs10(Stack4, { direction: "column", spacing: 2, useFlexGap: true, children: [
-    /* @__PURE__ */ jsxs10(
-      Box8,
+  return /* @__PURE__ */ jsx15("section", { className, children: /* @__PURE__ */ jsxs12(Stack4, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsxs12(
+      Box9,
       {
         sx: {
           display: "grid",
@@ -1118,7 +1353,7 @@ var OraculoSeccionVirtuales = ({
           rowGap: 1
         },
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx15(
             OraculoSectionTitle,
             {
               title,
@@ -1126,8 +1361,8 @@ var OraculoSeccionVirtuales = ({
               size: "md"
             }
           ),
-          /* @__PURE__ */ jsxs10(
-            Box8,
+          /* @__PURE__ */ jsxs12(
+            Box9,
             {
               sx: {
                 display: "flex",
@@ -1135,24 +1370,24 @@ var OraculoSeccionVirtuales = ({
                 justifyContent: "flex-end"
               },
               children: [
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx15(
                   OraculoButton,
                   {
                     ariaLabel: "Anterior",
                     variant: "secondary",
                     iconOnly: true,
-                    leftIcon: /* @__PURE__ */ jsx12(ChevronLeftRounded_default, {}),
+                    leftIcon: /* @__PURE__ */ jsx15(ChevronLeftRounded_default, {}),
                     onClick: handlePrev,
                     disabled: navState.isStart
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx15(
                   OraculoButton,
                   {
                     ariaLabel: "Siguiente",
                     variant: "secondary",
                     iconOnly: true,
-                    rightIcon: /* @__PURE__ */ jsx12(ChevronRightRounded_default, {}),
+                    rightIcon: /* @__PURE__ */ jsx15(ChevronRightRounded_default, {}),
                     onClick: handleNext,
                     disabled: navState.isEnd
                   }
@@ -1160,11 +1395,11 @@ var OraculoSeccionVirtuales = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx12(Box8, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx12(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+          /* @__PURE__ */ jsx15(Box9, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx15(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx15(
       OraculoCarousel_default,
       {
         ref: carouselRef,
@@ -1181,7 +1416,7 @@ var OraculoSeccionVirtuales = ({
           focus: "start",
           perMove: 1
         },
-        renderItem: (slide) => /* @__PURE__ */ jsx12("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx12(
+        renderItem: (slide) => /* @__PURE__ */ jsx15("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx15(
           OraculoGameSlide_default,
           {
             items: slide.items,
@@ -1189,8 +1424,8 @@ var OraculoSeccionVirtuales = ({
             onClick: (itm) => {
               const game = items.find(
                 (g, idx) => {
-                  var _a, _b;
-                  return ((_b = (_a = g.id) != null ? _a : g.machine) != null ? _b : idx) === itm.id;
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
                 }
               );
               if (game) onItemClick == null ? void 0 : onItemClick(game);
@@ -1203,17 +1438,271 @@ var OraculoSeccionVirtuales = ({
   ] }) });
 };
 var OraculoSeccionVirtuales_default = OraculoSeccionVirtuales;
+
+// src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
+import { useRef as useRef5, useState as useState4 } from "react";
+import Box10 from "@mui/material/Box";
+import Typography4 from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+var buildSectionSx = (bgUrl) => ({
+  width: "100vw",
+  position: "relative",
+  left: "50%",
+  right: "50%",
+  marginLeft: "-50vw",
+  marginRight: "-50vw",
+  py: 8,
+  color: "#fff",
+  backgroundImage: `
+    linear-gradient(to bottom,#121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to top,   #121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to left,  #121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to right, #121212 0%, rgba(18,18,18,0) 10%),
+    url("${bgUrl}")
+  `,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "center",
+  backgroundSize: "cover"
+});
+var headlineBaseSx = {
+  textAlign: "center",
+  lineHeight: 1.1,
+  mb: 1.5
+};
+var hlTopSx = {
+  display: "inline-block",
+  fontWeight: 600,
+  fontSize: 24
+};
+var hlBottomSx = {
+  display: "inline-block",
+  fontSize: 24,
+  lineHeight: 1.1,
+  WebkitTextStroke: "0.3px rgba(255, 255, 255, .5)",
+  textShadow: `
+    0 0 2px rgba(255, 255, 255, .95),
+    0 0 6px rgba(255, 255, 255, .6),
+    0 1px 0 rgba(137, 137, 137, .85)
+  `
+};
+var OraculoSeccionBonoBienvenida = ({
+  headline,
+  items,
+  backgroundImageUrl
+}) => {
+  const [hl1 = "", hl2 = ""] = (headline || "").split("\n");
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const showDots = items.length > 1;
+  const bgUrl = backgroundImageUrl != null ? backgroundImageUrl : "/assets/img/home/BonoBienvenida/Fondobg.png";
+  const sectionSx = buildSectionSx(bgUrl);
+  const carouselRef = useRef5(null);
+  const [navState, setNavState] = useState4({ isStart: true, isEnd: false });
+  const [activeIndex, setActiveIndex] = useState4(0);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs13(
+      Box10,
+      {
+        component: "section",
+        sx: {
+          ...sectionSx,
+          textAlign: "center"
+        },
+        children: [
+          (hl1 || hl2) && /* @__PURE__ */ jsxs13(Box10, { sx: headlineBaseSx, children: [
+            hl1 && /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlTopSx, children: hl1 }),
+            hl2 && /* @__PURE__ */ jsxs13(Fragment3, { children: [
+              /* @__PURE__ */ jsx16("br", {}),
+              /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlBottomSx, children: hl2 })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs13(Box10, { children: [
+            /* @__PURE__ */ jsx16(
+              OraculoCarousel_default,
+              {
+                ref: carouselRef,
+                items,
+                perPage: 1,
+                gap: "12px",
+                breakpoints: {
+                  480: {
+                    perPage: 1,
+                    gap: "8px",
+                    padding: { left: "8px", right: "8px" }
+                  },
+                  768: {
+                    perPage: 1,
+                    gap: "12px",
+                    padding: { left: "8px", right: "8px" }
+                  }
+                },
+                options: {
+                  autoWidth: false
+                },
+                renderItem: (it) => /* @__PURE__ */ jsx16(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
+                onMove: ({ index, isStart, isEnd }) => {
+                  setNavState({ isStart, isEnd });
+                  setActiveIndex(index);
+                }
+              }
+            ),
+            showDots && /* @__PURE__ */ jsx16(
+              OraculoCarouselDots_default,
+              {
+                total: items.length,
+                active: activeIndex,
+                onSelect: (i) => {
+                  var _a;
+                  setActiveIndex(i);
+                  (_a = carouselRef.current) == null ? void 0 : _a.go(i);
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(Box10, { component: "section", sx: sectionSx, children: /* @__PURE__ */ jsxs13(
+    Box10,
+    {
+      sx: {
+        maxWidth: 1200,
+        mx: 5,
+        px: 2,
+        display: "grid",
+        gridTemplateColumns: "200px auto",
+        alignItems: "center"
+      },
+      children: [
+        (hl1 || hl2) && /* @__PURE__ */ jsx16(
+          Box10,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              minHeight: "100%"
+            },
+            children: /* @__PURE__ */ jsxs13(
+              Box10,
+              {
+                sx: {
+                  ...headlineBaseSx,
+                  textAlign: "left",
+                  mb: 0
+                },
+                children: [
+                  hl1 && /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlTopSx, children: hl1 }),
+                  hl2 && /* @__PURE__ */ jsxs13(Fragment3, { children: [
+                    /* @__PURE__ */ jsx16("br", {}),
+                    /* @__PURE__ */ jsx16(Typography4, { component: "span", sx: hlBottomSx, children: hl2 })
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          Box10,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              gap: 4
+            },
+            children: items.map((it, idx) => /* @__PURE__ */ jsx16(
+              OraculoWelcomeBanner_default,
+              {
+                onButtonClick: it.onButtonClick,
+                ...it
+              },
+              idx
+            ))
+          }
+        )
+      ]
+    }
+  ) });
+};
+var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
+
+// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
+import { useLayoutEffect, useRef as useRef6 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var OraculoSeccionClubOlimpo = ({
+  className = "",
+  fullBleed = true,
+  items,
+  selectedIndex = 0,
+  ariaLabel
+}) => {
+  const rootRef = useRef6(null);
+  const bottomRef = useRef6(null);
+  if (!items || items.length === 0) return null;
+  const safeIndex = Math.min(Math.max(selectedIndex, 0), items.length - 1);
+  const item = items[safeIndex];
+  useLayoutEffect(() => {
+    if (!rootRef.current || !bottomRef.current) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const root = rootRef.current;
+    const bottom = bottomRef.current;
+    const update = () => {
+      root.style.setProperty(
+        "--orc-co-bottomH",
+        `${bottom.offsetHeight + 16}px`
+      );
+    };
+    const ro = new ResizeObserver(update);
+    ro.observe(bottom);
+    update();
+    return () => ro.disconnect();
+  }, []);
+  const rootClass = [
+    "orc-co-wrap",
+    fullBleed ? "orc-co-fullBleed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx17(
+    "section",
+    {
+      ref: rootRef,
+      className: rootClass,
+      "aria-label": ariaLabel || item.imgAlt || "Club Olimpo",
+      children: /* @__PURE__ */ jsx17("div", { ref: bottomRef, children: /* @__PURE__ */ jsx17(
+        OraculoClubOlimpoVisual_default,
+        {
+          text: item.text,
+          onClick: item.onClick,
+          imgAlt: item.imgAlt,
+          imgSrcMobile: item.images.mobile,
+          imgSrcDesktopBg: item.images.desktopBg,
+          imgSrcDesktopLogo: item.images.desktopLogo,
+          priority: item.priority
+        }
+      ) })
+    }
+  );
+};
+var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
 export {
   OraculoButton,
   OraculoCarousel_default as OraculoCarousel,
+  OraculoCarouselDots_default as OraculoCarouselDots,
+  OraculoClubOlimpoVisual_default as OraculoClubOlimpoVisual,
   OraculoGameCard_default as OraculoGameCard,
   OraculoGameRankCard,
   OraculoGameSlide_default as OraculoGameSlide,
   OraculoLiveCasinoCard_default as OraculoLiveCasinoCard,
+  OraculoSeccionBonoBienvenida_default as OraculoSeccionBonoBienvenida,
   OraculoSeccionCasino_default as OraculoSeccionCasino,
   OraculoSeccionCasinoEnVivo_default as OraculoSeccionCasinoEnVivo,
+  OraculoSeccionClubOlimpo_default as OraculoSeccionClubOlimpo,
   OraculoSeccionDestacados,
   OraculoSeccionTopJuegos,
   OraculoSeccionVirtuales_default as OraculoSeccionVirtuales,
-  OraculoSectionTitle
+  OraculoSectionTitle,
+  OraculoWelcomeBanner_default as OraculoWelcomeBanner
 };