This project is a fully responsive, animation-rich gaming dashboard
concept designed around the visual world of Red Dead Redemption II.
It demonstrates how a modern web interface can carry strong cinematic
branding while keeping usability, hierarchy, and performance intact.

The dashboard is purely a frontend showcase — there is no backend yet.
All data (games, friends, activities, downloads, statistics) is mocked
to demonstrate the layout, components, and motion design.

KEY FEATURES
————
1. Cinematic Hero Section
– Featured game banner (“Red Dead Redemption II”) with a custom
painted cowboy key-art and dramatic blood-moon backdrop.
– Animated entrance, Ken Burns scaling, and a glowing call-to-action
row with player avatars and review count.

2. Dual Sidebar Navigation
– Left sidebar: primary nav icons with active-state glow, hover/tap
micro-interactions, and a pulsing “Add” button.
– Right sidebar: user profile avatar, friends list with painted
character portraits, and live status indicators (In Game, Online,
Away).

3. Latest Activities
– Card grid showing missions, achievements, and game completion.
– Hover lift, image zoom, play button, bookmark, and progress badge.

4. Your Statistics Panel
– Animated SVG circular progress ring for total playtime.
– Quick stat tiles (Story Progress, Challenges, Kills) with iconography.

5. Last Downloads
– Active download card with shimmer progress bar, pause/cancel
controls, file size, and remaining time.

6. Floating Demo Notice
– A persistent glassmorphism popup in the bottom-right corner that
informs visitors this is a demo site and links to the developer
brands (pabitra.net and Brown Fox IT).

DESIGN SYSTEM
————-
– Color palette: deep crimson background, glowing red primary, warm
amber/gold accents — all driven by HSL semantic tokens.
– Typography: “Rye” display font for headings (Wild West feel) paired
with “Inter” for clean, modern body text.
– Surfaces: layered glass panels with backdrop blur, soft elegant
shadows, and a subtle film-grain overlay for cinematic depth.
– Motion: Framer Motion powers fade/slide entrances, spring hovers,
shimmer effects, ken-burns image motion, and pulsing glows.

TECH STACK
———-
– React 18 + TypeScript + Vite
– Tailwind CSS v3 with a fully tokenized design system
– Framer Motion for animations and micro-interactions
– shadcn/ui component primitives
– Lucide icons

STATUS
——
Frontend demo only. The interface is structured and themed so that a
backend (authentication, real game data, friends, downloads, stats)
can be connected as a next step.

CREDITS
——-
Designed and developed as a demonstration project.
Developer branding: pabitra.net • Brown Fox IT (brownfoxit.com)