Sauci/apps/supabase/email-templates/invite.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>You're Invited to Sauci</title>
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->
</head>
<body style="margin: 0; padding: 0; background-color: #0d0d1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #0d0d1a;">
    <tr>
      <td align="center" style="padding: 40px 20px;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 520px;">

          <!-- Logo Section -->
          <tr>
            <td align="center" style="padding-bottom: 32px;">
              <div style="font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #e94560, #9b59b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                Sauci
              </div>
            </td>
          </tr>

          <!-- Main Card -->
          <tr>
            <td>
              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);">

                <!-- Top Gradient Accent -->
                <tr>
                  <td style="height: 4px; background: linear-gradient(90deg, #e94560, #9b59b6); border-radius: 16px 16px 0 0;"></td>
                </tr>

                <!-- Card Content -->
                <tr>
                  <td style="padding: 40px 32px;">

                    <!-- Icon -->
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                      <tr>
                        <td align="center" style="padding-bottom: 24px;">
                          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, rgba(233, 69, 96, 0.15), rgba(155, 89, 182, 0.15)); border-radius: 50%; display: inline-block; line-height: 64px; font-size: 28px;">
                            &#128149;
                          </div>
                        </td>
                      </tr>
                    </table>

                    <!-- Heading -->
                    <h1 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #ffffff; text-align: center; line-height: 1.3;">
                      You've Been Invited
                    </h1>

                    <!-- Subtext -->
                    <p style="margin: 0 0 32px 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 1.6;">
                      Someone special has invited you to join Sauci, the app designed to help couples deepen their connection and discover new things about each other.
                    </p>

                    <!-- CTA Button -->
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                      <tr>
                        <td align="center" style="padding-bottom: 32px;">
                          <a href="{{ .ConfirmationURL }}" target="_blank" style="display: inline-block; padding: 14px 40px; background: linear-gradient(135deg, #e94560, #9b59b6); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 12px; box-shadow: 0 8px 24px rgba(233, 69, 96, 0.3);">
                            Accept Invitation
                          </a>
                        </td>
                      </tr>
                    </table>

                    <!-- Features Section -->
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: rgba(22, 33, 62, 0.6); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05);">
                      <tr>
                        <td style="padding: 20px;">
                          <p style="margin: 0 0 12px 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-align: center; text-transform: uppercase; letter-spacing: 1px;">
                            What awaits you
                          </p>
                          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
                                  &#128293; Thoughtful questions to spark conversations
                                </p>
                              </td>
                            </tr>
                            <tr>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
                                  &#128140; Discover mutual interests with your partner
                                </p>
                              </td>
                            </tr>
                            <tr>
                              <td style="padding: 8px 0;">
                                <p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.5); text-align: center;">
                                  &#128172; Private chats when you both match
                                </p>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

                    <!-- Divider -->
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                      <tr>
                        <td style="padding: 24px 0;">
                          <div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);"></div>
                        </td>
                      </tr>
                    </table>

                    <!-- Alternative Link -->
                    <p style="margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.4); text-align: center; line-height: 1.6;">
                      If the button doesn't work, copy and paste this link into your browser:
                    </p>
                    <p style="margin: 8px 0 0 0; font-size: 12px; color: rgba(233, 69, 96, 0.8); text-align: center; word-break: break-all; line-height: 1.5;">
                      {{ .ConfirmationURL }}
                    </p>

                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="padding: 32px 16px;">
              <p style="margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.3); text-align: center;">
                This invitation link will expire in 7 days. If you didn't expect this invitation, you can safely ignore this email.
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>
</body>
</html>