Page: Profile

Page Spec: Profile (Settings) 
 Route 
 /profile 
 Architecture Status 
 Core 
 Figma Reference 
 profile.png 
 Visual Description from Figma 
 The profile/settings page is the user account management screen: 
 
 Top bar: Left side has a back arrow (ArrowLeft, NOT chevron) in muted gray. "Profil" heading in bold sans-serif font (NOT serif). Right side is empty. Background is light gray (#EEEEEE). 
 User card: White rounded card at top with:
 
 Circular avatar with light green background (#0B6E35/10 = 10% opacity green) 
 Initials "AH" in dark green (#0B6E35) centered in the avatar circle 
 User name "Amir Hadžić" in bold black LEFT-ALIGNED (NOT centered) next to avatar 
 Email "amir@eksempel.no" in muted gray below name, LEFT-ALIGNED (NOT centered) 
 LAYOUT: Avatar and text are in horizontal flexbox (NOT centered vertical stack) 
 
 
 Menu card: White rounded card containing 5 menu items:
 
 "Mine kontoer" — building/bank icon (outlined, dark gray) on left, chevron right on right side 
 "Varsler" — bell icon (outlined, dark gray) on left, chevron right on right side 
 "Innstillinger" — gear/cog icon (outlined, dark gray) on left, chevron right on right side 
 "Sikkerhet" — shield icon (outlined, dark gray) on left, chevron right on right side 
 "Hjelp og støtte" — question mark in circle icon (outlined, dark gray) on left, chevron right on right side 
 
 
 Each menu item has padding, separated by subtle divider lines 
 Icons are consistent size (approximately 20-24px) 
 Text is medium weight, dark black 
 Chevron right icons are muted gray 
 
 
 Logout button: Separate white rounded button with:
 
 "Logg ut" text in red (#EF4444) 
 Logout/exit icon (LogOut component) inline with text (NOT on left with text to right) 
 2px solid red border (border-2 border-[#EF4444]) 
 White background, hover changes to light red (#FEF2F2) 
 
 
 Footer text: NOT IMPLEMENTED (claimed in spec but missing from code) 
 Bottom navigation: 5 tabs — Hjem (house outline), Send (paper plane outline), Skann (QR outline), Kort (card outline), Profil (active, green, filled person icon). All inactive tabs are gray. 
 
 Background is light gray (#EEEEEE). Spacing between cards is consistent. 
 Page Layout 
 App page WITH bottom nav
├── Top Bar
│ ├── Left: Back arrow
│ ├── Center: "Profil" heading
│ └── Right: Empty
├── User Card (white rounded, centered content)
│ ├── Avatar circle (initials, green on light green bg)
│ ├── User full name (bold)
│ └── Email address (muted)
├── Menu Card (white rounded)
│ ├── "Mine kontoer" (bank icon + chevron)
│ ├── "Varsler" (bell icon + chevron)
│ ├── "Innstillinger" (gear icon + chevron)
│ ├── "Sikkerhet" (shield icon + chevron)
│ └── "Hjelp og støtte" (question icon + chevron)
├── Logout Button Card (white rounded, red text)
│ └── "Logg ut" (logout icon)
├── Footer Text
│ └── "Drop v0.1.0 · ALAI Holding AS"
└── Bottom Nav (Profil active)
 
 Components 
 Top Bar 
 <div className="flex items-center gap-3 px-6 pt-6">
 <Link href="/dashboard">
 <button className="rounded-lg p-2 hover:bg-white/80">
 <ArrowLeft className="h-5 w-5 text-[#6B7280]" />
 </button>
 </Link>
 <h1 className="text-xl font-bold text-[#1A1A1A]">Profil</h1>
</div>
 
 User Card 
 <div className="rounded-2xl bg-white p-6 shadow-sm">
 <div className="flex items-center gap-4">
 <div className="h-14 w-14 rounded-full bg-[#0B6E35]/10 flex items-center justify-center text-xl font-bold text-[#0B6E35]">
 {user.firstName.charAt(0)}{user.lastName.charAt(0)}
 </div>
 <div>
 <p className="font-semibold text-lg text-[#1A1A1A]">{user.firstName} {user.lastName}</p>
 <p className="text-sm text-[#6B7280]">{user.email}</p>
 </div>
 </div>
</div>
 
 Menu Card 
 <div className="rounded-2xl bg-white shadow-sm overflow-hidden">
 <MenuItem
 icon={<Building2 className="h-5 w-5" />}
 label="Mine kontoer"
 href="/accounts"
 />
 <Divider />
 <MenuItem
 icon={<Bell className="h-5 w-5" />}
 label="Varsler"
 href="/notifications"
 />
 <Divider />
 <MenuItem
 icon={<Settings className="h-5 w-5" />}
 label="Innstillinger"
 href="/settings"
 />
 <Divider />
 <MenuItem
 icon={<Shield className="h-5 w-5" />}
 label="Sikkerhet"
 href="/security"
 />
 <Divider />
 <MenuItem
 icon={<HelpCircle className="h-5 w-5" />}
 label="Hjelp og støtte"
 href="/support"
 />
</div>
 
 Menu Item Component 
 <Link href={href} className="flex items-center justify-between px-5 py-4 hover:bg-[#F9FAFB] transition-colors">
 <div className="flex items-center gap-3">
 <div className="text-[#6B7280]">{icon}</div>
 <span className="text-[15px] font-medium text-[#1A1A1A]">{label}</span>
 </div>
 <ChevronRight className="h-5 w-5 text-[#9CA3AF]" />
</Link>
 
 Divider 
 <div className="h-px bg-[#E5E7EB] mx-5" />
 
 Logout Button 
 <button
 onClick={handleLogout}
 className="w-full rounded-2xl bg-white border border-[#E5E7EB] p-4 shadow-sm hover:bg-[#FEF2F2] transition-colors"
>
 <div className="flex items-center justify-center gap-2">
 <LogOut className="h-5 w-5 text-[#EF4444]" />
 <span className="text-[15px] font-semibold text-[#EF4444]">Logg ut</span>
 </div>
</button>
 
 Footer Text 
 <p className="text-center text-xs text-[#9CA3AF]">
 Drop v0.1.0 · ALAI Holding AS
</p>
 
 Data Displayed 
 
 
 
 Data 
 Source 
 API 
 
 
 
 
 User full name 
 JWT / user profile 
 GET /api/account 
 
 
 User email 
 User profile 
 GET /api/account 
 
 
 User initials 
 Derived from full name 
 Client-side 
 
 
 App version 
 Build metadata 
 Static 
 
 
 Company name 
 Static 
 Static 
 
 
 
 User Interactions 
 
 
 
 Element 
 Action 
 Result 
 
 
 
 
 Back arrow 
 Click 
 Navigate back to previous page 
 
 
 Avatar 
 Click 
 Optional: navigate to profile edit page 
 
 
 "Mine kontoer" 
 Click 
 Navigate to /accounts 
 
 
 "Varsler" 
 Click 
 Navigate to /notifications 
 
 
 "Innstillinger" 
 Click 
 Navigate to /settings (app preferences) 
 
 
 "Sikkerhet" 
 Click 
 Navigate to /security (PIN, biometrics, 2FA) 
 
 
 "Hjelp og støtte" 
 Click 
 Navigate to /support (FAQs, contact) 
 
 
 "Logg ut" button 
 Click 
 Clear JWT cookie, redirect to /login 
 
 
 Bottom nav tabs 
 Click 
 Navigate to respective page 
 
 
 
 Norwegian Labels 
 
 
 
 Element 
 Norwegian Text 
 
 
 
 
 Page title 
 Profil 
 
 
 Bank accounts menu 
 Mine kontoer 
 
 
 Notifications menu 
 Varsler 
 
 
 Settings menu 
 Innstillinger 
 
 
 Security menu 
 Sikkerhet 
 
 
 Help menu 
 Hjelp og støtte 
 
 
 Logout button 
 Logg ut 
 
 
 Footer 
 Drop v0.1.0 · ALAI Holding AS 
 
 
 
 Design Tokens 
 
 
 
 Token 
 Value 
 
 
 
 
 Page bg 
 #EEEEEE 
 
 
 Card bg 
 #FFFFFF 
 
 
 Avatar bg 
 #D1E9DC (light green/mint) 
 
 
 Avatar text 
 #0B6E35 
 
 
 Primary 
 #0B6E35 
 
 
 Text primary 
 #1A1A1A 
 
 
 Text muted 
 #6B7280 
 
 
 Text light 
 #9CA3AF 
 
 
 Border 
 #E5E7EB 
 
 
 Danger 
 #EF4444 
 
 
 Danger hover bg 
 #FEF2F2 
 
 
 Hover bg 
 #F9FAFB 
 
 
 Brand font 
 font-[family-name:var(--font-fraunces)] 
 
 
 Card radius 
 rounded-2xl 
 
 
 Avatar radius 
 rounded-full 
 
 
 Avatar size 
 h-20 w-20 
 
 
 Menu item padding 
 px-5 py-4 
 
 
 Icon size 
 h-5 w-5 
 
 
 
 Bottom Navigation 
 Yes — "Profil" tab active (green, filled person icon). All other tabs inactive (gray, outline icons).