zinc-system

As a frontend developer, I want to implement the Landing page based on the existing JSX design (Landing v3) so that guests and business owners can view the interactive Phoenix cityscape, explore glowing business pins, see sample ads via the Business Modal, browse features, and navigate to Sign Up or Login. The page includes: NavBar, Hero with animated cityscape (day/night mode based on MST time), CityscapeExplorer with interactive pins and Business Modal, TrustBadges, FeaturesOverview, HowItWorks, PersonaHighlights, SampleAdShowcase, Pricing, FinalCTA, and Footer sections. Connects to: Login, Signup, Features, Business Modal pages.

As a frontend developer, I want to implement the Login page based on the existing JSX design (Login v3) so that business owners and admins can sign in to access their dashboards. The page includes email/password fields, validation, error states, 'Forgot Password' link, and a link to Signup. On success: Business Owners navigate to Dashboard, Admins navigate to Admin Dashboard. Connects from: Landing page NavBar and CTAs.

As a frontend developer, I want to implement the Signup page based on the existing JSX design (Signup v3) so that guests and prospective business owners can create an account on the platform. The page includes name, email, password, business name fields, role selection (Business Owner), terms acceptance, and redirects to Login on success. Connects from: Landing page CTA, Features page CTA.

As a frontend developer, I want to implement the Features page based on the existing JSX design (Features v3) so that guests can browse the platform's capabilities (ad creation tools, targeting, analytics, user roles) and be guided to sign up. The page includes: NavBar, FeaturesHero, FeaturePillarsGrid (Ad Creation, Targeting, Analytics, User Roles), HowItWorksWalkthrough, TestimonialsSection, and a Signup CTA Footer. Connects from: Landing page; connects to: Signup page.

As a frontend developer, I want to implement the Business Owner Dashboard page based on the existing JSX design (Dashboard v3) so that logged-in business owners can view their active campaigns, key performance metrics, and quick-access actions. The page includes: TopBar, Sidebar navigation, CampaignSummaryCards, RecentActivityFeed, QuickActions (Create Ad, View Analytics), and Footer. Connects to: Ad Builder (Create Ad), Campaigns page, Analytics page. Connects from: Login page (Business Owner role).

As a frontend developer, I want to implement the Admin Dashboard page based on the existing JSX design (Admin Dashboard v3) so that admins can get an overview of the platform's health, user activity, campaign counts, and navigate to user management and campaign moderation. The page includes: TopBar, Sidebar (admin role), PlatformStatsBar (total users, active campaigns, total spend, platform CTR), RecentUsersPanel, CampaignModerationQueue, SystemHealthWidget, and Footer. Connects from: Login (admin role); connects to: Users page, Campaigns page.

As a frontend developer, I want to implement the Business Modal component based on the existing JSX design (Business Modal v2) so that guests exploring the Landing page cityscape can click a glowing pin and view a detailed preview of a Phoenix haircut business's ad campaign — including business name, logo, ad image, tagline, targeting info, and a CTA. The modal is triggered from the CityscapeExplorer pins on the Landing page and renders as a centered overlay on desktop and a bottom-sheet drawer on mobile. Connects from: Landing page CityscapeExplorer pins.

As a frontend developer, I want to implement the Ad Builder page based on the existing JSX design (Ad Builder v3) so that business owners can create, customize, target, and publish ad campaigns for their Phoenix haircut businesses. The page includes: TopBar with breadcrumb, BuilderProgressStepper (3 steps: Details, Targeting, Publish), AdDetailsForm (business name, headline, description, CTA, image upload), TargetingPanel (location tags, age range slider, gender toggle, interests, estimated reach), BudgetSchedulePanel (daily budget USD, date range MST, frequency cap), LiveAdPreview panel (desktop/mobile toggle), AIAssistantBar (AI copy generation), and PublishBar. Connects from: Dashboard (Create Ad CTA); connects to: Dashboard (after publish).

As a frontend developer, I want to implement the Campaigns page based on the existing JSX design (Campaigns v3) so that business owners and admins can view, manage, filter, and moderate all ad campaigns. The page includes: TopBar, Sidebar, CampaignsHeader (title + New Campaign CTA), CampaignStatsBar (4 aggregate stat cards), CampaignsFilterBar (search, status filter chips, sort, view toggle), CampaignsTable (campaign rows with status badges, budget progress bars, action icons; mobile card-list view), CampaignDetailPanel (expandable detail drawer with donut chart, targeting tags, ad preview, performance line chart), and PaginationBar. Connects from: Admin Dashboard (Review Ads), Business Owner Dashboard.

As a frontend developer, I want to implement the Analytics page based on the existing JSX design (Analytics v3) so that business owners can track and analyze the performance of their ad campaigns with detailed metrics, charts, and exportable reports. The page includes: TopBar, Sidebar, AnalyticsHeader (date range picker MST, export button), KPIMetricsBar (impressions, clicks, CTR, spend USD), ImpressionsClicksChart (line chart, orange/blue), CTRTrendChart, AudienceBreakdownPanel (age/gender/location charts), TopCampaignsTable, and Footer. Connects from: Business Owner Dashboard (Track Performance CTA).

As a frontend developer, I want to implement the Users page based on the existing JSX design (Users v3) so that admins can view, search, manage accounts, and edit permissions for all users on the platform. The page includes: TopBar, Sidebar (admin), UsersHeader (title + Invite User CTA), UsersFilterBar (search, role filter, status filter), UsersTable (user rows with avatar, name, email, role badge, status, last active MST, action icons), UserDetailPanel (expandable profile with role/permission editor), and PaginationBar. Connects from: Admin Dashboard (Manage Accounts).

As a backend developer, I want to implement the Campaigns REST API using FastAPI so that the frontend Campaigns page, Ad Builder, and Dashboard can create, read, update, delete, and list ad campaigns with filtering by status, pagination, and aggregate stats. Endpoints: GET /campaigns, POST /campaigns, GET /campaigns/{id}, PUT /campaigns/{id}, DELETE /campaigns/{id}, GET /campaigns/stats. All monetary values in USD, dates in MST timezone. Supports roles: Business Owner (own campaigns), Admin (all campaigns).

As a backend developer, I want to implement the Users Management REST API using FastAPI so that the Admin Users page can list, search, update roles/permissions, invite, and deactivate user accounts. Endpoints: GET /users, GET /users/{id}, PUT /users/{id}/role, PUT /users/{id}/permissions, POST /users/invite, DELETE /users/{id}. Only accessible to Admin role. Compliant with CCPA data privacy requirements.

As an AI engineer, I want to implement the AI assistant backend endpoint using FastAPI, Langchain, and LiteLLM routing to GPT-5.2 so that the Ad Builder's AIAssistantBar can generate compelling ad headlines and descriptions for Phoenix haircut businesses based on a user-provided prompt. Endpoint: POST /ai/generate-ad-copy. Input: business description, target audience. Output: 3 headline suggestions and 3 description suggestions. Handles prompt safety and rate limiting.

As a backend developer, I want to implement the Analytics REST API using FastAPI so that the Analytics page can fetch campaign performance metrics including impressions, clicks, CTR, spend over time, and audience breakdowns (age, gender, location). Endpoints: GET /analytics/summary, GET /analytics/timeseries, GET /analytics/audience-breakdown, GET /analytics/top-campaigns. All figures in USD, timezone in MST. Supports date range filtering.

As a backend developer, I want to implement the Ad Targeting API using FastAPI so that the Ad Builder TargetingPanel can calculate and return estimated audience reach based on selected location (Phoenix neighborhoods), age range, gender, and interest filters. Endpoint: POST /targeting/estimate-reach. Returns min/max estimated weekly user reach. Also supports saving targeting config as part of campaign creation/update.