Landing Page Kit

GEO-optimized blog and landing page enhancement for Astro.

Landing Page Kit adds GEO (Generative Engine Optimization) to any Astro project. Get your content cited by ChatGPT, Perplexity, Claude, and Google AI Overviews.

Price: Free

Quick Start

npx @aiorg/cli@latest init landing-page ~/my-landing
cd ~/my-landing
claude
> /setup

Requirements

  • Claude CodeGet it here
  • Node.js 18+ (for CLI and development)

Kits are powered by Claude Code. Install Claude Code first, then use our CLI to download kits.

Overview

Landing Page Kit is an enhancement layer that works with ANY Astro project:

  • GEO Components — AnswerBox, StatCitation, FAQSection optimized for AI citations
  • Works with any template — AstroWind, Starlight, or your custom project
  • Zero JS by default — Astro ships no JavaScript unless you need it
  • AI assistance — Designer and Copywriter agents built-in

The /setup command detects your project structure and adapts automatically.

What is GEO?

GEO (Generative Engine Optimization) optimizes content for AI systems:

  • AI-referred traffic is up 527% in 2025
  • LLMs cite only 2-7 sources per response
  • Content with original data earns 4.1x more citations
  • Direct answers in first 40-60 words improve citation rate by 35%

GEO components are designed to make your content quotable by AI.

What's Included

Commands

CommandDescription
/setupDetects project, installs template if needed, adds GEO components
/blog [action]Create GEO-optimized blog posts (new, optimize, ideas, audit)
/landing-page [type]Generate page: waitlist, launch, coming-soon, lead-magnet
/section [type]Add/modify sections
/optimizeSEO, performance, and conversion audit
/deployDeploy to Cloudflare Pages or Vercel

GEO Components

ComponentPurposePlacement
AnswerBoxDirect answer (40-60 words) AI can quoteTop of article
KeyTakeawayHighlighted insightKey points throughout
StatCitationStatistic with sourceEvery ~175 words
FAQSectionFAQ with JSON-LD schemaEnd of article
FreshnessBadgeContent recency indicatorNear title

Agents

AgentPurpose
Landing Page DesignerUX/UI guidance, visual hierarchy
Landing Page CopywriterHeadlines, CTAs, conversion-focused copy

Tech Stack

LayerTechnology
FrameworkAstro (works with any Astro project)
Recommended TemplateAstroWind
StylingTailwind CSS (with fallback CSS)
DeploymentCloudflare Pages (primary), Vercel

How /setup Works

/setup
│
├─ No Astro project found?
│  └─ "Install AstroWind?" (recommended)
│     └─ Creates full Astro project with GEO
│
├─ Astro project exists?
│  └─ Analyzes structure
│  └─ Copies GEO components to right location
│  └─ Verifies build still works
│
└─ Non-Astro project?
   └─ "This kit is for Astro. Try SaaS Dev Team for Next.js"

Typical Workflow

1. /setup              → Install template + GEO components
2. /blog new "topic"   → Create GEO-optimized article
3. /optimize           → Check SEO and performance
4. /deploy             → Ship to Cloudflare Pages

Project Structure After /setup

your-project/                    # AstroWind or other Astro template
├── src/
│   ├── components/
│   │   ├── geo/                 # ← Added by /setup
│   │   │   ├── AnswerBox.astro
│   │   │   ├── KeyTakeaway.astro
│   │   │   ├── StatCitation.astro
│   │   │   ├── FAQSection.astro
│   │   │   └── FreshnessBadge.astro
│   │   └── ...                  # Template components
│   ├── content/
│   │   └── post/ or blog/       # Your content
│   └── lib/
│       └── schema.ts            # ← JSON-LD helpers
├── .claude/                     # ← From kit
│   ├── commands/
│   ├── knowledge/
│   └── templates/
└── CLAUDE.md                    # ← From kit

Using GEO Components

In your MDX blog posts:

---
title: "How to Validate Your Startup Idea"
pubDate: 2026-02-01
---

import AnswerBox from '~/components/geo/AnswerBox.astro'
import StatCitation from '~/components/geo/StatCitation.astro'
import FAQSection from '~/components/geo/FAQSection.astro'

<AnswerBox>
To validate a startup idea, talk to 20+ potential customers before
writing code. Focus on understanding their problems, not pitching
your solution.
</AnswerBox>

## Why Customer Interviews Matter

<StatCitation
  stat="42% of startups fail because there's no market need"
  source="CB Insights"
  url="https://cbinsights.com/research/startup-failure-reasons/"
/>

<FAQSection questions={[
  {
    question: "How many interviews do I need?",
    answer: "Aim for 20-30. You'll see patterns after 10-15."
  }
]} />

Why Astro?

Landing pages are content, not apps. They don't need React's 70KB runtime.

FrameworkDefault JSBest For
Astro0 KBContent sites, landing pages
Next.js70+ KBFull-stack web apps

Cloudflare acquired Astro in January 2026. It's backed by the company that runs 20% of the internet.

Deployment

Run /deploy for guided deployment, or:

# Cloudflare Pages (recommended)
npm i -g wrangler
wrangler login
pnpm build && wrangler pages deploy dist

# Vercel
npm i -g vercel
vercel --prod

Related Kits

Before: Idea OS — Validate your idea before building a landing page

After:

FAQ

Q: What is GEO?

GEO (Generative Engine Optimization) optimizes content for AI systems like ChatGPT, Perplexity, and Google AI Overviews. It's SEO for the AI age.

Q: Do I need an existing Astro project?

No. The /setup command can install AstroWind (recommended) or work with any existing Astro project.

Q: Why Astro instead of Next.js?

Landing pages are content, not apps. Astro ships zero JavaScript by default — 40% faster loads, better SEO.

Q: Why is this free?

Landing pages are validation tools. We want you to validate ideas cheaply, then buy SaaS Dev Team when you're ready to build the real product.

Q: Can I use this with my existing Astro blog?

Yes! The /setup command detects your project structure and adds GEO components without breaking anything.