Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive proCanvas page

Browse Source
This commit is contained in:
Mayur Shinde
2026-06-12 18:24:26 +05:30
parent 97181ee6c7
commit 4ee136a6f2
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ProCanvas.jsx
+22 -21
View File
@@ -537,10 +537,10 @@ const ProCanvasContent = () => {
const [showRewards, setShowRewards] = useState(false); const [showRewards, setShowRewards] = useState(false);
return ( return (
<div className="min-h-screen bg-zinc-100/80 dark:bg-[#09090b] text-zinc-900 dark:text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden pb-40 relative"> <div className="min-h-screen bg-zinc-100/80 dark:bg-[#09090b] text-zinc-900 dark:text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden relative flex flex-col">
{/* Ambient Background Glows */} {/* Ambient Background Glows */}
<div className="fixed inset-0 pointer-events-none z-0 overflow-hidden"> <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
<div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#3B82F6]/5 dark:bg-[#3B82F6]/10 rounded-full blur-[180px]" /> <div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#3B82F6]/5 dark:bg-[#3B82F6]/10 rounded-full blur-[180px]" />
<div className="absolute bottom-[-10%] right-[-10%] w-[50vw] h-[50vw] bg-[#FFD700]/5 rounded-full blur-[180px]" /> <div className="absolute bottom-[-10%] right-[-10%] w-[50vw] h-[50vw] bg-[#FFD700]/5 rounded-full blur-[180px]" />
</div> </div>
@@ -549,13 +549,13 @@ const ProCanvasContent = () => {
<LevelUpModal /> <LevelUpModal />
{/* TOP NAVIGATION */} {/* TOP NAVIGATION */}
<header className="relative z-40 flex items-center justify-between px-8 py-5 backdrop-blur-3xl border-b border-zinc-200 dark:border-white/5 bg-white/90 dark:bg-zinc-950/60 sticky top-0"> <header className="relative z-40 flex items-center justify-between gap-3 px-4 sm:px-6 lg:px-8 py-4 sm:py-5 backdrop-blur-3xl border-b border-zinc-200 dark:border-white/5 bg-white/90 dark:bg-zinc-950/60 sticky top-0">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4 min-w-0">
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#FFD700] to-[#FF8C00] flex items-center justify-center shadow-[0_0_25px_rgba(255,215,0,0.3)]"> <div className="w-10 h-10 sm:w-12 sm:h-12 shrink-0 rounded-xl bg-gradient-to-br from-[#FFD700] to-[#FF8C00] flex items-center justify-center shadow-[0_0_25px_rgba(255,215,0,0.3)]">
<Flame size={24} className="text-black" fill="currentColor" /> <Flame size={24} className="text-black" fill="currentColor" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col min-w-0">
<h1 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-widest leading-none text-zinc-900 dark:text-white drop-shadow-md"> <h1 className="font-['Barlow_Condensed'] font-black text-2xl sm:text-3xl uppercase tracking-widest leading-none text-zinc-900 dark:text-white drop-shadow-md truncate">
LynkedUp <span className="text-[#FFD700]">Pro</span> LynkedUp <span className="text-[#FFD700]">Pro</span>
</h1> </h1>
<span className="text-xs font-bold text-zinc-500 dark:text-white/50 tracking-widest uppercase mt-0.5">SEASON 3 ACTIVE</span> <span className="text-xs font-bold text-zinc-500 dark:text-white/50 tracking-widest uppercase mt-0.5">SEASON 3 ACTIVE</span>
@@ -563,14 +563,14 @@ const ProCanvasContent = () => {
</div> </div>
{/* Resource Bar (Like Coins/Points in FUT) */} {/* Resource Bar (Like Coins/Points in FUT) */}
<div className="flex items-center gap-6"> <div className="flex items-center gap-3 sm:gap-6 shrink-0">
<div className="hidden md:flex items-center bg-zinc-100 dark:bg-black/60 border border-zinc-200 dark:border-white/10 rounded-full px-6 py-2 shadow-sm dark:shadow-inner"> <div className="hidden md:flex items-center bg-zinc-100 dark:bg-black/60 border border-zinc-200 dark:border-white/10 rounded-full px-6 py-2 shadow-sm dark:shadow-inner">
<Trophy size={20} className="text-[#FFD700] mr-3" /> <Trophy size={20} className="text-[#FFD700] mr-3" />
<span className="font-['Barlow_Condensed'] font-black text-2xl tracking-wider text-zinc-700 dark:text-white"> <span className="font-['Barlow_Condensed'] font-black text-2xl tracking-wider text-zinc-700 dark:text-white">
<CountUp to={gs.xp || 3360} /> <span className="text-zinc-400 dark:text-white/40 text-sm ml-1">XP</span> <CountUp to={gs.xp || 3360} /> <span className="text-zinc-400 dark:text-white/40 text-sm ml-1">XP</span>
</span> </span>
</div> </div>
<div className="w-14 h-14 rounded-full p-1 bg-gradient-to-b from-[#FFD700] to-transparent cursor-pointer shadow-lg hover:scale-105 transition-transform"> <div className="w-11 h-11 sm:w-14 sm:h-14 shrink-0 rounded-full p-1 bg-gradient-to-b from-[#FFD700] to-transparent cursor-pointer shadow-lg hover:scale-105 transition-transform">
<div className="w-full h-full rounded-full bg-zinc-900 border-2 border-transparent overflow-hidden"> <div className="w-full h-full rounded-full bg-zinc-900 border-2 border-transparent overflow-hidden">
<img src={profilePic} alt="Profile" className="w-full h-full object-cover" /> <img src={profilePic} alt="Profile" className="w-full h-full object-cover" />
</div> </div>
@@ -579,10 +579,10 @@ const ProCanvasContent = () => {
</header> </header>
{/* MAIN DASHBOARD */} {/* MAIN DASHBOARD */}
<div className="relative z-10 w-full max-w-[1700px] mx-auto px-4 sm:px-6 mt-6 sm:mt-8 flex flex-col lg:flex-row gap-6 sm:gap-8"> <div className="relative z-10 flex-1 w-full max-w-[1700px] mx-auto px-4 sm:px-6 mt-6 sm:mt-8 flex flex-col xl:flex-row gap-6 sm:gap-8">
{/* LEFT: PLAYER CARD & LIVE ACTIONS */} {/* LEFT: PLAYER CARD & LIVE ACTIONS */}
<div className="w-full lg:w-[360px] xl:w-[420px] shrink-0 flex flex-col gap-6 sm:gap-8"> <div className="w-full xl:w-[380px] 2xl:w-[420px] shrink-0 min-w-0 flex flex-col gap-6 sm:gap-8">
{/* The Ultimate Player Card */} {/* The Ultimate Player Card */}
<OperatorCard user={mockDbUser} gamestate={gs} /> <OperatorCard user={mockDbUser} gamestate={gs} />
@@ -686,7 +686,7 @@ const ProCanvasContent = () => {
</div> </div>
{/* RIGHT: LIVE EVENTS & CAMPAIGNS */} {/* RIGHT: LIVE EVENTS & CAMPAIGNS */}
<div className="flex-1 flex flex-col gap-8"> <div className="flex-1 min-w-0 flex flex-col gap-6 sm:gap-8">
{/* HERO LIVE EVENT BANNER (Today's Mission) */} {/* HERO LIVE EVENT BANNER (Today's Mission) */}
<motion.div <motion.div
@@ -698,12 +698,12 @@ const ProCanvasContent = () => {
<div className="absolute inset-0 bg-gradient-to-r from-emerald-600 via-green-700 to-emerald-800 dark:from-green-900 dark:via-[#1A2E1A] dark:to-zinc-900 z-0" /> <div className="absolute inset-0 bg-gradient-to-r from-emerald-600 via-green-700 to-emerald-800 dark:from-green-900 dark:via-[#1A2E1A] dark:to-zinc-900 z-0" />
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 dark:opacity-30 mix-blend-overlay pointer-events-none z-0" /> <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 dark:opacity-30 mix-blend-overlay pointer-events-none z-0" />
<div className="relative z-10 p-8 sm:p-10 flex flex-col sm:flex-row items-start sm:items-center justify-between min-h-[180px] gap-8"> <div className="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col md:flex-row md:items-center justify-between min-h-[160px] sm:min-h-[180px] gap-6">
<div className="flex flex-col text-center sm:text-left"> <div className="flex flex-col text-center md:text-left min-w-0">
<span className="font-['Barlow_Condensed'] font-black text-base sm:text-lg uppercase tracking-widest text-[#AAFF00] mb-2 flex items-center justify-center sm:justify-start gap-2"> <span className="font-['Barlow_Condensed'] font-black text-base sm:text-lg uppercase tracking-widest text-[#AAFF00] mb-2 flex items-center justify-center md:justify-start gap-2">
<Target size={20} /> LIVE EVENT ACTIVE <Target size={20} /> LIVE EVENT ACTIVE
</span> </span>
<h2 className="font-['Barlow_Condensed'] font-black text-4xl sm:text-5xl lg:text-6xl text-white uppercase tracking-tight leading-none drop-shadow-xl"> <h2 className="font-['Barlow_Condensed'] font-black text-3xl sm:text-4xl lg:text-5xl xl:text-6xl text-white uppercase tracking-tight leading-none drop-shadow-xl">
Knock 20 Doors<br /> Knock 20 Doors<br />
<span className="text-white/60">Pineland Heights</span> <span className="text-white/60">Pineland Heights</span>
</h2> </h2>
@@ -713,8 +713,8 @@ const ProCanvasContent = () => {
<motion.div <motion.div
animate={{ scale: [1, 1.03, 1], boxShadow: ["0 0 30px rgba(170,255,0,0.4)", "0 0 60px rgba(170,255,0,0.7)", "0 0 30px rgba(170,255,0,0.4)"] }} animate={{ scale: [1, 1.03, 1], boxShadow: ["0 0 30px rgba(170,255,0,0.4)", "0 0 60px rgba(170,255,0,0.7)", "0 0 30px rgba(170,255,0,0.4)"] }}
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }} transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
className="shrink-0 flex items-center justify-center px-6 py-4 sm:px-8 sm:py-5 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#AAFF00] to-[#558000] border-4 border-[#CCFF33] hover:brightness-110 active:scale-95 transition-all cursor-pointer"> className="w-full md:w-auto shrink-0 flex items-center justify-center px-6 py-4 sm:px-8 sm:py-5 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#AAFF00] to-[#558000] border-4 border-[#CCFF33] hover:brightness-110 active:scale-95 transition-all cursor-pointer">
<span className="font-['Barlow_Condensed'] font-black text-2xl sm:text-3xl italic uppercase tracking-widest text-black flex items-center gap-2 sm:gap-3"> <span className="font-['Barlow_Condensed'] font-black text-2xl sm:text-3xl italic uppercase tracking-widest text-black flex items-center gap-2 sm:gap-3 whitespace-nowrap">
START PLAY <ChevronRight size={28} className="text-black sm:w-8 sm:h-8 w-6 h-6" /> START PLAY <ChevronRight size={28} className="text-black sm:w-8 sm:h-8 w-6 h-6" />
</span> </span>
</motion.div> </motion.div>
@@ -934,8 +934,9 @@ const ProCanvasContent = () => {
</div> </div>
</div> </div>
{/* FIXED BOTTOM NAVIGATION */} {/* STICKY BOTTOM NAVIGATION — sticky (not fixed) so it stays within the
<div className="fixed bottom-0 inset-x-0 h-[80px] sm:h-[100px] bg-white/95 dark:bg-zinc-950/90 backdrop-blur-2xl border-t border-zinc-200 dark:border-white/10 z-50 flex items-center justify-center pointer-events-none"> layout's content area instead of spanning under the sidebar. */}
<div className="sticky bottom-0 inset-x-0 mt-8 h-[80px] sm:h-[100px] bg-white/95 dark:bg-zinc-950/90 backdrop-blur-2xl border-t border-zinc-200 dark:border-white/10 z-50 flex items-center justify-center pointer-events-none">
<div className="max-w-[1000px] w-full px-2 sm:px-6 flex items-center justify-between pointer-events-auto"> <div className="max-w-[1000px] w-full px-2 sm:px-6 flex items-center justify-between pointer-events-auto">
{[ {[
{ label: 'Map', icon: MapIcon, active: true }, { label: 'Map', icon: MapIcon, active: true },
@@ -960,7 +961,7 @@ const ProCanvasContent = () => {
</div> </div>
{/* Background Texture Overlay */} {/* Background Texture Overlay */}
<div className="fixed inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.015] pointer-events-none z-0" /> <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.015] pointer-events-none z-0" />
{/* Modal Injection */} {/* Modal Injection */}
<AnimatePresence> <AnimatePresence>