mirror of
https://github.com/ComposioHQ/composio.git
synced 2026-09-22 11:46:35 +08:00
Malay Vasa
d84557ca21
## Summary Reworks the docs welcome page (`/docs`) into a two-column hero with an animated agent chat mock + tool overlay, plus four restructured homepage sections. ### Hero (`DocsHeroV2`) - Left: headline (`Start building with Composio.`), short sub, brand-blue chip column (Quickstart, API reference, Toolkits). - Right (lg+ only): mock chat panel with the v1 hero's per-agent skin (`Claude Cowork` / `ChatGPT Codex` / `Your AI Agent`), step-by-step timeline-driven animation (user prompt → thinking dots → tool-trail items → assistant response), and a floating "active tool" card layered over the chat's left edge. - L-shape SVG connector between chat and overlay: muted grey resting state + brand-blue glow + bright line that re-draw via `pathLength` on every tool change. - Mock chat hidden below lg. ### Homepage sections - **`HomeFeatures`** — `Everything you need to ship production agents.` 2×2 grid with bespoke visuals per pillar: 8×2 toolkit grid with `+1K` cell, sessions panel (`USER_ID` + connected apps), triggers feed (`LIVE` indicator + recent events), and a workbench mock with animated 4×2 CPU lights. `auto-rows-fr` on `sm:` so cards equalize on tablet/desktop but breathe on mobile. - **`HomeSurfaces`** — `Three ways to use Composio.` bento: Developer card spans full width (`md:col-span-3`) and shows 8 provider logos (Anthropic, OpenAI, Vercel AI, Google, LangChain, CrewAI, LlamaIndex, Mastra). Row 2: For You (with Claude / Codex / Cursor / Windsurf / OpenClaw client logos), CLI (with `curl ... | bash` install snippet and functional copy button), Agents. - **`HomeResources`** — `Reach for the rest.` six-card footer row with Quickstart, API reference, Cookbooks, Changelog, Toolkits, Troubleshooting. ### Other - Ports the landing-page hero into `components/landing-hero/` (kept under the original `DocsHero` for easy revert; commented out, V2 wired in). - Theme-aware `--hero-*` CSS vars for chat-skin colors so the chat reads in both light and dark. - Removes the old `Works with your stack` provider grid (the providers now live inside the Developer surface card). ## Test plan - [ ] Verify hero animation cycles through 3 examples on desktop - [ ] Verify L-shape connector pulses in brand blue on every tool change - [ ] Verify chat mock is hidden on mobile and left column reads on its own - [ ] Verify dark mode (chat skins, connector, card surfaces, code blocks) - [ ] Verify CLI install copy button copies and toggles the icon to ✓ - [ ] Verify all chip / card hrefs resolve 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
