Prompt

Act as a world-class Frontend Engineer and UI/UX Designer. I need you to build a complete, single-page React application called "Swiftpay".

Product Context:

Swiftpay is a fintech prototype for mobile app developers. It solves the "cache-flow" problem where Apple holds app revenue for 30-65 days. Swiftpay allows developers to connect their App Store account, verify pending revenue, and get an instant cash advance against those future earnings.

Tech Stack Requirements:

• Framework: React (Functional Components + Hooks).
• Styling: Tailwind CSS (via CDN in index.html is fine). Use a clean, professional color palette (Slate, Blue, Emerald).
• Icons: lucide-react.
• Charts: recharts.
• AI Integration: @google/genai for a financial advisor feature.
• Fonts: Google Fonts 'Inter'.

File Structure & Implementation Details:

1. index.html:
   • Include Tailwind CSS CDN.
   • Import 'Inter' font.
   • Add custom styles for a refined scrollbar (thin, slate colors).
   • Set up the import map for react, react-dom, lucide-react, recharts, and @google/genai.
2. types.ts:
   • Define interfaces: DailyRevenue (date, revenue, projected boolean), Transaction (id, type, amount, date, status, description), FinancialState (pendingAppleRevenue, availableAdvance, cashInBank, totalAdvanced).
3. constants.ts:
   • MOCK_REVENUE_HISTORY: Generate 30 days of past daily revenue (random amounts ~12k-20k).
   • MOCK_PROJECTED_REVENUE: Generate 15 days of future projected revenue.
   • INITIAL_TRANSACTIONS: A few sample transactions (e.g., "Apple Sept Proceeds" payout, "Daily App Store Sales").
4. services/geminiService.ts:
   • Initialize GoogleGenAI with process.env.API_KEY.
   • Export getFinancialInsights(financials): A function that prompts the gemini-2.5-flash model.
   • Prompt Logic: Act as a fintech advisor. Analyze the developer's pending revenue vs. cash in bank. Give a punchy, 1-2 sentence recommendation on whether they should take an advance to fund growth/ads.
5. components/Icons.tsx:
   • Export necessary icons from lucide-react (Wallet, Zap, TrendingUp, Activity, Lock, Smartphone, etc.) to keep imports clean.
6. components/LandingPage.tsx:
   • Navbar: Logo ("S" in a blue square), "Swiftpay" text, "Login" button.
   • Hero Section:
     • Tagline: "Now funding apps with $10k+ monthly revenue".
     • Headline: "Stop letting Apple hold your growth hostage."
     • Subhead: Explaining the 65-day wait vs 24-hour instant capital.
     • CTAs: "Get Liquidity Now" and "View Demo" (both should trigger the login/demo flow).
   • Features Grid: 3 cards explaining the process (Connect & Verify, Instant Advance, Automatic Repayment).
   • Social Proof: "Trusted by developers scaling via TikTok, Meta, Unity".
7. components/Dashboard.tsx:

   • Props: onLogout, onHome.

   • State Management:

     • isConnected (boolean): Starts false.

     • financials (object): Track pending revenue (24k), available advance.

   • View 1: Unconnected State (The "Gate")

     • Show a clean, centered card asking the user to "Connect App Store Connect".
     • Button: "Connect & Verify Revenue". Clicking this should show a loading spinner ("Verifying Credentials...") for 2.5 seconds, then switch isConnected to true.

   • View 2: Connected Dashboard

     • Header: Logo (clickable to go home), "Live" status badge, User profile stub.
     • Top Stats Row:
       • Pending Payouts: Value, progress bar, note about next bulk payout date.
       • Available to Advance: Large blue text, "Get Funds Instantly" button (opens modal).
       • Cash in Bank: Emerald text, trending up indicator.
     • Main Grid (2/3 Left, 1/3 Right):
       • Left: Revenue Chart (AreaChart) showing historical (solid blue) + projected (light blue) revenue.
       • Left: AI Advisor Card: A dark-themed card (slate-900). On mount, call geminiService to get text. Display a loading skeleton while fetching, then the advice.
       • Right: Recent Activity: List of transactions with icons based on type (Advance = lightning, Payout = wallet).
       • Right: Terms Sidebar: Fee rate (3%), Repayment date.

   • Advance Modal:

     • Triggered by "Get Funds Instantly".
     • Show an input field and a slider to select advance amount (up to the available limit).
     • Calculate and display the Fee (3%) and Net Amount.
     • "Confirm Request" button: Adds a new transaction to the list, updates the bank balance and available limit, and closes the modal.
8. App.tsx:
   • Manage simple route state ('landing' vs 'dashboard').
   • Render LandingPage or Dashboard accordingly.
   • Pass onHome prop to Dashboard to allow returning to Landing page.