181 lines
4.6 KiB
Markdown
181 lines
4.6 KiB
Markdown
# 🚀 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.
|