@anywayseo/tools 1.1.0 → 1.5.0

package/dist/{index-C1AoeBP2.js → index-CB4bJU2N.js}

@@ -9,9 +9,10 @@ const index = require("./index-D96zh94V.js");
 const react = require("react");
 const index$1 = require("./index-IpSV-c71.js");
 const react$2 = require("@emotion/react");
-const i18n = require("./index-DB1dS9cp.js");
+const i18n = require("./index-DCIXk-YH.js");
 const i18n$1 = require("i18next");
-const index$2 = require("./index-C68DPwvx.js");
+const index$2 = require("./index-jvxaXXE3.js");
+require("@ctrl/tinycolor");
 const gatsby = require("gatsby");
 const ONE_LINE_HEIGHT = 24;
 const Bio = ({ content, maxLines = 1 }) => {
@@ -78,6 +79,81 @@ const Author = ({ author, ...cardProps }) => {
     )
   ] });
 };
+const Center = ({ children, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Center, { className, children });
+};
+const LinkButton = ({ label, url, width = "auto" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Button,
+    {
+      as: react$1.Link,
+      href: url,
+      w: width,
+      bg: "brand.600",
+      textTransform: "uppercase",
+      _hover: { textDecoration: "none", bg: "brand.300" },
+      _active: { transform: "scale(0.95)" },
+      children: label
+    }
+  );
+};
+const BonusCardContent = ({ content }) => {
+  const { t } = reactI18next.useTranslation("author");
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Popover, { flip: false, matchWidth: false, placement: "bottom", children: ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { size: "sm", variant: "link", color: "white", children: isOpen ? t("action.collapse") : t("action.expand") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { w: 60, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverBody, { children: Array.isArray(content) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { children: content.map((paragraph, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: paragraph }, index2)) }) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: content }) }) })
+  ] }) });
+};
+const BonusCardTitle = ({ content }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.Text,
+    {
+      as: "h3",
+      display: "inline-block",
+      py: 1,
+      px: 2,
+      borderRadius: "md",
+      bg: "yellow",
+      color: "black",
+      fontWeight: "bold",
+      fontSize: "lg",
+      children: content
+    }
+  );
+};
+const BonusCard = ({ title, subtitle, content, link, image, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.Card,
+    {
+      as: "article",
+      h: "full",
+      bg: "linear-gradient(90deg, #3b1f47, #731d58)",
+      overflow: "hidden",
+      _before: image ? {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        w: "100%",
+        h: "100%",
+        bgImage: `url(${image})`,
+        bgSize: "cover",
+        bgPosition: "center",
+        filter: "blur(0.05em) opacity(50%)",
+        zIndex: 0
+      } : void 0,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardBody, { as: "section", pb: 0, flex: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BonusCardTitle, { content: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
+          /* @__PURE__ */ jsxRuntime.jsx(BonusCardContent, { content })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link, width: "full" }) })
+      ]
+    }
+  );
+};
 const ContactForm = () => {
   const toast = react$1.useToast();
   const { t } = reactI18next.useTranslation("contactForm");
@@ -194,6 +270,26 @@ const Features = ({ features, ...boxProps }) => {
     /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.600", children: description }) })
   ] }) }, title)) });
 };
+const GameCard = ({ name, image, link, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.LinkBox,
+    {
+      as: "article",
+      rounded: "md",
+      borderWidth: 1,
+      transition: "transform 0.2s ease",
+      cursor: link ? "pointer" : "default",
+      overflow: "hidden",
+      bg: "blackAlpha.400",
+      _hover: { transform: "scale(1.1)" },
+      className,
+      children: [
+        typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: "100%", aspectRatio: "16/9", children: image }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", rounded: "md", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: link ? /* @__PURE__ */ jsxRuntime.jsx(react$1.LinkOverlay, { href: link, children: name }) : name }) })
+      ]
+    }
+  );
+};
 const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
   const { t } = reactI18next.useTranslation("gameDemo");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -395,8 +491,11 @@ const HowTo = ({ steps, ...boxProps }) => {
     ] })
   ] }, index2)) });
 };
+const Container = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Container, { maxW: "container.xl", children });
+};
 const Content = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Container, { as: "section", maxW: "container.xl", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", py: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children }) });
 };
 const Logo = () => {
   const { logoImageData } = index.useSiteMetadataContext();
@@ -463,7 +562,7 @@ const Footer = () => {
       bg: react$1.useColorModeValue("gray.50", "gray.900"),
       color: react$1.useColorModeValue("gray.700", "gray.200"),
       py: 4,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Navigation$1, {}),
         /* @__PURE__ */ jsxRuntime.jsx(Disclaimer, {}),
         /* @__PURE__ */ jsxRuntime.jsx(Brand$1, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
@@ -607,12 +706,25 @@ const Header = () => {
       color: react$1.useColorModeValue("gray.700", "gray.200"),
       boxShadow: "sm",
       zIndex: 100,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Navbar, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(Navbar, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }) })
     }
   );
 };
-const Hero = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { children: /* @__PURE__ */ jsxRuntime.jsx(Content, {}) });
+const Hero = ({ title, subtitle, content, link, image }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", bg: "gray.900", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { direction: { base: "column", md: "row" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { align: "center", justify: { base: "center", md: "flex-start" }, flex: 1, py: 8, pe: 8, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 6, w: "full", maxW: "lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react$1.Heading, { as: "h1", fontSize: { base: "3xl", md: "4xl", lg: "5xl" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", display: "block", children: [
+          title,
+          " —"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", display: "block", color: "brand.400", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: { base: "md", lg: "lg" }, color: "gray.500", children: content }),
+      !!link && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { direction: { base: "column", md: "row" }, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link }) })
+    ] }) }),
+    image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { display: { base: "none", md: "flex" }, flex: 1, children: image })
+  ] }) }) });
 };
 const Main = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -621,7 +733,6 @@ const Main = ({ children }) => {
       as: "main",
       direction: "column",
       flexGrow: 1,
-      py: 4,
       bg: react$1.useColorModeValue("white", "gray.800"),
       color: react$1.useColorModeValue("gray.700", "gray.200"),
       children
@@ -680,6 +791,12 @@ const Layout = ({ children }) => {
     /* @__PURE__ */ jsxRuntime.jsx(ScrollToTop, {})
   ] });
 };
+const List = ({ items, bullet = "—", render, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { as: "ul", pl: 0, ml: 2, mb: 4, className, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { as: "li", display: "flex", gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { children: bullet }),
+    render ? render(item) : item
+  ] })) });
+};
 const TitleMap = {
   pros: "advantages",
   cons: "disadvantages"
@@ -769,14 +886,63 @@ const Seo = ({ children, siteMetadata, title, description, lang }) => {
     children
   ] });
 };
+const Table = ({
+  columnNumber,
+  items,
+  caption,
+  bordered = false,
+  striped = true,
+  scrollable,
+  className
+}) => {
+  const headerItems = items.slice(0, columnNumber);
+  const bodyItems = items.slice(columnNumber);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.TableContainer,
+    {
+      border: bordered ? void 0 : "none",
+      ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react$1.Table, { variant: striped ? "striped" : "simple", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: headerItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Th, { children: item }, index2)) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.Tbody, { children: Array.from({ length: Math.ceil(bodyItems.length / columnNumber) }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: Array.from({ length: columnNumber }, (_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Td, { children: bodyItems[rowIndex * columnNumber + colIndex] || "" }, colIndex)) }, rowIndex)) })
+        ] }),
+        !!caption && /* @__PURE__ */ jsxRuntime.jsx(react$1.TableCaption, { children: caption })
+      ]
+    }
+  );
+};
+const Tabs = ({ items, className, render }) => {
+  const { tabs, panels } = react.useMemo(() => {
+    const tabs2 = [];
+    const panels2 = [];
+    items.forEach(({ content, ...tab }) => {
+      tabs2.push(tab);
+      panels2.push(content);
+    });
+    return { tabs: tabs2, panels: panels2 };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Tabs, { overflow: "hidden", colorScheme: "brand", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanel, { children: render(panel) }, index2)) })
+  ] });
+};
 exports.Author = Author;
+exports.BonusCard = BonusCard;
+exports.Center = Center;
 exports.ContactForm = ContactForm;
 exports.ExpertTip = ExpertTip;
 exports.Faq = Faq;
 exports.Features = Features;
+exports.GameCard = GameCard;
 exports.GameDemo = GameDemo;
 exports.GameInfo = GameInfo;
 exports.HowTo = HowTo;
 exports.Layout = Layout;
+exports.LinkButton = LinkButton;
+exports.List = List;
 exports.ProsCons = ProsCons;
 exports.Seo = Seo;
+exports.Table = Table;
+exports.Tabs = Tabs;

package/dist/{index-Bv4g3xBH.mjs → index-CD5ZU1Gw.mjs}

@@ -1,17 +1,18 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Box, Collapse, Text, Button, Flex, Stack, Card, CardHeader, Heading, CardBody, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, CardFooter, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SimpleGrid, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container, Popover, PopoverTrigger, PopoverContent, Icon, useBreakpointValue, List, ListItem, ListIcon } from "@chakra-ui/react";
+import { Box, Collapse, Text, Button, Flex, Stack, Card, CardHeader, Heading, CardBody, Center as Center$1, Link, Popover, PopoverTrigger, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SimpleGrid, LinkBox, Image, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Icon, useBreakpointValue, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { EmailIcon, StarIcon, CloseIcon, ExternalLinkIcon, ChevronRightIcon, ChevronDownIcon, HamburgerIcon, ChevronUpIcon, WarningIcon, CheckCircleIcon } from "@chakra-ui/icons";
 import { getImage, GatsbyImage } from "gatsby-plugin-image";
 import "@mdx-js/react";
 import { u as useSiteMetadataContext } from "./index-Bs4zA1wD.mjs";
-import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, useEffect } from "react";
+import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, useEffect, useMemo } from "react";
 import { u as usePrimaryColors } from "./index-xuSxvz5z.mjs";
 import { keyframes } from "@emotion/react";
-import { a as GameCharacteristic } from "./index-Bh5idiRE.mjs";
+import { a as GameCharacteristic } from "./index-DxLcykuT.mjs";
 import { t } from "i18next";
-import { b as formatNumber, c as getCurrencySymbol, f as formatDate, d as getDomain, g as getCurrentYear, a as getCurrentMonth } from "./index-jhNgIknB.mjs";
-import { Link } from "gatsby";
+import { b as formatNumber, c as getCurrencySymbol, f as formatDate, d as getDomain, g as getCurrentYear, a as getCurrentMonth } from "./index-CJvs4SfG.mjs";
+import "@ctrl/tinycolor";
+import { Link as Link$1 } from "gatsby";
 const ONE_LINE_HEIGHT = 24;
 const Bio = ({ content, maxLines = 1 }) => {
   const ref = useRef(null);
@@ -77,6 +78,81 @@ const Author = ({ author, ...cardProps }) => {
     )
   ] });
 };
+const Center = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(Center$1, { className, children });
+};
+const LinkButton = ({ label, url, width = "auto" }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      as: Link,
+      href: url,
+      w: width,
+      bg: "brand.600",
+      textTransform: "uppercase",
+      _hover: { textDecoration: "none", bg: "brand.300" },
+      _active: { transform: "scale(0.95)" },
+      children: label
+    }
+  );
+};
+const BonusCardContent = ({ content }) => {
+  const { t: t2 } = useTranslation("author");
+  return /* @__PURE__ */ jsx(Popover, { flip: false, matchWidth: false, placement: "bottom", children: ({ isOpen }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "link", color: "white", children: isOpen ? t2("action.collapse") : t2("action.expand") }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { w: 60, children: /* @__PURE__ */ jsx(PopoverBody, { children: Array.isArray(content) ? /* @__PURE__ */ jsx(Stack, { children: content.map((paragraph, index) => /* @__PURE__ */ jsx(Text, { as: "span", children: paragraph }, index)) }) : /* @__PURE__ */ jsx(Text, { children: content }) }) })
+  ] }) });
+};
+const BonusCardTitle = ({ content }) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "h3",
+      display: "inline-block",
+      py: 1,
+      px: 2,
+      borderRadius: "md",
+      bg: "yellow",
+      color: "black",
+      fontWeight: "bold",
+      fontSize: "lg",
+      children: content
+    }
+  );
+};
+const BonusCard = ({ title, subtitle, content, link, image, className }) => {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      as: "article",
+      h: "full",
+      bg: "linear-gradient(90deg, #3b1f47, #731d58)",
+      overflow: "hidden",
+      _before: image ? {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        w: "100%",
+        h: "100%",
+        bgImage: `url(${image})`,
+        bgSize: "cover",
+        bgPosition: "center",
+        filter: "blur(0.05em) opacity(50%)",
+        zIndex: 0
+      } : void 0,
+      className,
+      children: [
+        /* @__PURE__ */ jsxs(CardBody, { as: "section", pb: 0, flex: 1, children: [
+          /* @__PURE__ */ jsx(BonusCardTitle, { content: title }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
+          /* @__PURE__ */ jsx(BonusCardContent, { content })
+        ] }),
+        /* @__PURE__ */ jsx(CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsx(LinkButton, { ...link, width: "full" }) })
+      ]
+    }
+  );
+};
 const ContactForm = () => {
   const toast = useToast();
   const { t: t2 } = useTranslation("contactForm");
@@ -193,6 +269,26 @@ const Features = ({ features, ...boxProps }) => {
     /* @__PURE__ */ jsx(CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray.600", children: description }) })
   ] }) }, title)) });
 };
+const GameCard = ({ name, image, link, className }) => {
+  return /* @__PURE__ */ jsxs(
+    LinkBox,
+    {
+      as: "article",
+      rounded: "md",
+      borderWidth: 1,
+      transition: "transform 0.2s ease",
+      cursor: link ? "pointer" : "default",
+      overflow: "hidden",
+      bg: "blackAlpha.400",
+      _hover: { transform: "scale(1.1)" },
+      className,
+      children: [
+        typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsx(Box, { w: "100%", aspectRatio: "16/9", children: image }),
+        /* @__PURE__ */ jsx(Box, { as: "section", rounded: "md", p: 4, children: /* @__PURE__ */ jsx(Text, { as: "span", children: link ? /* @__PURE__ */ jsx(LinkOverlay, { href: link, children: name }) : name }) })
+      ]
+    }
+  );
+};
 const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
   const { t: t2 } = useTranslation("gameDemo");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -394,8 +490,11 @@ const HowTo = ({ steps, ...boxProps }) => {
     ] })
   ] }, index)) });
 };
+const Container = ({ children }) => {
+  return /* @__PURE__ */ jsx(Container$1, { maxW: "container.xl", children });
+};
 const Content = ({ children }) => {
-  return /* @__PURE__ */ jsx(Container, { as: "section", maxW: "container.xl", children });
+  return /* @__PURE__ */ jsx(Box, { as: "section", py: 4, children: /* @__PURE__ */ jsx(Container, { children }) });
 };
 const Logo = () => {
   const { logoImageData } = useSiteMetadataContext();
@@ -408,7 +507,7 @@ const Logo = () => {
 const Brand$1 = ({ brand }) => {
   return /* @__PURE__ */ jsxs(Box, { position: "relative", my: 2, py: 8, children: [
     /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(AbsoluteCenter, { display: "flex", bgColor: useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsx(Box, { as: Link, to: "/", children: brand }) })
+    /* @__PURE__ */ jsx(AbsoluteCenter, { display: "flex", bgColor: useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsx(Box, { as: Link$1, to: "/", children: brand }) })
   ] });
 };
 const Copyright = () => {
@@ -441,7 +540,7 @@ const Navigation$1 = () => {
       children: footerMenuLinks.map(({ url, title }) => /* @__PURE__ */ jsx(
         Text,
         {
-          as: Link,
+          as: Link$1,
           to: url,
           fontSize: "md",
           fontWeight: "semibold",
@@ -462,7 +561,7 @@ const Footer = () => {
       bg: useColorModeValue("gray.50", "gray.900"),
       color: useColorModeValue("gray.700", "gray.200"),
       py: 4,
-      children: /* @__PURE__ */ jsxs(Content, { children: [
+      children: /* @__PURE__ */ jsxs(Container, { children: [
         /* @__PURE__ */ jsx(Navigation$1, {}),
         /* @__PURE__ */ jsx(Disclaimer, {}),
         /* @__PURE__ */ jsx(Brand$1, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
@@ -475,7 +574,7 @@ const Brand = ({ brand }) => {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      as: Link,
+      as: Link$1,
       to: "/",
       display: "flex",
       h: { base: "40px", md: "60px" },
@@ -492,7 +591,7 @@ const DesktopNavItem = ({ title, url, children }) => {
     /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
       Text,
       {
-        as: Link,
+        as: Link$1,
         to: url,
         p: 2,
         fontSize: "sm",
@@ -542,7 +641,7 @@ const MobileNavItem = ({ title, children, url }) => {
   const { isOpen, onToggle } = useDisclosure();
   return /* @__PURE__ */ jsxs(Stack, { w: "100%", p: 2, children: [
     /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [
-      /* @__PURE__ */ jsx(Text, { as: Link, to: url, isTruncated: true, fontWeight: 600, children: title }),
+      /* @__PURE__ */ jsx(Text, { as: Link$1, to: url, isTruncated: true, fontWeight: 600, children: title }),
       !!children && /* @__PURE__ */ jsx(Flex, { as: "button", onClick: onToggle, children: /* @__PURE__ */ jsx(
         Icon,
         {
@@ -562,7 +661,7 @@ const MobileNavItem = ({ title, children, url }) => {
         borderLeft: 1,
         borderStyle: "solid",
         borderColor: useColorModeValue("gray.200", "gray.700"),
-        children: !!children && children.map((child) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(Text, { as: Link, to: `${url}${child.url}`, py: 2, children: child.title }) }, child.url))
+        children: !!children && children.map((child) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(Text, { as: Link$1, to: `${url}${child.url}`, py: 2, children: child.title }) }, child.url))
       }
     ) })
   ] });
@@ -606,12 +705,25 @@ const Header = () => {
       color: useColorModeValue("gray.700", "gray.200"),
       boxShadow: "sm",
       zIndex: 100,
-      children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Navbar, { brand: /* @__PURE__ */ jsx(Logo, {}) }) })
+      children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Navbar, { brand: /* @__PURE__ */ jsx(Logo, {}) }) })
     }
   );
 };
-const Hero = () => {
-  return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(Content, {}) });
+const Hero = ({ title, subtitle, content, link, image }) => {
+  return /* @__PURE__ */ jsx(Box, { as: "section", bg: "gray.900", children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex, { direction: { base: "column", md: "row" }, children: [
+    /* @__PURE__ */ jsx(Flex, { align: "center", justify: { base: "center", md: "flex-start" }, flex: 1, py: 8, pe: 8, children: /* @__PURE__ */ jsxs(Stack, { spacing: 6, w: "full", maxW: "lg", children: [
+      /* @__PURE__ */ jsxs(Heading, { as: "h1", fontSize: { base: "3xl", md: "4xl", lg: "5xl" }, children: [
+        /* @__PURE__ */ jsxs(Text, { as: "span", display: "block", children: [
+          title,
+          " —"
+        ] }),
+        /* @__PURE__ */ jsx(Text, { as: "span", display: "block", color: "brand.400", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { fontSize: { base: "md", lg: "lg" }, color: "gray.500", children: content }),
+      !!link && /* @__PURE__ */ jsx(Flex, { direction: { base: "column", md: "row" }, children: /* @__PURE__ */ jsx(LinkButton, { ...link }) })
+    ] }) }),
+    image && /* @__PURE__ */ jsx(Flex, { display: { base: "none", md: "flex" }, flex: 1, children: image })
+  ] }) }) });
 };
 const Main = ({ children }) => {
   return /* @__PURE__ */ jsx(
@@ -620,7 +732,6 @@ const Main = ({ children }) => {
       as: "main",
       direction: "column",
       flexGrow: 1,
-      py: 4,
       bg: useColorModeValue("white", "gray.800"),
       color: useColorModeValue("gray.700", "gray.200"),
       children
@@ -679,6 +790,12 @@ const Layout = ({ children }) => {
     /* @__PURE__ */ jsx(ScrollToTop, {})
   ] });
 };
+const List = ({ items, bullet = "—", render, className }) => {
+  return /* @__PURE__ */ jsx(List$1, { as: "ul", pl: 0, ml: 2, mb: 4, className, children: items.map((item) => /* @__PURE__ */ jsxs(ListItem, { as: "li", display: "flex", gap: 1, children: [
+    /* @__PURE__ */ jsx(Box, { children: bullet }),
+    render ? render(item) : item
+  ] })) });
+};
 const TitleMap = {
   pros: "advantages",
   cons: "disadvantages"
@@ -722,7 +839,7 @@ const ProsConsCard = ({ itemType, items }) => {
             p: 2,
             borderBottomRadius: "md",
             bgColor: useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
-            children: /* @__PURE__ */ jsx(List, { spacing: 4, p: 0, children: items.map(({ title, description }) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", children: [
+            children: /* @__PURE__ */ jsx(List$1, { spacing: 4, p: 0, children: items.map(({ title, description }) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", children: [
               /* @__PURE__ */ jsx(ListIcon, { as: IconMap[itemType], w: 6, h: 6, color: IconColorMap[itemType] }),
               /* @__PURE__ */ jsxs(Text, { fontWeight: "semibold", fontSize: "md", children: [
                 title,
@@ -768,16 +885,65 @@ const Seo = ({ children, siteMetadata, title, description, lang }) => {
     children
   ] });
 };
+const Table = ({
+  columnNumber,
+  items,
+  caption,
+  bordered = false,
+  striped = true,
+  scrollable,
+  className
+}) => {
+  const headerItems = items.slice(0, columnNumber);
+  const bodyItems = items.slice(columnNumber);
+  return /* @__PURE__ */ jsxs(
+    TableContainer,
+    {
+      border: bordered ? void 0 : "none",
+      ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
+      className,
+      children: [
+        /* @__PURE__ */ jsxs(Table$1, { variant: striped ? "striped" : "simple", children: [
+          /* @__PURE__ */ jsx(Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsx(Tr, { children: headerItems.map((item, index) => /* @__PURE__ */ jsx(Th, { children: item }, index)) }) }),
+          /* @__PURE__ */ jsx(Tbody, { children: Array.from({ length: Math.ceil(bodyItems.length / columnNumber) }, (_, rowIndex) => /* @__PURE__ */ jsx(Tr, { children: Array.from({ length: columnNumber }, (_2, colIndex) => /* @__PURE__ */ jsx(Td, { children: bodyItems[rowIndex * columnNumber + colIndex] || "" }, colIndex)) }, rowIndex)) })
+        ] }),
+        !!caption && /* @__PURE__ */ jsx(TableCaption, { children: caption })
+      ]
+    }
+  );
+};
+const Tabs = ({ items, className, render }) => {
+  const { tabs, panels } = useMemo(() => {
+    const tabs2 = [];
+    const panels2 = [];
+    items.forEach(({ content, ...tab }) => {
+      tabs2.push(tab);
+      panels2.push(content);
+    });
+    return { tabs: tabs2, panels: panels2 };
+  }, []);
+  return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", className, children: [
+    /* @__PURE__ */ jsx(TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index) => /* @__PURE__ */ jsx(Tab, { children: /* @__PURE__ */ jsx(Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index)) }),
+    /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render(panel) }, index)) })
+  ] });
+};
 export {
   Author as A,
+  BonusCard as B,
   ContactForm as C,
   ExpertTip as E,
   Faq as F,
-  GameDemo as G,
+  GameCard as G,
   HowTo as H,
   Layout as L,
   ProsCons as P,
   Seo as S,
+  Table as T,
   Features as a,
-  GameInfo as b
+  GameDemo as b,
+  GameInfo as c,
+  List as d,
+  Tabs as e,
+  Center as f,
+  LinkButton as g
 };

package/dist/{index-jhNgIknB.mjs → index-CJvs4SfG.mjs}

@@ -1,4 +1,4 @@
-import "./index-Bh5idiRE.mjs";
+import "./index-DxLcykuT.mjs";
 import i18n from "i18next";
 function getCurrentYear() {
   const locale = i18n.language;