Website
The build sheet for the Agentfy.ai marketing site: every page and section, what it says and what it shows. It turns Mission & market, Audience, Messaging, Story & creative and Brand kit into an actual site.
The whole site has one job: get a merchant to plug in, either by starting free or booking a demo. Every page bends toward that single action.
Principles
- One idea, everywhere: the future already works for you, and you just plug in Agentfy.ai. See Messaging for the exact words.
- The human is the hero, not the AI. Sunlit and relaxed, with the agents working in the background.
- One primary call to action, repeated. "Plug in the future" leads to start free or connect your store. Keep competing buttons off the page.
- Show the outcome first (a store running itself), then back it with features.
- Stay on-brand: the warm, optimistic look from the Brand kit, nothing dark or corporate.
- Trilingual, with the same structure in EN, RU and UK.
Site map
| Page | Route | Purpose | Primary CTA |
|---|---|---|---|
| Home / Landing | / | The pitch end to end; convert | Start free |
| How it works | /how | The three-step plug-in story and the ephemeral unlock | Start free |
| Features | /features | Capabilities in depth (brain, hands, knowledge, channels) | Start free |
| Integrations | /integrations | OpenCart first, then other CMS; "connect your store" | Connect store |
| Use cases | /use-cases | Support, sales, catalog and admin scenarios | Start free |
| Pricing | /pricing | Usage-based plans; "pay for work, not presence" | Start free |
| For merchants / agencies | /merchants | Per-audience landing variants | Start free |
| Docs | → docs site | Hand-off to product docs | — |
| Blog | /blog | SEO and launches (phase 2) | Subscribe |
| Legal | /privacy, /terms | Compliance | — |
| Get started | /start | The conversion endpoint | — |
| OpenCart integration | /opencart-integration | The OpenCart landing: one day in a store with an agent, told in five scroll scenes | Connect store |
Home page, section by section
The home page tells the whole story so a visitor can convert without leaving it. Order matters.
1. Header / nav. Logo (cyan-to-teal gradient), with links to How it works, Features, Integrations, Pricing and Docs. On the right: a language switch (EN/RU/UK) and a Start free button. Sticky, light, minimal.
2. Hero. Headline: Plug in the future. Subhead: the one-line positioning from Messaging. Visual: the human relaxed (coffee, beach, park) while the agent team runs the store behind them, with the plug-in glow from the Story scenes. CTA: Start free, with a quieter "See how it works".
3. Social proof. A thin strip: "Trusted by N stores", a few logos, or a metric like "X conversations handled". Use a placeholder until we have real numbers, then swap it in honestly.
4. The problem. Millions of stores, almost none with a genuinely useful agent. Custom agents are expensive, and an always-on bot per store doesn't scale (the "pay for presence, not work" trap, from the problem). Keep the tone empathetic, not fearful.
5. The unlock. A store's agent is a row in the database; it runs only on traffic, so we scale by traffic rather than by store count. This is what makes an agent for every store possible (from why our architecture is the unlock). A simple diagram helps: idle store, traffic arrives, agent spins up, does the work, spins down.
6. How it works. Three steps and the click:
- Connect your store: attach OpenCart (products, orders) over MCP. This is the plug-in moment.
- Add knowledge: ingest the catalog and policies with LightRAG, so the agent learns your store.
- It runs itself: support, sales and admin, 24/7, on your storefront plus Telegram and Slack.
Keep one satisfying "connect" moment, per the brand's signature beat.
7. Meet your agent team. The cast as friendly digital creatures, not robots: Support, Sales, Research, Logistics, Finance. Pull them straight from Audience. Each gets a name, a one-line job, and an avatar, to reinforce the idea of a small team working for the human.
8. Features. Six cards, each leading with the outcome and then the mechanism (the future Features page covers the depth):
| Card | Outcome | Backed by |
|---|---|---|
| Answers 24/7 | Customers always get a reply | Channels + chat |
| Knows your catalog | Right product, right answer | Knowledge / LightRAG |
| Talks to your store | Checks orders, updates products | MCP + connectors |
| Does real work | Scrapes, generates, automates | Worker |
| Lives on your storefront | Embeddable widget + Telegram/Slack | Channels |
| Fair pricing | Pay for work, not presence | Usage-based billing |
9. Use cases. Tabs or cards for Support, Sales and upsell, Catalog questions, Order status and checkout, and Admin automation. Each gets a one-line "before and after", from chaos to calm. Links to the Use cases page.
10. Integrations. OpenCart first, big and clear, then WooCommerce, PrestaShop, Magento and Shopify marked as coming. CTA: "Connect your store". Be honest about what's live versus on the roadmap.
11. Pricing teaser. A per-store subscription plus metered tokens and runtime. Headline: you pay for work, not for an always-on bot. Links to the full Pricing page.
12. Testimonials. A real quote when we have one. Until then, the merchant's own line works: "I didn't hire a team. I plugged in Agentfy.ai and got my life back" (from Audience).
13. FAQ. Seed questions: Which platforms? Do I need to code? How is it priced? Is my data safe? What can the agent actually do? Can it act on my store, or just answer?
14. Final CTA. Full width, warm gradient. Plug in the future, leading to Start free. One button.
15. Footer. Nav, language switch, docs, legal (privacy and terms), contact, social. Logo and tagline.
Other pages, in brief
- How it works expands sections 5 and 6: the ephemeral model, the three steps, a light architecture diagram, and the channels. Audience: the curious, semi-technical merchant.
- Features gives one section per capability (Brain, Hands, Knowledge, Channels, Worker, Billing), each leading with the outcome and a short "how", cross-linked to the product docs.
- Integrations leads with OpenCart, shows install steps at a glance, and offers a "request another platform" form.
- Use cases runs the full scenarios per persona and job, with before and after.
- Pricing has the plans table, what's metered, a billing FAQ, and a calculator later.
- Merchants / agencies frames the same single idea for a specific audience.
Conversion and CTAs
- The primary CTA everywhere is "Start free", or "Connect your store" in integration contexts.
- The secondary, kept quiet, is "See how it works" or "Book a demo".
- Repeat the primary CTA after the hero, after how-it-works, and as the final section.
- The sign-up endpoint is
/start, with as little friction as possible (a store URL and an email is the dream).
Brand and visual rules
From the Brand kit and Story & creative:
- Palette: brand cyan
#5FC8EEto teal#4FA3D1; warm gold#EBCDA3and coral#E5A26Bfor sun accents; light background#F6F8F6. - Imagery: people relaxed and sunlit, agents as cheerful helpers mid-task, and the plug-in glow.
- Never dark or dystopian, cold or corporate, fearful, cluttered, or about robots replacing people.
- Use the downloadable Tailwind preset and CSS tokens so the site matches the kit exactly.
SEO and meta
- Title and positioning around "AI agent for OpenCart / e-commerce".
- A per-page title and meta description, with an on-brand OG image (a hero scene plus the tagline).
- Trilingual
hreflang(en/ru/uk), a sitemap, and a fast, mostly static build for good Core Web Vitals.
Tech notes
- Built on the CleanSlice/Nuxt marketing-site setup (SSR and prerender on for marketing, per the Nuxt layer notes), with Tailwind from the brand preset and i18n across en/ru/uk.
- Mostly static and prerendered; the only dynamic part is the sign-up hand-off.
Open questions
- The final domain and sign-up flow (
/start): what's the minimum needed to plug in? - Real social proof: metrics and a first testimonial.
- A concrete pricing model (subscription tiers and metering units).
- Which integrations are live at launch versus labelled "coming".
- The demo path: self-serve free, book a demo, or both.
- The hero asset: which Story scene leads.
This page is a living draft that we refine together. Every section should still answer the one idea: plug in, and the future already works for you.