Finance app UI - v0 by Vercel

No message content

pasted-text.txt

12d ago

I'll build this premium personal finance app mockup with the three screens as specified. Let me create the components with the dark theme, glassmorphism effects, and the specific color palette requested.

Now let me create the three mobile app screens as components:

Now let me create the main page that displays all three screens in a premium mockup composition:

I've created a high-fidelity mobile app mockup set for your FinanceFlow personal finance application. The design includes:

Guilt-Free Dashboard (left) - Shows daily spending allowance in bright emerald green ($85.00), a unique "Financial Weather Forecast" widget with animated sun/rain icons indicating upcoming payments, savings goal progress bars, and today's transactions with a floating green action button.
AI Copilot (center) - Features a chat-like interface with a glowing blue brain icon, user/AI message bubbles, an intelligent response about budget trade-offs for purchasing headphones, two glowing blue action buttons ("Simulate" and "See Trade-offs"), quick suggestion chips, and a voice input bar with microphone icon.
Future Projections (right) - Displays a 90-day forecast with a dual-tone area chart (solid green for actual data, dashed blue for predictions), event markers for upcoming payments, and a summary card showing the predicted end balance.

The composition uses the exact color palette requested (Deep Charcoal #121212, Emerald Green #10B981, Electric Blue #3B82F6), glassmorphism effects on cards, Inter/Geist typography, subtle drop shadows, and ambient background glows for that premium software aesthetic.

12d ago

pasted-text.txt

12d ago

Now I'll create the 4 new screens following the established patterns:

Now let me update the main page to display all 7 screens in a professional grid layout:

I've created the 4 additional screens to complete your AURA FINANCE mockup set:

Behavioral Finance & Habits Tab - Features a prominent Time Value card ($15.00/hour), an animated glowing toggle switch for the Impulse Buy Filter with a 10-minute cooling-off period, and a list of active financial challenges with progress bars.
Settings & Advanced Profile - Displays user avatar and info, a clean list of settings (Connected Bank Accounts, Security & Biometrics with Face ID, Push Notifications), and a special Partner Sync card with zero-knowledge encryption and "Generate Connection Code" button.
Welcome Splash Screen - Pure charcoal background with subtle emerald/blue gradient glow, a custom geometric SVG logo with interlocking hexagon and triangle shapes, the "AURA FINANCE" name in bold white, tagline in soft gray, and a full-width glowing green "Get Started" button with login option below.
Onboarding Income Setup - Shows a Step 1 of 3 progress bar, large friendly heading asking for monthly income, a massive currency input field with animated cursor, a context card explaining why this data is needed, and a disabled/active Continue button.

All screens follow the established dark color palette, glassmorphism effects, and modern typography from the original three screens.

Fixed the hydration error by replacing the dynamic Date.now() call with a static date string. Since this is a UI mockup, using a fixed date avoids the server/client mismatch that occurs when the date is calculated at different times during SSR and client hydration.

12d ago

You can send messages while the preview loads

Code editing is not availableDuplicate this chat to use a more powerful code editor.

Loading integrations...

No message content

pasted-text.txt

12d ago

Now let me create the three mobile app screens as components:

Now let me create the main page that displays all three screens in a premium mockup composition:

I've created a high-fidelity mobile app mockup set for your FinanceFlow personal finance application. The design includes:

Guilt-Free Dashboard (left) - Shows daily spending allowance in bright emerald green ($85.00), a unique "Financial Weather Forecast" widget with animated sun/rain icons indicating upcoming payments, savings goal progress bars, and today's transactions with a floating green action button.
AI Copilot (center) - Features a chat-like interface with a glowing blue brain icon, user/AI message bubbles, an intelligent response about budget trade-offs for purchasing headphones, two glowing blue action buttons ("Simulate" and "See Trade-offs"), quick suggestion chips, and a voice input bar with microphone icon.
Future Projections (right) - Displays a 90-day forecast with a dual-tone area chart (solid green for actual data, dashed blue for predictions), event markers for upcoming payments, and a summary card showing the predicted end balance.

pasted-text.txt

12d ago

Now I'll create the 4 new screens following the established patterns:

Now let me update the main page to display all 7 screens in a professional grid layout:

I've created the 4 additional screens to complete your AURA FINANCE mockup set:

Behavioral Finance & Habits Tab - Features a prominent Time Value card ($15.00/hour), an animated glowing toggle switch for the Impulse Buy Filter with a 10-minute cooling-off period, and a list of active financial challenges with progress bars.
Settings & Advanced Profile - Displays user avatar and info, a clean list of settings (Connected Bank Accounts, Security & Biometrics with Face ID, Push Notifications), and a special Partner Sync card with zero-knowledge encryption and "Generate Connection Code" button.
Welcome Splash Screen - Pure charcoal background with subtle emerald/blue gradient glow, a custom geometric SVG logo with interlocking hexagon and triangle shapes, the "AURA FINANCE" name in bold white, tagline in soft gray, and a full-width glowing green "Get Started" button with login option below.
Onboarding Income Setup - Shows a Step 1 of 3 progress bar, large friendly heading asking for monthly income, a massive currency input field with animated cursor, a context card explaining why this data is needed, and a disabled/active Continue button.

All screens follow the established dark color palette, glassmorphism effects, and modern typography from the original three screens.

12d ago

You can send messages while the preview loads

Code editing is not availableDuplicate this chat to use a more powerful code editor.

Loading integrations...