Conversion Funnel

ArgoBox has zero paid infrastructure costs worth bragging about but had zero conversion infrastructure to go with it. Every CTA said "explore" — nothing said "here's what I can do for you." The conversion funnel fixes that with a four-stage pipeline and three audience lanes.

Funnel Architecture

Homepage hooks → /services converts → /cost proves → /community retains

Four stages, each with a specific job:

Stage	Page	Job	Metric
Hook	`/` (homepage)	Self-select into an audience lane	Click-through to /services or /community
Convert	`/services`	Show what I can do for each audience	Click-through to /contact or /cost
Prove	`/cost`	Back claims with real numbers	Time on page, scroll depth
Retain	`/community`	Keep non-buyers connected	Discord joins, GitHub follows

Three Audience Lanes

Every page in the funnel serves three audiences equally. No audience is an afterthought.

Lane	Audience	Color	Accent	Entry
Build	Businesses & startups	Cyan	`#06b6d4`	`/services#build`
Hire	Employers	Purple	`#8b5cf6`	`/services#hire`
Learn	Community & homelabbers	Green	`#22c55e`	`/community`

The colors are consistent everywhere — homepage funnel cards, services lanes, about page cards, and cost page CTA cards all use the same cyan/purple/green scheme.

Homepage Hook

File: src/pages/index.astro (closing CTA section)

The homepage closes with "What brings you here?" — three glass cards that funnel visitors into the right lane:

Card	Text	Link	Icon Color
Need infrastructure?	"I build production platforms that cost almost nothing."	`/services`	Cyan
Want to learn?	"Discord, open source, and build-in-public engineering."	`/community`	Green
Looking to hire?	"This platform is my resume."	`/services#hire`	Purple

Below the cards: "$432/yr — See How" → /cost as a secondary CTA.

The cards use a 3-column CSS grid (.funnel-cards) that collapses to single-column at 640px. Each card has a colored icon background via CSS nth-child selectors — no inline styles needed for the accent colors.

What It Replaced

The previous closing CTA was "Ready to explore?" with two buttons: "Explore the Lab" → /homelab and "Try the Playground" → /playground. These were discovery-oriented, not conversion-oriented. The new version still allows exploration (via secondary links) but leads with audience self-selection.

Services Page

Route: /services File: src/pages/services.astro (812 lines) Rendering: Static (SSG) Full doc: Services Page

The keystone conversion page. Translates the platform's technical showcase into "here's what I can do for you" for each audience.

Structure

Hero — "I build production infrastructure that costs almost nothing."
- Animated stat counters: $432/yr, 13 systems, 80+ APIs
- Counter animation: data-count-to + IntersectionObserver + cubic ease-out
- prefers-reduced-motion snaps to final value
Service Lanes — Three full-width stacked sections
- Each has: numbered header, tagline, description, offerings list, proof badge
- Proof badges link to live evidence on the platform itself:
  - Build: "$432/year for a $40K platform" → /cost
  - Hire: "27 modules built solo" → /architecture
  - Learn: "12 labs free and live" → /playground
- Anchor IDs: #build, #hire, #learn for direct linking
Why This Is Different — Three differentiator cards
- "The Proof Is Live" → /architecture
- "Cost As Architecture" → /cost
- "Build In Public" → /blog
CTA — "Get In Touch" → /contact | "Not ready? Join the community" → /community

Cost Page (Proof Stage)

Route: /cost Full doc: Cost Analysis Page

Backs every claim with real numbers. The $40K-for-$432 comparison is the primary proof point. This page was built before the funnel but now has updated CTAs:

Before	After
"Let's Talk" → /contact	"View Services" → /services
Links to /homelab, /architecture, /about	Links to /community, /homelab, /contact

The cost page's CTA section now flows naturally into the services page rather than jumping straight to contact.

Community Page (Retention Stage)

Route: /community File: src/pages/community.astro (762 lines)

Note: src/pages/community.astro does not currently exist. This page needs to be created.

Rendering: Static (SSG) Full doc: Community Page

The soft landing for visitors who aren't ready to hire or buy but want to stay connected.

Structure

Hero — "Where we hang out." with "OPEN CHANNEL" pulse badge
Community Spaces — Discord (primary, emphasized card), GitHub, Blog/Journal
What We Talk About — Topic pills: homelab, infra, Gentoo, AI/RAG, DevOps, networking
Community Pillars — Build In Public, No Gatekeeping, Real Engineering
From The Lab — Three most recent blog posts via getCollection('posts')
CTA — Discord invite (primary) + /services, /start, /homelab (secondary)

Discord invite URL is currently a placeholder # until the server is created.

Cross-Site CTAs

The funnel doesn't just live on its own pages — it's woven into 6 locations across the site:

Header Navigation

Two items added to the "More" dropdown (before "Getting Started"):

{ name: 'Services', url: '/services', icon: 'fa-solid fa-briefcase', description: 'Consulting, hiring & workshops' },
{ name: 'Community', url: '/community', icon: 'fa-solid fa-users', description: 'Discord, GitHub & build in public' },

Footer

Explore column: Services + Community added (replaced Journal)
Meta-links bar: Services + Community added between About and Contact

About Page

"Work With Me" section added before the closing </main> tag. Three glass cards in a responsive grid:

Card	Icon Color	Link
Services	Cyan	`/services`
Community	Green	`/community`
Cost Analysis	Amber	`/cost`

CSS: .work-with-me-section, .work-cards, .work-card with 3-col grid collapsing to 1-col on mobile.

Homelab Page

Services nudge card added before </main>:

"Want this for your company?"
"Everything you see here — the multi-site network, the build pipeline, the monitoring — I can build it for you."
CTA: "View Services" → /services

CSS: .services-nudge, .nudge-card, .nudge-cta with prefers-reduced-motion support.

Cost Page

CTA section updated (see above) to flow into /services instead of /contact.

Link Map

Every cross-link in the funnel:

Homepage
├── "Need infrastructure?" → /services
├── "Want to learn?" → /community
├── "Looking to hire?" → /services#hire
└── "$432/yr — See How" → /cost

/services
├── Proof: "$432/year" → /cost
├── Proof: "27 modules" → /architecture
├── Proof: "12 labs" → /playground
├── "The Proof Is Live" → /architecture
├── "Cost As Architecture" → /cost
├── "Build In Public" → /blog
├── "Get In Touch" → /contact
└── "Join the community" → /community

/cost
├── "View Services" → /services
├── "Join Community" → /community
├── "Explore The Lab" → /homelab
└── "Get In Touch" → /contact

/community
├── Discord → # (placeholder)
├── GitHub → # (placeholder)
├── Blog → /blog
├── "View Services" → /services
├── "Get Started" → /start
└── "The Homelab" → /homelab

/about
├── Services card → /services
├── Community card → /community
└── Cost Analysis card → /cost

/homelab
└── "View Services" → /services

Header (More dropdown)
├── Services → /services
└── Community → /community

Footer
├── Explore: Services → /services
├── Explore: Community → /community
├── Meta: Services → /services
└── Meta: Community → /community

Technical Patterns

All funnel pages use the same technical stack:

Pattern	Implementation
Layout	`BaseLayout` + `Starfield` + `Nebula`
Styles	`<style is:global>` (required for JS-rendered content + View Transitions)
Events	`astro:page-load` (never `DOMContentLoaded`)
Scroll reveal	`.reveal` class + IntersectionObserver adds `.visible`
Counters	`data-count-to` + IntersectionObserver + cubic ease-out
Motion	`prefers-reduced-motion` respected — counters snap, animations skip
Rendering	SSG (prerendered, no server logic, CDN-cached)
Data	Frontmatter objects (no external APIs, no runtime fetching)
Responsive	CSS grid, single-column collapse at 640-768px

Anchor Link Pattern

Services lanes use id attributes (#build, #hire, #learn) for direct linking from other pages. This works with View Transitions because astro:page-load re-binds scroll behavior after client-side navigation.

Counter Animation

// IntersectionObserver triggers on scroll
// Cubic ease-out for smooth deceleration
const progress = 1 - Math.pow(1 - elapsed / duration, 3);
const current = Math.floor(progress * target);
element.textContent = prefix + current.toLocaleString() + suffix;

Attributes: data-count-to="432", data-count-prefix="$", data-count-suffix="/yr"

Voice & Tone

The funnel pages follow ArgoBox voice rules strictly:

First person ("I build", "my resume") — never corporate "we"
No AI-speak ("utilize", "leverage", "implement a solution")
No green checkmarks or numbered lesson lists
Proof badges link to live evidence, not marketing claims
Services page plants the flag — real but aspirational (consulting isn't live yet, but the platform proves the capability)
Community page is authentic — "where we hang out", not "join our vibrant community"

Conversion Funnel

Funnel Architecture

Three Audience Lanes

Homepage Hook

What It Replaced

Services Page

Structure

Cost Page (Proof Stage)

Community Page (Retention Stage)

Structure

Cross-Site CTAs

Header Navigation

Footer

About Page

Homelab Page

Cost Page

Link Map

Technical Patterns

Anchor Link Pattern

Counter Animation

Voice & Tone

Related Documentation