updated the glossy effect for glass designed card

src/app/(dashboard)/(user)/(outsideAuth)/page.tsx

@@ -6,6 +6,7 @@ import { getBanners, getSubBanners } from "@/serverApi/pages";
 import Image from "next/image";
 import Link from "next/link";
 import DashboardProvider from "./DashboardProvider";
+import GlassWrapper from "@/components/molecules/GlassWrapper";
 
 export const dynamic = "force-dynamic";
 
@@ -78,12 +79,13 @@ export default async function Home() {
                 key={game.id}
                 className="col-span-1 "
               >
+                <GlassWrapper>
                   <div
-                  className="flex items-center gap-3 py-2 px-6 glass"
-                  style={{
-                    borderRadius: "24px",
-                    background: "rgba(255, 255, 255, 0.10)",
-                  }}
+                    className="flex items-center gap-3 py-2 px-6 "
+                  // style={{
+                  //   borderRadius: "24px",
+                  //   background: "rgba(255, 255, 255, 0.10)",
+                  // }}
                   >
                     <Image
                       src={game.thumbnail || "/assets/images/fallback.png"}
@@ -94,6 +96,7 @@ export default async function Home() {
                     />
                     <strong className="text-[14px]">{game.name}</strong>
                   </div>
+                </GlassWrapper>
               </ProtectedLink>
             ))}
           </div>
@@ -128,18 +131,10 @@ export default async function Home() {
         {subBannersError ? (
           <p></p>
         ) : subBanners?.data?.length ? (
-          <div className="dashboard-card-wrapper flex flex-col lg:grid md:grid-cols-2 gap-5 justify-center">
+          <div className="dashboard-card-wrapper flex flex-col lg:grid lg:grid-cols-2 2xl:grid-cols-3 gap-5 justify-center">
             {subBanners.data.map((subBanner, index) => (
-              <div
-                key={subBanner.name || index}
-                className="dashboard-card1 col-span-1 flex justify-between px-10 gap-2 rounded-[24px] glass"
-                style={{
-                  background:
-                    index % 2 === 0
-                      ? "rgba(255, 255, 255, 0.10)"
-                      : "rgba(255, 255, 255, 0.20)",
-                }}
-              >
+              <GlassWrapper key={subBanner.name || index}
+                className="dashboard-card1 col-span-1 flex justify-between px-10 gap-2 rounded-[24px]">
                 <div className="py-7 gap-6">
                   {subBanner.name && (
                     <h1
@@ -188,7 +183,7 @@ export default async function Home() {
                     />
                   </div>
                 )}
-              </div>
+              </GlassWrapper>
             ))}
           </div>
         ) : null}

src/app/(dashboard)/(user)/(outsideAuth)/support/page.tsx

+import GlassWrapper from "@/components/molecules/GlassWrapper";
 import Link from "next/link";
 import React from "react";
 
@@ -14,9 +15,7 @@ export default function Support() {
 			</div>
 
 			<div className="grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-6">
-				<div
-					className="p-6 rounded-[24px] glass"
-					style={{ background: "rgba(255, 255, 255, 0.04)" }}>
+				<GlassWrapper className="p-6">
 					<img
 						src="/assets/images/chat.svg"
 						alt="chat"
@@ -34,10 +33,8 @@ export default function Support() {
 						}}>
 						Start Live Chat
 					</a>
-				</div>
-				<div
-					className="p-6 rounded-[24px] glass"
-					style={{ background: "rgba(255, 255, 255, 0.04)" }}>
+				</GlassWrapper>
+				<GlassWrapper className="p-6">
 					<img
 						src="/assets/images/support.svg"
 						alt=""
@@ -48,10 +45,8 @@ export default function Support() {
 						Questions about your account or gameplay? Our team is here for you.
 					</p>
 					<Link href="#" className="underline">support@sweepstakeonline.com</Link>
-				</div>
-				<div
-					className="p-6 rounded-[24px] glass"
-					style={{ background: "rgba(255, 255, 255, 0.04)" }}>
+				</GlassWrapper>
+				<GlassWrapper className="p-6">
 					<img
 						src="/assets/images/technical.svg"
 						alt=""
@@ -62,7 +57,7 @@ export default function Support() {
 						Questions about your account or gameplay? Our team is here for you.
 					</p>
 					<Link href="#" className="underline">technical@sweepstakeonline.com</Link>
-				</div>
+				</GlassWrapper>
 			</div>
 		</section>
 	);

src/app/(dashboard)/(user)/(privateUser)/account/AccountTab.tsx

+import GlassWrapper from '@/components/molecules/GlassWrapper';
 import TabController from '@/components/molecules/TabController';
 
 import UserProfileCard from "@/components/organism/Cards/UserProfileCard";
@@ -36,9 +37,7 @@ export default function AccountTab() {
                 <div className="col-span-12 lg:col-span-5 ">
                     <UserProfileCard balance={data} loading={isLoading} />
                 </div>
-                <div className="col-span-12 lg:col-span-7 glass" style={{
-                    background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)"
-                }}>
+                <GlassWrapper className="col-span-12 lg:col-span-7" >
                     <TabController links={[
                         { value: "account_detail", label: "Account Details" },
                         { value: "wallet_information", label: "Wallet Information" },
@@ -47,7 +46,7 @@ export default function AccountTab() {
                         controllerClassName=' px-4 lg:px-8 lg:pt-8 !mb-0'
                     />
                     {renderTabContent()}
-                </div>
+                </GlassWrapper>
             </div>
         </div>
     )

src/app/(dashboard)/(user)/(privateUser)/account/loading.tsx

+// components/Loading.tsx
+import React from 'react';
+
+export default function Loading() {
+    return (
+        <div className="flex items-center justify-center h-[60vh]">
+            <div className="flex flex-col items-center">
+                {/* Spinner */}
+                <div className="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
+                <p className="mt-4 text-gray-600 font-medium text-lg">Loading...</p>
+            </div>
+        </div>
+    );
+}

src/app/(dashboard)/(user)/(privateUser)/credentials/loading.tsx

+// components/Loading.tsx
+import React from 'react';
+
+export default function Loading() {
+    return (
+        <div className="flex items-center justify-center h-[60vh]">
+            <div className="flex flex-col items-center">
+                {/* Spinner */}
+                <div className="w-12 h-12 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
+                <p className="mt-4 text-gray-600 font-medium text-lg">Loading...</p>
+            </div>
+        </div>
+    );
+}

src/app/globals.css

@@ -410,6 +410,27 @@
 	border-radius: 12px;
 	border: 1px solid rgba(255, 255, 255, 0.3);
 	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+	transition: transform 0.3s ease;
+}
+
+.glass::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	/* background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.2) 0%, transparent 60%); */
+	background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
+			rgba(184, 1, 192, 0.2) 0%,
+			rgba(224, 70, 220, 0) 60%);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.3s ease;
+}
+
+.glass:hover::before {
+	opacity: 1;
 }
 
 @media (max-width:1020px) {

src/components/molecules/GlassWrapper.tsx

+"use client";
+
+import React, { useRef } from "react";
+
+interface GlassWrapperProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const GlassWrapper: React.FC<GlassWrapperProps> = ({ children, className }) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        if (!ref.current) return;
+        const rect = ref.current.getBoundingClientRect();
+        const x = ((e.clientX - rect.left) / rect.width) * 100;
+        const y = ((e.clientY - rect.top) / rect.height) * 100;
+        ref.current.style.setProperty("--x", `${x}%`);
+        ref.current.style.setProperty("--y", `${y}%`);
+    };
+
+    const handleMouseLeave = () => {
+        if (!ref.current) return;
+        ref.current.style.setProperty("--x", `50%`);
+        ref.current.style.setProperty("--y", `50%`);
+    };
+
+    return (
+        <div
+            ref={ref}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            className={`glass ${className || ""}`}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default GlassWrapper;

src/components/organism/Cards/UserProfileCard.tsx

 "use client";
+import GlassWrapper from '@/components/molecules/GlassWrapper';
 import { useAppSelector } from '@/hooks/hook';
 import EditIcon from '@/icons/EditIcon'
 import { formatDateTime } from '@/utils/formatDateTime';
@@ -10,9 +11,7 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
     const { date } = formatDateTime(user?.registered_date as string);
 
     return (
-        <div className="player__info text-center  rounded-xl lg:rounded-3xl p-4 lg:py-10 lg:px-9 glass" style={{
-            background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)"
-        }}>
+        <GlassWrapper className="player__info text-center  rounded-xl lg:rounded-3xl p-4 lg:py-10 lg:px-9" >
             <div className="player__profile bg-primary-grad p-[1px] rounded-full max-w-fit mx-auto relative">
                 <Image src={user?.profile_image_file || "/assets/images/auth-image.png"} alt='' width={100} height={100} className=' aspect-square rounded-full border-[5px] border-solid border-white' />
                 <div className="absolute left-[50%] translate-x-[-50%] bottom-[-10px]">
@@ -87,6 +86,6 @@ export default function UserProfileCard({ balance, loading }: { balance: any; lo
                     </div>
                 </div>)
             }
-        </div>
+        </GlassWrapper>
     )
 }

src/components/pages/dashboard/UspSlider.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 import React, { useEffect, useState, useRef } from "react";
 import { motion, useMotionValue, useTransform, animate } from "framer-motion";
+import GlassWrapper from "@/components/molecules/GlassWrapper";
 
 interface UspItem {
     title: string;
@@ -53,12 +54,15 @@ export default function UspSlider({ uspData }: { uspData: { title: string; descr
                     {items.map((item, index) => (
                         <motion.div
                             key={index}
-                            className="flex-shrink-0 w-[220px] md:w-[260px] lg:w-[280px] py-4 px-5 flex items-center gap-3 rounded-2xl glass"
-                            style={{
-                                background: "rgba(255, 255, 255, 0.15)",
-                                backdropFilter: "blur(8px)",
-                            }}
-                            whileHover={{ scale: 1.05 }}
+                        // style={{
+                        //     background: "rgba(255, 255, 255, 0.15)",
+                        //     backdropFilter: "blur(8px)",
+                        // }}
+                        // whileHover={{ scale: 1.05 }}
+                        >
+                            <GlassWrapper
+                                className="flex-shrink-0 w-[220px] md:w-[260px] lg:w-[280px] py-4 px-5 flex items-center gap-3 rounded-2xl"
+
                             >
                                 <Image
                                     src={item.icon || "/assets/images/fallback.png"}
@@ -73,6 +77,7 @@ export default function UspSlider({ uspData }: { uspData: { title: string; descr
                                     </strong>
                                     <p className="text-xs opacity-80">{item.description}</p>
                                 </div>
+                            </GlassWrapper>
                         </motion.div>
                     ))}
                 </motion.div>

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/CoinCalculator.tsx

 "use client";
 
+import GlassWrapper from '@/components/molecules/GlassWrapper';
 import GoldCoinIcon from '@/icons/GoldCoinIcon';
 import { Box, Button, OutlinedInput } from '@mui/material';
 import { Coin } from '@wandersonalwes/iconsax-react';
@@ -43,9 +44,8 @@ export default function CoinCalculator({ slug }: { slug: string }) {
     };
 
     return (
-        <Box className="coin__card glass" sx={{
-            borderRadius: "16px",
-            // background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
+        <GlassWrapper className='h-full'>
+            <Box className="coin__card" sx={{
                 padding: "16px",
                 height: "100%",
                 display: "flex",
@@ -109,5 +109,6 @@ export default function CoinCalculator({ slug }: { slug: string }) {
                     )}
                 </div>
             </Box>
+        </GlassWrapper>
     );
 }

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx

 "use client";
 
+import GlassWrapper from '@/components/molecules/GlassWrapper';
 import { useAppDispatch } from '@/hooks/hook';
 import BitCoinIcon from '@/icons/BitCoinIcon';
 import GoldCoinIcon from '@/icons/GoldCoinIcon';
@@ -74,12 +75,11 @@ export default function CheckoutPage({ amount, slug, bonus }: {
                         <h2 className='text-[20px] lg:text-[24px]  mt-8 mb-4'>Select payment method</h2>
                         <div className="grid sm:grid-cols-2 mb-8">
                             <div className="col-span-1">
-                                <div className="py-5 px-4 rounded-[8px] glass" style={{
-                                    borderRadius: "8px",
-                                    background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)",
-                                }}>
+                                <GlassWrapper>
+                                    <div className="py-5 px-4 " >
                                         <span className="text-[14px] flex items-center justify-start gap-2"><BitCoinIcon />Crypto Currency</span>
                                     </div>
+                                </GlassWrapper>
                             </div>
                         </div>
 

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/index.tsx

@@ -4,6 +4,7 @@ import { Coin } from '@wandersonalwes/iconsax-react'
 import Link from 'next/link'
 import React from 'react'
 import CoinCalculator from './CoinCalculator'
+import GlassWrapper from '@/components/molecules/GlassWrapper'
 
 export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
     const packs = [
@@ -38,10 +39,8 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
                 {
                     packs.map((pack) => (
 
-                        <div className="col-span-1 h-full glass" key={pack.label}>
+                        <GlassWrapper className="col-span-1 h-full" key={pack.label}>
                             <Box className="coin__card" sx={{
-                                borderRadius: "16px",
-                                background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
                                 padding: "16px"
 
                             }}>
@@ -73,7 +72,7 @@ export default function BuyCoinSinlgeGame({ slug }: { slug: string }) {
                                     <Link href={`/buy-coins/${slug}/checkout?amount=${pack.amount}&bonus=${pack.bonus}`} className='ss-btn bg-primary-grad !text-white flex justify-center items-center'><Coin />Buy Coins</Link>
                                 </div>
                             </Box>
-                        </div>
+                        </GlassWrapper>
                     ))
                 }
                 <div className="col-span-1 h-full">

src/components/pages/dashboard/userDashboard/buyCoins/index.tsx

+import GlassWrapper from '@/components/molecules/GlassWrapper'
 import GoldCoinIcon from '@/icons/GoldCoinIcon'
 import SilverCoinIcon from '@/icons/SilverCoinIcon'
 import { GameResponseProps } from '@/types/game'
@@ -32,13 +33,9 @@ export default function BuyCoinGameListPage({
 
                     return (
                         <div key={game.id} className="col-span-1">
-                            <div
+                            <GlassWrapper
                                 className="coin__card px-6 py-4"
-                                style={{
-                                    borderRadius: '24px',
-                                    background:
-                                        'linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)',
-                                }}
+
                             >
                                 <div className="coin__detail">
                                     <div className="flex gap-4 items-center mb-4">
@@ -65,7 +62,7 @@ export default function BuyCoinGameListPage({
                                 >
                                     <Coin />  Buy Coins
                                 </Link>
-                            </div>
+                            </GlassWrapper>
                         </div>
                     )
                 })}

src/components/pages/dashboard/userDashboard/connectWallet/index.tsx

@@ -3,14 +3,12 @@ import { SecuritySafe } from '@wandersonalwes/iconsax-react'
 import Image from 'next/image'
 import React from 'react'
 import ConnectWalletForm from './ConnectWalletForm'
+import GlassWrapper from '@/components/molecules/GlassWrapper'
 
 export default function ConnectWalletPage() {
     return (
         <section className="wallet__page__root">
-            <Box sx={{
-                borderRadius: "24px",
-                background: "rgba(255, 255, 255, 0.04)",
-            }} className="!p-6 !lg:px-16 !lg:py-8 !text-center !max-w-[50%] glass">
+            <GlassWrapper className="!p-6 !lg:px-16 !lg:py-8 !text-center !max-w-[50%]">
                 <Image src={"/assets/images/wallet-featured-image.png"} alt='' width={174} height={140} className='mx-auto' />
 
                 <span className="py-2 px-3 rounded-3xl bg-[#DBFBF6] border border-[#426A66] text-[#426A66] flex justify-center items-center max-w-fit mx-auto my-4 lg:my-6"><SecuritySafe />Safe and secure</span>
@@ -25,7 +23,7 @@ export default function ConnectWalletPage() {
                     <Image src="/assets/images/payment-02.png" alt='' width={78} height={24} />
                     <Image src="/assets/images/payment-03.png" alt='' width={78} height={24} />
                 </div>
-            </Box>
+            </GlassWrapper>
         </section>
     )
 }

src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx

@@ -9,6 +9,7 @@ import { CredentialsProps } from '@/types/game'
 import { CardPasswordField } from './CardPasswordHandler'
 import CopyToClipboard from './CopyToClipboard'
 import GameIframeDialog from '../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog'
+import GlassWrapper from '@/components/molecules/GlassWrapper'
 
 
 export default function CredentialsCard({ cred, balance }: { cred: CredentialsProps; balance: any }) {
@@ -19,10 +20,7 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
     const gcValue =
         currentBalance?.type === "gc" ? currentBalance.balance ?? 0 : null;
     return (
-        <Box sx={{
-            borderRadius: "24px",
-            background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
-        }} className="p-4 lg:p-6 glass">
+        <GlassWrapper className="p-4 lg:p-6">
             <div className="credentials__header flex gap-2">
                 <Image src={cred?.logo || "/assets/images/fallback.png"} alt={cred?.full_name} className='rounded-full aspect-square' width={74} height={74} />
                 <div className="game__detail">
@@ -68,6 +66,6 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
                 }
 
             </div>
-        </Box>
+        </GlassWrapper>
     )
 }