feat: website revamp

[amithad]

No description provided.

[Copilot]

Pull request overview

This PR revamps the Docusaurus website experience by introducing a new dark-first design system, new landing/use-case pages, and several animated “product story” components to better communicate Agent Kernel’s value proposition.

Changes:

• Introduces a new global design system (colors/typography/components styling) and sets the site to dark-first.
• Replaces the homepage content structure and adds a dedicated “Use Cases” page with segment modals and CTAs.
• Adds new animated visual components (architecture diagram, request lifecycle, journey map) plus updated branding assets.

Reviewed changes

Copilot reviewed 19 out of 22 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
docs/static/img/branding/agent-kernel-logo-system.html	Adds a standalone “logo system” reference page showing logo variations, lockups, sizes, and guidelines.
docs/static/img/branding/agent-kernel-icon-mono-white.svg	Adds monochrome white icon asset.
docs/static/img/branding/agent-kernel-icon-mono-dark.svg	Adds monochrome dark icon asset.
docs/static/img/branding/agent-kernel-icon-color.svg	Adds full-color icon asset used across pages/components.
docs/src/pages/use-cases.tsx	New Use Cases landing page with segments grid and modal details.
docs/src/pages/use-cases.module.css	Styling for the Use Cases page including modal UI.
docs/src/pages/index.tsx	Rebuilds the homepage sections and messaging; adds new components/sections.
docs/src/css/custom.css	Replaces global styling with a new “Agent Kernel Design System” (dark technical premium).
docs/src/components/UseCaseJourneyMap/styles.module.css	Styles for the new journey map comparison animation.
docs/src/components/UseCaseJourneyMap/index.tsx	Adds animated “Traditional vs With Agent Kernel” time-to-production comparison.
docs/src/components/RequestLifecycleAnimation/styles.module.css	Styles for the request lifecycle pipeline visualization.
docs/src/components/RequestLifecycleAnimation/index.tsx	Adds an animated request lifecycle/pipeline component.
docs/src/components/FloatingChatbot/styles.module.css	Refactors chatbot UI styling to match the new design system and mobile z-index behavior.
docs/src/components/FloatingChatbot/index.tsx	Updates chatbot trigger UI, branding assets, and input handling.
docs/src/components/AgentKernelArchDiagram/styles.module.css	Styles for the architecture diagram component.
docs/src/components/AgentKernelArchDiagram/index.tsx	Adds an architecture diagram with connector SVGs and animated particles.
docs/src/clientModules/scrollReveal.js	Adds scroll-reveal behavior for main-page sections on route updates.
docs/docusaurus.config.js	Updates SEO text, navbar/footer items, favicon, clientModules, and enforces dark mode.
docs/docs/intro.md	Updates intro messaging and adds a “Who should use Agent Kernel?” segmentation section.

Comments suppressed due to low confidence (6)

docs/src/components/AgentKernelArchDiagram/styles.module.css:203

• flex-wrap: wrap on .deployRow can cause the deployment boxes to break onto multiple lines on smaller widths, but the fan connector SVG in AgentKernelArchDiagram/index.tsx uses fixed X positions (DEPLOY_X) assuming a single-row layout. This will visually misalign the connectors from the targets on narrow screens. Consider preventing wrapping (e.g., flex-wrap: nowrap + horizontal scroll), or switching to a different mobile layout and hiding/recomputing the connector SVG when wrapping occurs.

  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.65rem;
  flex-wrap: wrap;

docs/src/pages/use-cases.module.css:378

• Empty rule .segmentColumn {} can be removed to reduce noise (or add the intended styles if something is missing).

.segmentColumn {}

docs/static/img/branding/agent-kernel-logo-system.html:323

• Several of the example SVGs (e.g. this wordmark) reference gradients url(#g1/#g2/#g3) but don’t include their own <defs>. This makes the examples non‑portable (copy/paste into another file will lose fills) and also couples rendering to the earlier hero SVG staying in the DOM. Consider either duplicating the gradient <defs> in each standalone example SVG, or defining a single hidden global <svg><defs>…</defs></svg> at the top and referencing that explicitly.

  <div class="hero-wordmark">
    <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M100 168 L172 134 L172 120 L100 154 L28 120 L28 134 Z" fill="url(#g3)"/>
      <path d="M100 154 L172 120 L100 86 L28 120 Z" stroke="#8b5cf6" stroke-width="1.5" fill="none" opacity="0.35"/>
      <path d="M100 138 L172 104 L172 88 L100 122 L28 88 L28 104 Z" fill="url(#g2)"/>
      <path d="M100 122 L172 88 L100 54 L28 88 Z" stroke="#6d6af7" stroke-width="1.8" fill="none" opacity="0.6"/>
      <path d="M100 106 L172 72 L172 56 L100 90 L28 56 L28 72 Z" fill="url(#g1)" opacity="0.7"/>
      <path d="M100 90 L172 56 L100 22 L28 56 Z" stroke="url(#g1)" stroke-width="2.5" fill="none"/>
      <path d="M100 40 L120 56 L100 72 L80 56 Z" fill="url(#g1)"/>
    </svg>

docs/src/pages/use-cases.tsx:17

• MdVisibility is imported here but never used in this file. Please remove it to avoid dead code and potential lint/TS warnings.

  MdCode,
  MdSecurity,
  MdVisibility,
  MdMessage,

docs/src/pages/use-cases.tsx:172

• This effect depends on onClose, but onClose is passed as an inline lambda from the parent, so the effect can re-run and re-register the keydown listener / toggle body.style.overflow on any re-render. Consider making onClose stable (e.g., useCallback in the parent) or refactoring the effect to avoid re-subscribing on every render.

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {

docs/src/pages/use-cases.tsx:184

• The modal uses role="dialog"/aria-modal, but there’s no focus management (initial focus, focus trap, and restore focus on close). Also, using aria-label={segment.title} works, but aria-labelledby pointing at the visible <h2> is typically more robust. Consider moving the dialog role onto the modal container, setting up focus handling, and ensuring keyboard users can’t tab to content behind the overlay.

      className={styles.modalOverlay}
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-label={segment.title}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 20 out of 24 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (6)

docs/src/components/FloatingChatbot/index.tsx:318

• useRef<NodeJS.Timeout | null> is Node-specific and can cause typing issues in browser-only React codebases (and in projects without @types/node). Prefer useRef<ReturnType<typeof setTimeout> | null> for a cross-platform timeout handle type.

  const messageRef = useRef<HTMLDivElement>(null);
  const animationRef = useRef<NodeJS.Timeout | null>(null);

docs/src/pages/use-cases.tsx:20

• MdVisibility is imported but never used in this file. Please remove the unused import to avoid dead code (and potential lint/typecheck failures if enabled).

import {
  MdBusiness,
  MdAutoAwesome,
  MdRocketLaunch,
  MdGroup,
  MdCheck,
  MdSwapHoriz,
  MdCloud,
  MdCode,
  MdSecurity,
  MdVisibility,
  MdMessage,
  MdSpeed,
  MdNetworkCheck,
} from 'react-icons/md';

docs/static/img/branding/agent-kernel-logo-system.html:322

• The inline SVG in the hero wordmark references gradients url(#g1), url(#g2), url(#g3) but this <svg> does not define those gradients in a <defs> block. Because gradient IDs are scoped to an individual <svg> element, these fills/strokes will not render as intended. Duplicate the gradient <defs> into each SVG that uses them (or refactor to reuse a single SVG).

    <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M100 168 L172 134 L172 120 L100 154 L28 120 L28 134 Z" fill="url(#g3)"/>
      <path d="M100 154 L172 120 L100 86 L28 120 Z" stroke="#8b5cf6" stroke-width="1.5" fill="none" opacity="0.35"/>
      <path d="M100 138 L172 104 L172 88 L100 122 L28 88 L28 104 Z" fill="url(#g2)"/>
      <path d="M100 122 L172 88 L100 54 L28 88 Z" stroke="#6d6af7" stroke-width="1.8" fill="none" opacity="0.6"/>
      <path d="M100 106 L172 72 L172 56 L100 90 L28 56 L28 72 Z" fill="url(#g1)" opacity="0.7"/>
      <path d="M100 90 L172 56 L100 22 L28 56 Z" stroke="url(#g1)" stroke-width="2.5" fill="none"/>
      <path d="M100 40 L120 56 L100 72 L80 56 Z" fill="url(#g1)"/>

docs/src/components/AgentKernelArchDiagram/styles.module.css:206

• deployRow allows flex-wrap: wrap, but the connector SVG in AgentKernelArchDiagram uses hard-coded X coordinates (DEPLOY_X) to draw fan lines to each deploy box. Once the boxes wrap (narrow viewports), the lines/particles will no longer point at the actual boxes. Consider disabling wrapping (and allowing horizontal scroll), or hide/alter the connector SVG under a breakpoint where wrapping occurs.

.deployRow {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.65rem;
  flex-wrap: wrap;
  width: 100%;
  z-index: 1;
}

README.md:3

• The README embeds agent-kernel-lockup-dark.svg, which uses very light text (#dfe1f0) intended for a dark background. On GitHub's default light theme this will have low contrast and can appear nearly invisible. Consider switching to a light-mode lockup variant for the README, or add a background behind the SVG (or use a <picture>/CSS to choose based on theme).

<p align="center">
  <img src="docs/static/img/branding/agent-kernel-lockup-dark.svg" alt="Agent Kernel" width="420" />
</p>

docs/src/components/FloatingChatbot/index.tsx:74

• The chatbot API endpoint is hard-coded to a specific AWS API Gateway URL. This makes it difficult to deploy the docs site to different environments (staging/dev) and also bakes a mutable operational dependency into the static bundle. Prefer injecting the base URL via environment/config (e.g., Docusaurus siteConfig/customFields) and consider documenting/handling expected auth/rate-limiting behavior.

      const response = await fetch(
        'https://63e0emv8qf.execute-api.ap-southeast-1.amazonaws.com/agents/api/v1/chat',
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            prompt: userMessage.text,
            session_id: sessionId,
            agent: 'general',
          }),
        }
      );

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.