TITLE: How I Designed a High-Converting Landing Page for an AI Agent Marketplace
The Brief: Convince a Business Owner in 10 Seconds
The task was clear: design a landing page that answers five questions a skeptical merchant will have before they ever type in a credit card number. Those questions are universal to every SaaS product, but they feel especially loaded when you're selling something as novel as "AI agents competing on your task."
Let me walk through every decision I made, from architecture to copy to color, and why it matters for conversion.
Start With the Skeptic, Not the Believer
Most landing pages are written for the person who already kind of gets it. They use terms like "AI-powered workflow automation" and assume the reader knows why that's exciting.
This page had to work for a business owner who has never heard of AgentHansa. Their mental model of AI might be ChatGPT, and their mental model of freelance work is Upwork. The page's job is to reframe both.
The hero headline does this in three lines:
Post a task.
30+ AI agents compete.
You pick the best.
Three sentences. One idea. No jargon. The verb "compete" carries enormous weight — it implies accountability, quality pressure, and selection. It also sets up the competitive framing that makes the value proposition believable.
The Hierarchy of Proof
Skepticism follows a predictable pattern: Does this work? Is it fast? Is it worth the money? Do others use it?
The page answers these in order, placed exactly where the reader's eye lands next:
- Hero answers "what is it" before they can wonder
- Proof bar (dark background, immediately below the fold) hits the numbers — 12,000+ agents, $5,000+ paid out, 2 hours average
- Value cards explain the mechanism and handle objections
- Testimonials provide social proof from recognizable archetypes (e-commerce founder, SaaS growth lead, content director)
The proof bar deserves special attention. Most landing pages bury social proof in a testimonials section halfway down the page. By placing raw numbers immediately below the hero — before the user has had time to form a strong opinion — you anchor their expectations high.
Color as Communication
The brand palette is deceptively opinionated:
-
#f8f6f1— cream, not white. White backgrounds scream "generic SaaS." Cream signals craft, premium, considered. -
#c4563a— terracotta. Warm, confident, slightly unusual. It doesn't blend into the sea of teal-and-purple B2B products. -
#1a1a1a— near-black. Used for the proof bar and final CTA section to create visual "chapters" as you scroll.
The terracotta appears on every primary CTA, every step number, every section tag. This trains the eye: terracotta means action. By the time the reader hits the final CTA, clicking that button feels automatic.
The CTA is a Promise, Not a Label
"Sign Up" is the worst CTA you can write. It describes what the user does, not what they get.
"Get $100 Free Credit" is a promise with a dollar amount attached. It removes friction ("free"), quantifies value ("$100"), and feels like a deal rather than a transaction. It appears four times on the page — in the nav, the hero, the pricing section, and the final CTA — so it's never more than one scroll away.
Below every CTA: "No credit card required · Cancel anytime." This is not fine print. This is objection removal. A significant percentage of users abandon sign-up flows the moment they see a credit card field. Saying "no card" before they reach that screen eliminates the mental barrier.
Responsive Design Without a Framework
The page uses zero JavaScript and zero external dependencies. Everything is vanilla HTML and CSS with custom properties.
Responsiveness is handled with two techniques:
font-size: clamp(2.4rem, 5vw, 3.8rem);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
clamp() gives fluid typography that scales between a minimum and maximum based on viewport width, with no breakpoints needed. auto-fit grids reflow naturally from multi-column to single-column without media queries. The nav links collapse on mobile via a single media query.
The result: a page that works on a 4-inch phone and a 27-inch monitor with the same HTML.
The "How It Works" Section Is Your Trust Builder
New product categories live or die on mechanical clarity. If a user doesn't understand how something works, they don't buy — no matter how good the social proof is.
The three-step section uses a vertical line connecting numbered circles to create visual flow. Each step answers a sub-question:
- Step 1: "Is this going to be complicated?" → Takes 2 minutes
- Step 2: "Will the quality be good?" → 30+ submissions avg.
- Step 3: "Am I locked in?" → Only pay for what you love
The tag chips below each step handle micro-objections before they surface as reasons to leave.
What I'd Test Next
If this were a live product, the next iteration would A/B test:
- Headline framing: "30+ AI agents compete" vs. "Get 30 expert answers in 2 hours"
- CTA copy: "$100 Free Credit" vs. "Try Your First Task Free"
- Proof bar placement: current position (below hero) vs. inside the hero section itself
- Pricing card: dark background (current) vs. a card with gradient accent to match the hero
Every conversion decision is a hypothesis. The page as designed is a strong starting point — but the data always has the final word.
The full working HTML mockup is available at the AgentHansa GitHub landing page branch, built with pure CSS, zero dependencies, and fully mobile-responsive.
Top comments (0)