AI Influencer Dashboard

Act as an expert UI/UX designer and Frontend Developer. Create a premium, ultra-luxury, mobile-first SaaS dashboard for an "AI Influencer & Avatar Management Platform".

Style & Aesthetic:

Theme: Deep dark mode (bg-gray-950/bg-black) with elegant Gold/Amber accents to give a high-ticket, premium feel.
Use glassmorphism (backdrop-blur) for cards and modern, clean typography.
Fully responsive (must look like a native app on mobile and a sleek dashboard on desktop).

Layout Requirements:

Sidebar Navigation (Left):

Brand Name: "AI Quick Studio" (with a shiny gold gradient text).
Menu Links (with modern icons): Dashboard, Character Vault (Face Lock), Image Studio, Reel & Lip-Sync Maker, AI Tools (Upscale/BG Remove), and "Add Credits".

Top Header:

User Greeting: "Welcome, Creator".
Credit Wallet: A prominent pill-shaped badge showing "🪙 150 Credits Available" with a glowing effect.

Main Dashboard Area (Render these sections):

Section 1: Quick Actions (Grid of Cards)
- Card A: "Generate Avatar Image" (Cost: 5 Credits). Input area with a "Magic Wand Enhancer" button next to it.
- Card B: "Viral Caption & Script" (Cost: 2 Credits).
- Card C: "AI Reel & Lip-Sync" (Cost: 15 Credits).
Section 2: Character Vault Status
- A small display showing the currently locked character. Text: "Active Base: [yah wala character] locked for 100% consistency."
Section 3: "0% Fee Manual Recharge" (UPI Payment Area)
- A dedicated premium-looking section for buying credits.
- Show a placeholder image for a UPI QR Code.
- Below it, add an input field for "Transaction ID" and a "Upload Payment Screenshot" button.
- Add a submit button: "Verify & Add Credits".

Make the UI look interactive, with hover effects on cards and buttons. Use Tailwind CSS and Lucide React icons.

Show full message

68d ago

Now let me read the existing files to understand the current setup before building.

Now let me build all the components. I'll start with the globals.css theme, layout, and then the dashboard components.

Now let me update the layout with Inter font and metadata:

Now let me create all the components. I'll build the sidebar, header, and dashboard sections:

Now let me create the main page that assembles everything:

The premium AI Quick Studio dashboard is now fully built with all the requested sections. Here's a summary of what was created:

Theme: Deep dark mode with gold/amber accent colors using oklch color tokens, glassmorphism card effects with backdrop-blur, custom shimmer/glow/float animations, and gold gradient text for brand elements.
Sidebar Nav: Collapsible on mobile (slides in with overlay), features the "AI Quick Studio" brand logo with gold gradient text, 6 navigation items with Lucide icons, hover states, active indicator, and a pro plan usage bar at the bottom.
Top Header: Sticky header with "Welcome, Creator" greeting (gold gradient accent), a search bar (desktop), notification bell with badge, and the floating credit wallet pill with a glowing gold effect and float animation.
Quick Actions: Three glassmorphism cards (Generate Avatar with inline prompt input + Magic Wand button, Viral Caption & Script, AI Reel & Lip-Sync) each showing credit cost, hover scale effect, and corner glow decorations.
Character Vault: Displays the locked character status with emerald "Locked" badge, consistency/generation stats, and animated status indicators.
Recharge Section: UPI payment area with QR code placeholder, three pricing tiers, transaction ID input, screenshot upload button, and a bold gold "Verify & Add Credits" CTA.

68d 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...

WorkingWorking...

Working...

Act as an expert UI/UX designer and Frontend Developer. Create a premium, ultra-luxury, mobile-first SaaS dashboard for an "AI Influencer & Avatar Management Platform".

Style & Aesthetic:

Theme: Deep dark mode (bg-gray-950/bg-black) with elegant Gold/Amber accents to give a high-ticket, premium feel.
Use glassmorphism (backdrop-blur) for cards and modern, clean typography.
Fully responsive (must look like a native app on mobile and a sleek dashboard on desktop).

Layout Requirements:

Sidebar Navigation (Left):

Brand Name: "AI Quick Studio" (with a shiny gold gradient text).
Menu Links (with modern icons): Dashboard, Character Vault (Face Lock), Image Studio, Reel & Lip-Sync Maker, AI Tools (Upscale/BG Remove), and "Add Credits".

Top Header:

User Greeting: "Welcome, Creator".
Credit Wallet: A prominent pill-shaped badge showing "🪙 150 Credits Available" with a glowing effect.

Main Dashboard Area (Render these sections):

Section 1: Quick Actions (Grid of Cards)
- Card A: "Generate Avatar Image" (Cost: 5 Credits). Input area with a "Magic Wand Enhancer" button next to it.
- Card B: "Viral Caption & Script" (Cost: 2 Credits).
- Card C: "AI Reel & Lip-Sync" (Cost: 15 Credits).
Section 2: Character Vault Status
- A small display showing the currently locked character. Text: "Active Base: [yah wala character] locked for 100% consistency."
Section 3: "0% Fee Manual Recharge" (UPI Payment Area)
- A dedicated premium-looking section for buying credits.
- Show a placeholder image for a UPI QR Code.
- Below it, add an input field for "Transaction ID" and a "Upload Payment Screenshot" button.
- Add a submit button: "Verify & Add Credits".

Make the UI look interactive, with hover effects on cards and buttons. Use Tailwind CSS and Lucide React icons.

Show full message

68d ago

Now let me read the existing files to understand the current setup before building.

Now let me build all the components. I'll start with the globals.css theme, layout, and then the dashboard components.

Now let me update the layout with Inter font and metadata:

Now let me create all the components. I'll build the sidebar, header, and dashboard sections:

Now let me create the main page that assembles everything:

The premium AI Quick Studio dashboard is now fully built with all the requested sections. Here's a summary of what was created:

Theme: Deep dark mode with gold/amber accent colors using oklch color tokens, glassmorphism card effects with backdrop-blur, custom shimmer/glow/float animations, and gold gradient text for brand elements.
Sidebar Nav: Collapsible on mobile (slides in with overlay), features the "AI Quick Studio" brand logo with gold gradient text, 6 navigation items with Lucide icons, hover states, active indicator, and a pro plan usage bar at the bottom.
Top Header: Sticky header with "Welcome, Creator" greeting (gold gradient accent), a search bar (desktop), notification bell with badge, and the floating credit wallet pill with a glowing gold effect and float animation.
Quick Actions: Three glassmorphism cards (Generate Avatar with inline prompt input + Magic Wand button, Viral Caption & Script, AI Reel & Lip-Sync) each showing credit cost, hover scale effect, and corner glow decorations.
Character Vault: Displays the locked character status with emerald "Locked" badge, consistency/generation stats, and animated status indicators.
Recharge Section: UPI payment area with QR code placeholder, three pricing tiers, transaction ID input, screenshot upload button, and a bold gold "Verify & Add Credits" CTA.

You can send messages while the preview loads

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

Loading integrations...

WorkingWorking...

Working...