1-shot high-quality landing pages and demos in GAIA's design system. Use when building any new marketing or landing page, feature showcase, persona page, or integration page for the GAIA web app.
1-shot high-quality landing pages and demos in GAIA's design system. Use when building any new marketing or landing page, feature showcase, persona page, or integration page for the GAIA web app.
Landing Page Builder
Build high-converting landing pages that match GAIA's design system exactly. Follow every step in order.
Step 1 — Copy First. No Code Until You Have Copy.
Invoke the landing-page-copywriter skill before writing any code. Copy written after the layout exists produces generic pages.
If the audience or purpose isn't clear, ask:
Who is this page for?
What is the single action this page needs them to take?
What pain do they have that GAIA solves specifically for them?
Any real numbers, testimonials, or proof points available?
Needed before proceeding:
Headline (≤10 words, outcome-focused — what they get, not what GAIA is)
Subheadline (1–2 sentences expanding the headline)
Problem section copy (emotional, in the audience's exact language)
3–6 feature descriptions (benefit-led, not system-capability-led)
How it works (3–4 steps max)
Testimonial copy or placeholder structure
Final CTA with urgency/risk reversal
Step 2 — Audit Before Building
Run these before creating anything new:
ls apps/web/src/features/landing/components/sections/
ls apps/web/src/features/landing/components/demo/
ls apps/web/src/features/landing/components/
ls apps/web/src/app/(landing)/
These always exist — import them, never recreate them:
Outer container: rounded-2xl bg-zinc-800 p-4
Inner items: rounded-2xl bg-zinc-900 p-3
Item spacing: space-y-2
NEVER add: border- ring- outline- shadow- on cards
NEVER mix: rounded-lg and rounded-2xl at the same nesting level
Animations
Easing (always): ease: [0.32, 0.72, 0, 1] — never ease-in-out
Spring: { type: "spring", stiffness: 400, damping: 70, mass: 1 }
Scroll entrance: initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
Stagger delay: i * 0.08 per item
AnimatePresence: always mode="wait" when replacing content
always stable key props on motion children
wrap only the outermost changing element
Split into a separate component file when a section exceeds ~150 lines or is reusable elsewhere.
Step 9 — Quality Gate
Do not mark done until every item passes.
Copy
No placeholder text anywhere in the page
Headline answers "what will I get?" not "what is this?"
Every feature described as an outcome for the user, not a system capability
Single primary CTA — GetStartedButton. Secondary actions are links, not buttons.
Design
Hero has a wallpaper background, not a solid color
FinalSection used at the very bottom of every page
All section titles use LargeHeader or match its exact pattern
Zero border-ring-outline-shadow- classes on any card
All serif headings are font-normal, never font-bold
Accent #00bbff used for chips, icon tint backgrounds, active states
Animations
Hero uses SplitTextBlur
Every section uses scroll-triggered whileInView entrance
Easing is [0.32, 0.72, 0, 1] — not ease-in-out, not linear
Demo loops automatically with a reset phase
AnimatePresence wraps conditional content with mode="wait" and stable keys
Technical
"use client" only on components that use browser APIs or hooks
No any types
All imports at the top of every file
Mobile layout verified at 375px — hero text readable, no horizontal overflow, CTAs full-width
nx run-many -t lint type-check passes clean
What Separates Good Pages From Mediocre Ones
Narrative arc matters more than aesthetics. The page must tell a story: agitate the pain → introduce hope → prove it works → make acting easy. A list of features is not a story and will not convert.
Specificity converts. Vagueness doesn't.
Bad: "Saves you time"
Good: "Clears your Monday morning inbox in under 5 minutes"
Use the audience's exact language. Developer pages: "PRs", "deploys", "standups". Sales pages: "pipeline", "follow-ups", "quota".
The demo is the proof. If it looks fake, it destroys trust. Real component names, real-sounding tasks, actual tool names. Fake data is worse than no demo.
Social proof placement. One strong quote directly under the hero outperforms a full testimonials section at the bottom. Put proof where skepticism lives — near the CTA, not at the end.
Mobile first. Test at 375px before anything else. Most visitors are mobile.
