first test

2026-06-03 20:12:58 +00:00 · 2026-02-08 14:14:55 +01:00
parent 18aa702174
commit d27cf14110
372 changed files with 98089 additions and 2585 deletions
@@ -0,0 +1,336 @@
+# Trackeep Landing Page Plan & Structure
+
+## Project Overview
+**Domain**: trackeep.org  
+**Tech Stack**: Vue 3 + TypeScript + Vite + UnoCSS  
+**Design System**: Papra-inspired clean UI with Inter font, custom color palette  
+**Theme**: Dark mode support, no gradients, clean SaaS/PaaS aesthetic  
+
+## Design System Reference
+
+### Colors (from existing project)
+- **Primary**: `#5BC4F2` (bright blue accent)  
+- **Background**: Light `#FFFFFF`, Dark `#1A1A1A`
+- **Foreground**: Light `#0A0A0A`, Dark `#FAFAFA`
+- **Card**: Light `#FCFCFC`, Dark `#1A1A1A`
+- **Border**: Light `#E2E8F0`, Dark `#262626`
+- **Muted**: Light `#F2F2F2`, Dark `#262626`
+
+### Typography
+- **Font**: Inter (400, 500, 600, 700 weights)
+- **Sizes**: xs(0.75rem), sm(0.875rem), base(1rem), lg(1.125rem), xl(1.25rem), 2xl(1.5rem), 3xl(1.875rem), 4xl(2.25rem), 6xl(3.75rem)
+
+### Components (reuse from project)
+- Papra button variants (`btn-primary`, `btn-secondary`, `btn-outline`)
+- Card styles (`card-papra`)
+- Navigation items (`nav-item-papra`)
+- Transitions (`transition-papra`)
+
+## Landing Page Structure
+
+### 1. Hero Section
+**Purpose**: Immediate value proposition and call-to-action
+
+**Components**:
+- Navigation bar with logo and menu items
+- **Quick Install Command**: Interactive curl command box with copy functionality
+- Main headline with subheading
+- Primary CTA button
+- Hero image placeholder (large, prominent)
+- Feature highlights (3-4 key benefits)
+
+**Quick Install Command Section**:
+- **Command**: `curl -sSL https://trackeep.org/install.sh | sh`
+- **Features**:
+  - Rounded input box with dark background
+  - One-click copy functionality
+  - Syntax highlighting for the command
+  - Interactive setup script that:
+    - Checks system requirements (Docker, Docker Compose)
+    - Downloads latest Trackeep release
+    - Sets up environment variables
+    - Initializes database
+    - Starts all services
+    - Provides next steps and access URLs
+- **Social Proof Buttons**: GitHub and Discord links below the command
+
+**Content Ideas**:
+- Headline: "Your Self-Hosted Productivity & Knowledge Hub"
+- Subheading: "Track, save, and organize everything that matters to you - all in one place, under your control"
+- CTA: "Get Started" or "View Demo"
+
+### 2. Features Section
+**Purpose**: Showcase core capabilities
+
+**Layout**: Grid of feature cards (3-4 columns)
+
+**Features to highlight**:
+- **Bookmarks & Links**: Save and categorize web content
+- **Task Management**: Plan and track your to-dos
+- **File Storage**: Upload and organize documents
+- **AI-Powered**: Smart recommendations (optional)
+- **Privacy First**: Self-hosted and secure
+- **Mobile App**: Native iOS and Android
+
+### 3. How It Works Section
+**Purpose**: Simple explanation of the setup process
+
+**Steps**:
+1. **Deploy**: Simple Docker setup
+2. **Configure**: Set up your preferences
+3. **Use**: Start organizing your digital life
+
+### 4. Benefits Section
+**Purpose**: Why choose Trackeep over alternatives
+
+**Key benefits**:
+- **Privacy**: Your data stays yours
+- **Open Source**: Transparent and customizable
+- **All-in-One**: Replace multiple apps
+- **AI Optional**: Use only what you want
+- **Self-Hosted**: No subscriptions or data mining
+
+### 5. Tech Stack Section
+**Purpose**: Build credibility with developers
+
+**Technologies**:
+- **Frontend**: SolidJS, TypeScript, UnoCSS
+- **Backend**: Go, PostgreSQL
+- **Mobile**: React Native
+- **DevOps**: Docker, GitHub Actions
+
+### 6. Pricing Section (if applicable)
+**Purpose**: Clear pricing information
+
+**Options**:
+- **Free**: Open source, self-hosted
+- **Premium**: Optional support/features
+- **Enterprise**: Custom solutions
+
+### 7. Testimonials Section
+**Purpose**: Social proof
+
+**Layout**: Carousel or grid of user quotes
+
+### 8. Call-to-Action Section
+**Purpose**: Final conversion opportunity
+
+**Content**: Strong CTA with benefits summary
+
+### 9. Footer
+**Purpose**: Navigation and legal information
+
+**Links**:
+- Documentation
+- GitHub
+- Privacy Policy
+- Terms of Service
+- Contact
+
+## Technical Implementation Plan
+
+### Project Structure
+```
+landing/
+├── src/
+│   ├── components/
+│   │   ├── HeroSection.vue
+│   │   ├── Navigation.vue
+│   │   ├── FeatureCard.vue
+│   │   ├── Footer.vue
+│   │   ├── QuickInstall.vue
+│   │   └── ui/
+│   │       ├── Button.vue
+│   │       ├── Card.vue
+│   │       └── Container.vue
+│   ├── composables/
+│   │   ├── useTheme.ts
+│   │   └── useScroll.ts
+│   ├── assets/
+│   │   ├── images/
+│   │   │   ├── hero-placeholder.png
+│   │   │   ├── feature-1.png
+│   │   │   ├── feature-2.png
+│   │   │   └── feature-3.png
+│   │   └── styles/
+│   │       └── main.css
+│   ├── App.vue
+│   ├── main.ts
+│   └── router.ts
+├── public/
+│   ├── favicon.ico
+│   └── trackeep-logo.svg
+├── package.json
+├── vite.config.ts
+├── uno.config.ts
+└── tsconfig.json
+```
+
+### Key Components
+
+#### Navigation Component
+- Logo on left
+- Menu items center
+- Theme toggle right
+- Mobile hamburger menu
+
+#### Quick Install Component
+- Dark rounded box with command display
+- Copy button with clipboard functionality
+- Syntax highlighting for curl command
+- Success feedback when copied
+- GitHub and Discord action buttons
+
+#### Hero Section
+- Split layout: text left, image right
+- Animated elements on scroll
+- Clear CTAs
+- Quick install command prominently displayed
+
+#### Feature Cards
+- Icon + title + description
+- Hover effects
+- Consistent spacing
+
+#### Container Component
+- Max-width wrapper
+- Responsive padding
+- Center alignment
+
+### Responsive Design
+- **Mobile**: Single column, stacked layout
+- **Tablet**: Two-column layouts
+- **Desktop**: Full multi-column experience
+
+### Performance Considerations
+- Lazy load images
+- Optimize fonts (Inter from existing CDN)
+- Minimize JavaScript bundle
+- Use CSS-in-JS for styling
+
+### SEO Optimization
+- Semantic HTML5 structure
+- Meta tags for each section
+- Structured data markup
+- Fast loading times
+
+## Content Strategy
+
+### Messaging Pillars
+1. **Simplicity**: Easy to set up and use
+2. **Privacy**: Your data, your rules
+3. **Flexibility**: Works for individuals and teams
+4. **Open Source**: Transparent and community-driven
+
+### Tone of Voice
+- Clean and professional
+- Approachable and helpful
+- Technical but accessible
+- Confident but not arrogant
+
+## Image Requirements
+
+### Placeholders needed:
+1. **Hero Image**: Large, high-quality dashboard screenshot
+2. **Feature Images**: 3-4 illustrations of key features
+3. **Tech Stack Logos**: Go, SolidJS, React Native, Docker
+4. **Testimonials**: User avatars (optional)
+
+### Image Guidelines:
+- Clean, minimalist style
+- Consistent color palette
+- No gradients (per requirements)
+- Dark mode compatible
+- Optimized for web (WebP format)
+
+## Development Phases
+
+### Phase 1: Foundation (Week 1)
+- Set up Vue + Vite + UnoCSS
+- Create basic layout structure
+- Implement navigation and footer
+- Add theme switching
+- **Create QuickInstall component with curl command**
+
+### Phase 2: Content Sections (Week 2)
+- Build hero section with install command
+- Add features grid
+- Create benefits section
+- Implement responsive design
+
+### Phase 3: Polish (Week 3)
+- Add animations and transitions
+- Optimize performance
+- SEO implementation
+- Cross-browser testing
+- **Test install script functionality**
+
+### Phase 4: Launch (Week 4)
+- Final content review
+- Domain setup
+- Analytics integration
+- Performance monitoring
+- **Deploy install script to trackeep.org/install.sh**
+
+## Success Metrics
+- **Page Load Speed**: < 2 seconds
+- **Mobile Score**: > 90 on Lighthouse
+- **Conversion Rate**: Track demo signups
+- **SEO Ranking**: Target keywords positioning
+
+## Next Steps
+1. Approve this plan and structure
+2. Set up the Vue project with dependencies
+3. Create the basic component library
+4. **Build QuickInstall component with curl command**
+5. Start building sections from top to bottom
+6. Integrate with existing design system
+7. Add real content and images
+8. **Create and deploy the install.sh script**
+9. Test and optimize for production
+
+## Install Script Implementation
+
+### install.sh Script Features
+```bash
+#!/bin/bash
+# Interactive Trackeep installation script
+
+# System requirements check
+# - Docker & Docker Compose detection
+# - OS compatibility (Linux, macOS)
+# - Minimum disk space and memory
+
+# Download latest release
+# - Fetch from GitHub releases API
+# - Verify checksums
+# - Extract to /opt/trackeep
+
+# Environment setup
+# - Generate secure JWT secret
+# - Create .env file with defaults
+# - Set up database (SQLite by default)
+
+# Service initialization
+# - Start Docker containers
+# - Wait for services to be ready
+# - Run database migrations
+# - Create admin user
+
+# Post-installation
+# - Display access URLs
+# - Show default credentials
+# - Provide next steps
+# - Offer demo data import option
+```
+
+### Interactive Features
+- **Progress indicators** with colored output
+- **User prompts** for configuration options
+- **Error handling** with helpful messages
+- **Rollback capability** if installation fails
+- **Update checking** for existing installations
+
+---
+
+This plan leverages your existing design system while creating a professional, modern landing page that showcases Trackeep's value proposition effectively.