Skip to content

S
sweepstake
Commit 127909bd by Arjun Jhukal
Options

updated the glossy effect for glass designed card

parent 979723cd
Showing with 146 additions and 71 deletions
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 0 → 100644
// 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 0 → 100644
// 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 0 → 100644
"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>
)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment