feat: added user profile view component

[Ayoazeez26]

What I Implemented

New main component: UserProfileView in components/profile/UserProfileView.tsx that implements the UserProfileViewProps and Achievement interfaces and is UI-only (no API calls).

Subcomponents added:

Component	Description
FollowButton.tsx	Follow (blue filled, UserPlus icon) and Following (outlined, UserCheck icon with violet styling) with onFollow / onUnfollow
ProfileStats.tsx	Clickable “X Following • Y Followers” row with onFollowingClick / onFollowersClick
OverviewGrid.tsx	Re-exports ProfileOverview (2×2 stat grid: fire/diamond/trophy/puzzle icons)
OverviewCard.tsx	Re-exports StatCard
AchievementPreview.tsx	Horizontal, scrollable achievements, “View All” button, uses AchievementCard and new Achievement shape (icon as URL, value → badge)

Visual details:

• Background bg-[#050C16], card bg-[#0A1628], existing typography and spacing
• Large circular avatar (Radix Avatar) with initials fallback, username, @handle, and “Joined {joinedDate}”
• Close button (X icon) top-left, triggers onClose
• Action bar: full-width FollowButton and icon-only Share2 button (onShare)
• Overview: four stats (Day streak, Total Points, Rank with #, Challenge Level) using existing profile icons
• Achievements preview: up to three items, horizontal scroll, icon/title/value/date, plus onViewAllAchievements

---

How UserProfileView Wires Everything

UserProfileView takes all props and composes:

• Header: Avatar, username, @handle, joinedDate, close button (onClose)
• Stats row: ProfileStats with followingCount, followersCount, onFollowingClick, onFollowersClick
• Action bar: FollowButton (with isFollowing, onFollow, onUnfollow) and Share button (onShare)
• Overview: OverviewGrid with dayStreak, totalPoints, rank, challengeLevel
• Achievements: AchievementPreview with achievements and onViewAllAchievements

Layout is responsive: centered max-w-lg card, stacked on mobile, and Tailwind responsive utilities.

---

How to Use on the Friends Page

When a user is clicked in the Friends UI, render:

import { UserProfileView } from "../components/profile/UserProfileView";

<UserProfileView
  id={user.id}
  username={user.displayName}
  handle={user.handle}
  avatar={user.avatarUrl}
  joinedDate={user.joinedDateLabel}
  followingCount={user.followingCount}
  followersCount={user.followersCount}
  isFollowing={user.isFollowing}
  dayStreak={user.dayStreak}
  totalPoints={user.totalPoints}
  rank={user.rank}
  challengeLevel={user.challengeLevel}
  achievements={user.achievements}
  onFollow={() => {/* trigger follow flow */}}
  onUnfollow={() => {/* trigger unfollow flow */}}
  onShare={() => {/* open share UI */}}
  onFollowingClick={() => router.push("/friends?tab=following")}
  onFollowersClick={() => router.push("/friends?tab=followers")}
  onClose={() => router.back()}
  onViewAllAchievements={() => {/* navigate to full achievements */}}
/>

This matches the acceptance criteria: prop-driven data, correct Follow/Following states, clickable stats, close/share behavior, overview grid, achievements preview, and reusable subcomponents.

Closes #244

[A6dulmalik]

@Ayoazeez26 kindly review the failed checks, thank you.