ezsepa-website/docs/CHECKLIST.md

🚀 EzSepa Landing Page - Quick Start Checklist

Next Steps for Deployment

✅ Setup (Do First)

1. Install dependencies

   npm install
   

2. Test development server

   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:

(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:

# 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:

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

Add tracking script to index.html before </head>:

<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

   npm run build
   

   Output in dist/ folder.

2. Preview production build locally

   npm run preview
   

   Visit http://localhost:5174

3. Deploy to hosting

   Option A: Netlify

   npm install -g netlify-cli
   netlify deploy --prod --dir=dist
   

   Option B: Vercel

   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.