Skip to content

[WIP] Update marketing site to include OpenClaw Integration section - #1

Closed
SrsBlack with Copilot wants to merge 1 commit into
mainfrom
copilot/add-openclaw-integration-section
Closed

[WIP] Update marketing site to include OpenClaw Integration section#1
SrsBlack with Copilot wants to merge 1 commit into
mainfrom
copilot/add-openclaw-integration-section

Conversation

Copilot AI commented Mar 15, 2026

Copy link
Copy Markdown
  • Add OpenClaw Integrations section (intro + 3 feature cards) to index.html
  • Add OpenClaw packages subsection (3 pricing cards) within the section
  • Add advanced technical details collapsible block
  • Add OpenClaw CTA block inside the section
  • Update navigation to include OpenClaw link (desktop + mobile + footer)
  • Add OpenClaw to the tech stack grid
  • Update stack description with plain-English stack story
  • Update "What tools do you use?" FAQ answer to include OpenClaw
  • Add 2 OpenClaw-specific FAQ entries
  • Add OpenClaw success story card to the stories section
  • Add CSS for openclaw-features grid, pkg-header, tech-details, openclaw-cta, section-subtitle
Original prompt

Update the marketing site in SrsBlack/a3lab-site to add a new sales-ready OpenClaw Integration offering section and align the site copy with A3 Lab's expanded service stack.

Context

A3 Lab currently positions itself as an AI automation agency using Perplexity, Claude, Zapier, Make, Notion, CRMs, and related tools. The site is a one-page static site driven primarily by index.html and style.css.

The business now wants to add a dedicated OpenClaw Integration offer aimed at:

  • local service businesses
  • agencies / online businesses
  • power users who want advanced agent setups

Important positioning constraints

Do not contradict these facts about OpenClaw:

  • OpenClaw is a self-hosted personal AI assistant / agent runtime that runs on the user's own machine or server.
  • It connects messaging channels like WhatsApp, Telegram, Slack, Discord, etc. into one central AI brain.
  • It can access files, run scripts, control a browser, and act on the user's behalf.
  • It supports persistent memory / context across sessions.
  • It supports scheduled jobs / cron-style routines.
  • It can integrate with model providers through OpenRouter and similar services.
  • Key value props: privacy/control from running on the customer's infrastructure, proactive action-taking, and unifying multiple channels into one agent.

Goals

Add a polished OpenClaw offering that feels native to the existing website design, is written in simple non-technical sales language, and fits the current visual system.

Required implementation work

1) Add a new homepage section for OpenClaw Integrations

Add a new section in index.html (recommended placement: after the current Services section or before the Stack section) that includes:

  • section label
  • headline
  • short intro paragraph
  • 3 feature / benefit cards
  • short CTA block/button linking to #contact

Use sales-ready copy based on this positioning:

  • AI assistant that lives in WhatsApp / Slack / Telegram
  • runs on the customer's own machine or server
  • connects to existing tools
  • actually does things: emails, calendar, browser tasks, file actions, reports
  • A3 Lab makes it usable for non-technical people

Suggested copy direction (adapt as needed to fit the site):

  • headline idea: "OpenClaw Integrations"
  • subheadline/intro should explain in plain English that OpenClaw is a private AI assistant that lives in chat apps and can actually perform actions.

The 3 feature cards should communicate ideas like:

  1. Lives in your chat apps
  2. Actually does things for you
  3. Private by default / runs on your infrastructure

2) Add 3 productized OpenClaw packages to the page

Add a package block or package cards section for OpenClaw-specific offers. This can be:

  • a dedicated new section, or
  • a strong subsection within the new OpenClaw section, or
  • an adaptation of the existing pricing area if done cleanly.

Include these 3 package concepts in clear, sellable language:

Package 1: Chat-Based Personal AI Assistant

  • For solo operators / owners / power users
  • Indicative range: $1,500–2,000 one-time
  • Core idea: personal chat-based assistant in WhatsApp/Telegram/etc.

Package 2: Multi-Channel Team Agent

  • For teams / agencies
  • Indicative range: $3,000–5,000 one-time
  • Core idea: one AI brain across Slack/Telegram/Discord/etc. for team use

Package 3: Browser & Back-Office Robot

  • For ops-heavy users / advanced buyers
  • One-time build in pro range and/or tied to ongoing support
  • Ongoing retainer range: $750–2,000/month
  • Core idea: browser actions, file handling, scheduled routines, back-office automation

Each package should include concise website-friendly content:

  • name
  • short pitch
  • best for
  • 4–7 included items
  • 3–5 example use cases
  • indicative investment

Do not make the page feel bloated; adapt formatting so it remains visually clean and readable.

3) Update the stack story to include OpenClaw

In the existing stack area and/or nearby supporting copy, update the narrative so the stack is explained in plain English:

  • Perplexity = research and information brain
  • Claude = reasoning, writing, coding brain
  • OpenClaw = hands and legs that click, type, send, organize, and take action across apps/browser
  • Zapier/Make/etc. = plumbing / connectors

Implementation suggestions:

  • Add OpenClaw as a visual item in the existing stack grid
  • Add or revise supporting paragraph copy so the stack story is easy for non-technical buyers to understand

4) Add one technical-buyer expandable or supporting paragraph if appropriate

If it fits the current page architecture cleanly, add a short advanced paragraph (or a compact visual callout) mentioning:

  • self-hosting
  • Docker / VPS
  • OpenRouter
  • multi-channel routing
  • memory
  • cron jobs / scheduled routines

Keep this confident and production-minded, not hypey.
If an accordion/FAQ implementation is easier and more consistent with the page, it can be surfaced there instead.

5) Add at least one OpenClaw-spe...

This pull request was created from Copilot chat.


💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

@netlify

netlify Bot commented Mar 15, 2026

Copy link
Copy Markdown

Deploy Preview for keen-choux-c92a55 ready!

Name Link
🔨 Latest commit 5419019
🔍 Latest deploy log https://app.netlify.com/projects/keen-choux-c92a55/deploys/69b64cdb0b292700088e4724
😎 Deploy Preview https://deploy-preview-1--keen-choux-c92a55.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review any files in this pull request.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

@SrsBlack SrsBlack closed this Mar 15, 2026
Copilot AI requested a review from SrsBlack March 15, 2026 06:21
Copilot stopped work on behalf of SrsBlack due to an error March 15, 2026 06:21
SrsBlack pushed a commit that referenced this pull request Apr 29, 2026
…ous case studies

PRODUCT.md principle #1 ("Show, don't claim") was being violated by two
high-visibility homepage components. Both now repaid.

1. Stats bar removed.
   The "3.7× ROI / 15 hrs / 24-72h" trio was fabricated/rounded with no
   verifiable provenance. A skeptical operator reads three round numbers
   from a no-name agency and discounts the whole site instantly. The
   component itself was also DESIGN.md anti-reference (hero-metric
   template + glassmorphism backdrop-blur).

   Replaced with a .stack-strip listing the actual tools: Perplexity,
   Claude, OpenAI, Zapier, n8n, OpenClaw, Notion. Operator-grade,
   true today, brand-aligned. Tinted-neutral surface, top+bottom
   divider, label typography. No glassmorphism, no fake numbers.
   Inner pages (services/*, for-*) still use .stats-bar — Task 5
   polish will revisit them.

2. "Automation Stories" reframed as "Patterns We Build".
   The three anonymous "Marketing Agency / E-commerce Brand / Solo
   Consultant" cards with claims like "Outreach volume tripled" and
   "Response rates up 40%" failed the same proof bar. PRODUCT.md
   anti-reference: "trusted by industry leaders without naming any."

   Restructured the same content as named workflow patterns the
   studio ships repeatedly — Sales / Support / Reporting. Same
   technical specificity (Perplexity + Claude + Zapier stacks),
   same "Trigger / Pipeline / What changes" structure, but no
   manufactured numbers and no implied client attribution. When
   real client wins are publishable, swap them in.

Net brand state:
- Hero, stats, stories, pricing, FAQ now all hold "show don't claim".
- Stack name-drops are verifiable and operator-grade.
- Pattern descriptions stay technically specific (the part that
  actually demonstrates competence).

Deferred to next pass: hero CTA hierarchy, subheadline copy tightening,
pricing-card CTA cleanup. All P2; user input would help on copy.
SrsBlack pushed a commit that referenced this pull request Apr 29, 2026
…toggle

Inner-page polish pass per Task 5. Same shape applied to all 5 service
pages: openclaw-setup, lead-enrichment, ai-content-engines,
customer-support-bots, website-automation.

1. Stats bar refactored from glassmorphism to flat surface-2 + full
   border. The component now matches DESIGN.md §5 Cards spec instead
   of breaching the no-glassmorphism rule (§6). Grid now auto-fits 2-4
   cards properly (was hardcoded to 3-cols and squashing the 4th).
   Stat values use --color-text instead of --color-primary so they
   read as facts not action; the 10% color-rarity rule is preserved.

   Removed: linear-gradient backdrop, 18px backdrop-filter blur, 30px
   drop shadow, inset highlight, .stat:nth-child(even) cyan/amber
   alternation, light-theme glassmorphism override, .hero-service +
   .stats-bar override block. All decorative noise the brand spec
   rejects.

2. Stats bar content per page: kept verifiable facts (delivery times,
   tool names, integration lists, "your CRM/CMS/helpdesk"), replaced
   the unverifiable claims that failed PRODUCT.md principle #1
   ("Show, don't claim"):
     lead-enrichment: dropped "10-15 hrs saved" + "100% personalized
       outreach" (meaningless number) + "24/7 always running"
     ai-content-engines: dropped "8+ hrs saved" + "3x more content
       shipped" + "24/7 always publishing"
     customer-support-bots: dropped "65% tickets auto-handled" +
       "<2h first response time" + "48h -> 2h improvement" (the
       implied case study without provenance)
     website-automation: dropped "5+ hrs saved" + "2-5x faster lead
       response"
     openclaw-setup: kept all four cards, content was already
       verifiable

   Each replacement is a real fact: tool names, integration targets,
   delivery shapes, "human handoff built in." Verifiable today, holds
   the operator-grade register.

3. Theme toggle a11y fix from commit 3b29bd1 propagated to all 5
   service pages. updateIcon() consolidated into syncToggleState()
   which sets aria-label, aria-pressed, and icon together. Static
   aria-pressed="true" added to button as default before JS runs.
   Previously each inner page shipped the broken pre-fix block.

Net: shared CSS + content fixes across 5 pages. Industry pages
(for-agencies, for-ecommerce, for-consultants) and automation-box
ship in the next commit.
SrsBlack pushed a commit that referenced this pull request Apr 29, 2026
Second half of the Task 5 inner-page pass. Same shape as commit
35724ac on the service pages, applied to the remaining 4 pages.

1. Stats bar content rebuilt to verifiable facts on all 3 industry
   pages (for-agencies, for-ecommerce, for-consultants). Each page
   now leads with delivery shape (2-3 or 2-4 days), names actual
   tools (Perplexity, Claude, Shopify, Klaviyo, Zapier, Make, Notion,
   Slack), names integration targets, and surfaces a real product
   characteristic ("human handoff built in", "documented end to end").
   Dropped: repeated 65% / 3x / 5x / 50% / 8+ hrs / 10-20 hrs /
   15-25% claims that all failed PRODUCT.md principle #1.

2. automation-box.html — emoji feature icons replaced.
   The 4 cartoon emoji on the marquee feature row (📦🔒⚡🧠) read
   as the strongest "AI agency template" signal on the entire site,
   directly conflicting with the operator-grade register. Replaced
   with inline SVGs using --color-primary stroke at 1.5 weight,
   matching every other icon on the site. .autobox-pitch-icon CSS
   adapted from font-size sizing to flex-center SVG container.

3. Theme toggle a11y fix propagated to all 4 remaining pages
   (for-agencies, for-ecommerce, for-consultants, automation-box).
   syncToggleState() consolidates aria-label + aria-pressed + icon
   on init and click. Same diff as the homepage commit 3b29bd1.

4. Pricing tier-label emoji on index.html (⭐ Most Popular,
   🔄 Ongoing) dropped. Text alone holds in the operator register;
   the emoji read as marketing-page noise.

Inner-page polish: complete. The site now holds "show don't claim"
across every public page. When real client wins are publishable,
swap them in to either the homepage Patterns section or per-page
case study blocks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants