Interactive B2B Persona Demo & Live Reporting Dashboard Layout (Tailwind & React)

======================================================================== TASTE TRIBE OS: INTERACTIVE DEMO WIZARD AND DASHBOARD UI COMPONENT ======================================================================== 1. THE PLATFORM OVERVIEW We are a premium, highly optimized B2B foodservice network platform with a mature, 100 percent custom codebase running live in production on AWS. We have zero tolerance for cookie-cutter UI kits, pre-made form packages, or generic templates. Every single asset on our platform is custom-engineered to match our tight, high-velocity enterprise workflow[cite: 5, 6, 7]. We are seeking an elite front-end developer to build a versatile, highly interactive React component wrapper named LiveDemoWizard.jsx[cite: 8]. This single frontend layout asset will serve dual purposes in our ecosystem: - Public Marketing Front: It will live on our public marketing router as a dynamic interactive hook to capture distributor, broker, and manufacturer leads[cite: 8]. - Internal Live Application: It will plug directly into our authenticated application shell to replace an active backend placeholder screen for our live, logged-in organizations[cite: 5, 6, 7]. ------------------------------------------------------------------------ 2. ASSETS YOU WILL RECEIVE UPON HIRE To ensure you can execute this flawlessly on your local machine without needing access to our core backend repository, you will be handed: - Live Sandbox Credentials: Access to log into our live AWS environment using non-sensitive test profiles ttabrokerage / ttadistributor[cite: 5, 6]. This allows you to inspect our live responsive dashboard grid layouts, custom slate backgrounds, spacing variables, and border tokens directly in the browser developer console[cite: 5, 6, 7]. - Core Product Walkthrough Videos: Screen recording captures demonstrating our lighting-fast, 29-second street event validation workflows. You will utilize these video assets to embed them directly into the wizard layout framework. ------------------------------------------------------------------------ 3. THE 4-STEP INTERACTIVE WIZARD WORKFLOW Your component must manage a clean multi-step state engine containing these exact steps: Step 1: Persona Selector - A visual, mobile-responsive gate mimicking a smartphone camera frame ready to scan an onboarding QR code. - User selects one of three primary industry role options: Distributor Admin, Broker House Principal, or Manufacturer Manager[cite: 2]. Step 2: Dynamic Industry Parameter Gathering Depending on the persona selected in Step 1, the form inputs must dynamically update to collect the following estimated operational metrics: - Distributors: Branch State Territory (Dropdown), Sales Team Size (Numeric), Stocked Manufacturers (Numeric)[cite: 2]. - Brokers: Regional State Coverage (Dropdown), Active Lines Represented (Numeric), Field Representative Count (Numeric)[cite: 2]. - Manufacturers: Core Target Market State (Dropdown), Active Target Lines to Promote (Numeric)[cite: 2]. Step 3: Embedded Video Proof Section - An elegant video player block displaying our embedded walkthrough file. - Must display high-impact overlay typography tracking containing this exact copywriting statement: "This is exactly how fast it is. It takes a street representative just 29 seconds to log an entire food show event, allocate broadline distributor branch inventory, and generate a live scanning QR code. All your team has to do is create an event on the floor." Step 4: Lead Capture and Outbound Data Mapping - A premium, clean email text entry input field with a prominent call-to-action button labeled: "See Your Regional Impact Report". - Supporting text copy: "Give us your email address. The moment your team begins creating events just like you saw in the video, this is the exact type of deep network reporting you will receive instantly in your inbox." ------------------------------------------------------------------------ 4. TECH STANDARDS AND EXPECTED DATA SHAPE - Code Framework: Pure functional React components styled exclusively with standard Tailwind CSS utility classes and Lucide-React icons[cite: 5, 6]. - Output Requirement: On final form submission, your component must aggregate all collected input selections, states, and email addresses into a clean, structured JSON object format and call our native application global fetch utility. The exact payload shape must map precisely to this key structure: preferences: deliveryFrequency: "weekly" teamBreakout: showAggregateTotals: true showBrokerBreakdown: false showRepScorecards: true productFocus: mode: "focus_lines_only" maxFocusLimit: 10 ------------------------------------------------------------------------ 5. PAYMENT CONTRACT AND MILESTONE STRUCTURE This project is a Fixed-Price contract budgeted at 300 dollars, split strictly into two structured verification milestones: - Milestone 1 (150 dollars) - Live Visual Screen-Share Demo: You will host a live Zoom or Google Meet call showing the fully functional wizard component running seamlessly on your local screen environment[cite: 5]. You will use our mock credentials to verify that your layout alignment matches our production dashboard slates, paddings, and font sizes perfectly[cite: 5, 6]. Any visual variations or copy updates will be adjusted based on feedback from this review session. - Milestone 2 (150 dollars) - Source Code Delivery and Verification: Following milestone 1 approval, you will deliver the final, clean, self-contained .jsx file. We will drop this file straight onto our listening backend API routes to verify full connectivity[cite: 4]. Once the endpoint successfully handles your JSON object output, the final funds will be instantly released. *** TO APPLY: To prove you have read these requirements completely and understand our zero-template code mandate, you MUST begin your application proposal text with the word "GROOVY" in all capital letters. Automated script proposals that fail to include this keyword will be immediately archived. *** ========================================================================