Update nextjs.yml

.github/workflows/nextjs.yml

@@ -9,7 +9,12 @@
 # SETUP REQUIRED:
 # 1. Get free Web3Forms API key from https://web3forms.com
 # 2. Add as repository secret: WEB3FORMS_ACCESS_KEY
-# 3. Enable GitHub Pages in repository Settings → Pages → Source: GitHub Actions
+# 3. Add Gmail credentials as repository secrets:
+#    - GMAIL_USER: Gmail email address
+#    - GMAIL_APP_PASSWORD: Gmail app password (not regular password)
+#    - GMAIL_FROM: Display name for emails (e.g., "Wedding <email@domain.com>")
+#    - TEST_EMAIL_TO: Test recipient email address
+# 4. Enable GitHub Pages in repository Settings → Pages → Source: GitHub Actions
 #
 # EXCLUDED (requires server):
 # ❌ API routes (not supported in static export)
@@ -110,10 +115,16 @@ jobs:
           # Email (placeholder - not functional in static export)
           RESEND_API_KEY="re_placeholder"
 
-          # Cloudinary (placeholder - not functional in static export)
-          CLOUDINARY_CLOUD_NAME="placeholder"
-          CLOUDINARY_API_KEY="placeholder"
-          CLOUDINARY_API_SECRET="placeholder"
+          # Gmail credentials for email functionality (from GitHub Secrets)
+          GMAIL_USER="${{ secrets.GMAIL_USER }}"
+          GMAIL_APP_PASSWORD="${{ secrets.GMAIL_APP_PASSWORD }}"
+          GMAIL_FROM="${{ secrets.GMAIL_FROM }}"
+          TEST_EMAIL_TO="${{ secrets.TEST_EMAIL_TO }}"
+
+          # Cloudinary (set to empty for GitHub Pages deployment)
+          CLOUDINARY_CLOUD_NAME=""
+          CLOUDINARY_API_KEY=""
+          CLOUDINARY_API_SECRET=""
 
           # Web3Forms for static form submissions
           # Get your free access key at https://web3forms.com

GITHUB_PAGES_DEPLOYMENT.md

@@ -66,10 +66,30 @@ The deployment is automated via `.github/workflows/nextjs.yml`:
 1. Checkout repository
 2. Setup Node.js 20
 3. Install dependencies
-4. Generate Prisma client
-5. Run `npm run build:static`
-6. Upload `client/out` directory to GitHub Pages
-7. Deploy to GitHub Pages
+4. Create environment file with secrets
+5. Generate Prisma client
+6. Run `npm run build:static`
+7. Upload `client/out` directory to GitHub Pages
+8. Deploy to GitHub Pages
+
+### Required GitHub Secrets
+
+To enable email functionality and proper builds, configure these repository secrets:
+
+1. **WEB3FORMS_ACCESS_KEY**: Free API key from [Web3Forms](https://web3forms.com) for contact forms
+2. **GMAIL_USER**: Gmail email address for sending emails (e.g., `your-email@gmail.com`)
+3. **GMAIL_APP_PASSWORD**: Gmail app password (NOT your regular password)
+   - Generate at: [Google Account App Passwords](https://myaccount.google.com/apppasswords)
+   - Requires 2-Factor Authentication enabled
+4. **GMAIL_FROM**: Display name for sent emails (e.g., `"Wedding <email@domain.com>"`)
+5. **TEST_EMAIL_TO**: Test recipient email address
+
+#### How to Add Secrets
+
+1. Go to repository **Settings** → **Secrets and variables** → **Actions**
+2. Click **New repository secret**
+3. Add each secret with its name and value
+4. Secrets are encrypted and not visible after creation
 
 ## Form Handling in Static Mode
 

GITHUB_SECRETS_SETUP.md

@@ -0,0 +1,204 @@
+# GitHub Secrets Setup for Email Functionality
+
+This document explains how to configure GitHub Secrets for the wedding website's email functionality when deployed to GitHub Pages.
+
+## Overview
+
+The wedding website uses Gmail (via Nodemailer) to send emails for:
+- Contact form submissions
+- RSVP confirmations
+- Admin notifications
+
+For security, email credentials are stored as **GitHub Secrets** rather than hardcoded in the repository.
+
+## Required Secrets
+
+### 1. GMAIL_USER
+**Description**: Your Gmail email address used for sending emails.
+
+**Example**: `wedding@example.com` or `your-email@gmail.com`
+
+**How to get it**: Use any Gmail account you have access to.
+
+---
+
+### 2. GMAIL_APP_PASSWORD
+**Description**: Gmail App Password (NOT your regular Gmail password).
+
+**Important**: This is NOT your regular Gmail password. You must generate a special "App Password" from Google.
+
+**How to get it**:
+1. **Enable 2-Factor Authentication** on your Google Account (required)
+   - Go to [Google Account Security](https://myaccount.google.com/security)
+   - Enable 2-Step Verification if not already enabled
+
+2. **Generate App Password**:
+   - Go to [Google Account App Passwords](https://myaccount.google.com/apppasswords)
+   - Select app: "Mail" or "Other (Custom name)" → "Wedding Website"
+   - Click "Generate"
+   - Copy the 16-character password (remove spaces)
+
+**Example**: `abcd efgh ijkl mnop` (use as: `abcdefghijklmnop`)
+
+---
+
+### 3. GMAIL_FROM
+**Description**: Display name and email shown in sent emails.
+
+**Format**: `"Display Name <email@domain.com>"`
+
+**Examples**:
+- `"Wedding <wedding@example.com>"`
+- `"Incia & Arvin <arvincia@sparrow-group.com>"`
+- Just email: `"your-email@gmail.com"`
+
+**Note**: The email part should match your GMAIL_USER or be a verified sending address.
+
+---
+
+### 4. TEST_EMAIL_TO
+**Description**: Email address to receive test emails and notifications.
+
+**Example**: `admin@example.com` or `arvincia@sparrow-group.com`
+
+**Purpose**: Used for testing email functionality and receiving form submissions.
+
+---
+
+### 5. WEB3FORMS_ACCESS_KEY
+**Description**: API key for Web3Forms contact form service.
+
+**How to get it**:
+1. Go to [https://web3forms.com](https://web3forms.com)
+2. Sign up for free
+3. Create a new form
+4. Copy the Access Key
+
+**Note**: This secret may already be configured in your repository.
+
+---
+
+## How to Add Secrets to GitHub
+
+### Step-by-Step Guide
+
+1. **Navigate to Repository Settings**
+   - Go to your GitHub repository
+   - Click **Settings** tab
+   - In the left sidebar, click **Secrets and variables** → **Actions**
+
+2. **Add Each Secret**
+   - Click **New repository secret** button
+   - Enter the secret name (exactly as shown above, case-sensitive):
+     - `GMAIL_USER`
+     - `GMAIL_APP_PASSWORD`
+     - `GMAIL_FROM`
+     - `TEST_EMAIL_TO`
+     - `WEB3FORMS_ACCESS_KEY`
+   - Paste the corresponding value
+   - Click **Add secret**
+
+3. **Verify Secrets**
+   - You should see all 5 secrets listed
+   - Secret values are encrypted and hidden (you can't view them after creation)
+   - You can update or delete secrets if needed
+
+### Screenshot Guide
+
+```
+Repository Settings → Secrets and variables → Actions → New repository secret
+```
+
+After adding all secrets, you should see:
+```
+✓ GMAIL_USER
+✓ GMAIL_APP_PASSWORD
+✓ GMAIL_FROM
+✓ TEST_EMAIL_TO
+✓ WEB3FORMS_ACCESS_KEY
+```
+
+---
+
+## Security Best Practices
+
+### ✅ DO:
+- Use Gmail App Passwords (not regular passwords)
+- Keep secrets confidential
+- Use dedicated email accounts for production
+- Rotate App Passwords periodically
+- Use 2-Factor Authentication on Gmail
+
+### ❌ DON'T:
+- Share secrets publicly
+- Commit secrets to version control
+- Use personal Gmail passwords
+- Reuse passwords across services
+- Disable 2-Factor Authentication
+
+---
+
+## Testing Email Functionality
+
+After configuring secrets:
+
+1. **Trigger a Deployment**
+   ```bash
+   git push origin main
+   ```
+
+2. **Check Workflow Run**
+   - Go to **Actions** tab
+   - Watch the "Deploy Next.js site to Pages" workflow
+   - Verify it completes successfully
+
+3. **Test Email Sending**
+   - Visit your deployed site
+   - Submit a contact form
+   - Check TEST_EMAIL_TO address for notifications
+
+---
+
+## Troubleshooting
+
+### Workflow Fails with "Missing Gmail credentials"
+**Solution**: Verify all secrets are added with exact names (case-sensitive).
+
+### Emails Not Sending
+**Possible causes**:
+1. Incorrect GMAIL_APP_PASSWORD (must be App Password, not regular password)
+2. 2-Factor Authentication not enabled on Gmail
+3. GMAIL_USER doesn't match the account that generated the App Password
+4. Secrets not configured correctly
+
+**Solution**: 
+- Regenerate Gmail App Password
+- Double-check secret values (delete and re-add if needed)
+
+### "Sign-in attempt blocked" Email from Google
+**Solution**: You're using regular password instead of App Password. Generate an App Password.
+
+### Workflow Shows "Web3Forms key configured: No"
+**Solution**: Add WEB3FORMS_ACCESS_KEY secret.
+
+---
+
+## Related Documentation
+
+- **[QUICK_DEPLOY_GITHUB_PAGES.md](QUICK_DEPLOY_GITHUB_PAGES.md)** - Quick deployment guide
+- **[GITHUB_PAGES_DEPLOYMENT.md](GITHUB_PAGES_DEPLOYMENT.md)** - Detailed deployment information
+- **[.github/workflows/nextjs.yml](.github/workflows/nextjs.yml)** - Workflow file using these secrets
+
+---
+
+## Support
+
+For issues or questions:
+- **Email**: codestromhub@gmail.com
+- **Phone**: +880 1234-567890
+- **Location**: Dhaka, Bangladesh
+
+---
+
+**Last Updated**: October 12, 2025
+**Version**: 1.0

QUICK_DEPLOY_GITHUB_PAGES.md

@@ -15,14 +15,19 @@ This guide will get your wedding website live on GitHub Pages in 5 minutes with
 ### 2️⃣ Configure GitHub Repository (2 minutes)
 
 1. Go to your repository **Settings** → **Secrets and variables** → **Actions**
-2. Click **"New repository secret"**
-3. Name: `WEB3FORMS_ACCESS_KEY`
-4. Value: Paste your Web3Forms access key
-5. Click **"Add secret"**
-
-Now go to **Settings** → **Pages**:
-1. Under "Source", select **"GitHub Actions"**
-2. Click **"Save"**
+2. Click **"New repository secret"** for each of the following:
+
+**Required Secrets:**
+- **WEB3FORMS_ACCESS_KEY**: Your Web3Forms access key from step 1
+- **GMAIL_USER**: Your Gmail address (e.g., `your-email@gmail.com`)
+- **GMAIL_APP_PASSWORD**: Gmail app password ([Get it here](https://myaccount.google.com/apppasswords))
+  - Note: Requires 2-Factor Authentication enabled on your Google account
+- **GMAIL_FROM**: Display name for emails (e.g., `"Wedding <your-email@gmail.com>"`)
+- **TEST_EMAIL_TO**: Test recipient email address
+
+3. After adding all secrets, go to **Settings** → **Pages**:
+   - Under "Source", select **"GitHub Actions"**
+   - Click **"Save"**
 
 ### 3️⃣ Deploy (1 minute)
 

README.md

@@ -255,6 +255,7 @@ The website automatically deploys to GitHub Pages via GitHub Actions on every pu
 #### Documentation
 
 - **Quick Start**: [`QUICK_DEPLOY_GITHUB_PAGES.md`](QUICK_DEPLOY_GITHUB_PAGES.md) - 5-minute setup guide
+- **Secrets Setup**: [`GITHUB_SECRETS_SETUP.md`](GITHUB_SECRETS_SETUP.md) - GitHub Secrets configuration for email
 - **Full Guide**: [`GITHUB_ACTIONS_DEPLOYMENT_GUIDE.md`](GITHUB_ACTIONS_DEPLOYMENT_GUIDE.md) - Complete documentation
 - **Testing**: [`TESTING_GUIDE.md`](TESTING_GUIDE.md) - Post-deployment verification checklist