RaiseReady - AI Salary Negotiation Coach

Mission

Build me a full stack web application called "RaiseReady" - an AI-powered salary negotiation coach. === TECH STACK === - React + Vite (frontend) - Tailwind CSS (styling) - OpenAI API (AI responses) - Supabase (database + auth) - Stripe (payments) - Node.js/Express (backend) === COLOR SCHEME === - Primary: Deep Navy #0F172A - Accent: Electric Green #22C55E - Background: #F8FAFC - Text: #1E293B - Cards: White with subtle shadow === PAGE 1: LANDING PAGE === Hero Section: - Big headline: "Get Paid What You're Actually Worth" - Subheadline: "AI builds your personal salary negotiation script in 60 seconds. Average user gains $8,000+" - CTA Button: "Get My Script Now - $29" (links to payment) - Under button: "⚡ Ready in 60 seconds | 🔒 Secure payment | 💰 Average gain: $8,247" Social Proof Bar: - "2,847 people got a raise this month" - Show 5 star rating - 3 small testimonial quotes How It Works Section (3 steps): Step 1: "Tell us your situation" (salary, role, company) Step 2: "AI builds your script" (personalised to your exact situation) Step 3: "Practice and win" (roleplay with AI, then go get paid) Pricing Section: - BASIC $29 one time ├── Personalised negotiation script ├── 3 comeback responses ├── Email follow up template └── CTA: "Get My Script" - PRO $19/month (highlight this as POPULAR) ├── Everything in Basic ├── Unlimited AI practice sessions ├── Real salary market data ├── Monthly script updates ├── LinkedIn message templates └── CTA: "Start Pro - Most Popular" - VIP $97 one time ├── Everything in Pro ├── 30 min coaching call ├── Custom negotiation strategy ├── Unlimited revisions └── CTA: "Get VIP Access" Testimonials Section: - 6 testimonials in grid layout - Each has: photo placeholder, name, job title, company, quote, raise amount - Example: "Sarah K. - Software Engineer at Google Got $14,000 raise in first attempt This script gave me the exact words. My manager said yes immediately" FAQ Section: - What if my company says no budget? - How is this different from googling scripts? - What if I just got hired? - Does this work for remote jobs? - What industries does this work for? Footer: - Logo - Links: Privacy, Terms, Contact - "Made with ❤️ for underpaid workers" === PAGE 2: INTAKE FORM === After payment show this multi-step form: Progress bar at top showing steps STEP 1 - YOUR JOB (headline: "Tell us about your role") - Current Job Title (text input) - Industry dropdown: Tech, Finance, Healthcare, Marketing, Sales, Engineering, Design, HR, Legal, Education, Other - Company Size dropdown: Startup (1-50), Small (51-200), Medium (201-1000), Large (1000+), Enterprise (10,000+) - Years in current role (number) - Years total experience (number) - Remote/Hybrid/Office (radio buttons) - Next button STEP 2 - YOUR MONEY (headline: "Let's talk numbers") - Current annual salary (number input with $ prefix) - Target salary (number input with $ prefix) - Last raise date (date picker) - Last raise amount % (number) - Do you have competing offers? (yes/no toggle) If yes: competing offer amount input appears - Current bonus % if any (number) - Next button STEP 3 - YOUR PERFORMANCE (headline: "Show us your value") - Performance rating dropdown: Exceptional, Exceeds Expectations, Meets Expectations, Below Expectations - Recent wins/achievements (textarea) placeholder: "eg: Led project that saved company $200k, grew team by 30%..." - Skills that make you valuable (textarea) - Why do you deserve this raise? (textarea) - Next button STEP 4 - YOUR MANAGER (headline: "Tell us about the conversation") - Manager style dropdown: Data-driven, Relationship-focused, Process-oriented, Results-focused, Unpredictable/Difficult - Relationship with manager: Excellent, Good, Neutral, Difficult - When are you asking? (date picker) - In-person or virtual? (radio) - Any concerns about asking? (textarea) - Generate My Script button (big green) === PAGE 3: YOUR PERSONALISED SCRIPT === Loading screen while AI generates: - Animated progress bar - Rotating messages: "Analysing your salary data..." "Building your opening statement..." "Crafting comeback responses..." "Personalising to your manager style..." "Almost ready..." Script Results Page layout: TOP SECTION - Summary Card: - Your target raise highlighted: +$X,XXX - Percentage increase: +X% - Success probability: XX% (always 73-89%) - Best time to ask: [day/time recommendation] MAIN SCRIPT SECTION: Show in a beautiful card with copy button "YOUR OPENING STATEMENT" [AI generated opening based on their data] "YOUR SALARY ANCHOR" [Specific number to say and why] "YOUR VALUE STATEMENT" [Based on their achievements] COMEBACK SCRIPTS SECTION: 3 expandable cards, each with: Card 1: 🚫 "If they say: We don't have budget" [Exact word for word response] Card 2: 🚫 "If they say: You're already well paid" [Exact word for word response] Card 3: 🚫 "If they say: Maybe next review cycle" [Exact word for word response] EMAIL FOLLOW UP SECTION: - Subject line - Full email template personalised - Copy button TIPS SECTION: - 5 body language tips - What to wear - Best time of day - What NOT to say Download as PDF button Share results button (blurred for virality) === PAGE 4: PRACTICE MODE (PRO ONLY) === Chat interface that looks like iMessage/WhatsApp Left side: User messages (blue bubbles) Right side: AI Manager responses (grey bubbles) Top of chat: - Manager name: "Sarah (Your Manager)" - Manager style badge based on what they inputted - "Difficulty: Medium" indicator Starting message from AI Manager: "Hi [name], you wanted to discuss your compensation. What's on your mind?" User types their opening line AI responds AS the manager - being realistic, sometimes pushing back, sometimes positive After each exchange show: - Confidence score - Tip for improvement - "Try again" or "Continue" buttons After 5 exchanges show: - Overall performance score - Breakdown: Opening/Handling objections/ Confidence/Professionalism - "Ready to do it for real?" CTA === PAGE 5: DASHBOARD (logged in users) === Sidebar navigation: - Home - My Script - Practice Mode - Salary Data - My Progress - Settings Home Dashboard: - Welcome back [name] - Your raise goal: $X,XXX card - Days until your ask date: countdown - Quick actions: Practice / View Script / Update Goal My Progress section: - Timeline of practice sessions - Confidence score trend graph - "You've improved X% since you started" Salary Data section (PRO): - Average salary for their role/location - Salary range: low/median/high - "You are currently at X percentile" - Top paying companies for their role - Data updated monthly badge === AI INTEGRATION === Use OpenAI GPT-4 API Script generation prompt template: "You are an expert salary negotiation coach with 20 years experience. Generate a personalised negotiation script for: Role: [role] Industry: [industry] Current Salary: [salary] Target Salary: [target] Years Experience: [years] Recent Achievements: [achievements] Manager Style: [style] Has Competing Offer: [yes/no] Competing Offer: [amount] Generate: 1. Opening statement (2-3 sentences, confident not aggressive) 2. Salary anchor with justification 3. Value statement based on achievements 4. 3 comeback scripts for common objections 5. Follow up email 6. 5 key tips Format as JSON for easy parsing. Make it specific to their situation. Do not use generic advice. Sound human and natural not robotic." Practice mode prompt: "You are playing the role of a manager named Sarah. The manager style is [style]. The user is trying to negotiate a raise from [current] to [target]. Respond realistically as this manager would. Sometimes push back. Sometimes show interest. Keep responses to 2-4 sentences. Be professional but realistic." === DATABASE SCHEMA (Supabase) === users table: - id - email - name - plan (basic/pro/vip) - created_at - stripe_customer_id user_profiles table: - user_id - job_title - industry - company_size - current_salary - target_salary - years_experience - achievements - manager_style - ask_date - created_at scripts table: - id - user_id - opening_statement - salary_anchor - value_statement - comeback_1 - comeback_2 - comeback_3 - follow_up_email - tips - generated_at practice_sessions table: - id - user_id - messages (json) - confidence_score - duration - created_at === STRIPE INTEGRATION === 3 products: 1. Basic - $29 one time payment 2. Pro - $19/month subscription 3. VIP - $97 one time payment After successful payment: - Create user account automatically - Send welcome email - Redirect to intake form - Store plan in database === AUTHENTICATION === Use Supabase Auth: - Email/password signup - Google OAuth button - Magic link option - Auto login after payment === RESPONSIVE DESIGN === Must work perfectly on: - Mobile (priority - most users on phone) - Tablet - Desktop Mobile specific: - Large tap targets - Sticky CTA button on landing page - Bottom navigation on dashboard - Script readable without zoom === ANIMATIONS === Add subtle animations: - Fade in on scroll (landing page sections) - Loading spinner on AI generation - Smooth transitions between form steps - Confetti when script is generated 🎉 - Number counter animation on salary numbers === ERROR HANDLING === - If OpenAI fails: show friendly error, offer retry, dont lose form data - If payment fails: clear message, try again button - Form validation on every field - Auto-save form progress === ENVIRONMENT VARIABLES NEEDED === OPENAI_API_KEY= SUPABASE_URL= SUPABASE_ANON_KEY= STRIPE_PUBLIC_KEY= STRIPE_SECRET_KEY= STRIPE_WEBHOOK_SECRET= === MAKE IT FEEL PREMIUM === - Clean minimal design - Lots of white space - Sharp typography (use Inter font) - Micro animations on buttons - Progress indicators everywhere - Social proof numbers throughout - Trust badges: Secure, Private, Guaranteed - Money back guarantee badge (30 days) Build this as a complete working application. Make the UI look like a $500/month SaaS product. Every page should be polished and professional.