oneie/one/things/todo-page.md

Build apps, websites, and AI agents in English. Zero-interaction setup for AI agents (Claude Code, Cursor, Windsurf). Download to your computer, run in the cloud, deploy to the edge. Open source and free forever.

---
title: Todo Page
dimension: things
primary_dimension: things
category: todo-page.md
tags: ai, architecture, frontend, cycle
related_dimensions: connections, events, groups, people, things, knowledge
scope: global
created: 2025-11-03
updated: 2025-11-03
version: 1.0.0
ai_context: |
  This document is part of the things dimension in the todo-page.md category.
  Location: one/things/todo-page.md
  Purpose: Documents one platform: landing page template v1.0.0
  Related dimensions: connections, events, groups, people
  For AI agents: Read this to understand todo page.
---

# ONE Platform: Landing Page Template v1.0.0

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

---

## PHASE 1: FOUNDATION & ARCHITECTURE (Cycle 1-10)

**Purpose:** Define landing page template requirements, customization options, content structure

### Cycle 1: Define Landing Page Features

- [ ] **Core Sections:**
  - [ ] Hero section with headline, subheadline, CTA
  - [ ] Features/benefits grid (3-6 items)
  - [ ] Social proof section (testimonials, case studies)
  - [ ] How it works section (step-by-step)
  - [ ] Call-to-action section (conversion focused)
  - [ ] FAQ accordion
  - [ ] Footer with links and contact
- [ ] **Customization Options:**
  - [ ] Change hero image/background
  - [ ] Update colors and branding
  - [ ] Add/remove sections via configuration
  - [ ] Customize form fields (lead capture)
  - [ ] Add social media links
  - [ ] Insert custom CSS/animations
- [ ] **Interactive Features:**
  - [ ] Smooth scroll navigation
  - [ ] Mobile hamburger menu
  - [ ] Newsletter signup
  - [ ] Contact form with validation
  - [ ] Dark/light mode toggle
  - [ ] Animated counters (stats)
- [ ] **Performance:**
  - [ ] Image optimization
  - [ ] Code splitting
  - [ ] Lazy loading
  - [ ] SEO optimization
  - [ ] Lighthouse 95+ score

### Cycle 2: Map Landing Page to 6-Dimension Ontology

- [ ] **Groups:** Creator's brand/organization
- [ ] **People:**
  - [ ] Creator (page owner)
  - [ ] Visitors (potential customers)
  - [ ] Team members (collaborators)
- [ ] **Things:**
  - [ ] landing_page (name, description, design config)
  - [ ] section (type, content, order, visibility)
  - [ ] feature (title, description, icon)
  - [ ] testimonial (quote, author, avatar, rating)
  - [ ] faq (question, answer)
  - [ ] contact_form (fields, validation rules)
  - [ ] cta_button (text, link, variant)
- [ ] **Connections:**
  - [ ] creator → landing_page (owns, created)
  - [ ] page → section (contains)
  - [ ] feature → thing (describes benefit)
  - [ ] testimonial → creator (endorses)
- [ ] **Events:**
  - [ ] page_viewed, page_customized, page_published
  - [ ] form_submitted, signup_clicked, cta_clicked
  - [ ] testimonial_added, feature_updated
- [ ] **Knowledge:** Landing page templates, conversion best practices, design patterns

### Cycle 3: Design Template Structure

- [ ] **Page Configuration:**
  ```
  {
    id: string (uuid)
    creatorId: string
    title: string (page title)
    slug: string (for URL)
    description: string (SEO meta)
    sections: Section[]
    branding: {
      primaryColor: string
      accentColor: string
      logo: string (URL)
      favicon: string (URL)
    }
    metadata: {
      published: boolean
      publishedAt?: number
      viewCount: number
      conversionRate: number
    }
  }
  ```
- [ ] **Section Types:**
  - Hero, Features, Social Proof, How It Works, FAQ, CTA, Footer
- [ ] **Hero Section:**
  ```
  {
    type: 'hero'
    headline: string
    subheadline: string
    cta: { text, link, variant }
    backgroundImage?: string
    backgroundVideo?: string
  }
  ```
- [ ] **Features Section:**
  ```
  {
    type: 'features'
    title: string
    features: [
      { icon, title, description }
    ]
  }
  ```
- [ ] **Testimonials Section:**
  ```
  {
    type: 'testimonials'
    testimonials: [
      { quote, author, role, avatar, rating }
    ]
  }
  ```

### Cycle 4: Design UI/UX Pattern

- [ ] **Layout:**
  - [ ] Full-width hero with centered content
  - [ ] Grid-based sections (max-width: 6xl)
  - [ ] Proper spacing and typography hierarchy
  - [ ] Mobile-first responsive design
- [ ] **Components:**
  - [ ] Hero component with image/video background
  - [ ] Feature cards (3-column, responsive)
  - [ ] Testimonial carousel or grid
  - [ ] FAQ accordion (accessible)
  - [ ] Contact form (email, name, message)
  - [ ] Newsletter signup (email input)
  - [ ] CTA button variations
  - [ ] Navigation header (sticky on scroll)
- [ ] **Animations:**
  - [ ] Fade in on scroll
  - [ ] Smooth transitions
  - [ ] Hover effects (cards, buttons)
  - [ ] Animated counters for stats
  - [ ] Loading states
- [ ] **Accessibility:**
  - [ ] WCAG 2.1 AA compliance
  - [ ] Keyboard navigation
  - [ ] Screen reader support
  - [ ] Color contrast ratios
  - [ ] Alt text for images

---

## PHASE 2: BACKEND SCHEMA & SERVICES (Cycle 11-20)

**Purpose:** Define data model, create Convex schema, implement services

### Cycle 5: Create Convex Schema

- [ ] **Landing Page Table:**
  - [ ] \_id, creatorId, title, slug, description
  - [ ] sections: Section[]
  - [ ] branding: BrandingConfig
  - [ ] metadata: PageMetadata
  - [ ] status: draft | active | archived
  - [ ] createdAt, updatedAt
- [ ] **Indexes:**
  - [ ] by_creatorId (for listing user's pages)
  - [ ] by_slug (for public access)
  - [ ] by_status (for published pages)
- [ ] **Validation:**
  - [ ] Required fields: title, creatorId
  - [ ] Unique: slug per creator
  - [ ] Section validation (correct types)

### Cycle 6: Implement Landing Page Queries

- [ ] **Query: listPages**
  - [ ] Args: creatorId, limit, offset
  - [ ] Returns: Page[] with metadata
  - [ ] Pagination support
- [ ] **Query: getPageBySlug**
  - [ ] Args: slug
  - [ ] Returns: Full page with all sections
  - [ ] Public access (no auth required)
- [ ] **Query: getPageById**
  - [ ] Args: pageId
  - [ ] Returns: Full page
  - [ ] Creator-only access
- [ ] **Query: getPageStats**
  - [ ] Args: pageId
  - [ ] Returns: views, conversions, submits
  - [ ] Time range support

### Cycle 7: Implement Landing Page Mutations

- [ ] **Mutation: createPage**
  - [ ] Args: creatorId, title, sections
  - [ ] Create page with defaults
  - [ ] Log creation event
  - [ ] Return pageId
- [ ] **Mutation: updatePage**
  - [ ] Args: pageId, updates (title, sections, branding)
  - [ ] Validate sections before update
  - [ ] Update timestamp
  - [ ] Log update event
- [ ] **Mutation: publishPage**
  - [ ] Args: pageId
  - [ ] Set status to active
  - [ ] Generate short URL
  - [ ] Log publish event
- [ ] **Mutation: deletePage**
  - [ ] Args: pageId
  - [ ] Soft delete (archive)
  - [ ] Remove from public access
  - [ ] Log deletion event
- [ ] **Mutation: submitForm**
  - [ ] Args: pageId, formData
  - [ ] Validate form fields
  - [ ] Save submission
  - [ ] Send confirmation email
  - [ ] Log conversion event

### Cycle 8: Create Landing Page Services

- [ ] **PageService:**
  - [ ] validatePageData() - check sections, required fields
  - [ ] generateSlug() - create unique URL slug
  - [ ] getPageStats() - aggregate view/conversion data
  - [ ] parsePageTemplate() - convert config to HTML
- [ ] **FormService:**
  - [ ] validateFormSubmission() - check required fields
  - [ ] sanitizeInput() - prevent XSS
  - [ ] sendConfirmationEmail() - notify submitter
  - [ ] saveLead() - store in database
- [ ] **BrandingService:**
  - [ ] validateColors() - check hex/rgb format
  - [ ] generateCSSVariables() - create theme CSS
  - [ ] updateBranding() - apply to all sections

---

## PHASE 3: FRONTEND PAGES & COMPONENTS (Cycle 21-30)

**Purpose:** Build reusable components, create template pages, implement interactions

### Cycle 9: Create Landing Page Components

- [ ] **HeroSection component**
  - [ ] Props: headline, subheadline, cta, image/video
  - [ ] Dynamic background image or video
  - [ ] Responsive text sizing
  - [ ] CTA button with link
- [ ] **FeaturesSection component**
  - [ ] Props: features array
  - [ ] 3-column grid on desktop, 1 on mobile
  - [ ] Icon + title + description
  - [ ] Hover scale animation
- [ ] **TestimonialsSection component**
  - [ ] Props: testimonials array
  - [ ] Carousel or grid layout
  - [ ] Avatar + quote + author + rating
  - [ ] Navigation arrows/dots
- [ ] **HowItWorksSection component**
  - [ ] Props: steps array
  - [ ] Numbered steps with descriptions
  - [ ] Timeline or card layout
  - [ ] Optional images/videos
- [ ] **CTASection component**
  - [ ] Props: headline, description, buttons
  - [ ] Prominent call-to-action
  - [ ] Secondary action (optional)
  - [ ] Background highlight
- [ ] **FAQSection component**
  - [ ] Props: faqs array
  - [ ] Accordion pattern
  - [ ] Smooth expand/collapse
  - [ ] Search/filter optional
- [ ] **FormSection component**
  - [ ] Props: fields, onSubmit
  - [ ] Input validation
  - [ ] Success/error states
  - [ ] Loading state during submit

### Cycle 10: Create Landing Page Template Page

- [ ] **pages/page.astro:**
  - [ ] Load page data by slug
  - [ ] Render hero section
  - [ ] Render each section in order
  - [ ] Apply branding colors
  - [ ] Add header/navigation
  - [ ] Add footer with links
  - [ ] SEO meta tags
  - [ ] Analytics tracking
- [ ] **Dynamic Sections:**
  - [ ] Map sections array to components
  - [ ] Handle conditional rendering
  - [ ] Apply custom CSS from branding
  - [ ] Track visibility events
- [ ] **Interactive Features:**
  - [ ] Smooth scroll to sections
  - [ ] Mobile navigation menu
  - [ ] Dark mode toggle
  - [ ] Form validation and submission

---

## PHASE 4: INTEGRATION & CONNECTIONS (Cycle 31-40)

**Purpose:** Connect to backend, implement data flow, handle authentication

### Cycle 11: Connect Frontend to Backend

- [ ] **usePageData hook:**
  - [ ] Fetch page by slug
  - [ ] Handle loading/error states
  - [ ] Cache page data
  - [ ] Track page view event
- [ ] **useFormSubmission hook:**
  - [ ] Handle form state
  - [ ] Validate before submit
  - [ ] Call submitForm mutation
  - [ ] Show success/error messages
- [ ] **usePageStats hook:**
  - [ ] Fetch page statistics
  - [ ] Display view count
  - [ ] Show conversion rate
  - [ ] Track user actions

### Cycle 12: Implement Creator Dashboard

- [ ] **pages/dashboard/pages.astro:**
  - [ ] List creator's landing pages
  - [ ] Create new page button
  - [ ] Edit/delete/publish actions
  - [ ] View statistics
- [ ] **Pages Management:**
  - [ ] Create page workflow
  - [ ] Edit sections
  - [ ] Customize branding
  - [ ] Preview before publish
  - [ ] Publish/unpublish toggle
  - [ ] Copy share link
  - [ ] View analytics

---

## PHASE 5: AUTHENTICATION & AUTHORIZATION (Cycle 41-50)

**Purpose:** Secure pages, implement access control, protect forms

### Cycle 13: Implement Access Control

- [ ] **Page Publishing:**
  - [ ] Creator can edit own pages
  - [ ] Public can view published pages
  - [ ] Draft pages private to creator
  - [ ] Archived pages hidden from public
- [ ] **Form Submissions:**
  - [ ] Allow public submissions
  - [ ] No auth required for visitors
  - [ ] Creator sees all submissions
  - [ ] Spam filtering
- [ ] **Rate Limiting:**
  - [ ] Limit form submissions per IP
  - [ ] Prevent abuse
  - [ ] Show rate limit message

---

## PHASE 6: KNOWLEDGE & RAG (Cycle 51-60)

**Purpose:** Store best practices, enable AI recommendations

### Cycle 14: Create Landing Page Knowledge Base

- [ ] **Template Patterns:**
  - [ ] SaaS landing pages
  - [ ] Service-based landing pages
  - [ ] Product launch pages
  - [ ] Creator/portfolio pages
  - [ ] Nonprofit landing pages
- [ ] **Conversion Best Practices:**
  - [ ] CTA placement and wording
  - [ ] Form field optimization
  - [ ] Social proof placement
  - [ ] Headline copywriting tips
  - [ ] Mobile optimization
- [ ] **Design Patterns:**
  - [ ] Color scheme recommendations
  - [ ] Typography hierarchy
  - [ ] Spacing and layout
  - [ ] Animation usage
  - [ ] Accessibility patterns
- [ ] **AI Recommendations:**
  - [ ] Suggest missing sections
  - [ ] Recommend copy improvements
  - [ ] Highlight conversion opportunities
  - [ ] Test variations

---

## PHASE 7: QUALITY & TESTING (Cycle 61-70)

**Purpose:** Write tests, validate functionality, ensure reliability

### Cycle 15: Create Landing Page Tests

- [ ] **Unit Tests:**
  - [ ] HeroSection component
  - [ ] FeaturesSection component
  - [ ] FormSection component
  - [ ] Validation functions
- [ ] **Integration Tests:**
  - [ ] Page loading and rendering
  - [ ] Form submission flow
  - [ ] Navigation between sections
  - [ ] Backend API calls
- [ ] **E2E Tests:**
  - [ ] Create and publish page
  - [ ] Submit form on landing page
  - [ ] View page analytics
  - [ ] Edit published page

---

## PHASE 8: DESIGN & WIREFRAMES (Cycle 71-80)

**Purpose:** Finalize UI/UX, create design system, ensure accessibility

### Cycle 16: Finalize Landing Page Design

- [ ] **Component Variants:**
  - [ ] Hero: image, video, gradient backgrounds
  - [ ] Features: icon + text, cards, list
  - [ ] Testimonials: carousel, grid, single
  - [ ] Forms: minimal, detailed, multi-step
- [ ] **Design System:**
  - [ ] Color palette (primary, accent, neutrals)
  - [ ] Typography (font families, sizes, weights)
  - [ ] Spacing scale (4px, 8px, 16px...)
  - [ ] Component library
  - [ ] Animation timing
- [ ] **Responsive Design:**
  - [ ] Mobile (320px+)
  - [ ] Tablet (768px+)
  - [ ] Desktop (1024px+)
  - [ ] Large screens (1280px+)
- [ ] **Accessibility Audit:**
  - [ ] WCAG 2.1 AA compliance check
  - [ ] Color contrast verification
  - [ ] Keyboard navigation testing
  - [ ] Screen reader testing
  - [ ] Alt text for all images

---

## PHASE 9: PERFORMANCE & OPTIMIZATION (Cycle 81-90)

**Purpose:** Optimize speed, improve Core Web Vitals, ensure scalability

### Cycle 17: Optimize Landing Page Performance

- [ ] **Image Optimization:**
  - [ ] Convert to WebP/AVIF formats
  - [ ] Responsive image sizes
  - [ ] Lazy loading below fold
  - [ ] Image compression
- [ ] **Code Splitting:**
  - [ ] Dynamic imports for components
  - [ ] Separate bundle for admin pages
  - [ ] Lazy load form validation
- [ ] **Caching Strategy:**
  - [ ] Cache page data (30 min)
  - [ ] Cache images (1 year with versioning)
  - [ ] Cache CSS/JS (CDN cache)
- [ ] **Core Web Vitals:**
  - [ ] LCP < 2.5s (Largest Contentful Paint)
  - [ ] FID < 100ms (First Input Delay)
  - [ ] CLS < 0.1 (Cumulative Layout Shift)
  - [ ] Target: Lighthouse 95+
- [ ] **Database Optimization:**
  - [ ] Index creatorId, slug
  - [ ] Limit query results
  - [ ] Pagination for large lists

---

## PHASE 10: DEPLOYMENT & DOCUMENTATION (Cycle 91-100)

**Purpose:** Ship to production, document features, enable end-users

### Cycle 18: Deploy and Document Landing Page

- [ ] **Production Deployment:**
  - [ ] Build for production
  - [ ] Deploy to Cloudflare Pages
  - [ ] Set up CDN caching
  - [ ] Configure SSL/TLS
  - [ ] Monitor performance
- [ ] **Documentation:**
  - [ ] User guide for creators
  - [ ] Template customization guide
  - [ ] FAQ for end-users
  - [ ] API documentation
  - [ ] Component library docs
- [ ] **Post-Launch:**
  - [ ] Monitor error logs
  - [ ] Track Core Web Vitals
  - [ ] Collect user feedback
  - [ ] Plan improvements
  - [ ] Schedule feature releases

### Cycle 19: Create Landing Page Examples

- [ ] **Template Examples:**
  - [ ] SaaS product launch
  - [ ] Creator portfolio
  - [ ] Service business (coach, consultant)
  - [ ] Nonprofit organization
  - [ ] Event/conference registration
- [ ] **Sample Content:**
  - [ ] Pre-written copy
  - [ ] Sample images
  - [ ] Example testimonials
  - [ ] Icon sets
  - [ ] Color palettes

### Cycle 20: Plan Future Enhancements

- [ ] **Advanced Features:**
  - [ ] A/B testing
  - [ ] Email integration (ConvertKit, etc.)
  - [ ] Payment integration (for products)
  - [ ] Custom domain support
  - [ ] Advanced analytics (UTM parameters)
- [ ] **AI Features:**
  - [ ] Generate copy suggestions
  - [ ] Optimize headlines
  - [ ] Recommend section order
  - [ ] Auto-generate testimonials
  - [ ] Design recommendations
- [ ] **Automation:**
  - [ ] Automated email sequences
  - [ ] Lead scoring
  - [ ] CRM integration
  - [ ] Webhook support
  - [ ] Zapier/Make.com integration

---

## Success Criteria

- ✅ Landing page template fully functional
- ✅ Creators can customize sections and branding
- ✅ Public pages are fast (Lighthouse 95+)
- ✅ Forms capture leads reliably
- ✅ Analytics track key metrics
- ✅ Mobile responsive on all devices
- ✅ WCAG 2.1 AA accessibility compliant
- ✅ No security vulnerabilities
- ✅ Comprehensive documentation
- ✅ 5+ template examples provided

---

## Next Steps

1. **Cycle 1-5:** Design and validate template structure
2. **Cycle 6-10:** Implement backend schema and queries
3. **Cycle 11-20:** Build frontend components and pages
4. **Cycle 21-30:** Integrate with backend and add features
5. **Cycle 31-50:** Security, authentication, access control
6. **Cycle 51-70:** Testing and quality assurance
7. **Cycle 71-80:** Design refinement and accessibility
8. **Cycle 81-90:** Performance optimization
9. **Cycle 91-100:** Deployment and documentation