- Summary / Product Message
- Technical / Delivery Constraints • Use Next.js App Router and TypeScript for pages and components. • UI primitives via shadcn/ui (Card, Accordion, Button, Input, Avatar, Badge, Tabs). • Animations via GSAP (entry hero reveal, micro-interactions, persona panel transitions). Keep animations subtle and accessible (prefers-reduced-motion respected). • Server-side rendering (SSR) for core landing content; use incremental static regeneration (ISR) for docs/data that can be stale (e.g., roadmap updates). • Accessibility (a11y): WCAG AA. Keyboard focus states, aria labels, semantic HTML. • Responsive: mobile-first; breakpoints small (≤640px), md (641–1024px), lg (1025–1440px), xl (1441px+). • SEO & meta: canonical tags, JSON-LD schema (SoftwareApplication), OpenGraph, Twitter card. • Performance: Lighthouse score target 90+ (mobile), images served via AVIF/WebP, critical CSS inlined, code-splitting. • Forms: email capture (double opt-in optional), GDPR compliance, reCAPTCHA optional. • Integrations: Auth (magic link / OAuth), analytics (PostHog/Plausible), CRM integration (Notion sync or Zapier/n8n hook). • Tests: unit tests (Jest/React Testing Library), E2E (Playwright). • CI/CD: GitHub Actions or Vercel — run lint, tests, build before deploy. • Feature flagging: launch toggles for gamification / persona badges.
- REQUIREMENTS (Page-level)
- Persona-Specific Touches (UX and CTAs) • Hero persona pills — clicking updates demo and primary CTA UTM param (e.g., utm_persona=vBuilder). • Persona landing anchors — deep links to sections with relevant copy and example screenshots. • Tailored CTAs: Example: vBuilder CTA → Start Free (Builder Pack); vCreator CTA → Get Creator Templates. • Gamification hooks: show small progress widget for returning users (XP level / badge preview) — optionally visible after login.
- Component Inventory (Next.js + shadcn) • app/layout.tsx – global layout, metadata, JSON-LD schema injection. • app/page.tsx – landing page composition (Hero, Features, Pricing, Roadmap, Social proof, Footer). • components/Hero.tsx – GSAP hooks, screenshot carousel, persona pills. • components/PricingCard.tsx – shadcn Card + Accordion details. • components/FeatureGrid.tsx – data-driven rendering of feature JSON. • components/Testimonial.tsx – shadcn Card. • components/Roadmap.tsx – timeline component. • components/PersonalStatement.tsx – founder block. • components/SignupModal.tsx – email form, magic link support. • lib/analytics.ts – wrapper for PostHog / Plausible. • hooks/useGSAP.ts – reusable GSAP hook (respects prefers-reduced-motion). • styles/tokens.ts – CSS custom properties and shadcn theme mapping. • public/ – images, demo GIFs, mascot assets (Buzzo vector + sprites). • tests/ – component and E2E test suites.
- Data & API Requirements • Pricing config: JSON in /data/pricing.json or CMS (Sanity/Notion) with cache invalidation rules. • Telemetry events: • page_view, hero_cta_click, persona_cta_click, pricing_select, signup_submit, watch_demo with UTM & persona tags. • Signup API: /api/signup — validates, rate-limits, writes to DB, triggers email (Resend), writes to CRM, and returns temporary token for magic link. • Docs link: https://docs.v01t.io for deep technical documentation. Roadmap writable from docs admin.
- SEO, Metadata, and JSON-LD • Title: V01T.io — One console to control every app • Meta description: Configure, sync, and automate apps across Notion, Asana, Trello, and more — all from one console. Early access available. • JSON-LD: SoftwareApplication schema with offers, sameAs links. Include author founder snippet. • OpenGraph: OG image variants per persona for social cards (e.g., vBuilder-themed social card).
- Accessibility & Internationalization • a11y: keyboard navigation on all CTAs, aria-live for form submission responses, semantic headings, alt text for all images (including Buzzo). • i18n: prepare copy keys (i18next or next-intl). Launch in English first; plan translations later (ES, FR). • GDPR / Privacy: cookie banner, consent management for analytics, privacy policy link in footer, clear storage of email addresses.
- Analytics, Funnels, & KPIs • Track: landing visits, hero CTA CTR, persona-specific CTA CTR, pricing view → signup conversion, lifetime purchase conversions. • KPIs: • 7-day trial activation rate (target: 5–8% from traffic) • Early adopter lifetime conversions (target: 50 lifetime seats sold in first 6 weeks) • CTA CTR (target: 3–7% hero CTA) • Use A/B experiments on headline variants, hero screenshot vs demo GIF, and pricing tier order.
- Security & Privacy • Serve all endpoints over HTTPS, CSP header defined, limit inline scripts (GSAP allowed but secure). • Validate inputs server-side, rate-limit signup endpoint, store email hashed/segmented for GDPR. • Backup & schedule: DB backups, automated key rotation for API tokens.
- Operational & Release Notes • Staging environment for QA (Vercel preview or staging cluster). • Launch checklist: final hero headline A/B, CTA link verification, analytics tags active, email provider tested, privacy policy & terms live, social OG images present. • Post-launch: monitor error logs, watch analytics for funnel drop-offs, and iterate copy/UX weekly for 4 weeks.
- Content & Creative Assets