feat: updated dashboard's layout with sidebar, topbar, and a user profile page.

Author: Arun-kushwaha007

apps/web/app/dashboard/profile/page.tsx

@@ -14,9 +14,8 @@ export default async function ProfilePage() {
   return (
     <DashboardLayout>
       <div className="space-y-8">
-        <div className="rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] p-8 shadow-[var(--fs-shadow-soft)]">
-          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--fs-text-muted)]">Profile</p>
-          <h1 className="text-3xl font-extrabold tracking-tight text-[var(--fs-text-primary)]">Your account</h1>
+        <div className="rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] p-6 shadow-[var(--fs-shadow-soft)]">
+          <h1 className="text-3xl font-bold tracking-tight text-[var(--fs-text-primary)]">Your account</h1>
           <p className="text-[12px] font-medium text-[var(--fs-text-muted)]">
             Mirror the mobile profile: review your identity, hop to settings, and sign out securely.
           </p>

apps/web/src/components/layout/DashboardLayout.tsx

@@ -8,7 +8,7 @@ import { GridBackground } from '../../../components/home';
 export function DashboardLayout({ children, topbarRight }: { children: ReactNode; topbarRight?: ReactNode }) {
   return (
     <AppLayout>
-      <div className="relative min-h-screen bg-[#030303] overflow-hidden">
+      <div className="relative min-h-screen bg-[#030303] overflow-hidden pt-16">
         {/* Cinematic Backdrop */}
         <GridBackground />
         <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-purple-500/[0.01] to-transparent" />

apps/web/src/components/layout/Sidebar.tsx

@@ -82,7 +82,7 @@ export function Sidebar() {
                 <span className="text-[10px] font-bold text-emerald-600 dark:text-emerald-400">Stable</span>
               </div>
             </div>
-            <p className="text-xs font-bold text-[var(--fs-text-primary)]">FairShare v1.2.0</p>
+            <p className="text-xs font-bold text-[var(--fs-text-primary)]">FairShare v1.0.0</p>
           </div>
         </div>
       </div>

apps/web/src/components/layout/Topbar.tsx

@@ -25,7 +25,7 @@ export function Topbar({ rightSlot }: { rightSlot?: React.ReactNode }) {
         <div className="flex items-center gap-2 mt-1.5">
           <div className="h-1.5 w-1.5 rounded-full bg-[var(--fs-primary)] opacity-50 shadow-[0_0_8px_var(--fs-primary)]" />
           <p className="text-[11px] font-bold uppercase tracking-[0.15em] text-[var(--fs-text-muted)]">
-            Royal Session Active • {new Date().toLocaleDateString(undefined, { weekday: 'long', hour: '2-digit', minute: '2-digit'})}
+            Session Active • {new Date().toLocaleDateString(undefined, { weekday: 'long', hour: '2-digit', minute: '2-digit'})}
           </p>
         </div>
       </div>

apps/web/src/components/profile/ProfilePanel.tsx

@@ -2,10 +2,11 @@
 
 import Link from 'next/link';
 import { AuthUserDto } from '@fairshare/shared-types';
-import { LogOut, ShieldCheck, LifeBuoy, Settings } from 'lucide-react';
+import { LogOut, ShieldCheck, LifeBuoy, Settings, ChevronRight, User, Command } from 'lucide-react';
 import { useAuth } from '../auth/AuthProvider';
-
-const cardBase = 'rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] shadow-[var(--fs-shadow-soft)]';
+import { motion } from 'framer-motion';
+import { GlassCard } from '../../../components/ui/GlassCard';
+import { fadeUp, staggerContainer } from '../../../components/home/motion-variants';
 
 function initials(name?: string | null) {
   if (!name) return 'FS';
@@ -18,79 +19,115 @@ export function ProfilePanel({ fallbackUser }: { fallbackUser: AuthUserDto | nul
   const { user, logout, loading } = useAuth();
   const currentUser = user ?? fallbackUser;
 
+  const actionItems = [
+    {
+      title: 'Settings',
+      desc: 'Appearance, security, and account syncing.',
+      icon: Settings,
+      href: '/dashboard/settings',
+      color: 'text-purple-400',
+      bg: 'bg-purple-500/10'
+    },
+    {
+      title: 'Privacy',
+      desc: 'Encryption keys and session hygiene.',
+      icon: ShieldCheck,
+      href: '#',
+      color: 'text-indigo-400',
+      bg: 'bg-indigo-500/10'
+    },
+    {
+      title: 'Support',
+      desc: 'Troubleshooting and interface onboarding.',
+      icon: LifeBuoy,
+      href: '#',
+      color: 'text-violet-400',
+      bg: 'bg-violet-500/10'
+    }
+  ];
+
   return (
-    <div className="space-y-8">
-      <div className={`${cardBase} p-8 relative overflow-hidden`}>
-        <div className="absolute inset-0 opacity-10 pointer-events-none bg-gradient-to-br from-[var(--fs-primary)] to-[var(--fs-accent)]" />
-        <div className="relative flex items-center gap-4">
-          <div className="h-16 w-16 rounded-2xl bg-[var(--fs-primary)] text-white font-black text-2xl flex items-center justify-center shadow-lg border border-white/30">
-            {initials(currentUser?.name)}
+    <motion.div 
+      variants={staggerContainer}
+      initial="hidden"
+      animate="show"
+      className="space-y-8 max-w-4xl mx-auto"
+    >
+      {/* ── User Identity ── */}
+      <GlassCard className=" border-white/10 bg-white/[0.02]">
+        <div className="flex flex-col md:flex-row items-center gap-8 text-center md:text-left">
+          <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg border border-white/20">
+            <span className="text-2xl font-black italic tracking-tighter text-white">
+              {initials(currentUser?.name)}
+            </span>
           </div>
           <div className="space-y-1">
-            <p className="text-lg font-extrabold text-[var(--fs-text-primary)]">
-              {currentUser?.name ?? 'Guest'}
-            </p>
-            <p className="text-sm font-medium text-[var(--fs-text-muted)]">
+            <h1 className="text-2xl font-black italic tracking-tighter text-white uppercase">
+              {currentUser?.name ?? 'Guest User'}
+            </h1>
+            <p className="text-sm font-bold tracking-widest text-zinc-500 uppercase">
               {currentUser?.email ?? 'Not signed in'}
             </p>
-            <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-[var(--fs-text-secondary)]">
-              Parity with mobile profile, now on web.
-            </p>
           </div>
         </div>
-      </div>
+      </GlassCard>
 
-      <div className="grid gap-4 sm:grid-cols-2">
-        <Link
-          href="/dashboard/settings"
-          className={`${cardBase} px-5 py-4 flex items-center gap-3 hover:border-[var(--fs-primary)] transition-colors`}
-        >
-          <div className="h-10 w-10 rounded-xl bg-[var(--fs-primary)]/10 text-[var(--fs-primary)] flex items-center justify-center">
-            <Settings className="w-5 h-5" />
-          </div>
-          <div>
-            <p className="text-sm font-semibold text-[var(--fs-text-primary)]">Settings</p>
-            <p className="text-[12px] font-medium text-[var(--fs-text-muted)]">Appearance, security, and account</p>
-          </div>
+      {/* ── Actions ── */}
+      <div className="grid gap-4 sm:grid-cols-4">
+        <Link href="/dashboard/settings" className="block h-full">
+          <GlassCard className=" border-white/5 bg-white/[0.01] hover:bg-white/[0.03] transition-all group flex items-center gap-4">
+            <div className="h-10 w-10 rounded-xl bg-purple-500/10 text-purple-400 flex items-center justify-center border border-purple-500/20">
+              <Settings size={18} />
+            </div>
+            <div className='pt-2'>
+              <p className="text-sm font-black italic tracking-tight text-white uppercase">Settings</p>
+              <p className="text-[10px] font-semibold text-zinc-600 uppercase tracking-widest">Account & Appearance</p>
+            </div>
+          </GlassCard>
         </Link>
 
-        <div className={`${cardBase} px-5 py-4 flex items-center gap-3`}>
-          <div className="h-10 w-10 rounded-xl bg-[var(--fs-primary)]/10 text-[var(--fs-primary)] flex items-center justify-center">
-            <ShieldCheck className="w-5 h-5" />
-          </div>
-          <div>
-            <p className="text-sm font-semibold text-[var(--fs-text-primary)]">Privacy & security</p>
-            <p className="text-[12px] font-medium text-[var(--fs-text-muted)]">Encryption, session hygiene, audit trails</p>
-          </div>
+        <div className="h-full">
+          <GlassCard className=" border-white/5 bg-white/[0.01] flex items-center gap-4">
+            <div className="h-10 w-10 rounded-xl bg-indigo-500/10 text-indigo-400 flex items-center justify-center border border-indigo-500/20">
+              <ShieldCheck size={18} />
+            </div>
+            <div className='pt-2'>
+              <p className="text-sm font-black italic tracking-tight text-white uppercase">Privacy & Security</p>
+              <p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">Data & Encryption</p>
+            </div>
+          </GlassCard>
         </div>
 
-        <div className={`${cardBase} px-5 py-4 flex items-center gap-3`}>
-          <div className="h-10 w-10 rounded-xl bg-[var(--fs-primary)]/10 text-[var(--fs-primary)] flex items-center justify-center">
-            <LifeBuoy className="w-5 h-5" />
-          </div>
-          <div>
-            <p className="text-sm font-semibold text-[var(--fs-text-primary)]">Help & support</p>
-            <p className="text-[12px] font-medium text-[var(--fs-text-muted)]">Troubleshooting and onboarding tips</p>
-          </div>
+        <div className="h-full">  
+          <GlassCard className=" border-white/5 bg-white/[0.01] flex items-center gap-4">
+            <div className="h-10 w-10 rounded-xl bg-zinc-500/10 text-zinc-400 flex items-center justify-center border border-white/5">
+              <LifeBuoy size={18} />
+            </div>
+            <div className='pt-2'>
+              <p className="text-sm font-black italic tracking-tight text-white uppercase">Support</p>
+              <p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">Help & Documentation</p>
+            </div>
+          </GlassCard>
         </div>
 
         <button
           onClick={() => void logout()}
           disabled={loading}
-          className={`${cardBase} px-5 py-4 flex items-center gap-3 hover:border-rose-400/60 transition-colors`}
+          className="w-full text-left h-full"
         >
-          <div className="h-10 w-10 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center">
-            <LogOut className="w-5 h-5" />
-          </div>
-          <div className="text-left">
-            <p className="text-sm font-semibold text-[var(--fs-text-primary)]">Logout</p>
-            <p className="text-[12px] font-medium text-[var(--fs-text-muted)]">Sign out on web just like mobile</p>
-          </div>
-          <span className="ml-auto text-[11px] font-bold uppercase tracking-[0.12em] text-rose-400">
-            {loading ? '...' : 'Exit'}
-          </span>
+          <GlassCard className=" border-white/5 bg-white/[0.01] hover:bg-rose-500/5 hover:border-rose-500/20 transition-all group flex items-center gap-4">
+            <div className="h-10 w-10 rounded-xl bg-rose-500/10 text-rose-500 flex items-center justify-center border border-rose-500/20">
+              <LogOut size={18} />
+            </div>
+            <div className='pt-2'>
+              <p className="text-sm font-black italic tracking-tight text-white uppercase">Logout</p>
+              <p className="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">
+                {loading ? 'Processing...' : 'Sign out of session'}
+              </p>
+            </div>
+          </GlassCard>
         </button>
       </div>
-    </div>
+    </motion.div>
   );
 }