feat: 厂商列表

messages/br.json

@@ -3,7 +3,24 @@
     "title": "Hello world!"
   },
   "HomePage": {
-
+    "Sobre":"SOBRE NÓS",
+    "Contante": "Contate-nos",
+    "Como": "COMO JOGAR",
+    "Share": "9F.COM irá responder todas suas dúvidas. Entre em contato usando uma das formas abaixo.",
+    "Service": "Posso ajudar?",
+    "aml": "AML Policy",
+    "terms": "Terms & Conditions",
+    "kyc":  "KYC Policy ",
+    "self": "Self Exclusion Policy",
+    "underage":  "Underage Gaming Policy (18+ to play clause)",
+    "responsible": "Responsible Gaming Policy",
+    "esportes":  "Esportes Regras",
+    "licencia":  "LICENÇA",
+    "desc": "9F.COM é operada conjunta pela Dubet n.v. e pela MLsoft, número de registro da empresa 142919, com endereço registrado em Zuikertuintjeweg Z/N (Zuikertuin Tower) Curação e é licenciada e autorizada pelo governo de Curação. A 9F.COM opera sob a Master License of Gaming Services Provider, N.V. Número da Licença: ",
+    "desclink":  "GLH-OCCHKTW0705152022",
+    "desc2": "1. Este produto é para uso de usuários maiores de 18 anos e é destinado apenas para fins de entretenimento. ",
+    "desc3":  "2. este jogo contém compras no app.",
+    "desc4": "3. O fato de um jogador jogar ou ganhar em um jogo de apostas sociais não significa que ele ganhará em apostas com dinheiro real e jogos relacionados no futuro."
   },
 
   "Header": {
@@ -14,5 +31,12 @@
   "Game": {
     "demo":"Demo",
     "join":"JUGUE"
+  },
+  "ButtonGroup": {
+    "first": "Promoções",
+    "second": "Originais da 9F",
+    "third": "Esportes",
+    "fourth": "Live Casino",
+    "Fifth": "App"
   }
 }

src/app/[locale]/(extend)/gameList/[gameListFlag]/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+import { useParams } from "next/navigation";
+import { FC, PropsWithChildren } from "react";
+
+interface Props {}
+
+const GameListFlag: FC<PropsWithChildren<Props>> = (props) => {
+    const params = useParams();
+    console.log(`🎯🎯🎯🎯🎯-> in page.tsx on 10`, params);
+    return <div>hello React</div>;
+};
+
+export default GameListFlag;

src/app/[locale]/_home/HomeActions.tsx

@@ -0,0 +1,108 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { FC, PropsWithChildren } from "react";
+
+interface Props {}
+
+const terms = [
+    { label: "aml", url: "" },
+    { label: "terms", url: "" },
+    { label: "kyc", url: "" },
+    { label: "self", url: "" },
+    { label: "underage", url: "" },
+    { label: "responsible", url: "" },
+    { label: "esportes", url: "" },
+];
+const HomeActions: FC<PropsWithChildren<Props>> = (props) => {
+    const t = useTranslations("HomePage");
+    const handler = (url: string) => {
+        console.log(`🎯🎯🎯🎯🎯-> in HomeActions.tsx on 9`, url);
+    };
+
+    return (
+        <div>
+            {/*about*/}
+            <div className={"grid cursor-pointer grid-cols-3 text-center text-[0.12rem]"}>
+                <div onClick={() => handler("1")}>{t("Sobre")}</div>
+                <div
+                    onClick={() => handler("2")}
+                    className={"border-l-1 border-r-1" + " border-[grey]"}
+                >
+                    {t("Contante")}
+                </div>
+                <div onClick={() => handler("3")}>{t("Como")}</div>
+            </div>
+            {/* service */}
+            <div className="mt-[0.26rem] flex flex-col items-center text-[0.12rem]">
+                <div className={"flex"}>
+                    <div className="m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded bg-white">
+                        <img src="https://9f.com/img/service.fde992c6.png" alt="" />
+                    </div>
+                    <div className="m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded bg-white">
+                        <img src="https://9f.com/img/persons.da1a04fe.png" alt="" />
+                    </div>
+                </div>
+
+                <div className={"text-[#ff6a01]"}>{t("Service")}</div>
+            </div>
+            {/*share*/}
+            <div className="mx-[0.26rem] my-[0.2rem] flex flex-col items-center">
+                <div className={"text-[0.08rem] text-[#adadad]"}>{t("Share")}</div>
+                <div className={"flex justify-center"}>
+                    <img
+                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
+                        src="https://9f.com/img/telegram.9b8c9ead.png"
+                        alt=""
+                    />
+                    <img
+                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
+                        src="https://9f.com/img/kwai.b9d0c480.png"
+                        alt=""
+                    />
+                    <img
+                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
+                        src="https://9f.com/img/tiktok.6637bff7.png"
+                        alt=""
+                    />
+                    <img
+                        className={"mx-[0.1rem] h-[0.35rem] w-[0.35rem]"}
+                        src="https://9f.com/img/youtube.87fed924.png"
+                        alt=""
+                    />
+                </div>
+            </div>
+            {/*terms*/}
+            <div className={"pb-[0.1rem] text-center text-[0.13rem]"}>
+                {terms.map((item, index) => {
+                    return (
+                        <span key={index} className={"inline-block px-[0.1rem] text-[#adadad]"}>
+                            {t(item.label)}
+                        </span>
+                    );
+                })}
+            </div>
+            {/*LICENCIA*/}
+            <div className={"mx-[0.31rem] text-[0.09rem] text-[#adadad]"}>
+                <div className={"border-b-1 border-[#4d4d4d] text-center leading-[0.26rem]"}>
+                    {t("licencia")}
+                </div>
+                <div className={"mx-[0.03rem] my-[0.08rem]"}>
+                    {t("desc")}
+                    <a href="#" className={"text-[#fff]"}>
+                        {t("desclink")}
+                    </a>
+                    <div className={"mt-[0.08rem] text-left"}>
+                        {t("desc2")}
+                        <br />
+                        {t("desc3")}
+                        <br />
+                        {t("desc4")}
+                    </div>
+                </div>
+            </div>
+            <div className={"pb-[0.5rem]"}>123</div>
+        </div>
+    );
+};
+
+export default HomeActions;

src/app/[locale]/page.tsx

@@ -1,12 +1,15 @@
-import HomeCard from "@/app/[locale]/_home/HomeCard";
-import HomeGames from "@/app/[locale]/_home/HomeGames";
+import HomeActions from "@/app/[locale]/_home/HomeActions";
 import Box from "@/components/Box";
 import Layout from "@/components/Layout";
 import { LocalPropsWithChildren } from "@/types";
 import { useTranslations } from "next-intl";
 import { FC } from "react";
+import HomeCard from "./_home/HomeCard";
+import HomeGames from "./_home/HomeGames";
 import HomeSwiper from "./_home/HomeSwiper";
 
+// Information
+// ts-ignore
 const App: FC<LocalPropsWithChildren> = (props) => {
     const t = useTranslations("global");
     return (
@@ -16,7 +19,11 @@ const App: FC<LocalPropsWithChildren> = (props) => {
                     <HomeSwiper></HomeSwiper>
                     <HomeCard></HomeCard>
                 </Box>
+                {/*todo HomeTabs*/}
                 <HomeGames />
+                <Box>
+                    <HomeActions />
+                </Box>
             </div>
         </Layout>
     );

src/components/Card/Card.tsx

@@ -18,13 +18,13 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
     };
     return (
         <>
-            <div className={styles.cardWrap} onClick={() => handler(item!)}>
-                {render ? (
-                    render(item!)
-                ) : (
+            {render ? (
+                render(item!)
+            ) : (
+                <div className={styles.cardWrap} onClick={() => handler(item!)}>
                     <img src={item?.game_icon} alt={item?.game_name_cn} className={"h-1/1"} />
-                )}
-            </div>
+                </div>
+            )}
             <Modal
                 isOpen={isOpen}
                 portalContainer={app}

src/components/Card/GroupCard.tsx

@@ -2,20 +2,18 @@ import { EntityGameListRep } from "@/api/home";
 import clsx from "clsx";
 import { FC } from "react";
 import Card, { CardProps } from "./Card";
-import styles from "./style.module.scss";
 export interface GroupProps extends CardProps {
     data?: EntityGameListRep[];
     col?: number;
+    row?: number;
+    gapX?: number;
 }
 
 const GroupCard: FC<GroupProps> = (props) => {
-    const { col = 3, data, ...other } = props;
+    const { col = 4, row = 2, gapX = 5, data, ...other } = props;
     const cls = clsx(
-        styles.groupWrap,
         "grid",
-        `grid-cols-${col}`,
-        "gap-y-3 grid-rows-2",
-        "justify-between"
+        `grid-cols-${col} grid-rows-${row} gap-y-4 gap-x-${gapX}  justify-between`
     );
     return (
         <div className={"flex flex-wrap justify-between gap-y-4"}>

src/components/Card/style.module.scss

@@ -2,7 +2,7 @@
 
 .cardWrap {
   position: relative;
-  width: 1.1rem;
+   width: 1.1rem;
   height: 1.54rem;
   overflow: hidden;
   background: #212a36;