Lovable Prompt Creator - AI Prompt Generator

```markdown
# APPLICATION OVERVIEW
This web application is designed to collect emails for the Founding Crew in anticipation of a pilot launch in April 2026. The app aims to simplify the user signup process while ensuring a pleasant user experience through a clean and minimalist design.

# Founding Crew Welcome Email via Resend

Set up automated welcome email sent after successful waitlist signup.

---

## Overview

After a user successfully joins the Founding Crew waitlist, send them a welcome email with their discount code information and next steps.

**Trigger:** After successful save to `waitlist` table (from homepage hero OR /offer page)

---

## Prerequisites

- Resend is already configured for OTP verification emails
- Use existing Resend API key and configuration
- Match styling of existing OTP email templates

---

## Implementation Approach

### Option A: Client-Side API Call (Simpler for MVP)

After successful database insert:
```typescript
// In Index.tsx (hero) and Offer.tsx - after showing success modal
const { error } = await supabase
  .from('waitlist')
  .insert({ email, first_name, state })
  .select();

if (!error || error.code === '23505') {
  setShowSuccessModal(true);
  
  // Trigger welcome email
  try {
    await fetch('/api/send-welcome-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ 
        email: email.trim().toLowerCase(),
        firstName: firstName || null,
        state: state || null
      })
    });
  } catch (emailError) {
    // Log error but don't block user experience
    console.error('Welcome email failed:', emailError);
  }
}
```

**Important:** Email failure should NOT prevent success modal from showing. User experience is not blocked by email issues.

---

## Email Template

### Email Metadata
- **From:** Paperplane <hello@paperplane.ai> (or your verified Resend domain)
- **Subject:** Welcome to the Founding Crew - Your Exclusive Discount Awaits ✈️
- **Reply-To:** hello@paperplane.ai

### Email Body (HTML)

Use simple, clean HTML that matches your existing OTP email template styling.

**Structure:**
```html
<div style="font-family: 'Satoshi', system-ui, sans-serif; max-width: 600px; margin: 0 auto; padding: 40px 20px;">
  
  <!-- Header -->
  <div style="text-align: center; margin-bottom: 32px;">
    <h1 style="font-family: 'Fraunces', Georgia, serif; font-size: 24px; color: #1A7A52; margin: 0;">
      Welcome to the Founding Crew! ✈️
    </h1>
  </div>
  
  <!-- Greeting (personalized if first name available) -->
  <p style="font-size: 16px; line-height: 1.6; color: #262626; margin-bottom: 16px;">
    Hi{{firstName ? ` ${firstName}` : ' there'}},
  </p>
  
  <p style="font-size: 16px; line-height: 1.6; color: #262626; margin-bottom: 24px;">
    Thanks for securing your spot. You're officially part of something special.
  </p>
  
  <!-- Discount Code Box -->
  <div style="background: #FAFAF8; border: 2px solid #1A7A52; border-radius: 12px; padding: 24px; text-align: center; margin-bottom: 24px;">
    <p style="font-size: 14px; color: #737373; margin: 0 0 8px 0;">
      Your Founding Crew Discount Code:
    </p>
    <p style="font-family: 'Fraunces', Georgia, serif; font-size: 32px; color: #1A7A52; font-weight: bold; margin: 0 0 8px 0; letter-spacing: 2px;">
      FOUNDING50
    </p>
    <p style="font-size: 14px; color: #737373; margin: 0;">
      50% off at launch (save this email!)
    </p>
  </div>
  
  <!-- What's Included -->
  <h2 style="font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: #262626; margin: 24px 0 16px 0;">
    What's Included:
  </h2>
  
  <ul style="font-size: 16px; line-height: 1.8; color: #262626; padding-left: 20px; margin-bottom: 24px;">
    <li>Attorney review included</li>
    <li>Mobile notary comes to you</li>
    <li>Flowers & champagne at signing</li>
    <li>First access when we launch April 2026</li>
  </ul>
  
  <!-- State-specific message (conditional) -->
  {{#if state !== 'TX'}}
  <div style="background: #FFF9E6; border-left: 4px solid #F59E0B; padding: 16px; margin-bottom: 24px; border-radius: 4px;">
    <p style="font-size: 14px; line-height: 1.6; color: #262626; margin: 0;">
      <strong>Note:</strong> We're launching in Texas first (April 2026). You'll be notified as soon as we expand to {{stateName}}.
    </p>
  </div>
  {{/if}}
  
  <!-- Next Steps -->
  <h2 style="font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: #262626; margin: 24px 0 16px 0;">
    What Happens Next:
  </h2>
  
  <p style="font-size: 16px; line-height: 1.6; color: #262626; margin-bottom: 16px;">
    We'll email you when we're ready for takeoff (April 2026). Use your <strong>FOUNDING50</strong> code at checkout to get 50% off ($299 vs. $599).
  </p>
  
  <!-- Footer -->
  <hr style="border: none; border-top: 1px solid #E5E5E5; margin: 32px 0;" />
  
  <p style="font-size: 14px; line-height: 1.6; color: #737373; margin-bottom: 8px;">
    Questions? Just reply to this email.
  </p>
  
  <p style="font-size: 14px; color: #737373; margin: 0;">
    Thanks for being part of our founding crew,<br/>
    <strong>The Paperplane Team</strong>
  </p>
  
</div>
```

**Plain Text Version (for email clients that don't support HTML):**
```
Hi{{firstName ? ` ${firstName}` : ' there'}},

Welcome to the Paperplane Founding Crew! You're officially part of something special.

YOUR FOUNDING CREW DISCOUNT CODE: FOUNDING50

This code gets you 50% off our regular $599 pricing - you'll pay just $299 when we launch. Save this email!

WHAT'S INCLUDED:
- Attorney review included
- Mobile notary comes to you
- Flowers & champagne at signing
- First access when we launch April 2026

{{#if state !== 'TX'}}
Note: We're launching in Texas first (April 2026). You'll be notified as soon as we expand to {{stateName}}.
{{/if}}

WHAT HAPPENS NEXT:
We'll email you when we're ready for takeoff (April 2026). Use your FOUNDING50 code at checkout to get 50% off.

Questions? Just reply to this email.

Thanks for being part of our founding crew,
The Paperplane Team
```

---

## API Route Implementation

**Create:** `/api/send-welcome-email` endpoint (or Supabase Edge Function)
```typescript
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  try {
    const { email, firstName, state } = await req.json();
    
    // Get state full name for conditional message
    const stateNames: Record<string, string> = {
      'CA': 'California', 'NY': 'New York', 'FL': 'Florida',
      // ... all 50 states
    };
    const stateName = state ? stateNames[state] : null;
    
    // Send email via Resend
    const { data, error } = await resend.emails.send({
      from: 'Paperplane <hello@paperplane.ai>',
      to: email,
      subject: 'Welcome to the Founding Crew - Your Exclusive Discount Awaits ✈️',
      html: getWelcomeEmailHTML(firstName, state, stateName),
      text: getWelcomeEmailText(firstName, state, stateName),
    });
    
    if (error) {
      console.error('Resend error:', error);
      return Response.json({ error: 'Email send failed' }, { status: 500 });
    }
    
    return Response.json({ success: true, data });
    
  } catch (error) {
    console.error('Welcome email error:', error);
    return Response.json({ error: 'Internal error' }, { status: 500 });
  }
}

function getWelcomeEmailHTML(firstName: string | null, state: string | null, stateName: string | null): string {
  // Return HTML template with firstName, state conditional logic
  // (Use the HTML structure above)
}

function getWelcomeEmailText(firstName: string | null, state: string | null, stateName: string | null): string {
  // Return plain text version
  // (Use the plain text structure above)
}
```

---

## Error Handling

**If email send fails:**
- ✅ Log error to console for debugging
- ✅ User still sees success modal (don't block UX)
- ✅ Manually follow up if needed (check logs)

**Do NOT:**
- ❌ Show error to user
- ❌ Block success modal
- ❌ Retry automatically (could cause duplicates)

**Rationale:** Better user experience is "email might be delayed" than "something went wrong."

---

## Personalization Logic

**First Name:**
- If `firstName` exists: "Hi Brady,"
- If `null`: "Hi there,"

**State-Specific Message:**
- If `state === 'TX'` or `state === null`: No additional message
- If `state !== 'TX'`: Show yellow note box about Texas launch first

---

## Testing Checklist

Before sending to real users:

- [ ] Send test email to your own address
- [ ] Check spam folder (Gmail promotions tab)
- [ ] Verify firstName personalization works (with and without name)
- [ ] Verify state conditional message works (TX vs. CA)
- [ ] Check mobile rendering (Gmail app, Apple Mail)
- [ ] Verify plain text fallback works
- [ ] Confirm FOUNDING50 code is visible and prominent
- [ ] Test reply-to address works
- [ ] Check "From" name shows "Paperplane" not raw email

---

## Stripe Discount Code Setup

**Note:** The email mentions FOUNDING50 code, but you need to create this in Stripe separately.

**When you connect Stripe:**
1. Go to Stripe Dashboard → Products → Coupons
2. Create new coupon:
   - Code: `FOUNDING50`
   - Discount: 50% off
   - Duration: Once
   - Valid until: March 31, 2026 (or whenever Founders Club ends)

**The email just promises the code - Stripe validation happens at checkout.**

---

## Resend Dashboard Monitoring

After implementation, monitor in Resend dashboard:
- Delivery rate (should be >95%)
- Bounce rate (should be <2%)
- Spam complaints (should be <0.1%)

If delivery issues occur, check domain authentication and SPF/DKIM records.

---

## Expected Outcome

After this prompt, users who join the waitlist should:
1. Submit email/form
2. See success modal immediately
3. Receive welcome email within 1-2 minutes
4. Email contains FOUNDING50 code and next steps
5. Email is personalized if first name provided
6. Non-Texas users see expansion note

---

**Implementation Priority:** Submit this AFTER the first prompt (frontend fixes) is working and tested.