[folathecoder]

Summary

Adds the HeroLoop animated SVG component to the homepage hero to show how a developer's harness, model, and tools connect to the Agentling agent engine. Moves the hero section up so the full hero and the top of the cards section sit above the fold on desktop, and simplifies the homepage cards to a single neutral accent palette.

Changes

• Hero illustration (src/components/hero-loop.tsx, src/app/globals.css):
  • Add HeroLoop with the central stadium loop, Agentling mark, AGENT ENGINE mono label, and neutral Your harness, Your model, and Your tools chips.
  • Animate the loop dot across two laps (thinks -> acts x2) before delivering to Your harness (answers), pausing when off-screen or in hidden tabs and rendering a static state for prefers-reduced-motion: reduce.
• Hero layout and actions (src/app/page.tsx):
  • Vertically centre the two-column desktop hero above the fold and size the two-line headline with clamp().
  • Keep Start the tutorial as the single primary button alongside pip install agentling and remove the left icon rail.
  • Use a 1px var(--border-default) border on the version pill with a :focus-visible focus ring.
• Cards and footer (src/app/page.tsx, src/components/site-footer.tsx, src/app/globals.css):
  • Scale card headlines to 40px on desktop, top-align them across all three cards, update the first card copy to Learn it. / Read the docs, and use neutral corner marks (bg-border-default).
  • Remove unused --display-* colour tokens from src/app/globals.css.
  • Add a PyPI link to the site footer.

How it was tested

• Automated:
  • npm run lint (0 errors, 0 warnings)
  • npx tsc --noEmit (0 errors)
  • npm run validate (Content OK: 30 doc pages in 5 sections, 3 releases, 3 site pages)
• Manual:
  • Verified layout, contrast, animation sequence, and responsive behaviour in light and dark mode across 375px, 1024px, 1280px, 1440px, and 1920px viewports.