Skip to main content
Logo
%
Complete
Feature
page
Specialist
Frontend Architect
Organization
ONE Platform
Progress
/

ONE Platform: Landing Page Template v1.0.0

Focus: Customizable landing page builder template with hero, features, testimonials, CTA, and responsive design Type: Frontend-only (Astro + React 19 + Tailwind v4) UI Pattern: Modern landing page with sections, animations, and conversion optimization Process: Optimized 20-cycle sequence (frontend-only) Timeline: 15-20 cycles per specialist per day Target: Fully functional landing page template with customizable sections Source File: web/src/pages/page.astro

Cycle Budget (20 Cycles - Frontend-Only)

Frontend-only landing pages are FAST:

  • Cycle 1-3: Foundation (hero, layout, basic sections) → Hero section live
  • Cycle 4-8: Core features (testimonials, FAQ, forms) → Full MVP deployed
  • Cycle 9-12: Polish (animations, responsive, accessibility) → Production-ready
  • Cycle 13-15: Optimization (performance, SEO, images) → Lighthouse 95+
  • Cycle 16-18: Documentation (examples, templates, guides) → Reusable templates
  • Cycle 19-20: Advanced features (A/B testing, analytics) → Enhanced features

Quick Wins (Cycles 1-10):

  • ✅ Cycle 3: Hero section deployed and live on localhost
  • ✅ Cycle 5: Features + testimonials sections working
  • ✅ Cycle 8: Complete landing page with working CTA and forms
  • ✅ Cycle 10: MVP deployed to production with real traffic

PHASE 1: FOUNDATION (Cycle 1-3) - QUICK WINS

Purpose: Get working hero section deployed to localhost

Cycle 1: Hero Section + Basic Layout

  • Create page.astro:
    • Basic HTML structure with SEO meta tags
    • Hero section with headline, subheadline, CTA button
    • Use shadcn/ui Button component for CTA
    • Full-width hero with background gradient
    • Mobile-first responsive design
  • Basic Styling:
    • Import Tailwind v4 CSS
    • Set up color variables (HSL format)
    • Typography hierarchy (h1, h2, p)
    • Spacing utilities
  • Deploy:
    • Run bun run dev
    • Verify hero displays on localhost:4321
    • Test on mobile viewport

Cycle 2: Features Section + Navigation

  • Features Grid Component:
    • 3-column responsive grid (1 col mobile, 3 desktop)
    • Feature cards with icon, title, description
    • Use shadcn/ui Card components
    • Hover animations (scale, shadow)
  • Navigation Header:
    • Sticky header on scroll
    • Logo + navigation links
    • Mobile hamburger menu
    • Smooth scroll to sections
  • Footer:
    • Links, social media icons
    • Copyright notice
    • Contact information

Cycle 3: Testimonials + Social Proof

  • Testimonials Section:
    • Grid layout (2-3 columns)
    • Quote + author + avatar + rating
    • Use shadcn/ui Avatar component
    • Responsive (1 col mobile, 3 desktop)
  • Social Proof:
    • Trust badges or logos
    • Stats/metrics (animated counters)
    • Customer count or success stories
  • Deploy Checkpoint:
    • Hero + Features + Testimonials live
    • All sections responsive
    • Quick Win: MVP landing page complete

PHASE 2: CORE FEATURES (Cycle 4-8) - MVP DEPLOYED

Purpose: Add interactive features, forms, FAQ, complete MVP

Cycle 4: Contact Form + Validation

  • FormSection Component:
    • Email, name, message fields
    • Client-side validation (Zod schema)
    • Submit button with loading state
    • Success/error messages
  • Form Handling:
    • Store submissions in localStorage (no backend)
    • Email validation (regex pattern)
    • Required field indicators
    • Character limits

Cycle 5: FAQ Accordion

  • FAQ Component:
    • Use shadcn/ui Accordion
    • Question/answer pairs
    • Smooth expand/collapse animation
    • Keyboard accessible (arrow keys)
  • Content:
    • 5-10 common questions
    • Clear, concise answers
    • Searchable (optional)

Cycle 6: CTA Sections + How It Works

  • CTA Section:
    • Prominent headline
    • Primary + secondary buttons
    • Background highlight color
    • Conversion-focused copy
  • How It Works:
    • Numbered steps (3-5 steps)
    • Step title + description
    • Optional icons or images
    • Timeline or card layout

Cycle 7: Animations + Interactions

  • Scroll Animations:
    • Fade in on scroll (Intersection Observer)
    • Slide in from bottom
    • Stagger animations for cards
  • Hover Effects:
    • Button hover states
    • Card hover (lift, shadow)
    • Link underline animations
  • Loading States:
    • Form submission spinner
    • Button disabled states
    • Skeleton loaders (shadcn/ui)

Cycle 8: MVP Polish + Deploy

  • SEO Optimization:
    • Meta title, description
    • Open Graph tags (social sharing)
    • Structured data (JSON-LD)
    • Sitemap generation
  • Responsive Testing:
    • Test all breakpoints (mobile, tablet, desktop)
    • Fix any layout issues
    • Ensure touch targets are 44px+
  • Deploy to Production:
    • bun run build
    • Deploy to Cloudflare Pages
    • Quick Win: Full MVP live with real traffic

PHASE 3: POLISH (Cycle 9-12) - PRODUCTION-READY

Purpose: Accessibility, dark mode, advanced UI

Cycle 9: Accessibility Compliance

  • WCAG 2.1 AA:
    • Color contrast ratios (4.5:1 text, 3:1 UI)
    • Alt text for all images
    • ARIA labels for interactive elements
    • Heading hierarchy (h1 → h6)
  • Keyboard Navigation:
    • Tab order logical
    • Focus indicators visible
    • Skip to content link
    • Escape to close modals/menus
  • Screen Reader Testing:
    • Test with VoiceOver/NVDA
    • Semantic HTML (nav, main, footer)
    • Form labels properly associated

Cycle 10: Dark Mode + Theme Switching

  • Dark Mode:
    • CSS variables for light/dark themes
    • Toggle button in header
    • Persist preference (localStorage)
    • Smooth transition between modes
  • Theme Variables:
    • Background, foreground colors
    • Primary, accent colors
    • Border, muted colors
    • Update all components to use variables

Cycle 11: Advanced Components

  • Newsletter Signup:
    • Email input field
    • Subscribe button
    • Success message
    • Store in localStorage
  • Video Background (Optional):
    • Hero section video support
    • Autoplay, loop, muted
    • Fallback image for mobile
    • Performance optimized
  • Testimonial Carousel:
    • Auto-rotate testimonials
    • Navigation arrows/dots
    • Pause on hover
    • Swipe gestures (mobile)

Cycle 12: Final QA + Bug Fixes

  • Cross-Browser Testing:
    • Chrome, Firefox, Safari, Edge
    • iOS Safari, Android Chrome
    • Fix any rendering issues
  • Performance Check:
    • Lighthouse audit (target 90+)
    • Fix any issues flagged
    • Optimize images if needed
  • Final Deploy:
    • Quick Win: Production-ready landing page

PHASE 4: OPTIMIZATION (Cycle 13-15) - LIGHTHOUSE 95+

Purpose: Performance, SEO, Core Web Vitals

Cycle 13: Image Optimization

  • Image Formats:
    • Convert to WebP/AVIF
    • Responsive images (srcset)
    • Lazy loading (loading=“lazy”)
    • Image compression
  • Performance:
    • Preload hero image
    • Defer off-screen images
    • Use CDN for images
    • Optimize SVG icons

Cycle 14: Code Splitting + Caching

  • Code Splitting:
    • Dynamic imports for heavy components
    • Lazy load form validation libraries
    • Split vendor bundles
  • Caching Strategy:
    • Cache static assets (1 year)
    • Cache HTML (5 minutes)
    • Service worker (optional)
  • Minification:
    • Minify CSS/JS in production
    • Remove unused CSS
    • Tree shake dependencies

Cycle 15: Core Web Vitals

  • LCP (Largest Contentful Paint):
    • Target < 2.5s
    • Preload hero image
    • Optimize font loading
  • FID (First Input Delay):
    • Target < 100ms
    • Minimize JavaScript execution
    • Use passive event listeners
  • CLS (Cumulative Layout Shift):
    • Target < 0.1
    • Set image dimensions
    • Reserve space for dynamic content
  • Lighthouse 95+ Score:
    • Run audit, fix issues
    • Quick Win: Optimized landing page

PHASE 5: DOCUMENTATION (Cycle 16-18) - REUSABLE TEMPLATES

Purpose: Create examples, guides, templates

Cycle 16: Template Examples

  • SaaS Landing Page:
    • Product-focused copy
    • Pricing section
    • Feature comparison
    • Trial signup CTA
  • Creator Portfolio:
    • Personal brand focus
    • Work showcase
    • About section
    • Contact form
  • Service Business:
    • Coach/consultant template
    • Services overview
    • Testimonials emphasis
    • Booking CTA

Cycle 17: Documentation + Guides

  • User Guide:
    • How to customize sections
    • How to change colors/branding
    • How to add/remove sections
    • How to customize forms
  • Component Library:
    • Document all components
    • Props and usage examples
    • Variant options
    • Accessibility notes
  • Best Practices:
    • CTA placement tips
    • Conversion optimization
    • Mobile-first design
    • Performance guidelines

Cycle 18: Sample Content + Assets

  • Pre-Written Copy:
    • Headlines for different industries
    • Subheadlines and CTAs
    • Feature descriptions
    • Testimonial templates
  • Sample Assets:
    • Placeholder images
    • Icon sets (Lucide icons)
    • Color palettes
    • Font pairings
  • Quick Win: Reusable template library

PHASE 6: ADVANCED FEATURES (Cycle 19-20) - ENHANCED

Purpose: A/B testing, analytics, advanced integrations

Cycle 19: Analytics + Tracking

  • Analytics Integration:
    • Plausible or Fathom script tag
    • Track page views
    • Track CTA clicks
    • Track form submissions
  • UTM Parameters:
    • Support for utm_source, utm_medium
    • Track campaign performance
    • Display in form submissions
  • Conversion Tracking:
    • Count CTA clicks
    • Count form submissions
    • Calculate conversion rate
    • Store in localStorage

Cycle 20: A/B Testing + Future Enhancements

  • A/B Testing (Frontend):
    • Simple variant toggle
    • Test different headlines
    • Test different CTAs
    • Track variant performance
  • Future Roadmap:
    • Email integration (ConvertKit, Mailchimp)
    • Payment integration (Stripe.js)
    • Custom domain support
    • Advanced analytics dashboard
    • AI copy suggestions
    • CRM integration
    • Webhook support
  • Quick Win: Advanced features complete

Success Criteria

  • ✅ Cycle 3: Hero section deployed and working on localhost
  • ✅ Cycle 8: Full landing page MVP deployed to production
  • ✅ Cycle 10: MVP live with real traffic and working forms
  • ✅ Cycle 12: Production-ready with accessibility compliance
  • ✅ Cycle 15: Lighthouse 95+ score achieved
  • ✅ Cycle 18: Reusable template library with 3+ examples
  • ✅ Cycle 20: Advanced features (analytics, A/B testing) complete
  • ✅ Mobile responsive on all devices
  • ✅ WCAG 2.1 AA accessibility compliant
  • ✅ Forms capture leads reliably (localStorage)
  • ✅ Comprehensive documentation and guides

Next Steps

  1. Cycle 1-3 (FOUNDATION): Hero + Features + Testimonials → Quick Win: MVP structure live
  2. Cycle 4-8 (CORE FEATURES): Forms + FAQ + CTA + Animations → Quick Win: Full MVP deployed
  3. Cycle 9-12 (POLISH): Accessibility + Dark Mode + QA → Quick Win: Production-ready
  4. Cycle 13-15 (OPTIMIZATION): Performance + SEO + Core Web Vitals → Quick Win: Lighthouse 95+
  5. Cycle 16-18 (DOCUMENTATION): Examples + Guides + Assets → Quick Win: Reusable templates
  6. Cycle 19-20 (ADVANCED): Analytics + A/B Testing → Quick Win: Enhanced features

Why 20 Cycles Works (vs 100)

Frontend-only landing pages are SIMPLE:

  • ❌ No backend schema (cycles 5-8 eliminated)
  • ❌ No database queries/mutations (cycles 6-7 eliminated)
  • ❌ No authentication layer (cycle 13 simplified)
  • ❌ No real-time sync (cycles eliminated)
  • ❌ No complex state management (cycles eliminated)

Static sites = 5x faster:

  • ✅ Astro pages are just HTML + CSS + minimal JS
  • ✅ Forms use localStorage (no backend integration)
  • ✅ Components are shadcn/ui (pre-built, accessible)
  • ✅ Styling is Tailwind v4 (utility-first, fast)
  • ✅ Deploy is Cloudflare Pages (one command)

The math:

  • Old: 100 cycles × 5 min/cycle = 500 minutes (8.3 hours)
  • New: 20 cycles × 5 min/cycle = 100 minutes (1.7 hours)
  • Result: 5x faster, same quality

When to Add Backend (Not Part of This Plan)

Only add backend when user explicitly requests:

  1. Multi-user collaboration → Need groups dimension
  2. Real-time updates → Need Convex subscriptions
  3. Event tracking → Need events dimension
  4. User authentication → Need people dimension with roles
  5. Database storage → Need things/connections dimensions

For this landing page plan: Frontend-only is sufficient. Forms store in localStorage. Analytics use script tags. No backend needed.

Ontology Dimensions

Things
Connections
Events

Timeline

Created
10/30/2025