feat: redesign homepage with code-forward developer experience by ryanycoleman · Pull Request #683 · strands-agents/docs

ryanycoleman · 2026-03-18T22:06:20Z

Big change to the homepage.

Split hero with headline + code snippet, copyable pip install
Steering section: problem/solution narrative with verified code and 100% accuracy stat from the steering blog post
Model-driven section with research agent example
6 feature cards with code snippets verified against SDK docs
Copy button on all code blocks, dark/light theme-aware highlighting
Animated background curves with reduced opacity for legibility

Checklist

I have read the CONTRIBUTING document
My changes follow the project's documentation style
I have tested the documentation locally using npm run dev
Links in the documentation are valid and working

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

- Split hero with headline + code snippet, copyable pip install - Steering section: problem/solution narrative with verified code and 100% accuracy stat from the steering blog post - Model-driven section with research agent example - 6 feature cards with code snippets verified against SDK docs - Copy button on all code blocks, dark/light theme-aware highlighting - Animated background curves with reduced opacity for legibility

src/components/landing/ModelDrivenSection.astro

src/components/landing/SteeringSection.astro

src/components/landing/FeatureCards.astro

src/components/landing/HeroSection.astro

github-actions · 2026-03-18T22:09:50Z

Review Summary

Assessment: Comment (Approve with suggestions)

This is a well-executed homepage redesign with clean component architecture, comprehensive theme support, and strong accessibility practices. The code-forward approach effectively showcases the SDK's simplicity.

Review Categories

Code Quality: Clean component separation, good use of Astro's built-in Code component, proper CSS scoping with :global() where needed
Accessibility: Good ARIA labels on interactive elements (copy buttons, slider dots)
Theme Support: Thorough light/dark mode handling with CSS selectors on [data-theme]
Responsive Design: Comprehensive media queries for mobile breakpoints
Minor Issues: A few suggestions for link handling, code example completeness, and content that may become stale

The inline comments are suggestions to improve the PR, none are blocking. Nice work on this redesign! 🎉

github-actions · 2026-03-18T22:10:50Z

Documentation Preview Ready

Your documentation preview has been successfully deployed!

Preview URL: https://d3ehv1nix5p99z.cloudfront.net/pr-cms-683/docs/user-guide/quickstart/overview/

Updated at: 2026-03-24T21:06:55.615Z

github-actions · 2026-03-18T23:00:17Z

Follow-up Review

Thanks for the responsive layout fix! The new Header.astro changes look good — the narrower padding and font size for the 50-68.75rem breakpoint should help with navigation on smaller desktop screens.

Previous feedback status: The 4 inline suggestions from my earlier review are still open. They're all non-blocking recommendations, so feel free to address them or leave them as-is based on your judgment.

github-actions · 2026-03-19T13:56:19Z

Follow-up Review (3rd pass)

Nice addition with the npm install widget! 🎉 This nicely demonstrates the multi-language support (Python + TypeScript) right in the hero section.

New changes look good:

hero-install-group wrapper with flexbox layout handles both widgets well
Script correctly updated to use querySelectorAll for multiple install widgets
Package name @strands-agents/sdk verified correct against existing documentation

Previous feedback status: 4 inline suggestions remain open - all non-blocking.

src/components/landing/CodeBlock.astro

zastrowm · 2026-03-20T14:02:34Z

src/components/landing/FeatureCards.astro

+import CodeBlock from './CodeBlock.astro'
+
+const features = [
+  {


Nit - I'd prefer to see this as content (like authors.yaml) to keep components separate from the data/content

LMK what you think of the new approach. I'm not sure we gain much but it's separate now.

zastrowm · 2026-03-20T14:03:30Z

src/components/landing/FeatureCards.astro

+    </p>
+    <div class="features-grid">
+      {features.map((feature) => (
+        <div class="feature-card">


The gaps here are a little off:

Maybe aligning the code to the top would be better here? But the blank space between the text and the code seems odd

good eye. still not perfect but the latest commit makes this a lot better.

zastrowm · 2026-03-20T14:36:32Z

src/components/landing/CodeBlock.astro

+<div class="code-block" data-code={code}>
+  <div class="code-header">
+    {filename && <span class="code-filename">{filename}</span>}
+    <button class="copy-button" aria-label="Copy code">


Ideally we'd use the Code snippet from starlight, as noted here: https://starlight.astro.build/components/code/

That would allow us to get rid of most of this scaffolding I think. However, it looks like this config option is what prevents us from importing it, so if we found a way around that, it'd be a less code-heavy option

Yeah, that config option is blocking.

Beyond the config issue, the custom CodeBlock gives us control over the landing page aesthetic that Starlight's Code component wouldn't (e.g. the traffic-light dots, glass-morphism card styling, theme-aware copy button).

Open to revisiting in the future when we change up styling across the board?

github-actions · 2026-03-20T22:28:20Z

Follow-up Review (4th pass)

Great work addressing all the feedback! 🎉

My Original Suggestions - All Resolved ✅

Issue	Resolution
Blog link hardcoded	Now uses `pathWithBase()`
Missing `Path` import	Added to code example
"Python Function" title	Changed to "Tools from Any Function"
Static GitHub stars	Dynamic fetch via `src/util/github.ts`

New Additions Look Good

src/util/github.ts: Nice implementation combining star counts from both SDK repos with proper error handling and fallback
src/data/feature-cards.ts: Clean data separation from component (addresses @zastrowm's feedback)
CodeBlock floating copy button: Good solution for the blank header issue when no filename

Assessment: Ready to merge from my perspective. The remaining open comment from @zastrowm about feature card gaps/alignment is the only outstanding item.

github-actions · 2026-03-20T23:02:27Z

Follow-up Review (6th pass)

New commit: content: revise homepage messaging for developer focus

Messaging improvements look great! The changes make the value proposition clearer and more developer-focused:

Section	Change
Hero tagline	"Not orchestration graphs" → "Just write code"
Hero subtitle	More direct: "No workflow DSLs. No graph definitions. No YAML pipelines..."
ModelDriven heading	"Your model is smarter than your workflow" → "Write code, not pipelines"
Feature cards	Added helpful inline comments (e.g., `# Swap providers in one line`)

Content-only changes, no technical issues. The messaging is now more concise and direct. 👍

github-actions · 2026-03-22T04:44:32Z

Follow-up Review (7th pass)

New commit: content: hero headline 'Build AI agents you can actually steer'

Great messaging pivot! Leaning into "steering" as the key differentiator makes sense given it's a unique capability.

Changes Look Good

Section	Update
Hero	"Build AI agents you can actually steer" + concise subtitle
Steering problem	"Your agent ignored your instructions again" (relatable!)
Steering solution	"Middleware for the agent loop" (great analogy)
Code example	Practical `NoPricingLeaks` handler preventing data leakage

One Item to Verify

The new steering code example shows a custom SteeringHandler base class:

from strands.vended_plugins.steering import (
    SteeringHandler, ToolSteeringAction,
)

class NoPricingLeaks(SteeringHandler):
    async def steer_before_tool(self, *, agent, tool_use, **kwargs):

The existing docs show LLMSteeringHandler being used directly. Could you confirm this custom handler pattern is documented/supported? If so, it might be worth linking to the relevant docs page for users who want to learn more.

github-actions · 2026-03-23T21:14:10Z

Follow-up Review (8th pass)

New commit: content: bridge annotation uses 'recovery' not 'guardrails'

Minor wording refinement in ModelDrivenSection:

"When it makes a mistake, a plugin handles recovery."

Good change - "recovery" better describes what steering plugins do and creates a nice narrative bridge to the steering section that follows. 👍

…gent skills

github-actions · 2026-03-24T20:41:22Z

Follow-up Review (9th pass)

New commit: feat: add credibility strip with company logos and deployment targets

Great additions! 🎉

New CredibilityStrip Component

Company logos: Smartsheet, Swisscom, Eightcap, Zafran, Jit, Tavily
Deployment targets: AgentCore, Lambda, Fargate, EKS, Docker, Terraform
Good light/dark mode handling with separate logo variants
Nice UX touch with grayscale → color on hover
Proper accessibility with alt attributes and loading="lazy"

Expanded Feature Cards (6 → 8)

New features showcase important capabilities:

Feature	API
Agent Skills	`strands.vended_plugins.skills.AgentSkills` ✅
Approve Before It Acts	`strands.hooks.BeforeToolCallEvent` + `interrupt()` ✅
Evaluation SDK	`strands_evals.Experiment` ✅

All new code examples verified against docs. The categorization with comments (// Give it tools, // Let it scale, etc.) helps organize the data nicely.

Assessment: Looking great! The credibility strip adds important social proof, and the expanded features better showcase the SDK's full capabilities.

…s styles, API timeout)

github-actions · 2026-03-24T21:05:42Z

Follow-up Review (10th pass)

New commit: fix: accessibility and performance improvements (reduced-motion, focus styles, API timeout)

Excellent improvements! 🎉

Accessibility Enhancements

Feature	Implementation
Reduced Motion CSS	`@media (prefers-reduced-motion: reduce)` disables background animations
Reduced Motion JS	Checks `matchMedia()` before adding scroll-responsive effects
Focus Styles	Global `focus-visible` with Strands green outline + offset

Performance Improvement

GitHub API Timeout (src/util/github.ts):

const TIMEOUT_MS = 5000
const controller = new AbortController()
const timeout = setTimeout(() => controller.abort(), TIMEOUT_MS)

Prevents build hangs from slow/unresponsive API
Proper cleanup in finally block

These are important improvements:

✅ Users with motion sensitivity get a calm experience
✅ Keyboard users can see focus indicators
✅ Builds won't hang on network issues

Great attention to detail! 👏

ryanycoleman temporarily deployed to auto-approve March 18, 2026 22:06 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 18, 2026

github-actions bot reviewed Mar 18, 2026

View reviewed changes

src/components/landing/ModelDrivenSection.astro Show resolved Hide resolved

github-actions bot reviewed Mar 18, 2026

View reviewed changes

src/components/landing/SteeringSection.astro Outdated Show resolved Hide resolved

github-actions bot reviewed Mar 18, 2026

View reviewed changes

src/components/landing/FeatureCards.astro Outdated Show resolved Hide resolved

github-actions bot reviewed Mar 18, 2026

View reviewed changes

src/components/landing/HeroSection.astro Outdated Show resolved Hide resolved

github-actions bot removed the strands-running label Mar 18, 2026

fix: improve responsive layout across homepage breakpoints

57ead62

ryanycoleman temporarily deployed to auto-approve March 18, 2026 22:58 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 18, 2026

github-actions bot removed the strands-running label Mar 18, 2026

feat: add npm install widget alongside pip install in hero

5e092f0

ryanycoleman temporarily deployed to auto-approve March 19, 2026 13:53 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 19, 2026

github-actions bot removed the strands-running label Mar 19, 2026

zastrowm requested changes Mar 20, 2026

View reviewed changes

fix: address PR review feedback on homepage redesign

865176a

ryanycoleman temporarily deployed to auto-approve March 20, 2026 22:25 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 20, 2026

github-actions bot removed the strands-running label Mar 20, 2026

ryanycoleman added 4 commits March 21, 2026 15:51

feat: add scroll-responsive strands background animation

fa6e86b

content: restructure narrative arc with steering middleware positioning

5b7aca4

fix: feature card responsive layout at small viewports

dab889e

content: hero headline 'Build AI agents you can actually steer'

b0214ad

ryanycoleman temporarily deployed to auto-approve March 22, 2026 04:42 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 22, 2026

github-actions bot removed the strands-running label Mar 22, 2026

content: bridge annotation uses 'recovery' not 'guardrails'

f339d30

ryanycoleman temporarily deployed to auto-approve March 23, 2026 21:11 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 23, 2026

github-actions bot removed the strands-running label Mar 23, 2026

ryanycoleman added 2 commits March 24, 2026 12:53

refactored feature cards to be 2x grid with additions for evals and a…

1fcc21c

…gent skills

feat: add credibility strip with company logos and deployment targets

d1ca048

ryanycoleman temporarily deployed to auto-approve March 24, 2026 20:38 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 24, 2026

github-actions bot removed the strands-running label Mar 24, 2026

fix: accessibility and performance improvements (reduced-motion, focu…

391ddbf

…s styles, API timeout)

ryanycoleman temporarily deployed to auto-approve March 24, 2026 21:02 — with GitHub Actions Inactive

github-actions bot added the strands-running label Mar 24, 2026

github-actions bot removed the strands-running label Mar 24, 2026

Conversation

ryanycoleman commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 18, 2026

Review Summary

Uh oh!

github-actions bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Documentation Preview Ready

Uh oh!

github-actions bot commented Mar 18, 2026

Follow-up Review

Uh oh!

github-actions bot commented Mar 19, 2026

Follow-up Review (3rd pass)

Uh oh!

Uh oh!

zastrowm Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

ryanycoleman Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

zastrowm Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

ryanycoleman Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

zastrowm Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

ryanycoleman Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 20, 2026

Follow-up Review (4th pass)

My Original Suggestions - All Resolved ✅

New Additions Look Good

Uh oh!

github-actions bot commented Mar 20, 2026

Follow-up Review (6th pass)

Uh oh!

github-actions bot commented Mar 22, 2026

Follow-up Review (7th pass)

Changes Look Good

One Item to Verify

Uh oh!

github-actions bot commented Mar 23, 2026

Follow-up Review (8th pass)

Uh oh!

github-actions bot commented Mar 24, 2026

Follow-up Review (9th pass)

New CredibilityStrip Component

Expanded Feature Cards (6 → 8)

Uh oh!

github-actions bot commented Mar 24, 2026

Follow-up Review (10th pass)

Accessibility Enhancements

Performance Improvement

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ryanycoleman commented Mar 18, 2026 •

edited

Loading

github-actions bot commented Mar 18, 2026 •

edited

Loading