royal-backend

As a user, I want to access a premium glassmorphism login/signup page so I can authenticate into the platform. Implement the Login (v2) design: glassmorphism card centered on a dark background (#0B0F0C), email and password inputs with neon green borders, neon green CTA button with ripple effect, Google OAuth button, and link to signup. Follows the user flow: Login → Dashboard. Implement based on existing Login (v2) JSX design.

As a user, I want to see an overview dashboard with key metrics (Revenue, ROAS, Leads, Conversion Rate) displayed in glassmorphism cards with neon green glow on hover so I can monitor platform performance at a glance. Implement the Dashboard (v3) design: 3D neon grid background with pulsating animation, 4 metrics cards with Framer Motion zoom-on-hover, neon sidebar active indicator, and quick navigation to all tool pages. Includes mock data for metrics until backend APIs are connected. Follows user flow: Dashboard → Ad Generator, Ad Spy, Analytics, Funnel Builder. Implement based on existing Dashboard (v3) JSX design.

As a user, I want to input my product details and generate AI-powered ad copy (headlines, descriptions, CTAs, hooks, angles) with a copy button so I can create high-converting ads quickly. Implement the Ad Generator (v3) design: input form (product, audience, country, platform selector), structured output sections for Headlines, Primary Text, Descriptions, CTAs, Hooks, and Angles, each with a neon green Copy button and Framer Motion reveal animations. Also includes a dedicated Google Ads Assets Generator section for generating headlines, descriptions, images, sitelinks, callouts, and layout previews with preview mode. Follows user flow: Dashboard → Ad Generator → Generate Google Ads Assets. Implement based on existing Ad Generator (v3) JSX design.

As a user, I want to view competitor ads as interactive flip cards that reveal AI insights on the back so I can analyze what's working in my niche. Implement the Ad Spy (v2) design: competitor ad cards showing image/video, copy, and CTA on the front; AI insights (hook classification, emotional triggers, funnel stage) on the back revealed via 3D flip animation; filter/search bar at the top; workable search and filter options connected to backend scraper API. Follows user flow: Dashboard → Ad Spy → View AI Insights. Implement based on existing Ad Spy (v2) JSX design.

As a user, I want to view my campaign analytics with ROAS and Spend vs Revenue charts along with campaign filters so I can make data-driven decisions. Implement the Analytics (v2) design: dark-themed chart panels using Recharts or Chart.js with neon green data lines, ROAS trend chart, Spend vs Revenue comparison chart, date range and campaign filter controls, and summary metric cards. Follows user flow: Dashboard → Analytics → Ads Audit. Implement based on existing Analytics (v2) JSX design.

As a user, I want to see a structured audit of my Meta and Google ad campaigns showing issues, fix suggestions, and scaling opportunities so I can improve my ad performance. Implement the Ads Audit (v2) design: campaign selector, issue cards categorized by severity (CTR, CPC, Conversion Rate problems) with neon red/yellow/green severity indicators, recommendation panels, and scaling opportunity highlights. Follows user flow: Analytics → Ads Audit → Review Recommendations. Implement based on existing Ads Audit (v2) JSX design.

As a user, I want to visually build a marketing funnel using a drag-and-drop flow diagram with animated connections between TOF, MOF, and BOF stages so I can plan my full ad-to-conversion journey. Implement the Funnel Builder (v2) design: drag-and-drop canvas using React Flow or similar, animated neon green connection lines between funnel stages, stage cards (Ad, Landing Page, Retargeting, Email), and an export/save panel. Follows user flow: Landing Analyzer → Funnel Builder → Build Funnel. Implement based on existing Funnel Builder (v2) JSX design.

As a user, I want to input a landing page URL and receive a conversion score with a glowing radial score meter and actionable improvement suggestions so I can optimize my landing pages. Implement the Landing Analyzer (v2) design: URL input with a neon green Analyze button, animated radial score meter (0–100) that fills with a glowing arc animation, categorized suggestions (headline clarity, CTA placement, trust signals, load speed), and improved copy output panel. Follows user flow: Ads Audit → Landing Analyzer → Analyze URL. Implement based on existing Landing Analyzer (v2) JSX design.

As an admin, I want access to a dedicated admin panel where I can manage users, track platform revenue, and monitor API usage so I can oversee the entire SaaS platform. Implement the Admin Panel (v2) design: user management table with role and subscription status columns, revenue tracking chart, API usage monitoring with credit consumption graphs, and platform configuration controls. Follows admin user flow: Login → Admin Panel: View Overview → Manage Users → Monitor API Usage → Analytics → Settings. Implement based on existing Admin Panel (v2) JSX design.

As a user, I want to access a settings page to configure my account, subscription, and platform preferences so I can personalize my experience. Implement the Settings (v2) design: profile section (name, email, avatar), subscription plan display with upgrade CTA, API key management panel, notification preferences, and security settings (password change). Follows admin user flow: Admin Panel → Settings: Configure Platform. Implement based on existing Settings (v2) JSX design.

As a user, I want the Ad Generator page to call a backend AI API so that I receive structured, high-converting ad copy (headlines, primary text, descriptions, CTAs, hooks, angles) generated using AIDA/PAS prompt engineering for the specified product, audience, country, and platform.

As a user, I want the Ad Spy page to fetch real competitor ad data scraped from Meta Ads Library, Google Ads Transparency, and TikTok Ads with AI-powered analysis (hook classification, emotional triggers, funnel stage detection) and recent internet research integration so I can gain competitive intelligence. Supports workable filter and search options on the frontend.

As a user, I want the Analytics dashboard to fetch real campaign data from Meta Ads API and Google Ads API, calculating ROAS, spend vs revenue, and campaign comparisons so I can make informed budget decisions.

As a user, I want the Funnel Builder page to call a backend API that generates a complete AI-powered funnel (TOF/MOF/BOF: Ad → Landing → Retargeting → Email) based on my product and goal inputs so I can plan my full marketing strategy.

As a user, I want the Landing Page Analyzer to scrape a submitted URL, analyze its headline clarity, CTA placement, trust signals, and load speed, then return a conversion score (0–100) with fix suggestions and improved copy so I can optimize my landing pages.

As an admin, I want backend APIs to manage users (list, update roles, suspend), view revenue tracking data, and monitor per-user API credit consumption so I can effectively oversee the platform.

As a user, I want a Stripe-integrated subscription system with API credit tracking so that I can subscribe to a plan, see my remaining credits, and get blocked when credits are exhausted.

As a user, I want the Ads Audit page to receive AI-generated audit results for my Meta and Google campaigns analyzing CTR, CPC, and conversion rate, outputting problems, fix suggestions, and scaling opportunities.

As a user, I want the Google Ads Assets Generator to call a backend AI API that generates all required Google Ads assets (headlines, descriptions, sitelinks, callouts, images, and responsive ad layouts) based on campaign inputs so I can launch complete Google Ads campaigns quickly. API should return structured asset sets compatible with Google Ads requirements (max character limits, asset counts). Includes preview mode support for visualizing generated assets.

As a user, I want all frontend pages (Dashboard, Ad Generator, Ad Spy, Analytics, Ads Audit, Landing Analyzer, Funnel Builder, Admin Panel, Settings) to be fully connected to their respective backend APIs using Axios or fetch with proper loading states, error handling, and real data rendering so that every tool on the platform is functional end-to-end.