feat: 增加首充活动页面

src/app/[locale]/(doings)/depositing/Client.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { useCountDown } from "ahooks";
+
+export const TimeLeft = (props: { endTime: number }) => {
+    const [countdown, time] = useCountDown({
+        targetDate: props.endTime,
+        onEnd: () => {},
+    });
+    return (
+        <div className={"flex text-[0.0972rem]"}>
+            <div className={"text-center"}>
+                <div className={"flex items-center text-[#fff]"}>
+                    <div
+                        className={
+                            "flex items-center justify-center rounded-[0.0347rem] bg-[#4c546e]" +
+                            " h-[0.2083rem] w-[0.2083rem]"
+                        }
+                    >
+                        {`${time.days}`.padStart(2, "0")}
+                    </div>
+                    <span className={"mx-[0.0247rem]"}>:</span>
+                    <div
+                        className={
+                            "flex items-center justify-center rounded-[0.0347rem] bg-[#4c546e]" +
+                            " h-[0.2083rem] w-[0.2083rem]"
+                        }
+                    >
+                        {`${time.hours}`.padStart(2, "0")}
+                    </div>
+                    <span className={"mx-[0.0247rem]"}>:</span>
+                    <div
+                        className={
+                            "flex items-center justify-center rounded-[0.0347rem] bg-[#4c546e]" +
+                            " h-[0.2083rem] w-[0.2083rem]"
+                        }
+                    >
+                        {`${time.minutes}`.padStart(2, "0")}
+                    </div>
+                    <span className={"mx-[0.0247rem]"}>:</span>
+                    <div
+                        className={
+                            "flex items-center justify-center rounded-[0.0347rem] bg-[#4c546e]" +
+                            " h-[0.2083rem] w-[0.2083rem]"
+                        }
+                    >
+                        {`${time.seconds}`.padStart(2, "0")}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

src/app/[locale]/(doings)/depositing/layout.tsx

@@ -0,0 +1,17 @@
+import HeaderBack from "@/components/HeaderBack";
+import { ReactNode } from "react";
+
+export default async function Layout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    return (
+        <>
+            <HeaderBack showBack={true} useBg={true} title={"Sacar dinheiro"} />
+            <main className={"main-header bg-[url(/home/bg.jpg)]"}>{children}</main>
+        </>
+    );
+}

src/app/[locale]/(doings)/depositing/page.tsx

@@ -0,0 +1,131 @@
+import { TimeLeft } from "@/app/[locale]/(doings)/depositing/Client";
+import { Link } from "@/i18n/routing";
+import Image from "next/image";
+
+const Page = () => {
+    return (
+        <div className={"p-[0.12rem]"}>
+            <Image src={"/depositing/banner.png"} alt={""} width={750} height={115} />
+
+            <p className={"my-[13px] text-[16px]"}>Bônus de depósito do cassino</p>
+
+            <p className={"text-[14px]"}>
+                O Bônus de Primeiros 4 Depósitos do BCGAME.SK oferece uma variedade de bônus para os
+                quatro primeiros depósitos de novos usuários. Esta promoção tem como objetivo
+                recompensar novos usuários com bônus e caça-níqueis gratuitos para melhorar sua
+                experiência de jogo na plataforma.
+            </p>
+
+            <Image
+                src={"/depositing/level1.png"}
+                className={"mb-[10px] mt-[20px]"}
+                alt={""}
+                width={750}
+                height={70}
+            />
+            <Image
+                src={"/depositing/level2.png"}
+                className={"my-[10px]"}
+                alt={""}
+                width={750}
+                height={70}
+            />
+            <Image
+                src={"/depositing/level3.png"}
+                className={"my-[10px]"}
+                alt={""}
+                width={750}
+                height={70}
+            />
+            <Image
+                src={"/depositing/level4.png"}
+                className={"my-[10px]"}
+                alt={""}
+                width={750}
+                height={70}
+            />
+
+            <div className={"relative mt-[20px]"}>
+                <Image
+                    src={"/depositing/level-wrap.png"}
+                    className={"my-[10px]"}
+                    alt={""}
+                    width={750}
+                    height={70}
+                />
+                <div
+                    className={
+                        "absolute left-0 top-0 flex h-[100%] w-[100%] items-center" +
+                        " px-[10px] font-semibold"
+                    }
+                >
+                    Tempos de recarga atuais: 1vez
+                </div>
+            </div>
+
+            <div className={"relative mb-[20px]"}>
+                <Image
+                    src={"/depositing/time-wrap.png"}
+                    className={"my-[10px]"}
+                    alt={""}
+                    width={750}
+                    height={70}
+                />
+                <div
+                    className={
+                        "absolute left-0 top-0 flex h-[100%] w-[100%] items-center text-[14px]" +
+                        " px-[10px]"
+                    }
+                >
+                    <p className={"mr-[10px]"}>Contagem regressiva de expiração:</p>
+                    <TimeLeft endTime={new Date().getTime() + 86400000} />
+                </div>
+            </div>
+
+            <div className={"relative mb-[20px]"}>
+                <Image
+                    src={"/depositing/button.png"}
+                    className={"my-[10px]"}
+                    alt={""}
+                    width={750}
+                    height={70}
+                />
+                <Link
+                    href={"/deposit"}
+                    className={
+                        "absolute left-0 top-0 flex h-[100%] w-[100%] items-center" +
+                        " justify-center font-semibold text-[#fff]"
+                    }
+                >
+                    Deposite agora
+                </Link>
+            </div>
+
+            <p className={"font-semibold"}>Estrutura de bônus</p>
+            <ul className={"list-disc px-[20px] text-[14px]"}>
+                <li>Bônus de 1º depósito: bônus de 120% de até US$ 500,00 + 100 slots grátis.</li>
+                <li>Bônus de 2º depósito: bônus de 100% até US$ 300,00 + 100 slots grátis.</li>
+                <li>Bônus de 3º depósito: bônus de 150% até US$ 500,00 + 100 slots grátis.</li>
+                <li>Bônus de 4º depósito: bônus de 100% até US$ 300,00 + 100 slots grátis.</li>
+            </ul>
+
+            <p className={"font-semibold"}>Ativação do bônus de depósito</p>
+            <ul className={"list-disc px-[20px] text-[14px]"}>
+                <li>
+                    Depósito automático: bônus de depósito e rodadas grátis serão depositados
+                    automaticamente no saldo de bônus do usuário.
+                </li>
+            </ul>
+
+            <p className={"font-semibold"}>Período de validade da rotação gratuita</p>
+            <ul className={"list-disc px-[20px] text-[14px]"}>
+                <li>
+                    As rodadas grátis devem ser reivindicadas dentro de 24 horas após o depósito.
+                    Rodadas grátis não reivindicadas
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default Page;