# 🚀 EzSepa Landing Page - Quick Start Checklist

## Next Steps for Deployment

### ✅ Setup (Do First)

1. **Install dependencies**
   ```powershell
   npm install
   ```

2. **Test development server**
   ```powershell
   npm run dev
   ```
   Visit http://localhost:5173 to preview the landing page.

---

### 🔧 Required Customizations

#### **1. Replace Placeholder Links**

Open `index.html` and replace:

- [ ] `{INSTALL_LINK}` → Your Shopify App Store URL
- [ ] `{DEMO_LINK}` → Demo video/interactive tour URL
- [ ] `https://github.com/your-repo` → Your GitHub repository URL
- [ ] `contact@ezsepa.com` → Your real contact email

**Quick PowerShell command:**
```powershell
(Get-Content index.html) -replace '\{INSTALL_LINK\}', 'https://apps.shopify.com/your-actual-app-id' | Set-Content index.html
(Get-Content index.html) -replace '\{DEMO_LINK\}', 'https://youtu.be/your-demo-video' | Set-Content index.html
```

#### **2. Replace Placeholder Images**

Current `assets/*.png` are SVG placeholders. Replace with real screenshots:

- [ ] `assets/hero.png` - Dashboard showing QR codes (1200×800px)
- [ ] `assets/checkout.png` - Thank you page with QR code (1200×700px)
- [ ] `assets/analytics.png` - Analytics dashboard (800×600px)

**If images exist in main repo:**
```powershell
# Adjust path as needed
Copy-Item "../auto-bank-payment/web/client/src/assets/images/hero.png" "./assets/hero.png" -Force
```

#### **3. Add Analytics Tracking**

Edit `main.js` (around line 100) to integrate your analytics:

```javascript
// Replace stub with:
gtag('event', eventName, properties); // Google Analytics
// OR
plausible(eventName, { props: properties }); // Plausible
```

Add tracking script to `index.html` before `</head>`:
```html
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
```

#### **4. Update Content (Optional)**

Review and customize in `index.html`:

- [ ] Hero headline and subheadline
- [ ] Pricing (currently €0/€19/€49/Custom)
- [ ] Feature descriptions
- [ ] FAQ answers
- [ ] Contact information in footer

---

### 🧪 Testing

- [ ] Test on Chrome, Firefox, Safari, Edge
- [ ] Test on mobile (iOS Safari, Android Chrome)
- [ ] Test all navigation links work
- [ ] Test mobile menu toggle
- [ ] Keyboard navigation (Tab through all links)
- [ ] Run Lighthouse audit (aim for 90+ in all categories)

**Run Lighthouse:**
Open Chrome DevTools → Lighthouse → Generate Report

---

### 📦 Build & Deploy

1. **Build production version**
   ```powershell
   npm run build
   ```
   Output in `dist/` folder.

2. **Preview production build locally**
   ```powershell
   npm run preview
   ```
   Visit http://localhost:5174

3. **Deploy to hosting**

   **Option A: Netlify**
   ```powershell
   npm install -g netlify-cli
   netlify deploy --prod --dir=dist
   ```

   **Option B: Vercel**
   ```powershell
   npm install -g vercel
   vercel --prod
   ```

   **Option C: GitHub Pages**
   - Push `dist/` contents to `gh-pages` branch
   - Enable GitHub Pages in repo settings

   **Option D: Shopify App Hosting**
   - Move to `web/landing/` in main repo
   - Serve via Express: `app.use('/landing', express.static('dist'))`

---

### 🔍 SEO & Social

- [ ] Update `og:image` meta tag with real hero image URL
- [ ] Test Open Graph preview: https://www.opengraph.xyz/
- [ ] Submit sitemap to Google Search Console
- [ ] Add `robots.txt` if needed
- [ ] Test Twitter card preview

---

### ♿ Accessibility Check

- [ ] All images have alt text
- [ ] All interactive elements are keyboard accessible
- [ ] Color contrast passes WCAG AA (use https://webaim.org/resources/contrastchecker/)
- [ ] Test with screen reader (NVDA on Windows, VoiceOver on Mac)

---

### 📊 Post-Launch

- [ ] Monitor analytics for traffic sources
- [ ] Track conversion rate (landing page → app install)
- [ ] A/B test different headlines/CTAs
- [ ] Collect user feedback
- [ ] Update screenshots as app evolves

---

## 🆘 Need Help?

- **Vite Issues**: https://vitejs.dev/guide/troubleshooting.html
- **TailwindCSS Issues**: https://tailwindcss.com/docs/installation
- **Main Repo**: Check `../auto-bank-payment` README
- **Deployment Issues**: See README.md "Deployment" section

---

## ✨ Quick Tips

- **Faster builds**: Use `npm run build -- --mode development` for unminified builds
- **Hot reload not working?**: Restart dev server (`Ctrl+C` then `npm run dev`)
- **Images too large?**: Use https://tinypng.com/ to compress before adding
- **Need more languages?**: Copy `i18n-keys.json` structure for FR, DE, ES, IT

---

**You're all set! 🎉**

Run `npm run dev` to start building, then `npm run build` when ready to deploy.