5d4febf777
- Add AUTONOMOUS-NEXT-TASKS.md (tasks for next agent execution)
- Add cloud session prompt documents (1-4)
- Add GITHUB_READINESS_REPORT.md (deployment status)
- Add GIT_STATE_REPORT.md (git state verification)
- Add feature-selector-complete.html (demo UI)
- Add demo-data/ directory (sample data for demo)
- Add .github/ workflows (CI/CD configuration)
Ready for cloud session launch.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
224 lines
7.5 KiB
Markdown
224 lines
7.5 KiB
Markdown
# Cloud Session 4: Demo Polish & Riviera Plaisance Showcase
|
|
|
|
**Session ID:** CLOUD-4-DEMO-POLISH
|
|
**Timeline:** 90 minutes
|
|
**Deadline:** 4 hours from now (Riviera Plaisance presentation)
|
|
**Target:** Polish UI/UX for impressive Sylvain demo
|
|
|
|
---
|
|
|
|
## Your Mission
|
|
|
|
Make NaviDocs shine for the Riviera Plaisance meeting. Focus on:
|
|
- **Impressive visuals:** Perfect onboarding flow, smooth animations
|
|
- **Sticky demo:** "Forgotten tender case study" showing €33K value (real example)
|
|
- **Demo script:** 10-minute pitch with "aha moment" at 2-minute mark
|
|
- **Error handling:** No crashes, graceful failures
|
|
- **Performance:** Smooth 60fps interactions, <1s load times
|
|
- **Mobile ready:** Works perfectly on iPad (Sylvain's device)
|
|
|
|
The goal: Sylvain walks out saying "I want to bundle this with every boat sale"
|
|
|
|
---
|
|
|
|
## Quick Start
|
|
|
|
1. **Clone repo:**
|
|
```bash
|
|
git clone https://github.com/dannystocker/navidocs.git && cd navidocs
|
|
```
|
|
|
|
2. **Review existing demo guide:**
|
|
```bash
|
|
cat DEMO-GUIDE.md
|
|
```
|
|
|
|
3. **Start dev server:**
|
|
```bash
|
|
npm run dev
|
|
# http://localhost:3000
|
|
```
|
|
|
|
4. **Test on mobile:**
|
|
```bash
|
|
# From your machine: http://<server-ip>:3000 on iPad
|
|
```
|
|
|
|
---
|
|
|
|
## Your Task List
|
|
|
|
- [ ] **Onboarding Flow Audit:**
|
|
- First-time user sees: Welcome → Boat setup → Photo upload → Document scan → Dashboard
|
|
- Each step has helpful copy + visual cues
|
|
- No confusing jargon
|
|
- Should take <3 minutes to complete
|
|
- Document findings in `ONBOARDING_AUDIT.md`
|
|
|
|
- [ ] **Forgotten Tender Case Study:**
|
|
- Create sample boat: "Sunseeker 40ft - €1.2M"
|
|
- Add photos: exterior, cabin, engine, safety equipment
|
|
- Add inventory: engine, tender (€35K), solar panels (€8K), electronics (€25K)
|
|
- Add maintenance: Last service November 2024
|
|
- This demo proves: "Owner forgot tender worth €35K until selling" → NaviDocs prevented loss
|
|
|
|
- [ ] **UI Polish Checklist:**
|
|
- [ ] Buttons have hover states + loading states
|
|
- [ ] Form inputs show validation errors clearly
|
|
- [ ] Empty states are friendly (not blank, have next steps)
|
|
- [ ] Images load smoothly (no layout shift)
|
|
- [ ] Modals have close buttons that work
|
|
- [ ] Navigation breadcrumbs always visible
|
|
- [ ] Search field has clear button
|
|
- [ ] All colors meet WCAG AA contrast standards
|
|
- [ ] Icons are consistent (Lucide React or Heroicons)
|
|
- [ ] Font sizes readable on mobile (16px minimum)
|
|
|
|
- [ ] **Performance Optimization:**
|
|
- Measure: Largest Contentful Paint (LCP) <2.5s
|
|
- Measure: Cumulative Layout Shift (CLS) <0.1
|
|
- Measure: First Input Delay (FID) <100ms
|
|
- Run Lighthouse audit: `npm run build && npx lighthouse http://localhost:3000`
|
|
- Report findings in `PERFORMANCE_REPORT.md`
|
|
|
|
- [ ] **Error Handling:**
|
|
- Network errors: Show friendly message + retry button
|
|
- Upload failures: Clear error message + upload again
|
|
- Missing documents: "No documents yet" with [Add Document] button
|
|
- Photo load failures: Placeholder image instead of broken image
|
|
- Test by disabling network: Graceful degradation
|
|
|
|
- [ ] **Demo Script Creation:**
|
|
- 10-minute pitch for Sylvain
|
|
- 0:00-2:00 - Problem statement (boat owners forget €15K-€50K in upgrades)
|
|
- 2:00-4:00 - NaviDocs solution (photos, documents, inventory)
|
|
- 4:00-8:00 - Live demo (upload photo, add inventory, search documents)
|
|
- 8:00-10:00 - Business case (€33K tender case study, sticky engagement)
|
|
- Include talking points for objections ("costs too much", "too complex", "we already have docs")
|
|
|
|
- [ ] **Mobile Testing:**
|
|
- Test on iPad (target device for Sylvain)
|
|
- Portrait + landscape orientations
|
|
- Touch targets 48x48px minimum (accessibility)
|
|
- Forms don't get covered by keyboard
|
|
- Pinch-zoom disabled on appropriate elements
|
|
- No horizontal scroll needed
|
|
- File: `MOBILE_TEST_REPORT.md`
|
|
|
|
- [ ] **Git commit:** `[AGENT-4] Polish UI/UX for Riviera Plaisance demo`
|
|
- [ ] **Create issue:** `[AGENT-4] DEMO-READY: Launch Package` with:
|
|
- Performance metrics (LCP, CLS, FID)
|
|
- Demo script (text file)
|
|
- Case study preview (screenshot)
|
|
- Checklist sign-off (all items green)
|
|
- Video recording of demo flow (optional but impressive)
|
|
|
|
---
|
|
|
|
## The €33K Tender Case Study
|
|
|
|
**Scenario:**
|
|
- Owner buys Sunseeker 40ft for €1.2M (includes tender, electronics, solar)
|
|
- 3 years later, decides to sell
|
|
- Without inventory photos/docs: **Forgets tender was included**
|
|
- Tender worth €35K just sits in storage
|
|
- Sells boat for €950K (loses €50K + tender = €85K total loss)
|
|
|
|
**With NaviDocs:**
|
|
- Uploaded photos on day 1: exterior, tender on davits, cabin, electronics
|
|
- Maintenance log: annual haul-out with photos
|
|
- Inventory checklist: engine, tender, electronics, safety equipment all tagged
|
|
- When selling: "Here's photographic proof of everything included"
|
|
- Sells for €1.0M (prevents loss)
|
|
|
|
**Talking Points for Sylvain:**
|
|
1. "You just sold a €1.2M boat"
|
|
2. "What if the owner forgot they included a €35K tender?"
|
|
3. "They remember when they're negotiating the sale"
|
|
4. "Your reputation: 'I forgot to sell the tender'"
|
|
5. "With NaviDocs: Photos + inventory from day 1"
|
|
6. "When selling: Complete documentation proves everything"
|
|
7. "Result: Higher resale prices, happier customers, repeat business"
|
|
|
|
---
|
|
|
|
## Technical Context
|
|
|
|
**Tools Available:**
|
|
- Lighthouse: `npm run build && npx lighthouse`
|
|
- React DevTools: Browser extension (check render performance)
|
|
- Chrome DevTools: Network tab (check load times)
|
|
- Mobile debugging: Chrome remote debugging
|
|
|
|
**Key Metrics:**
|
|
- Lighthouse score target: >85
|
|
- Largest Contentful Paint (LCP): <2.5 seconds
|
|
- Cumulative Layout Shift (CLS): <0.1
|
|
- First Input Delay (FID): <100ms
|
|
|
|
**UI Framework:**
|
|
- Next.js 14 with App Router
|
|
- Tailwind CSS for styling
|
|
- shadcn/ui components (consistent design)
|
|
- Lucide React for icons
|
|
|
|
---
|
|
|
|
## Critical Demo Notes
|
|
|
|
1. **Aha Moment:** At 2-minute mark, show forgotten tender photo → "That's €35K"
|
|
2. **Sticky Engagement:** Show push notification for maintenance due → daily habit
|
|
3. **Resale Value:** Before/after: competing boats same price, NaviDocs boat sells first
|
|
4. **Simplicity:** No jargon. "Boat owner" not "stakeholder"
|
|
5. **Success Metric:** Sylvain says "I want to bundle this with every boat sale"
|
|
|
|
---
|
|
|
|
## GitHub Access
|
|
|
|
- **Repo:** https://github.com/dannystocker/navidocs
|
|
- **Branch:** `feature/demo-polish` (create from main)
|
|
- **Base for PR:** main branch
|
|
|
|
---
|
|
|
|
## Success Criteria
|
|
|
|
✅ Lighthouse score >85 on all pages
|
|
✅ Performance metrics within targets (LCP <2.5s, CLS <0.1, FID <100ms)
|
|
✅ UI polish checklist 100% complete
|
|
✅ Demo script written (10 minutes, includes case study)
|
|
✅ €33K tender case study configured
|
|
✅ Mobile testing complete (iPad compatible)
|
|
✅ No console errors (warnings OK)
|
|
✅ Error handling covers common failures
|
|
✅ Git commit with [AGENT-4] tag
|
|
|
|
---
|
|
|
|
## If Blocked
|
|
|
|
1. Check Lighthouse: `npm run build && npx lighthouse http://localhost:3000`
|
|
2. Check React performance: Open DevTools → Profiler tab
|
|
3. Check network: DevTools → Network tab → throttle to "Slow 3G"
|
|
4. Review design system: `grep -r "shadcn\|lucide" src/components/`
|
|
5. Create issue: `[AGENT-4] BLOCKER: [description]`
|
|
|
|
---
|
|
|
|
## Deliverable Files
|
|
|
|
Create these before wrapping up:
|
|
1. `DEMO_SCRIPT.txt` - 10-minute pitch
|
|
2. `ONBOARDING_AUDIT.md` - Onboarding flow review
|
|
3. `PERFORMANCE_REPORT.md` - Lighthouse + Web Vitals
|
|
4. `MOBILE_TEST_REPORT.md` - iPad compatibility
|
|
5. `UI_POLISH_CHECKLIST.md` - All items green
|
|
|
|
---
|
|
|
|
## Reference Files
|
|
|
|
- `DEMO-GUIDE.md` - Demo structure
|
|
- `ARCHITECTURE-SUMMARY.md` - Technical overview
|
|
- `BRANDING_CREATIVE_BRIEF.md` - Visual identity guidelines
|