first commit

README.md

@@ -0,0 +1,146 @@
+# Amba Email Templates
+
+A React Email project for creating and previewing email templates for the Amba app.
+
+## Features
+
+- 🎨 5 email templates matching the Amba app design:
+  - Welcome Email
+  - Transaction Complete
+  - Event Ticket (with QR code)
+  - Payment Request
+  - Referral Success
+- 🖼️ Interactive preview page with template switcher
+- 🎨 Consistent theming based on Amba app design (green color scheme)
+- 📱 Responsive email designs
+
+## Getting Started
+
+### Install Dependencies
+
+```bash
+npm install
+```
+
+### Preview Templates
+
+Start the preview server to view all email templates:
+
+```bash
+npm run preview
+```
+
+Then open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Use React Email CLI
+
+You can also use the React Email CLI to preview and export templates:
+
+```bash
+npm run email
+```
+
+### Export HTML
+
+Build all templates to HTML:
+
+```bash
+npm run build
+```
+
+## Email Templates
+
+### 1. Welcome Email
+Welcomes new users to the Amba app.
+
+**Props:**
+- `userName` (string): The user's name
+
+### 2. Transaction Complete
+Sent after a successful transaction.
+
+**Props:**
+- `userName` (string): The user's name
+- `amount` (string): Transaction amount
+- `transactionId` (string): Unique transaction ID
+- `recipient` (string): Recipient name
+- `date` (string): Transaction date
+
+### 3. Event Ticket
+Sent after purchasing an event ticket, includes QR code.
+
+**Props:**
+- `userName` (string): The user's name
+- `eventName` (string): Event name
+- `eventDate` (string): Event date
+- `eventTime` (string): Event time
+- `venue` (string): Venue name
+- `ticketType` (string): Type of ticket
+- `amount` (string): Amount paid
+- `qrCodeUrl` (string): URL to QR code image
+- `ticketNumber` (string): Ticket number
+
+### 4. Payment Request
+Sent when someone sends a payment request.
+
+**Props:**
+- `userName` (string): The user's name
+- `requesterName` (string): Name of person requesting payment
+- `amount` (string): Requested amount
+- `description` (string): Payment description
+- `requestId` (string): Unique request ID
+- `dueDate` (string, optional): Due date
+
+### 5. Referral Success
+Sent when someone uses the user's referral code.
+
+**Props:**
+- `userName` (string): The user's name
+- `referredUserName` (string): Name of person who used the code
+- `referralCode` (string): The referral code used
+- `rewardAmount` (string): Reward amount earned
+- `transactionAmount` (string): Transaction amount
+
+## Project Structure
+
+```
+├── app/                    # Next.js app directory
+│   ├── page.tsx           # Preview page with template switcher
+│   └── layout.tsx         # Root layout
+├── emails/                # Email templates
+│   ├── components/        # Reusable email components
+│   │   ├── EmailLayout.tsx
+│   │   ├── Button.tsx
+│   │   └── Card.tsx
+│   ├── utils/            # Utilities
+│   │   └── logoDataUri.ts
+│   ├── theme.ts          # Theme configuration
+│   ├── welcome.tsx
+│   ├── transaction-complete.tsx
+│   ├── event-ticket.tsx
+│   ├── payment-request.tsx
+│   └── referral-success.tsx
+└── public/               # Static assets
+    └── logo.svg
+```
+
+## Theming
+
+The email templates use a consistent theme defined in `emails/theme.ts`:
+
+- **Primary Color**: Dark green (#2d5016)
+- **Accent Color**: Light green (#7cb342)
+- **Text Color**: Light brown/orange (#8d6e63)
+- **Background**: White (#ffffff)
+
+## Logo
+
+The logo is embedded as a data URI for email compatibility. For production, you should:
+
+1. Host the logo on your CDN/server
+2. Update `emails/utils/logoDataUri.ts` with the hosted URL
+3. Or update the `logoUrl` prop in `EmailLayout`
+
+## License
+
+MIT