@opexa/portal-components 0.0.929 → 0.0.931

package/dist/components/Banner/Banner.client.d.ts

@@ -0,0 +1,12 @@
+import type { ImageProps } from 'next/image';
+export interface BannerEntry {
+    src: ImageProps['src'];
+    redirectUrl?: string;
+}
+export interface BannerProps {
+    banners: BannerEntry[];
+    imageWidth?: number | [mobile: number, desktop: number];
+    imageHeight?: number | [mobile: number, desktop: number];
+    className?: string;
+}
+export declare function Banner__client(props: BannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Banner/Banner.client.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import emblaCarouselAutoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel, {} from 'embla-carousel-react';
+import isMobile from 'is-mobile';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { dataAttr } from '../../utils/dataAttr.js';
+export function Banner__client(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: true,
+        align: 'start',
+    }, [
+        emblaCarouselAutoplay({
+            playOnInit: true,
+            delay: 5000,
+        }),
+    ]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    useEffect(() => {
+        function handler(detail) {
+            setCurrentIndex(detail?.selectedScrollSnap() ?? 0);
+        }
+        emblaApi?.on('scroll', handler);
+        emblaApi?.on('init', handler);
+        return () => {
+            emblaApi?.on('init', handler);
+            emblaApi?.off('scroll', handler);
+        };
+    }, [emblaApi]);
+    const imageWidth = !props.imageWidth
+        ? [400, 1200]
+        : Array.isArray(props.imageWidth)
+            ? props.imageWidth
+            : [props.imageWidth, props.imageWidth];
+    const imageHeight = !props.imageHeight
+        ? [225, 300]
+        : Array.isArray(props.imageHeight)
+            ? props.imageHeight
+            : [props.imageHeight, props.imageHeight];
+    return (_jsxs("div", { className: twMerge('relative', props.className), children: [_jsx("div", { ref: emblaRef, className: "overflow-hidden", children: _jsx("div", { className: "flex gap-2", children: props.banners.map((banner, index) => {
+                        const img = (_jsx(Image, { src: banner.src, alt: "", width: isMobile() ? imageWidth[0] : imageWidth[1], height: isMobile() ? imageHeight[0] : imageHeight[1], className: "block h-auto w-full", priority: index === 0 }));
+                        return (_jsx(Fragment, { children: !banner.redirectUrl ? (_jsx("div", { className: "w-full shrink-0", children: img })) : (_jsx(Link, { href: banner.redirectUrl, className: "block w-full shrink-0", "aria-label": `Open ${banner.redirectUrl}`, children: img })) }, index));
+                    }) }) }), _jsx("div", { className: "absolute bottom-lg left-1/2 flex w-fit -translate-x-1/2 gap-2", children: props.banners.map((_, index) => (_jsx("button", { type: "button", className: "ui-active:bg-brand-500 bg-gray-300 size-3 shrink-0 rounded-full border border-white transition-all duration-300 ui-active:w-9", onClick: () => {
+                        emblaApi?.scrollTo(index);
+                    }, "aria-label": `Go to slide ${index + 1}`, "data-active": dataAttr(index === currentIndex) }, index))) })] }));
+}

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/AurixPayQRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const AurixPayQRPHDepositContext: (props: {
     value: {
-        status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
+        status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
         deposit: import("../../../../types").Deposit | null;
         errorMessage: {
             name: string;
@@ -13,7 +13,7 @@ export declare const AurixPayQRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useAurixPayQRPHDepositContext: () => {
-    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
+    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
     deposit: import("../../../../types").Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/AurixPayQRPHDeposit/useAurixPayQRPHDeposit.d.ts

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useAurixPayQRPHDeposit(): {
-    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
+    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
     deposit: Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
         view: "form" | "vca";
-        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -14,7 +14,7 @@ export declare const OnlineBankDepositContext: (props: {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
     view: "form" | "vca";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
     view: "form" | "vca";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "failed" | "waiting" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,6 +1,6 @@
 export declare const QRPHDepositContext: (props: {
     value: {
-        status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
+        status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
         deposit: import("../../../../types").Deposit | null;
         errorMessage: {
             name: string;
@@ -13,7 +13,7 @@ export declare const QRPHDepositContext: (props: {
 } & {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
-    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
+    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
     deposit: import("../../../../types").Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -5,7 +5,7 @@ export interface GenerateQRCodeInput {
     promo?: string | null;
 }
 export declare function useQRPHDeposit(): {
-    status: "idle" | "confirmed" | "failed" | "generating-qr-code" | "qr-code-generated";
+    status: "idle" | "generating-qr-code" | "qr-code-generated" | "failed" | "confirmed";
     deposit: Deposit | null;
     errorMessage: {
         name: string;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/QRPHDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const QRPHDepositContext: (props: {
     value: {
         view: "form" | "qrCode";
-        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -14,7 +14,7 @@ export declare const QRPHDepositContext: (props: {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
     view: "form" | "qrCode";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit__legacy/useQRPHDeposit.d.ts

@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
     view: "form" | "qrCode";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/DepositWithdrawal.lazy.d.ts

@@ -1,4 +1,5 @@
 import { type BypassDomainConfig } from '../../client/hooks/useBypassKycChecker';
+import type { PaymentMethod } from './utils';
 export interface DepositWithdrawalProps {
     /** @default "/terms-of-use" */
     termsOfUseUrl?: string;
@@ -10,6 +11,12 @@ export interface DepositWithdrawalProps {
     libanganRedirectionUrl?: string;
     hasPrivacyPolicyAndTermsOfUse?: boolean;
     bypassDomains?: BypassDomainConfig[];
+    /**
+     * List of enabled withdrawal providers
+     * @example ['GCASH', 'MAYA_APP', 'VENTAJA_DISBURSEMENT']
+     * this is to bypass backoffice showing/hiding of payment providers
+     */
+    enabledWithdrawalProviders?: PaymentMethod[];
     bypassDepositKycCheck?: boolean;
     /**
      * @default "/deposits/<id>/status"

package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const OnlineBankDepositContext: (props: {
     value: {
         view: "form" | "vca";
-        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -14,7 +14,7 @@ export declare const OnlineBankDepositContext: (props: {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useOnlineBankDepositContext: () => {
     view: "form" | "vca";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit__legacy/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
     view: "form" | "vca";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,7 +1,7 @@
 export declare const QRPHDepositContext: (props: {
     value: {
         view: "form" | "qrCode";
-        status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+        status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
         verify: () => void;
         reset: () => void;
         deposit: import("../../../../types").Deposit | null;
@@ -14,7 +14,7 @@ export declare const QRPHDepositContext: (props: {
     children?: import("react").ReactNode | undefined;
 }) => React.ReactNode, useQRPHDepositContext: () => {
     view: "form" | "qrCode";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: import("../../../../types").Deposit | null;

package/dist/components/DepositWithdrawal/Deposit__legacy/QRPHDeposit/useQRPHDeposit.d.ts

@@ -2,7 +2,7 @@ import type { Deposit } from '../../../../types';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
     view: "form" | "qrCode";
-    status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
+    status: "waiting" | "failed" | "processing" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
     deposit: Deposit | null;

package/dist/components/DepositWithdrawal/Withdrawal/Withdrawal.js

@@ -44,7 +44,7 @@ const VentajaWithdrawal = lazy(() => import('./VentajaWithdrawal/VentajaWithdraw
 })));
 export function Withdrawal() {
     const { onMaya } = useMayaAuth();
-    const { allowUnverifiedAccounts } = useDepositWithdrawalPropsContext();
+    const { allowUnverifiedAccounts, enabledWithdrawalProviders } = useDepositWithdrawalPropsContext();
     const walletQuery = useWalletQuery();
     const featureFlag = useFeatureFlag();
     const wallet = walletQuery.data;
@@ -65,37 +65,49 @@ export function Withdrawal() {
         const paymentMethods = [
             {
                 method: 'GCASH',
-                condition: () => paymentSettings?.gcashWithdrawalGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => enabledWithdrawalProviders?.length
+                    ? Boolean(enabledWithdrawalProviders?.find((method) => method === 'GCASH'))
+                    : paymentSettings?.gcashWithdrawalGatewaySettings?.[enabledKey] ||
+                        false,
             },
             {
                 method: 'INSTAPAY_GCASH',
-                condition: () => paymentSettings?.instapayWithdrawalGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => enabledWithdrawalProviders?.length
+                    ? Boolean(enabledWithdrawalProviders?.find((method) => method === 'INSTAPAY_GCASH'))
+                    : paymentSettings?.instapayWithdrawalGatewaySettings?.[enabledKey] || false,
             },
             {
                 method: 'INSTAPAY_PAYMAYA',
-                condition: () => paymentSettings?.instapayWithdrawalGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => enabledWithdrawalProviders?.length
+                    ? Boolean(enabledWithdrawalProviders?.find((method) => method === 'INSTAPAY_PAYMAYA'))
+                    : paymentSettings?.instapayWithdrawalGatewaySettings?.[enabledKey] || false,
             },
             {
                 method: 'MAYA',
-                condition: () => paymentSettings?.mayaWithdrawalGatewaySettings?.[enabledKey] || false,
+                condition: () => enabledWithdrawalProviders?.length
+                    ? Boolean(enabledWithdrawalProviders?.find((method) => method === 'MAYA'))
+                    : paymentSettings?.mayaWithdrawalGatewaySettings?.[enabledKey] ||
+                        false,
             },
             {
                 method: 'INSTAPAY',
-                condition: () => paymentSettings?.instapayWithdrawalGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => enabledWithdrawalProviders?.length
+                    ? Boolean(enabledWithdrawalProviders?.find((method) => method === 'INSTAPAY'))
+                    : paymentSettings?.instapayWithdrawalGatewaySettings?.[enabledKey] || false,
             },
             {
                 method: 'VENTAJA_DISBURSEMENT',
-                condition: () => paymentSettings?.ventajaWithdrawalGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => enabledWithdrawalProviders?.length
+                    ? Boolean(enabledWithdrawalProviders?.find((method) => method === 'VENTAJA_DISBURSEMENT'))
+                    : paymentSettings?.ventajaWithdrawalGatewaySettings?.[enabledKey] ||
+                        false,
             },
             {
                 method: 'PISO_PAY',
-                condition: () => paymentSettings?.pisoPayWithdrawalGatewaySettings?.[enabledKey] ||
-                    false,
+                condition: () => enabledWithdrawalProviders?.length
+                    ? Boolean(enabledWithdrawalProviders?.find((method) => method === 'PISO_PAY'))
+                    : paymentSettings?.pisoPayWithdrawalGatewaySettings?.[enabledKey] ||
+                        false,
             },
             {
                 method: 'GCASH_STANDARD_CASH_IN',

package/dist/components/DigitainLauncher/Loading.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Loading() {
-    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "border-blue-500 h-10 w-10 animate-spin rounded-full border-4 border-t-transparent" }), _jsx("p", { className: "text-gray-700 text-lg font-medium", children: "Loading Sports Book\u2026" })] }) }));
+    return (_jsx("div", { className: "flex h-[calc(100vh-400px)] w-full items-center justify-center px-4", children: _jsxs("div", { className: "flex flex-col items-center space-y-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-blue-500 border-t-transparent" }), _jsx("p", { className: "font-medium text-gray-700 text-lg", children: "Loading Sports Book\u2026" })] }) }));
 }

package/dist/components/Disclaimer/DisclaimerV2.js

@@ -60,7 +60,7 @@ export function DisclaimerV2(props) {
                                                                 globalStore.termsOfUse.setOpen(true);
                                                                 globalStore.termsOfUse.setNext('DISCLAIMER');
                                                                 disclaimer.close();
-                                                            }, children: "Terms of Use" }), ' ', "and I am not playing in open or public place."] }), _jsx(Checkbox.HiddenInput, {})] }), showWarning && (_jsxs("div", { className: twMerge('mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs'), role: "alert", "aria-live": "assertive", children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use and Responsible Gaming to proceed."] })), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" }), _jsxs("div", { className: "text-text-secondary-700", children: ["Self Exclusion Site:", _jsxs("a", { href: "https://osea.pagcor.ph/", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "osea.pagcor.ph"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-text-secondary-700", children: "Visit PAGCOR\u2019s Responsible Gaming Program to know more:" }), _jsxs("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "pagcor.ph/regulatory/responsible-gaming.php"] })] })] }) }), _jsxs("div", { className: twMerge('mt-2 flex w-full gap-3 border-bg-secondary border-t px-3xl py-3xl', classNames.buttonsContainer), children: [_jsx(Button, { type: "button", onClick: async () => {
+                                                            }, children: "Terms of Use" }), ' ', "and I am not playing in open or public place."] }), _jsx(Checkbox.HiddenInput, {})] }), showWarning && (_jsxs("div", { className: twMerge('mt-2 flex max-w-full items-center gap-2 break-words rounded-md text-text-error-primary text-xs'), role: "alert", "aria-live": "assertive", children: [_jsx(AlertCircleIcon, { className: "size-5 text-text-error-primary" }), "Please agree to ", props.siteName, "'s Terms of Use to proceed."] })), _jsx("div", { children: "Funds or credits in the account of any individual found ineligible to participate will be forfeited and turned over to the government as required by law" }), _jsxs("div", { className: "text-text-secondary-700", children: ["Self Exclusion Site:", _jsxs("a", { href: "https://osea.pagcor.ph/", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "osea.pagcor.ph"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-text-secondary-700", children: "Visit PAGCOR\u2019s Responsible Gaming Program to know more:" }), _jsxs("a", { href: "https://www.pagcor.ph/regulatory/responsible-gaming.php", target: "_blank", rel: "noopener noreferrer", className: "break-all text-brand-400", children: [' ', "pagcor.ph/regulatory/responsible-gaming.php"] })] })] }) }), _jsxs("div", { className: twMerge('mt-2 flex w-full gap-3 border-bg-secondary border-t px-3xl py-3xl', classNames.buttonsContainer), children: [_jsx(Button, { type: "button", onClick: async () => {
                                             if (Capacitor.isNativePlatform()) {
                                                 const session = await getQueryClient().fetchQuery({
                                                     queryKey: getSessionQueryKey(),

package/dist/components/ForgotPassword/Crazywin/ForgotPassword.module.css

@@ -1,43 +1,43 @@
-  .card {
-    --gradient-bg: radial-gradient(103.87% 100% at 50.15% 0%, #072b37 20.3%, #051125 100%);
-
-    --gradient-border-top: radial-gradient(
-      139.23% 113.41% at 50.14% 0%,
-      #8affdc 0.49%,
-      rgba(138, 255, 220, 0) 33.03%
-    );
-
-    --gradient-border-bottom: radial-gradient(
-      42.09% 54.21% at 50.14% 100%,
-      #8affdc 5.74%,
-      rgba(138, 255, 220, 0) 93.84%
-    );
-
-    position: relative;
-    background: var(--gradient-bg);
-    box-shadow: 0px 4px 14px 6px rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(25px);
-    border-radius: 1.25em;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .card::after,
-  .card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    border: 0.5px solid transparent;
-    border-image-slice: 1;
-  }
-
-  .card::before {
-    border-image-source: var(--gradient-border-bottom);
-  }
-
-  .card::after {
-    border-image-source: var(--gradient-border-top);
+  .card {
+    --gradient-bg: radial-gradient(103.87% 100% at 50.15% 0%, #072b37 20.3%, #051125 100%);
+
+    --gradient-border-top: radial-gradient(
+      139.23% 113.41% at 50.14% 0%,
+      #8affdc 0.49%,
+      rgba(138, 255, 220, 0) 33.03%
+    );
+
+    --gradient-border-bottom: radial-gradient(
+      42.09% 54.21% at 50.14% 100%,
+      #8affdc 5.74%,
+      rgba(138, 255, 220, 0) 93.84%
+    );
+
+    position: relative;
+    background: var(--gradient-bg);
+    box-shadow: 0px 4px 14px 6px rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(25px);
+    border-radius: 1.25em;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .card::after,
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    border: 0.5px solid transparent;
+    border-image-slice: 1;
+  }
+
+  .card::before {
+    border-image-source: var(--gradient-border-bottom);
+  }
+
+  .card::after {
+    border-image-source: var(--gradient-border-top);
   }