docs(homepage): Redesign homepage with product separation for Data Replication and Agent Engine#74080
Draft
Ian Alton (ian-at-airbyte) wants to merge 6 commits intomasterfrom
Draft
Conversation
- Hero section: simplified with centered title and tagline - Data Replication section: popular connectors, 5 nav cards, Navattic demo - Agent Engine section: darker background, 4 nav cards - Removed AI Agents from Data Replication nav links - Light/dark mode theming for both product sections - Responsive design for tablet and mobile Co-Authored-By: ian.alton@airbyte.io <ian.alton@airbyte.io>
Contributor
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
Contributor
👋 Greetings, Airbyte Team Member!Here are some helpful tips and reminders for your convenience. 💡 Show Tips and TricksPR Slash CommandsAirbyte Maintainers (that's you!) can execute the following slash commands on your PR:
📚 Show Repo GuidanceHelpful Resources
|
Co-Authored-By: ian.alton@airbyte.io <ian.alton@airbyte.io>
Contributor
|
Deploy preview for airbyte-docs ready! ✅ Preview Built with commit d7b2c9e. |
…badges - Move Navattic interactive demo from homepage to /docs/platform/readme.md - Update Agent Engine cards to match sidebar: About, Tutorials, Platform, API, Connectors - Reuse PlatformIcon (navIconSvg) for AE Platform card instead of separate icon - Replace AgentToolsIcon with TutorialsIcon (graduation cap SVG) - Fix GitHub stars badge by removing maxAge parameter - Remove unused Navattic import and demoContainer CSS - Update AE grid to 5 columns (3 on tablet, 1 on mobile) Co-Authored-By: ian.alton@airbyte.io <ian.alton@airbyte.io>
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
Co-Authored-By: ian.alton@airbyte.io <ian.alton@airbyte.io>
…//git-manager.devin.ai/proxy/github.com/airbytehq/airbyte into devin/1772168127-homepage-product-separation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Redesigns the docs.airbyte.com homepage to create stronger product separation between Data Replication and Agent Engine using a three-tier layout: Hero → Data Replication → Agent Engine.
Follows up on airbytehq/airbyte#73725 which introduced the single-navbar dropdown with product separation.
Requested by Ian Alton (@ian-at-airbyte).
How
index.js:navLinksarray intodrNavLinks(5 cards: Platform, Connectors, Release Notes, Developers, Community) andaeNavLinks(5 cards: About Agent Engine, Tutorials, Platform, API reference, Connectors)TutorialsIcon,AgentConnectorsIcon,AgentApiIcon)PlatformIconfor the Agent Engine "Platform" card (same icon as Data Replication)ArcadeandNavatticimportsindex.module.css:.navSection/.navCardclasses with product-specific prefixes (.drNavGrid/.drNavCardand.aeNavGrid/.aeNavCard)hsl(240, 20%, 95%)light /hsl(240, 18%, 16%)dark) to visually differentiate from the white Data Replication section.whySection,.whyList,.demoContainer, etc.)docs/platform/readme.md:## Interactive product toursectionGitHub stars badge:
maxAge=2592000parameter from shields.io URL to fix "invalid" badge displayUpdates since last revision
/docs/platform/readme.md(new "Interactive product tour" section)PlatformIconfor the AE "Platform" card instead of a separateAgentToolsIconAgentToolsIconwithTutorialsIcon(graduation cap SVG)maxAgeparameter.demoContainer) and updated AE grid from 4 → 5 columnsReview guide
docs/platform/readme.md— Navattic embed added as "Interactive product tour" sectionindex.jslines 48-94 — UpdatedAIAgentsIconclassName, newTutorialsIcon,AgentConnectorsIcon,AgentApiIconindex.jslines 120-184 — Split nav links arrays (drNavLinkswith 5 cards,aeNavLinkswith 5 cards)index.jslines 186-327 — Three-tier JSX structure (Hero → Data Replication → Agent Engine), Navattic removedindex.module.csslines 9-38 — Simplified hero section styling (centered, no grid)index.module.csslines 62-188 — Data Replication section stylesindex.module.csslines 190-283 — Agent Engine section styles with darker background and 5-column grid/ai-agents/about/,/ai-agents/tutorials/,/ai-agents/platform/,/ai-agents/api/,/ai-agents/connectors/) — verify these resolve in the Docusaurus build/platform/page (uses MDXComponents registration)PlatformIconusesnavIconSvgclass while other AE icons useaeNavIconSvg— both have identical styles but worth notinghsl(240, 20%, 95%)/hsl(240, 18%, 16%)) instead of CSS variables — may want to add these tocustom.cssfor consistencyUser Impact
Users visiting docs.airbyte.com will see a redesigned homepage with clearer visual separation between Data Replication and Agent Engine products. The Agent Engine section has a darker background to distinguish it from Data Replication. The Navattic interactive demo has moved from the homepage to the Platform documentation page.
Can this PR be safely reverted and rolled back?
This is a pure frontend change to the homepage component, styles, and platform readme. No backend changes, no data migrations, no API changes.
Devin session