- Discover and use AI agents to automate your work -
++ Discover and use AI agents to automate your work +
-- Build and contribute your own agents to the registry to help make - agents smarter and more powerful -
- -+ Build and contribute your own agents to the registry to help make + agents smarter and more powerful +
+Your complete guide to the AI agent platform for Kubernetes
- Kagent is supported by contributions from leading technology companies and organizations worldwide. + kagent is supported by contributions from leading technology companies and organizations worldwide.
diff --git a/src/app/globals.css b/src/app/globals.css index df7cd754..236f0418 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -129,21 +129,1239 @@ } :root { - --docsearch-modal-background: #ffffff; + --docsearch-modal-background: #ffffff; } .dark { - --docsearch-modal-background: #1e293b; + --docsearch-modal-background: #1e293b; - --docsearch-searchbox-background: #1e293b; - --docsearch-searchbox-focus-background: #334155; - --docsearch-text-color: #f8fafc; + --docsearch-searchbox-background: #1e293b; + --docsearch-searchbox-focus-background: #334155; + --docsearch-text-color: #f8fafc; - --docsearch-hit-background: #334155; - --docsearch-hit-color: #f1f5f9; + --docsearch-hit-background: #334155; + --docsearch-hit-color: #f1f5f9; --docsearch-hit-shadow: none; --docsearch-footer-background: #1e293b; } +/* ============================================================ + REDESIGN — kagent.dev landing page (Design A) + ============================================================ */ + +.rd-shell { + --rd-bg: #fff; + --rd-fg: #151927; + --rd-fg-muted: #3F4458; + --rd-border: #E1DEEC; + --rd-border-hover: #CFCAE0; + --rd-surface: #FAFAFB; + --rd-surface-alt: #F4F2FA; + --rd-accent: #8A3FFC; + --rd-accent-hover: #9C55FF; + --rd-card-bg: #fff; + --rd-card-shadow: rgba(15,19,35,0.06); + --rd-card-shadow-hover: rgba(15,19,35,0.12); + --rd-rule: #ECEAF2; + --rd-dot: #CFCAE0; + --rd-tint: #F7F5FB; + --rd-tint-strong: #F4EEFE; + --rd-tint-subtle: #F8F7FB; + --rd-fg-subtle: #6B7289; + width: 100%; + overflow: hidden; + background: var(--rd-bg); + color: var(--rd-fg); + font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif; + font-size: 16px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} +.dark .rd-shell { + --rd-bg: hsl(var(--background)); + --rd-fg: hsl(var(--foreground)); + --rd-fg-muted: #a1a1aa; + --rd-border: #27272a; + --rd-border-hover: #3f3f46; + --rd-surface: #18181b; + --rd-surface-alt: #1e1b2e; + --rd-accent: #a78bfa; + --rd-accent-hover: #c4b5fd; + --rd-card-bg: #18181b; + --rd-card-shadow: rgba(0,0,0,0.3); + --rd-card-shadow-hover: rgba(0,0,0,0.5); + --rd-rule: #27272a; + --rd-dot: #52525b; + --rd-tint: #1c1a27; + --rd-tint-strong: #231f35; + --rd-tint-subtle: #1a1a1f; + --rd-fg-subtle: #71717a; +} +.rd-shell a { color: inherit; text-decoration: none; } + +/* ---- GitHub Stars bar ---- */ +.rd-stars-bar { + padding: 12px 0; +} +.rd-stars-chip { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 16px 8px 12px; + border-radius: 999px; + border: 1px solid var(--rd-border); + font-family: 'DM Mono', monospace; + font-size: 13px; + color: var(--rd-fg-muted); + transition: all 200ms; + background: var(--rd-card-bg); +} +.rd-stars-chip:hover { + border-color: var(--rd-border-hover); + background: var(--rd-surface); + box-shadow: 0 1px 2px var(--rd-card-shadow), 0 4px 12px var(--rd-card-shadow); +} +.rd-stars-count { + font-weight: 600; + color: var(--rd-fg); +} + +.rd-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 32px; +} + +/* ---- Type ---- */ +.rd-eyebrow { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: 'DM Mono', monospace; + font-size: 12.5px; + font-weight: 400; + letter-spacing: 0.06em; + color: var(--rd-accent); +} +.rd-eyebrow::before { + content: ''; + width: 6px; height: 6px; + border-radius: 999px; + background: var(--rd-accent); +} + +.rd-shell h1, .rd-shell h2, .rd-shell h3, .rd-shell h4 { + font-family: 'Figtree', sans-serif; + font-weight: 500; + color: var(--rd-fg); + margin: 0; + letter-spacing: -0.02em; + text-wrap: balance; +} +.rd-shell h1 { font-size: clamp(40px, 5.5vw, 68px); line-height: 1.05; } +.rd-shell h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; } +.rd-shell h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; } +.rd-shell h4 { font-size: 17px; line-height: 1.35; } +.rd-shell p { margin: 0; color: var(--rd-fg-muted); text-wrap: pretty; } +.rd-lead { font-size: 19px; line-height: 1.55; color: var(--rd-fg-muted); max-width: 880px; margin-left: auto !important; margin-right: auto !important; margin-top: 24px; text-align: center !important; display: block; } + +/* ---- Buttons ---- */ +.rd-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 22px; + border-radius: 999px; + font-family: 'Figtree', sans-serif; + font-weight: 500; + font-size: 15px; + line-height: 1; + border: 1px solid transparent; + cursor: pointer; + transition: all 200ms cubic-bezier(.2,.6,.2,1); + white-space: nowrap; +} +.rd-btn--purple { background: var(--rd-accent); color: #fff !important; text-decoration: none; } +.rd-btn--purple:hover { background: var(--rd-accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(138,63,252,0.35); } +.rd-btn--ghost { background: transparent; color: var(--rd-fg); border-color: var(--rd-border); } +.rd-btn--ghost:hover { background: var(--rd-surface); border-color: var(--rd-border-hover); } +.rd-btn:active { transform: scale(0.98); } +.rd-arrow { transition: transform 200ms cubic-bezier(.2,.6,.2,1); } +.rd-btn:hover .rd-arrow { transform: translateX(3px); } + +/* ---- Section head ---- */ +.rd-section-head { + text-align: center; + max-width: 720px; + margin: 0 auto 56px; +} +.rd-section-head h2 { margin-top: 16px; } +.rd-section-head p { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--rd-fg-muted); } + +/* ---- Hero ---- */ +.rd-hero { + padding: 80px 0 100px; + position: relative; + overflow: hidden; +} +.rd-hero-wash { + position: absolute; + inset: -20% -10% auto -10%; + height: 80%; + background: radial-gradient(50% 50% at 50% 30%, rgba(138,63,252,0.08), rgba(138,63,252,0) 70%); + pointer-events: none; + z-index: 0; +} +.rd-hero-inner { position: relative; z-index: 1; } +.rd-hero-text { max-width: 880px; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } +.rd-hero-h1 { margin-top: 24px; text-align: center; } +.rd-grad { + background: linear-gradient(120deg, #8A3FFC 0%, #5B21B6 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.rd-hero-ctas { + display: flex; + gap: 12px; + justify-content: center; + margin-top: 36px; + flex-wrap: wrap; +} +.rd-hero-meta { + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + margin-top: 28px; + font-family: 'DM Mono', monospace; + font-size: 12.5px; + color: var(--rd-fg-subtle); + flex-wrap: wrap; +} +.rd-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--rd-dot); } + +/* Hero visual */ +.rd-hero-visual { margin-top: 48px; position: relative; } +.rd-hero-frame { + position: relative; + border-radius: 20px; + overflow: visible; + background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FE 100%); + box-shadow: 0 2px 4px rgba(15,19,35,0.04), 0 24px 48px rgba(91,33,182,0.10), 0 48px 96px rgba(15,19,35,0.08); + border: 1px solid var(--rd-border); +} +.rd-browser { border-radius: 20px; overflow: hidden; } +.dark .rd-browser img { filter: invert(0.88) hue-rotate(180deg); } +.rd-browser-bar { + height: 38px; + background: var(--rd-tint); + border-bottom: 1px solid var(--rd-rule); + display: flex; + align-items: center; + padding: 0 14px; + gap: 8px; +} +.rd-dots { display: flex; gap: 6px; } +.rd-dots i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; background: var(--rd-dot); } +.rd-url { + flex: 1; + text-align: center; + font-family: 'DM Mono', monospace; + font-size: 11.5px; + color: var(--rd-fg-subtle); + background: var(--rd-card-bg); + padding: 5px 12px; + border-radius: 999px; + border: 1px solid var(--rd-rule); + max-width: 320px; + margin: 0 auto; +} + +/* Floating chips */ +.rd-float-chip { + position: absolute; + background: var(--rd-card-bg); + border: 1px solid var(--rd-border); + border-radius: 14px; + padding: 12px 14px; + box-shadow: 0 1px 2px var(--rd-card-shadow), 0 4px 12px var(--rd-card-shadow); + display: flex; + align-items: center; + gap: 10px; + font-size: 13.5px; + z-index: 2; +} +.rd-chip-icon { + width: 32px; height: 32px; + border-radius: 8px; + display: grid; place-items: center; + flex-shrink: 0; +} +.rd-chip-label { font-family: 'Figtree'; font-weight: 500; color: var(--rd-fg); } +.rd-chip-sub { font-size: 11.5px; color: var(--rd-fg-subtle); margin-top: 1px; } +.rd-float-l { left: -24px; top: 30%; } +.rd-float-r { right: -24px; top: 18%; } +.rd-float-b { right: 8%; bottom: -22px; } +.rd-float-b2 { left: 8%; bottom: -22px; } +.rd-float-t { right: -24px; top: 50%; } + +/* ---- Logo strip ---- */ +.rd-logo-strip { + padding: 56px 0; + border-top: 1px solid var(--rd-rule); + border-bottom: 1px solid var(--rd-rule); +} +.rd-logo-label { + text-align: center; + font-family: 'DM Mono', monospace; + font-size: 12px; + color: var(--rd-fg-subtle); + letter-spacing: 0.06em; + margin-bottom: 28px; +} +.rd-logo-row { + display: flex; + align-items: center; + justify-content: space-around; + gap: 32px; + flex-wrap: wrap; + filter: grayscale(1); + opacity: 0.65; +} +.rd-logo-text { + font-family: 'Figtree'; + font-weight: 600; + font-size: 18px; + color: var(--rd-fg-muted); + letter-spacing: -0.01em; +} + +/* ---- Quick Start ---- */ +.rd-quickstart { + margin-top: 36px; + max-width: 720px; + margin-left: auto; + margin-right: auto; +} +.rd-qs-terminal { + border-radius: 16px; + overflow: hidden; + background: #1A1D2E; + box-shadow: 0 2px 4px rgba(15,19,35,0.06), 0 16px 40px rgba(15,19,35,0.14); +} +.rd-qs-bar { + display: flex; + align-items: center; + gap: 12px; + padding: 0 16px; + height: 44px; + background: #151927; + border-bottom: 1px solid rgba(255,255,255,0.06); +} +.rd-qs-dots { + display: flex; + gap: 6px; + margin-right: 4px; +} +.rd-qs-dots i { + width: 10px; + height: 10px; + border-radius: 999px; + display: inline-block; +} +.rd-qs-dots i:nth-child(1) { background: #FF5F56; } +.rd-qs-dots i:nth-child(2) { background: #FFBD2E; } +.rd-qs-dots i:nth-child(3) { background: #27C93F; } +.rd-qs-tabs { + display: flex; + gap: 2px; +} +.rd-qs-tab { + padding: 6px 16px; + border-radius: 8px; + border: 1px solid transparent; + background: transparent; + color: rgba(255,255,255,0.45); + font-family: 'DM Mono', monospace; + font-size: 13px; + cursor: pointer; + transition: all 150ms; +} +.rd-qs-tab:hover { + color: rgba(255,255,255,0.7); +} +.rd-qs-tab.active { + background: rgba(138,63,252,0.15); + border-color: rgba(138,63,252,0.4); + color: #C4A1FF; +} +.rd-qs-copy { + margin-left: auto; + background: transparent; + border: none; + color: rgba(255,255,255,0.35); + cursor: pointer; + padding: 4px; + border-radius: 6px; + transition: all 150ms; + display: flex; + align-items: center; + justify-content: center; +} +.rd-qs-copy:hover { + color: rgba(255,255,255,0.7); + background: rgba(255,255,255,0.06); +} +.rd-qs-body { + padding: 28px 24px; + min-height: 60px; + display: flex; + align-items: center; +} +.rd-qs-body code { + font-family: 'DM Mono', monospace; + font-size: 14px; + line-height: 1.6; + color: rgba(255,255,255,0.85); + word-break: break-all; +} +.rd-qs-prompt { + color: #27C93F; + margin-right: 10px; + user-select: none; +} +.rd-qs-requires { + margin-top: 14px; + font-family: 'DM Mono', monospace; + font-size: 12.5px; + color: var(--rd-fg-subtle); + text-align: center; +} +.rd-qs-requires strong { + color: var(--rd-fg-muted); + font-weight: 500; +} +.rd-qs-requires a { + color: var(--rd-accent); + text-decoration: none; + transition: color 150ms; +} +.rd-qs-requires a:hover { + color: var(--rd-accent); + text-decoration: underline; +} + +/* ---- Why kagent ---- */ +.rd-why { padding: 120px 0; } +.rd-value-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} +.rd-value-card { + background: var(--rd-card-bg); + border: 1px solid var(--rd-rule); + border-radius: 18px; + padding: 32px; + transition: all 240ms cubic-bezier(.2,.6,.2,1); +} +.rd-value-card:hover { + border-color: var(--rd-border); + transform: translateY(-2px); + box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); +} +.rd-v-icon { + width: 44px; height: 44px; + border-radius: 11px; + background: var(--rd-tint-strong); + color: var(--rd-accent); + display: grid; place-items: center; + margin-bottom: 24px; +} +.rd-value-card h3 { margin-bottom: 10px; } +.rd-value-card p { font-size: 15px; line-height: 1.55; } + +/* ---- How it works ---- */ +.rd-how { + padding: 120px 0; + background: var(--rd-surface); + border-top: 1px solid var(--rd-rule); + border-bottom: 1px solid var(--rd-rule); +} +.rd-how-grid { + display: grid; + grid-template-columns: 380px 1fr; + gap: 64px; + align-items: start; +} +.rd-how-steps { display: flex; flex-direction: column; gap: 4px; } +.rd-how-step { + display: flex; + gap: 16px; + padding: 18px 18px 18px 14px; + border-radius: 14px; + cursor: pointer; + transition: all 200ms; + border: 1px solid transparent; + background: none; + text-align: left; + width: 100%; + font-family: inherit; + font-size: inherit; + color: inherit; +} +.rd-how-step:hover { background: rgba(255,255,255,0.6); } +.rd-how-step.active { + background: var(--rd-card-bg); + border-color: var(--rd-border); + box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); +} +.rd-how-num { + flex-shrink: 0; + width: 28px; height: 28px; + border-radius: 999px; + background: var(--rd-tint-strong); + color: var(--rd-accent); + display: grid; place-items: center; + font-family: 'DM Mono'; + font-size: 12px; + font-weight: 500; + margin-top: 2px; +} +.rd-how-step.active .rd-how-num { background: var(--rd-accent); color: #fff; } +.rd-how-step h4 { margin-bottom: 4px; font-family: 'Figtree', sans-serif; font-weight: 500; color: var(--rd-fg); } +.rd-how-step p { font-size: 14px; color: var(--rd-fg-subtle); line-height: 1.5; } +.rd-how-step.active p { color: var(--rd-fg-muted); } +.rd-how-diagram { + background: var(--rd-card-bg); + border: 1px solid var(--rd-rule); + border-radius: 20px; + padding: 48px 32px; + min-height: 420px; + display: grid; + place-items: center; + box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); +} + +/* ---- Use cases ---- */ +.rd-usecases { padding: 120px 0; } +.rd-uc-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} +.rd-uc-card { + background: var(--rd-card-bg); + border: 1px solid var(--rd-rule); + border-radius: 20px; + padding: 36px; + transition: all 240ms cubic-bezier(.2,.6,.2,1); + display: flex; + flex-direction: column; + min-height: 280px; +} +.rd-uc-card:hover { + border-color: var(--rd-border); + box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); + transform: translateY(-2px); +} +.rd-uc-icon { + width: 40px; height: 40px; + border-radius: 10px; + background: var(--rd-tint-strong); + color: var(--rd-accent); + display: grid; place-items: center; + margin-bottom: 20px; +} +.rd-uc-card h3 { margin-bottom: 10px; } +.rd-uc-card p { font-size: 15px; flex: 1; } +.rd-uc-link { + margin-top: 20px; + font-family: 'Figtree'; + font-weight: 500; + font-size: 14px; + color: var(--rd-accent); + display: inline-flex; + align-items: center; + gap: 6px; +} +.rd-uc-card:hover .rd-uc-link svg { transform: translateX(3px); } +.rd-uc-link svg { transition: transform 200ms; } + +/* ---- Standards ---- */ +.rd-standards { padding: 120px 0; background: var(--rd-surface-alt); } +.rd-std-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} +.rd-std-card { + background: var(--rd-card-bg); + border: 1px solid var(--rd-rule); + border-radius: 16px; + padding: 28px 24px; + text-align: center; + transition: all 240ms; +} +.rd-std-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); } +.rd-std-mark { + width: 56px; height: 56px; + border-radius: 14px; + margin: 0 auto 16px; + display: grid; place-items: center; + font-family: 'Figtree'; + font-weight: 600; + font-size: 14px; + color: #fff; +} +.rd-std-card h4 { font-size: 16px; margin-bottom: 6px; font-family: 'Figtree', sans-serif; font-weight: 500; color: var(--rd-fg); } +.rd-std-card p { font-size: 13.5px; color: var(--rd-fg-subtle); line-height: 1.5; } + +/* ---- Editions ---- */ +.rd-editions { padding: 120px 0; } +.rd-ed-grid { + display: flex; + justify-content: center; + gap: 20px; +} +.rd-ed-card { + border-radius: 24px; + padding: 40px; + position: relative; + overflow: hidden; +} +.rd-ed-os { + background: var(--rd-card-bg); + border: 1px solid var(--rd-border); +} +.rd-ed-ent { + background: linear-gradient(150deg, #1a1029 0%, #2D1850 60%, #4C1D95 100%); + color: #fff; + border: 1px solid #2D1850; +} +.rd-ed-ent::before { + content: ''; + position: absolute; + top: -50%; right: -30%; + width: 600px; height: 600px; + background: radial-gradient(50% 50% at 50% 50%, rgba(138,63,252,0.35), rgba(138,63,252,0) 70%); + pointer-events: none; +} +.rd-ed-tag { + font-family: 'DM Mono', monospace; + font-size: 11.5px; + letter-spacing: 0.06em; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + border-radius: 999px; + background: var(--rd-surface); + color: var(--rd-fg-subtle); + margin-bottom: 24px; +} +.rd-ed-ent .rd-ed-tag { + background: rgba(255,255,255,0.08); + color: #C8A8FF; + border: 1px solid rgba(255,255,255,0.1); +} +.rd-ed-ent h3 { color: #fff !important; font-size: 28px; } +.rd-ed-os h3 { font-size: 28px; } +.rd-ed-sub { margin-top: 10px; max-width: 380px; } +.rd-ed-ent .rd-ed-sub { color: rgba(255,255,255,0.75); } +.rd-ed-list { + margin-top: 28px; + display: flex; + flex-direction: column; + gap: 12px; + position: relative; + z-index: 1; + list-style: none; + padding: 0; +} +.rd-ed-list li { + display: flex; + align-items: flex-start; + gap: 10px; + font-size: 14.5px; + color: var(--rd-fg-muted); +} +.rd-ed-ent .rd-ed-list li { color: rgba(255,255,255,0.85); } +.rd-ed-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--rd-accent); } +.rd-ed-ent .rd-ed-list li svg { color: #B388FF; } +.rd-ed-cta { margin-top: 36px; position: relative; z-index: 1; } + +/* ---- Community ---- */ +/* ---- Adopters ---- */ +.rd-adopters { padding: 100px 0; background: #151927; } +.rd-adopters-track { + overflow: hidden; + mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); + -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); + margin: 0 auto; +} +.rd-adopters-scroll { + display: flex; + gap: 16px; + width: max-content; + will-change: transform; + animation: marqueeScroll 30s linear infinite; +} +.rd-adopters-scroll:hover { + animation-play-state: paused; +} +.rd-adopter-item { + display: flex; + align-items: center; + justify-content: center; + padding: 16px 32px; + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 14px; + flex-shrink: 0; + transition: box-shadow 200ms, border-color 200ms, transform 200ms, background 200ms; + opacity: 0.75; +} +.rd-adopter-item img { filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 200ms; } +.rd-adopter-item:hover img { opacity: 1; } +.rd-adopter-item:hover { + box-shadow: 0 4px 20px rgba(138,63,252,0.15); + border-color: rgba(138,63,252,0.3); + background: rgba(255,255,255,0.1); + transform: translateY(-2px); + opacity: 1; +} +.rd-adopters .rd-section-head h2 { color: #fff; } +.rd-adopters .rd-section-head p { color: rgba(255,255,255,0.5); } +.rd-adopters .rd-eyebrow { color: #C4A1FF; } +.rd-adopters .rd-eyebrow::before { background: #C4A1FF; } +.rd-adopters-add { + text-align: center; + margin-top: 32px; +} +.rd-adopters-add a { + font-family: 'DM Mono', monospace; + font-size: 13px; + color: #C4A1FF; + text-decoration: underline; + text-underline-offset: 3px; + transition: color 150ms; +} +.rd-adopters-add a:hover { + color: #fff; +} + +/* ---- Community ---- */ +.rd-community { padding: 120px 0; background: var(--rd-surface); border-top: 1px solid var(--rd-rule); } +.rd-comm-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} +.rd-comm-card { + background: var(--rd-card-bg); + border: 1px solid var(--rd-rule); + border-radius: 18px; + padding: 32px; + transition: all 240ms; +} +.rd-comm-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); border-color: var(--rd-border); } +.rd-c-icon { + width: 48px; height: 48px; + border-radius: 12px; + background: var(--rd-tint-strong); + color: var(--rd-accent); + display: grid; place-items: center; + margin-bottom: 20px; +} +.rd-stat { + font-family: 'Figtree'; + font-size: 36px; + font-weight: 500; + color: var(--rd-fg); + letter-spacing: -0.02em; + line-height: 1; +} +.rd-stat-l { + font-family: 'DM Mono'; + font-size: 12px; + color: var(--rd-fg-subtle); + margin-top: 6px; + letter-spacing: 0.04em; +} +.rd-comm-card h4 { margin-top: 16px; margin-bottom: 6px; font-family: 'Figtree', sans-serif; font-weight: 500; color: var(--rd-fg); } +.rd-comm-card p { font-size: 14px; color: var(--rd-fg-subtle); line-height: 1.5; } +.rd-c-link { + margin-top: 18px; + display: inline-flex; + align-items: center; + gap: 6px; + font-family: 'Figtree'; + font-weight: 500; + font-size: 14px; + color: var(--rd-accent); +} + +/* ---- CTA band ---- */ +.rd-cta-band { padding: 120px 0; } +.rd-cta-card { + background: linear-gradient(150deg, #0F0820 0%, #2D1850 50%, #5B21B6 100%); + border-radius: 28px; + padding: 80px 60px; + text-align: center; + color: #fff; + position: relative; + overflow: hidden; +} +.rd-cta-card::before, .rd-cta-card::after { + content: ''; + position: absolute; + border-radius: 50%; + pointer-events: none; +} +.rd-cta-card::before { + width: 600px; height: 600px; + top: -200px; left: -200px; + background: radial-gradient(50% 50% at 50% 50%, rgba(138,63,252,0.5), rgba(138,63,252,0) 70%); +} +.rd-cta-card::after { + width: 500px; height: 500px; + bottom: -150px; right: -100px; + background: radial-gradient(50% 50% at 50% 50%, rgba(32,183,243,0.25), rgba(32,183,243,0) 70%); +} +.rd-cta-card > * { position: relative; z-index: 1; } +.rd-cta-card h2 { color: #fff !important; font-size: clamp(32px, 4vw, 52px); } +.rd-cta-card .rd-lead { color: rgba(255,255,255,0.8); } +.rd-cta-card .rd-hero-ctas { margin-top: 36px; } +.rd-cta-card .rd-eyebrow::before { background: #9DD9F8; } + +/* ---- Scroll reveal ---- */ +.rv { + opacity: 0; + transform: translateY(16px); + transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); +} +.rv-in { + opacity: 1; + transform: translateY(0); +} + +/* ---- Responsive ---- */ +@media (max-width: 980px) { + .rd-value-grid, .rd-uc-grid, .rd-comm-grid, .rd-ed-grid, .rd-std-grid { grid-template-columns: 1fr; } + .rd-how-grid { grid-template-columns: 1fr; } + .rd-float-l, .rd-float-r, .rd-float-b2, .rd-float-t { display: none; } + .rd-qs-bar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px; } + .rd-qs-tabs { flex-wrap: wrap; } + .rd-qs-body code { font-size: 12.5px; } + .rd-qs-prereqs { padding: 20px 20px; } +} + +/* ============================================= + New unified Navbar + ============================================= */ +.navbar-new { + position: sticky; + top: 0; + z-index: 50; + background: hsl(var(--background) / 0.95); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid hsl(var(--border)); +} +.navbar-inner { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 80rem; + margin: 0 auto; + padding: 0 20px; + height: 56px; +} +.navbar-logo { + flex-shrink: 0; +} +.navbar-site-links { + display: flex; + align-items: center; + gap: 4px; + margin-left: auto; + margin-right: 24px; +} +.navbar-site-link { + display: flex; + align-items: center; + padding: 6px 12px; + font-family: 'Figtree', sans-serif; + font-size: 13.5px; + font-weight: 500; + color: hsl(var(--muted-foreground)); + text-decoration: none; + border-radius: 6px; + transition: color 0.15s, background 0.15s; +} +.navbar-site-link:hover { + color: hsl(var(--foreground)); + background: hsl(var(--accent)); +} +.navbar-site-link-active { + color: hsl(var(--primary)); + font-weight: 600; +} +.navbar-docs-links { + display: flex; + align-items: center; + gap: 1px; + overflow-x: auto; + scrollbar-width: none; + -webkit-overflow-scrolling: touch; + flex: 1; + min-width: 0; + padding: 0 12px; +} +.navbar-docs-links::-webkit-scrollbar { display: none; } +.navbar-docs-link { + display: flex; + align-items: center; + padding: 5px 8px; + font-family: 'Figtree', sans-serif; + font-size: 12px; + font-weight: 500; + color: hsl(var(--muted-foreground)); + text-decoration: none; + border-radius: 6px; + white-space: nowrap; + transition: color 0.15s, background 0.15s; +} +.navbar-docs-link:hover { + color: hsl(var(--foreground)); + background: hsl(var(--accent)); +} +.navbar-docs-link-active { + color: hsl(var(--primary)); + font-weight: 600; +} +.navbar-right { + display: flex; + align-items: center; + gap: 10px; +} +.navbar-chip { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 4px 10px; + font-family: 'Figtree', sans-serif; + font-size: 12px; + font-weight: 600; + color: hsl(var(--foreground)); + background: hsl(var(--accent)); + border-radius: 99px; + text-decoration: none; + transition: background 0.15s; +} +.navbar-chip:hover { background: hsl(var(--border)); } +.navbar-chip-count { font-variant-numeric: tabular-nums; } +.navbar-version { + display: inline-flex; + align-items: center; + padding: 3px 8px; + font-family: 'DM Mono', monospace; + font-size: 11px; + font-weight: 500; + color: hsl(var(--muted-foreground)); + background: hsl(var(--accent)); + border-radius: 6px; + text-decoration: none; + transition: color 0.15s; +} +.navbar-version:hover { color: hsl(var(--foreground)); } + +/* ============================================= + Docs Section Bar — horizontal tabs at top + ============================================= */ +.docs-section-bar { + position: sticky; + top: 56px; + z-index: 40; + background: hsl(var(--background)); + border-bottom: 1px solid hsl(var(--border)); + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; +} +.docs-section-bar::-webkit-scrollbar { display: none; } +.docs-section-bar-inner { + display: flex; + align-items: center; + justify-content: center; + gap: 2px; + max-width: 80rem; + margin: 0 auto; + padding: 0 16px; +} +.docs-section-tab { + display: flex; + align-items: center; + padding: 10px 14px; + font-family: 'Figtree', sans-serif; + font-size: 13px; + font-weight: 500; + color: hsl(var(--muted-foreground)); + text-decoration: none; + white-space: nowrap; + border-bottom: 2px solid transparent; + transition: color 0.15s, border-color 0.15s; +} +.docs-section-tab:hover { + color: hsl(var(--foreground)); +} +.docs-section-tab-active { + color: hsl(var(--primary)); + border-bottom-color: hsl(var(--primary)); + font-weight: 600; +} + +/* ============================================= + Docs Sidebar — always visible + ============================================= */ +.docs-sidebar { + position: sticky; + top: 98px; + height: calc(100vh - 98px); + overflow-y: auto; + scrollbar-width: thin; +} +.docs-sidebar::-webkit-scrollbar { + width: 4px; +} +.docs-sidebar::-webkit-scrollbar-thumb { + background: hsl(var(--border)); + border-radius: 4px; +} + +/* ============================================= + Platform Capabilities — card boxes + ============================================= */ +.rd-cap-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + margin-top: 40px; +} +.rd-cap-item { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0; + padding: 24px 22px 22px; + background: var(--rd-card-bg); + border: 1px solid var(--rd-rule); + border-radius: 14px; + transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s; +} +.rd-cap-item:hover { + box-shadow: 0 4px 20px rgba(15,19,35,0.07); + border-color: var(--rd-border-hover); + transform: translateY(-2px); +} +.rd-cap-check { + flex-shrink: 0; + width: 42px; + height: 42px; + border-radius: 12px; + background: var(--rd-tint-strong); + color: var(--rd-accent); + display: grid; + place-items: center; + margin-bottom: 16px; +} +.rd-cap-item strong { + display: block; + font-family: 'Figtree', sans-serif; + font-weight: 600; + font-size: 15px; + color: var(--rd-fg); + margin-bottom: 8px; + letter-spacing: -0.01em; +} +.rd-cap-item span { + font-family: 'Figtree', sans-serif; + font-size: 13.5px; + color: var(--rd-fg-subtle); + line-height: 1.55; +} +.dark .rd-cap-item { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.1); +} +.dark .rd-cap-item:hover { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + border-color: rgba(138, 63, 252, 0.4); +} +.dark .rd-cap-check { + background: rgba(138, 63, 252, 0.15); + color: #A78BFA; +} +.dark .rd-cap-item strong { + color: #F0F0F5; +} +.dark .rd-cap-item span { + color: #9CA3AF; +} + +/* ============================================= + Integrations — scrolling icon marquees + ============================================= */ +.rd-marquee-wrap { + margin-top: 48px; + display: flex; + flex-direction: column; + gap: 20px; +} +.rd-marquee-row { + display: flex; + align-items: center; + gap: 20px; + overflow: hidden; +} +.rd-marquee-label { + flex-shrink: 0; + width: 160px; + font-family: 'Figtree', sans-serif; + font-weight: 700; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #9AA0B5; + text-align: right; +} +.rd-marquee-track { + flex: 1; + overflow: hidden; + mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); + -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%); +} +.rd-marquee-scroll { + display: flex; + gap: 12px; + width: max-content; + will-change: transform; +} +.rd-marquee-slow { animation: marqueeScroll 45s linear infinite; } +.rd-marquee-medium { animation: marqueeScroll 35s linear infinite; } +.rd-marquee-fast { animation: marqueeScroll 28s linear infinite; } +.rd-marquee-reverse { animation-direction: reverse; } + +@keyframes marqueeScroll { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +.rd-marquee-item { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + background: var(--rd-card-bg); + border: 1px solid var(--rd-rule); + border-radius: 12px; + white-space: nowrap; + font-family: 'Figtree', sans-serif; + font-weight: 500; + font-size: 13.5px; + color: var(--rd-fg); + transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; + flex-shrink: 0; +} +.rd-marquee-item:hover { + box-shadow: 0 4px 16px rgba(15,19,35,0.08); + border-color: var(--rd-border-hover); + transform: translateY(-1px); +} +.rd-marquee-icon { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 8px; + background: var(--rd-tint-subtle); + flex-shrink: 0; +} +.rd-marquee-scroll:hover { + animation-play-state: paused; +} + +@media (max-width: 980px) { + .rd-marquee-row { flex-direction: column; align-items: flex-start; gap: 8px; } + .rd-marquee-label { width: auto; text-align: left; } +} + +/* ============================================= + OSS vs Enterprise Comparison Table + ============================================= */ +.rd-compare-table-wrap { + margin-top: 40px; + overflow-x: auto; + border: 1px solid var(--rd-rule); + border-radius: 16px; + background: var(--rd-card-bg); +} +.rd-compare-table { + width: 100%; + border-collapse: collapse; + font-family: 'Figtree', sans-serif; + font-size: 14px; +} +.rd-compare-table thead th { + text-align: left; + padding: 16px 20px; + font-family: 'Figtree', sans-serif; + font-weight: 700; + font-size: 13px; + color: var(--rd-fg); + background: var(--rd-surface); + border-bottom: 2px solid var(--rd-rule); + text-transform: uppercase; + letter-spacing: 0.04em; +} +.rd-compare-table thead th:nth-child(2), +.rd-compare-table thead th:nth-child(3) { + text-align: center; + width: 130px; +} +.rd-compare-table tbody td { + padding: 12px 20px; + border-bottom: 1px solid var(--rd-rule); + color: var(--rd-fg-muted); +} +.rd-compare-table tbody tr:last-child td { + border-bottom: none; +} +.rd-compare-table tbody tr:hover { + background: var(--rd-surface); +} +.rd-compare-check { + text-align: center !important; +} +.rd-compare-dash { + color: #D0CED9; + font-size: 18px; + font-weight: 300; +} + +/* ---- Responsive for new sections ---- */ +@media (max-width: 1200px) { + .rd-cap-grid { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 980px) { + .rd-cap-grid { grid-template-columns: repeat(2, 1fr); } +} +@media (max-width: 600px) { + .rd-cap-grid { grid-template-columns: 1fr; } +} + diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 76cc44e1..26c76db4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -17,9 +17,24 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( + + + + +
+ $ {INSTALL_TABS[tab].cmd}
+
+ Agentic AI Framework
-+ kagent runs your agents where your workloads already live — on Kubernetes. + Deploy, observe, and govern AI agents with the tools your platform team + already trusts. Open source. Production grade. Built by the founders of Istio. +
+- An open-source framework for running AI agents in Kubernetes, automating complex DevOps operations and troubleshooting tasks with intelligent workflows. -
-MCP Kubernetes toolkit
-- The easiest way to create, deploy, and securely run MCP servers on Kubernetes — from development to production scale. -
-You already know how to run things on Kubernetes — pods, services, RBAC, observability, GitOps. kagent makes agents another first-class workload, not a new platform to learn.
+{body}
+Every feature works with a single helm install. No add-ons, no extra databases, no waiting for enterprise.
Multi-LLM, multi-framework, multi-tool. No lock-in at any layer of the stack.
+From day-zero installs to platform-wide rollouts, kagent powers the agent surface area inside platform engineering organizations.
+{body}
+- Whether you're a platform engineer, DevOps professional, or CNCF project maintainer, help us build and shape the future of AI-driven cloud-native operations. -
-kagent doesn't reinvent the wheel. It composes the protocols that the agent ecosystem is converging on — so you can swap models, frameworks, and tools without rewriting your agents.
Connect any tool — REST, gRPC, databases, internal APIs — through a single declarative spec.
+Compose multi-agent systems with first-class delegation, hand-off, and shared memory.
+Every prompt, tool call, and token emits OTel traces — the same pipeline as the rest of your stack.
+Agents, sessions, and tools as CRDs. GitOps, RBAC, and admission controllers come for free.
kagent is a CNCF Sandbox project. Roadmap is public. PRs are welcome. The maintainers hang out in Discord and answer in hours, not days.
+Apache 2.0. Public roadmap, public RFCs, public weekly community calls.
+ github.com/kagent-dev → +Maintainers and operators sharing patterns, debugging clusters, shipping integrations together.
+ Join Discord → +From individual operators to teams at hyperscalers. Weekly releases, monthly community demos.
+ See contributors → +One Helm chart. One CRD. One namespace. You'll be looking at agent traces before your coffee gets cold.
+- Kagent fully supports the MCP protocol, which allows you to use tools from any MCP server. The list of tools below is a collection of built-in tools that are MCP-enabled and can be used with Kagent out of the box. -
- -+ Kagent fully supports the MCP protocol, which allows you to use tools from any MCP server. The list of tools below is a collection of built-in tools that are MCP-enabled and can be used with Kagent out of the box. +
+ +You can build and contribute your own tools to the kagent tool registry or bring your own tools from other MCP servers.
- -You can build and contribute your own tools to the kagent tool registry or bring your own tools from other MCP servers.
+