lachieandmitch's picture
Create a single-file Next.js page (pages router) for "GrantEdge". 1. Hero: gradient bg, headline "Win the grants you deserve", subline "AI-accelerated proposals for nonprofits & startups", CTA "Get My Fixed-Fee Quote". 2. Interactive wizard (4 steps, progress bar): Step 1 Contact: Name*, Email*, Organization* Step 2 Grant: Funder (text), Deadline (date picker), Amount sought (number, min 0)* Step 3 Project: short description*, upload RFP (PDF, optional), radio: "Current draft completeness" β†’ None / Partial / Substantial Step 4 Review & Calculate 3. Validation & real-time UX: - Disable Next until required fields filled. - If Amount < 15000, show toggle: "We usually focus on β‰₯ $15 k. I still want a quote" (default unchecked). 4. Calculation (client-side, show work): base = Math.min(Math.max(amount * 0.06, 2000), 15000) effortAdj = { None: 1, Partial: 0.75, Substantial: 0.5 }[draftRadio] fee = Math.round(base * effortAdj / 100) * 100 winProb = 0.3 + Math.random()*0.7 // placeholder offer5050 = winProb >= 0.7 5. Result card: - "Estimated fixed fee: $fee" - If offer5050: show two choices: β€’ Button 1: "Standard ($fee)" β€’ Button 2: "50/50 Plan – pay only $${fee/2} if unsuccessful" - Else: single button "Accept Quote" - All buttons POST to /api/quote { json payload } then open Calendly link. 6. Style: Tailwind dark-mode, mobile-first, Heroicons. 7. Directory: /pages/index.js /pages/api/quote.js (console.log body) /styles/globals.css (Tailwind) Use plain JS, no TypeScript. - Initial Deployment
99e41f3 verified