# Officer.dev Marketing Website Plan > Written by Claude for Claude. This document covers the full marketing website — structure, copy, visuals, and demo video plans. When resuming, read this first and walk the user through the strategy before building. --- ## Table of Contents 1. [Positioning & Messaging Strategy](#1-positioning--messaging-strategy) 2. [Site Map](#2-site-map) 3. [Page-by-Page Breakdown](#3-page-by-page-breakdown) 4. [Copy Bank](#4-copy-bank) 5. [Visual Identity for Marketing](#5-visual-identity-for-marketing) 6. [Demo Videos Plan](#6-demo-videos-plan) 7. [Technical Implementation](#7-technical-implementation) 8. [Launch Considerations](#8-launch-considerations) --- ## 1. Positioning & Messaging Strategy ### The Core Idea Officer is not a developer tool. It's not an AI chatbot wrapper. It's an **operating system** — a central place where AI does your repetitive work so you can do what matters. ### Positioning Triangle ``` OFFICER / \ Easier More Powerful than than | | OpenClaw Claude Work (open source (polished but but complex) locked down) ``` **vs. OpenClaw/Open Source AI tools**: "You shouldn't need a CS degree to use AI. Officer gives you the same power — with a UI your team actually wants to use." **vs. Claude Work/Enterprise AI**: "Enterprise AI is a walled garden. Officer is open source, self-hosted, and yours. No data leaves your servers unless you say so." **vs. Building it yourself**: "You could stitch together 15 tools and spend months on glue code. Or you could install Officer in five minutes." ### Messaging Pillars | Pillar | For Individuals | For Companies | |--------|----------------|---------------| | **Automation** | "Automate your life. Have more time to live it." | "Every minute your team spends on repetitive work is a minute wasted." | | **AI-Native** | "An AI that doesn't just chat — it acts." | "Give every employee an AI-powered workspace." | | **Self-Hosted** | "Your data, your server, your rules." | "Enterprise-grade AI without enterprise-grade surveillance." | | **Open Source** | "Built in the open. Extend it however you want." | "No vendor lock-in. No surprise pricing changes." | ### Tagline Options **Primary (hero):** > **Your AI-powered operating system — everywhere.** **Alternatives to test:** > **Stop managing. Start living.** > > **The last tool you'll need.** > > **One platform. Everything automated.** **For the business/enterprise angle:** > **What if your entire company ran itself?** > > **The company intranet that actually works.** > > **Fortunes are lost to repetitive work every day. Not anymore.** ### Tone of Voice - **Confident but not arrogant** — we know what we are, we don't trash competitors - **Clear and direct** — no jargon, no buzzword soup - **Warm** — the duck mascot sets the tone. Serious product, friendly personality - **Action-oriented** — every section should make you want to try it --- ## 2. Site Map ``` officer.dev/ ├── / (Landing / Home) ├── /features │ ├── /features/ai-assistant │ ├── /features/file-management │ ├── /features/automation │ └── /features/workspaces ├── /pricing ├── /docs (external link to docs site) ├── /marketplace (coming soon / waitlist) ├── /enterprise ├── /open-source ├── /blog (future) └── /about ``` --- ## 3. Page-by-Page Breakdown ### 3.1 Landing Page (Home) The landing page is the entire pitch in one scroll. It must convert three different audiences: individual users, small teams, and enterprises. #### Section 1: Hero ``` ┌──────────────────────────────────────────────────┐ │ │ │ [Nav: Logo | Features | Pricing | Docs | GitHub]│ │ [ Star on GitHub | Login]│ │ │ │ Your AI-powered operating │ │ system — everywhere. │ │ │ │ Open source. Self-hosted. Free forever. │ │ │ │ [ Get Started — Free ] [ Watch Demo ▶ ] │ │ │ │ 🦆 (animated duck walks across) │ │ │ │ ┌──────────────────────────────────────────┐ │ │ │ │ │ │ │ (Hero product screenshot/video) │ │ │ │ Dashboard with widgets + chat open │ │ │ │ │ │ │ └──────────────────────────────────────────┘ │ │ │ │ Trusted by developers at [logos if available] │ │ │ └──────────────────────────────────────────────────┘ ``` **Copy:** - Headline: "Your AI-powered operating system — everywhere." - Subheadline: "Open source. Self-hosted. Free forever." - CTA Primary: "Get Started — Free" - CTA Secondary: "Watch Demo" - Background: landscape1.png with gradient overlay **Behavior:** - Duck walks across the hero from right to left (CSS/JS animation, lightweight — not the 3D model) - Product screenshot below the fold, slightly overlapping - Subtle parallax on scroll - GitHub stars badge updates live #### Section 2: The Problem ``` ┌──────────────────────────────────────────────────┐ │ │ │ Every day, you... │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ Rename │ │ Organize│ │ Copy │ │ │ │ 47 │ │ files │ │ data │ │ │ │ files │ │ into │ │ between│ │ │ │ │ │ folders │ │ apps │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ Format │ │ Convert │ │ Search │ │ │ │ reports│ │ formats │ │ through│ │ │ │ │ │ │ │ docs │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │ This isn't work. It's busywork. │ │ And it costs more than you think. │ │ │ │ [$X,XXX per employee per year wasted] │ │ │ └──────────────────────────────────────────────────┘ ``` **Copy:** - "Every day, you rename files. Organize folders. Copy data between apps. Format reports. Convert formats. Search through documents." - "This isn't work. It's busywork." - "And it's costing you more than you think." - Animated counter or stat: estimated cost of repetitive work per employee/year #### Section 3: The Solution (Feature Overview) ``` ┌──────────────────────────────────────────────────┐ │ │ │ Meet Officer. │ │ │ │ The platform that combines AI, file management, │ │ automation, and workspaces into one self-hosted │ │ operating system. │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ │ │ │ │ (Animated product showcase) │ │ │ │ Cycling through: Chat → Files → │ │ │ │ Automation → Dashboard │ │ │ │ │ │ │ └─────────────────────────────────────────┘ │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ 🤖 │ │ 📁 │ │ ⚡ │ │ 🏠 │ │ │ │ AI │ │Files │ │Auto- │ │Work- │ │ │ │Assist│ │ │ │mate │ │space │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ │ └──────────────────────────────────────────────────┘ ``` **Four feature cards:** 1. **AI Assistant** — "Not just chat. An AI that reads your files, runs your tasks, and gets things done." 2. **File Management** — "Your entire digital life in one place. Browse, preview, edit, convert, transcribe." 3. **Automation** — "Build workflows that run themselves. Tasks, cron jobs, pipelines — without writing code." 4. **Workspaces** — "Your desk, digitized. Combine any tool into a custom layout that fits how you work." Each card links to its feature detail page. #### Section 4: For You / For Your Team (Split Section) ``` ┌──────────────────────────────────────────────────┐ │ │ │ ┌─────────────────┐ ┌─────────────────────┐ │ │ │ │ │ │ │ │ │ FOR YOU │ │ FOR YOUR COMPANY │ │ │ │ │ │ │ │ │ │ "Automate your │ │ "What if your │ │ │ │ life. Have more │ │ entire team had an │ │ │ │ time to live │ │ AI-powered intranet │ │ │ │ it." │ │ that actually │ │ │ │ │ │ worked?" │ │ │ │ • Personal AI │ │ │ │ │ │ assistant │ │ • Role-based access │ │ │ │ • File organiz- │ │ • Shared workspaces │ │ │ │ ation on │ │ • Company-wide │ │ │ │ autopilot │ │ automation │ │ │ │ • Smart dash- │ │ • Self-hosted: │ │ │ │ board with │ │ your data stays │ │ │ │ your goals │ │ on your servers │ │ │ │ • Voice notes, │ │ • Plugin ecosystem │ │ │ │ OCR, TTS │ │ for custom needs │ │ │ │ │ │ │ │ │ │ [Try Free →] │ │ [Enterprise →] │ │ │ │ │ │ │ │ │ └─────────────────┘ └─────────────────────┘ │ │ │ └──────────────────────────────────────────────────┘ ``` #### Section 5: How It Works ``` ┌──────────────────────────────────────────────────┐ │ │ │ Up and running in 5 minutes. │ │ │ │ 1. Install │ │ ┌──────────────────────────────────┐ │ │ │ $ curl -fsSL install.officer.dev │ │ │ │ | sh │ │ │ └──────────────────────────────────┘ │ │ One command. That's it. │ │ │ │ 2. Open your browser │ │ Navigate to localhost:5000. │ │ Create your admin account. │ │ │ │ 3. Start automating │ │ Your AI assistant is ready. │ │ Your files are connected. │ │ Your first automation is one click away. │ │ │ │ [Get Started — Free] │ │ │ └──────────────────────────────────────────────────┘ ``` #### Section 6: Open Source & Community ``` ┌──────────────────────────────────────────────────┐ │ │ │ Built in the open. Extended by everyone. │ │ │ │ Officer is open source under [LICENSE]. │ │ Read every line. Modify anything. │ │ Self-host for free, forever. │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ ⭐ │ │ 🔌 │ │ 🎨 │ │ │ │ [count] │ │ Plugins │ │ Themes │ │ │ │ GitHub │ │ Build & │ │ Make it │ │ │ │ Stars │ │ share │ │ yours │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ Marketplace coming soon. │ │ Build plugins. Sell themes. Earn money. │ │ │ │ [Star on GitHub ⭐] [Join the community] │ │ │ └──────────────────────────────────────────────────┘ ``` #### Section 7: Pricing Preview ``` ┌──────────────────────────────────────────────────┐ │ │ │ Simple pricing. No surprises. │ │ │ │ ┌──────────┐ ┌───────────┐ ┌──────────┐ │ │ │ Self- │ │ Cloud │ │ Enter- │ │ │ │ Hosted │ │ │ │ prise │ │ │ │ │ │ │ │ │ │ │ │ FREE │ │ $XX/mo │ │ Custom │ │ │ │ forever │ │ per user │ │ │ │ │ │ │ │ │ │ │ │ │ │ Full │ │ Everything│ │ SLA, │ │ │ │ features │ │ hosted & │ │ support, │ │ │ │ Your │ │ managed │ │ custom │ │ │ │ servers │ │ for you │ │ features │ │ │ │ │ │ │ │ │ │ │ │ [Install]│ │ [Start] │ │ [Talk] │ │ │ └──────────┘ └───────────┘ └──────────┘ │ │ │ │ All plans include all features. │ │ The only difference is who runs the server. │ │ │ └──────────────────────────────────────────────────┘ ``` **Key messaging**: "All plans include all features. The only difference is who runs the server." This is a powerful differentiator. No feature gating. #### Section 8: CTA / Footer ``` ┌──────────────────────────────────────────────────┐ │ │ │ Ready to stop wasting time? │ │ │ │ [Get Started — Free] [Book a Demo] │ │ │ │ ───────────────────────────────────────────── │ │ │ │ officer.dev │ │ Product: Features | Pricing | Docs │ │ Community: GitHub | Discord | Blog │ │ Company: About | Enterprise | Contact │ │ │ │ © 2026 Officer.dev │ │ │ └──────────────────────────────────────────────────┘ ``` --- ### 3.2 Features Page (`/features`) Overview page with anchor-linked sections for each feature area. Each section has: - Feature title & one-line pitch - 3-4 bullet capabilities - Embedded demo video or animated screenshot - CTA to try it **Feature areas:** #### AI Assistant (`/features/ai-assistant`) - Multi-provider (Claude, OpenCode, Pi-Mono) - File-aware — reads, edits, and creates files - Task-aware — runs automation on your behalf - Voice input, image analysis, code understanding - Session persistence across devices **Demo video**: Show a conversation where the user asks "organize my downloads folder by file type" and the AI does it, showing the file browser updating in real-time. #### File Management (`/features/file-management`) - Browse, upload, download, search - Built-in viewers: text, images, PDFs, audio, video - AI-powered: OCR, text-to-speech, transcription, audio extraction - Video transcoding for any format - Archive extraction (zip, tar, 7z, rar) - Git clone, yt-dlp download integration **Demo video**: Upload a photo of a receipt → OCR extracts the text → AI categorizes the expense. All in Officer. #### Automation (`/features/automation`) - Tasks triggered by file type, schedule, or manually - Workflows chaining multiple steps - Cron jobs for recurring work - Background processes - Skills system — teach AI new capabilities **Demo video**: Show setting up a task that compresses images when they're uploaded to a specific folder. #### Workspaces (`/features/workspaces`) - Multi-panel layouts - Combine chat + files + any tool - Save and switch between workspace configurations - Create workspace templates for team **Demo video**: Building a "Content Creation" workspace with file browser on the left, AI chat in the middle, and preview on the right. --- ### 3.3 Pricing Page (`/pricing`) Three tiers, feature-complete across all. The difference is hosting and support. **Self-Hosted (Free)** - All features, unlimited users - You host, you manage - Community support (GitHub, Discord) - "Perfect for developers, homelab enthusiasts, and teams who want full control." **Cloud (Subscription — $XX/user/month)** - All features, unlimited - We host and manage everything - Automatic updates, backups, SSL - Email support - "For teams who want Officer without the DevOps." **Enterprise (Custom)** - Everything in Cloud - SLA with guaranteed uptime - Priority support with dedicated account manager - Custom feature development - SSO/SAML integration - Audit logging - On-premises deployment assistance - "For organizations that need enterprise-grade guarantees." **Below the pricing cards:** - FAQ section (Is it really free? Can I migrate between plans? What about data portability?) - "Need something custom?" → Contact form - "Building plugins?" → Marketplace waitlist signup --- ### 3.4 Enterprise Page (`/enterprise`) **Audience**: IT decision-makers, CTOs, operations managers. **Tone**: Professional, emphasizing reliability, security, and ROI. **Sections:** 1. **Hero**: "The company intranet that works for you — literally." 2. **Problem**: "Your team uses 12 different tools. None of them talk to each other. Officer replaces the glue." 3. **Security**: "Self-hosted means your data never leaves your servers. Full audit logging. Role-based access. SOC 2 compliance roadmap." 4. **ROI Calculator**: Interactive widget — input team size, estimated hours on repetitive tasks → shows annual savings 5. **Consultancy**: "Our team builds custom integrations, plugins, and workflows tailored to your operations." 6. **Case studies**: (placeholder for future customer stories) 7. **CTA**: "Book a Demo" → Calendly or contact form --- ### 3.5 Open Source Page (`/open-source`) **Audience**: Developers, contributors, plugin builders. **Sections:** 1. **Hero**: "Built in the open. Extended by everyone." 2. **Why Open Source**: Philosophy statement — transparency, community ownership, no vendor lock-in 3. **Contributing**: Quick guide to getting started, link to CONTRIBUTING.md 4. **Plugin Development**: Overview of the plugin system, link to docs 5. **Marketplace Preview**: "Coming soon — build and sell plugins, themes, and automations. Earn money from your work." 6. **GitHub Stats**: Stars, forks, contributors, recent commits 7. **CTA**: "Star on GitHub" / "Join Discord" --- ## 4. Copy Bank ### Headlines (A/B test candidates) **Automation-focused:** - "Your AI-powered operating system — everywhere." - "Stop doing. Start automating." - "The work that works itself." - "Automate everything. Miss nothing." **For individuals:** - "Your second brain. But it actually does things." - "AI that doesn't just answer — it acts." - "Automate your life. Have more time to live it." **For companies:** - "What if your team's busywork just... disappeared?" - "The company intranet that works for you — literally." - "Fortunes are lost to repetitive work every day. Meet the fix." - "Every employee deserves an AI assistant. Now they can have one." **Open source angle:** - "Open source. Self-hosted. No strings attached." - "Your data. Your server. Your AI." - "The power of enterprise AI. The freedom of open source." ### Social Proof (to collect/create) - GitHub stars count - "Used by X developers/companies" - Testimonials (collect after launch) - "Featured in [publications]" (aim for Hacker News, ProductHunt, etc.) ### Microcopy - Install CTA: "Get Started — Free" - Cloud CTA: "Start your trial" - Enterprise CTA: "Book a demo" - GitHub CTA: "Star on GitHub" - Newsletter CTA: "Get updates" - Marketplace waitlist: "Join the waitlist" --- ## 5. Visual Identity for Marketing ### Design System Adaptation The product uses a duck-themed design (teal, yellow, forest green, glass-morphism with pixel grid). The marketing site should feel like the same brand but optimized for conversion: **Colors:** - Primary: `#F4C430` (Duck Yellow) — CTAs, highlights - Secondary: `#0891B2` (Duck Teal) — links, accents - Dark: `#14532D` (Duck Dark) — text, headings - Background: Soft cream/beige (`#F5F0E8`) or white with subtle grid texture - Dark mode: Support it, matching the product's dark theme **Typography:** - Headings: Bold, system-ui stack with the same skewed/3D shadow effect as the logo (but subtler for readability) - Body: Clean sans-serif (Inter or system-ui), 18px base - Code: Monospace for install commands and API examples **The Duck:** - Hero: Subtle walking animation (lightweight 2D sprite or CSS, not the 3D model — save loading time) - Scroll companion: Small duck that appears in corners, reacts to scroll - 404 page: Lost duck illustration - Loading states: Duck waddle animation **Photography/Visuals:** - Product screenshots with the landscape backgrounds - Minimal mockups (no fake Chrome windows — just clean screenshots with rounded corners and shadow) - Feature diagrams: Simple, geometric, using brand colors **Grid Pattern:** - Carry the pixel grid texture from the product into section backgrounds - Use it subtly — don't overwhelm the content ### Section Visual Hierarchy | Section | Background | Text Color | |---------|-----------|------------| | Hero | landscape1.png with dark overlay | White | | Problem | White/cream | Dark green | | Solution | Subtle grid pattern | Dark green | | For You/Company | Split — light teal / light yellow | Dark | | How It Works | White | Dark | | Open Source | Dark (forest green) | Yellow/white | | Pricing | White/cream | Dark | | CTA | Teal gradient | White/yellow | --- ## 6. Demo Videos Plan ### Product Demo Reel (60s — for hero) A fast-paced showcase that cycles through the major features: | Time | Scene | Description | |------|-------|-------------| | 0-5s | Cold open | Tagline appears over landscape. Duck walks in. | | 5-12s | Chat | User asks AI to "summarize all PDFs in my project folder." AI responds with tool use, result appears. | | 12-20s | Files | File browser opens. User uploads files, previews images, plays audio. Quick montage. | | 20-30s | Automation | User creates a task. It runs automatically. Toast notification: "Task complete." | | 30-40s | Workspace | Multi-panel workspace assembles itself — chat + files + viewer. User drags to resize. | | 40-48s | Dashboard | Widgets dashboard: clock, weather, goals getting checked off, pomodoro timer running. | | 48-55s | Scale | "For you. For your team. For your company." — zoom out to show multiple users. | | 55-60s | CTA | Logo + "Open source. Self-hosted. Free forever." + URL | ### Feature-Specific Demos (30s each) **AI Assistant Demo:** - Show real conversation with tool use - AI reads a file, suggests changes, user approves - Emphasis on the AI *doing things*, not just chatting **File Management Demo:** - Upload → organize → preview → AI actions (OCR, transcribe) - Show the breadth of file types supported - yt-dlp download as a wow moment **Automation Demo:** - Create a task that processes files automatically - Show it triggering on file upload - End with "Set it up once. It runs forever." **Workspaces Demo:** - Start with empty screen - Build a workspace: add chat, files, viewer - Split panels, resize - "Your desk. Your way." ### Recording Guidelines - **Resolution**: 1920x1080 for landscape, 1080x1920 for portrait (social) - **Browser**: Clean browser, no bookmarks bar, no extensions visible - **Data**: Use realistic-looking sample data (not lorem ipsum) - **Cursor**: Smooth, deliberate movements. No jitter. - **Speed**: 1.5x natural speed for repetitive parts, real-time for "wow" moments - **Music**: Upbeat instrumental for playful, ambient electronic for professional --- ## 7. Technical Implementation ### Stack Recommendation The marketing site should be **separate from the main monorepo** — it's a public website with different deployment, SEO, and performance requirements. **Recommended stack:** - **Framework**: Astro (static-first, great SEO, supports React islands for interactive parts) - **Styling**: Tailwind CSS (matches the product's design system) - **Animations**: Framer Motion (for scroll-triggered animations) - **Hosting**: Vercel or Cloudflare Pages (fast global CDN) - **CMS**: Markdown files for blog posts (future) - **Analytics**: Plausible or PostHog (privacy-friendly) **Alternative**: If the team prefers to keep everything in the monorepo's React ecosystem, a Next.js or Vite app could work. But Astro's static output and built-in SEO features make it better for a marketing site. ### Project Location Create at `/home/pastilhas/projects/officer.dev/website/` — separate from the monorepo but within the project directory. ### SEO Strategy **Target keywords:** - "self-hosted AI platform" - "open source AI assistant" - "AI-powered intranet" - "personal AI operating system" - "self-hosted automation" - "open source alternative to [Claude Work/Notion AI/etc.]" - "AI file management" **Technical SEO:** - Static HTML pages (Astro) - Proper meta tags, OpenGraph images per page - JSON-LD structured data - Sitemap.xml - Fast Core Web Vitals (landscape images need lazy loading + WebP conversion) ### Performance Considerations - landscape1.png is 16MB — must be converted to WebP/AVIF and served responsive - The 3D duck model (40MB total) should NOT be on the marketing site — use a lightweight 2D animation instead - Use the rubber-duck.png (1.6MB) at reduced size for the duck character - Lazy load everything below the fold --- ## 8. Launch Considerations ### Pre-Launch Checklist - [ ] Marketing site live with all sections - [ ] Product demo video recorded and embedded - [ ] GitHub repo public with README, CONTRIBUTING.md, LICENSE - [ ] Installation script (`install.officer.dev`) working - [ ] Documentation site (even minimal) live - [ ] Discord/community channel created - [ ] Social accounts created (Twitter/X, LinkedIn) - [ ] ProductHunt launch page drafted - [ ] Hacker News "Show HN" post drafted - [ ] Email waitlist for cloud/marketplace ### Launch Channels | Channel | Content | Timing | |---------|---------|--------| | Hacker News | "Show HN: Officer — open-source, AI-powered OS for automating your life" | Day 1 | | ProductHunt | Full launch with screenshots, video, maker story | Day 1 | | Reddit | r/selfhosted, r/homelab, r/opensource, r/artificial | Day 1 | | Twitter/X | Thread: "I built an OS that automates my life. It's open source." | Day 1 | | LinkedIn | Professional angle: "Every company wastes $X on repetitive work" | Day 2 | | Dev.to / Hashnode | Technical deep-dive blog post | Week 1 | | YouTube | Full demo video (5min) | Week 1 | ### Post-Launch - Monitor GitHub issues and community channels - Publish weekly blog posts (features, tutorials, philosophy) - Start marketplace waitlist campaign - Collect testimonials from early adopters - Begin enterprise outreach --- ## Appendix: Competitor Landscape | Product | What it is | Officer's advantage | |---------|-----------|-------------------| | **Notion** | Wiki + project management | Officer has AI that acts, not just organizes. Self-hosted. | | **Obsidian** | Markdown knowledge base | Officer is broader — files, AI, automation, not just notes. | | **Nextcloud** | Self-hosted file sync | Officer has native AI, automation, and workspaces. | | **n8n** | Workflow automation | Officer combines automation with AI + file management + UI. | | **Claude Work** | Enterprise AI chat | Officer is open source, self-hosted, and more extensible. | | **OpenClaw** | Open source AI tools | Officer is friendlier, more polished, broader scope. | | **Home Assistant** | Home automation | Different domain, but similar self-hosted philosophy. Potential integration. | Officer's unique position: **No one else combines AI + files + automation + workspaces in a single self-hosted platform.** That's the moat.