Finova is a front-end demonstration of what a next-generation personal finance
and banking dashboard can feel like. The project focuses on visual polish,
motion design and a coherent design system rather than backend functionality —
it is a showcase of UI/UX craftsmanship intended as a foundation for a real
product.

Design Direction
~~~~~~~~~~~~~~~~
– Aesthetic: Premium, glassmorphic dark theme with violet → magenta accents
– Typography: Space Grotesk (display) paired with Inter (body) and
JetBrains Mono (numerical figures)
– Color system: HSL-based semantic tokens (primary, accent, success,
destructive, muted) defined in index.css and consumed through Tailwind —
no ad-hoc colors in components
– Surfaces: Layered glass panels with subtle borders, ambient radial glows
and a mouse-following spotlight that softly tracks the cursor
– Motion: Framer Motion drives every entrance, hover and layout animation,
combined with Recharts for animated data visualizations

Key Sections
~~~~~~~~~~~~
1. Sidebar Navigation
– Animated logo, magnetic hover states and a sliding “active” pill
(layoutId-based) that transitions between menu items
– Net Worth mini sparkline, Finova Credit Card promo, and user profile

2. Top Bar
– Search field with ⌘K hint, notification bell with badge,
refresh and theme toggle, plus a profile chip — fully responsive,
collapsing gracefully on mobile

3. Total Balance Card
– Large hero figure with animated area chart (Recharts)
– Range selector (1Y / 6M / 3M / 1M) with shared layout pill animation
– Legend for actual vs. planned balance and monthly inflow summary

4. Promo Card — “Your Financial Future Starts Here”
– Generated 3D orb hero image, layered avatars and a bold CTA button

5. Investments Card
– Animated bar chart with a highlighted “best month” bar
– Sort and timeframe pickers

6. My Cards (right column)
– Stacked card visual with a glass primary VISA card, gradient backdrop,
pulsing radial glow, and Request / Send Money actions

7. Recent Transactions
– Categorized list with colored icon tiles and slide-in stagger animation

8. Saving Goals
– Animated progress bars with shimmer effects for goal tracking

9. Quick Actions
– 2×2 grid of Send / Receive / Top Up / Pay Bills with spring hover lift

10. Demo Notice (floating popup)
– Glassmorphic bottom-right notification with spring entrance,
idle floating bounce, pulsing live indicator, and developer-branding
logos linking to pabitra.net and brownfoxit.com

Technical Stack
~~~~~~~~~~~~~~~
– React 18 + TypeScript + Vite
– Tailwind CSS v3 with HSL semantic tokens
– Framer Motion for entrance, hover, layout and idle animations
– Recharts for area and bar charts
– Lucide React for icons
– shadcn/ui primitives where appropriate

Responsiveness
~~~~~~~~~~~~~~
– Desktop: Three-zone layout (sidebar + main grid + right rail)
– Tablet: Two-column main grid with right rail collapsing below
– Mobile: Single column, sidebar hidden, top bar condenses controls,
charts and cards reflow with safe horizontal padding — no overflow

Status
~~~~~~
This is a UI-only prototype. Backend services (authentication, accounts,
real transaction data) are intentionally not implemented and will be added
in a later iteration via Lovable Cloud.

Credits
~~~~~~~
Designed and developed as a demo by:
– pabitra.net
– Brown Fox IT (brownfoxit.com)