Plan: Rewrite Landing Page for SMBs

Rewrite front-end/src/pages/index.vue to be a professional, SMB-focused landing page that clearly communicates Ai-Mee's value proposition: zero-friction AI marketing via Telegram with built-in brand quality control. The current page is generic; the rewrite aligns messaging directly with the business overview's differentiators and target personas.

Key Messaging Gaps in Current Page

  • Hero is vague ("AI-powered marketing assistant that creates, schedules, and publishes") — could be any SaaS tool
  • No mention of Telegram-first UX as the primary differentiator
  • No pain point → solution narrative for SMBs
  • Features are generic, not specific to the unique 4-agent pipeline
  • Pricing tiers don't match the actual business model (Starter/Pro/Enterprise vs Free/Pro/Agency)

Steps

Phase 1: Content & Structure

  1. Rewrite Hero — New headline: lead with the core insight ("Your marketing done — not a tool to do it with"). Subtitle addresses SMB pain directly. Two CTAs: "Get Started Free" + "See How It Works" (scroll anchor). Keep dashboard mockup image.

  2. Add "The Problem" Section — 3-column section addressing the 3 core SMB pain points from the business overview:

    • Can't afford copywriters ($50–200/post)
    • No time for dashboards and marketing software
    • Generic AI tools don't know your brand

    Uses existing card-icon-box pattern with VIcon.

  3. Rewrite "How It Works" — Simplify to 3 steps showing the actual Telegram workflow:

    • Step 1: Send a message describing what you need
    • Step 2: AI creates & reviews (4-agent pipeline, Critic enforces brand voice)
    • Step 3: Approve & publish from chat — one tap

    Keep numbered step pattern, remove the second mockup image.

  4. Rewrite Features — 6 key differentiators with sharper copy:

    • Telegram-First Interface (zero learning curve)
    • Multi-Platform Generation (one request → all channels)
    • Brand Voice Engine (4-dimension auto-enforcement)
    • Proactive Automation (daily briefings, reminders, weekly summaries)
    • Direct Publishing (8+ platform integrations)
    • Performance Analytics (track & improve over time)

  5. Add "Who It's For" Section — 3 persona cards from business overview:

    • The Busy Owner: "Just tell me what to post"
    • The Stretched Marketer: "I manage 4 platforms alone"
    • The Agency Manager: "15 clients, different voices"

    Uses VCard radius="smooth" components.

  6. Update Pricing — Align to actual business model:

    • Free: 2 channels, 30 posts/month, basic analytics
    • Pro ($49/mo, featured): Unlimited channels + posts, brand voice, Telegram approvals, advanced analytics
    • Agency (Custom): Multi-client, per-seat, team collaboration

  7. Rewrite CTA Banner — Stronger closing with specific value prop: "Join businesses saving 10+ hours per week on marketing."

Phase 2: Styling

  1. Update SCSS — Reuse existing patterns (.card-icon-box, .pricing-wrapper, .boxed-cta). Add minimal new styles for problem section and persona cards. All new sections use CSS variables + .is-dark selectors for dark mode.

  2. Ensure dark mode compatibility — All new sections must use CSS variables and .is-dark selectors following existing patterns. Use VCard instead of div.box.

Relevant Files

  • front-end/src/pages/index.vue — The single file to modify (template + scoped SCSS)
  • front-end/src/components/base/VButton.vue — Button props reference (color, size, rounded, bold, raised, outlined, to)
  • front-end/src/components/base/VCard.vue — Card component (radius, elevated)
  • front-end/src/components/base/VIcon.vue — Icon component (Iconify format: ph:robot-duotone)
  • front-end/src/components/layouts/landing/LandingLayout.vue — Landing layout wrapper (navbar, grid background, dark mode toggle)
  • front-end/public/images/ai-mee-landing.png — Dashboard mockup (reused in hero)

Verification

  1. Start Vite dev server, take full-page Playwright screenshot at http://127.0.0.1:3547/
  2. Verify all sections render correctly in both light and dark mode
  3. Verify responsive layout on mobile viewport (375px width)
  4. Verify all VButton to="/auth/signup" links are correct
  5. Run pnpm test:tsc for TypeScript validation
  6. Confirm no raw .box classes are used (only VCard)

Decisions

  • Single file change — only index.vue is modified; layout/components/images stay the same
  • No new images — reuse ai-mee-landing.png for hero
  • No new components — everything built with existing VButton, VCard, VIcon + Bulma grid
  • Copy tone — Professional, direct, outcome-focused. No jargon. Speaks to time-poor SMB owners
  • Excluded — No testimonials (beta stage), no video, no blog section. Can be added later

Further Considerations

  1. "See How It Works" CTA — Should this scroll to the How It Works section (smooth anchor), or link to a separate page? Recommend: smooth scroll anchor (#how-it-works).
  2. Telegram chat mockup — The "How It Works" section would benefit from a chat-style visual showing the Telegram conversation flow. This would require a new image asset. Recommend: skip for now, add in a follow-up.