You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2026/09/14 07:05:04 UTC
(skywalking-website) branch master updated: Redesign homepage around cloud-native and AI observability (#929)
This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new 919cc586727d Redesign homepage around cloud-native and AI observability (#929)
919cc586727d is described below
commit 919cc586727ddbc5b806a00dff1f5aff1cd0c8b0
Author: 吴晟 Wu Sheng <wu...@foxmail.com>
AuthorDate: Mon Sep 14 15:04:58 2026 +0800
Redesign homepage around cloud-native and AI observability (#929)
---
assets/js/home-observability.js | 166 +++++++
assets/scss/_custom_home.scss | 604 +++++++++---------------
assets/scss/_home_platform.scss | 82 ++++
assets/scss/_home_workflow.scss | 57 +++
content/_index.html | 427 ++++++-----------
layouts/partials/map3d.html | 4 +-
layouts/shortcodes/home-agent-workflow.html | 68 +++
layouts/shortcodes/home-platform.html | 93 ++++
themes/docsy/layouts/partials/scripts-home.html | 4 +
9 files changed, 829 insertions(+), 676 deletions(-)
diff --git a/assets/js/home-observability.js b/assets/js/home-observability.js
new file mode 100644
index 000000000000..3dcd664899a1
--- /dev/null
+++ b/assets/js/home-observability.js
@@ -0,0 +1,166 @@
+(function () {
+ 'use strict';
+
+ document.querySelectorAll('[data-home-gallery]').forEach(function (gallery) {
+ var tablist = gallery.querySelector('[data-home-gallery-tabs]');
+ if (!tablist) { return; }
+ var panels = Array.prototype.slice.call(gallery.querySelectorAll('[data-home-gallery-panel]'));
+ var tabs = Array.prototype.slice.call(tablist.querySelectorAll('[data-home-gallery-tab]'));
+ var entries = tabs.map(function (tab) {
+ var target = tab.getAttribute('data-home-gallery-tab') || tab.getAttribute('aria-controls');
+ return {tab: tab, panel: panels.find(function (panel) { return panel.id === target; })};
+ });
+ // Keep the default screenshot if the gallery markup is incomplete.
+ if (!entries.length || entries.some(function (entry) { return !entry.panel; })) { return; }
+
+ function selectTab(selected) {
+ entries.forEach(function (entry) {
+ var active = entry === selected;
+ entry.tab.setAttribute('aria-selected', String(active));
+ entry.tab.tabIndex = active ? 0 : -1;
+ entry.panel.hidden = !active;
+ });
+ }
+
+ entries.forEach(function (entry, index) {
+ entry.tab.setAttribute('role', 'tab');
+ entry.tab.setAttribute('aria-controls', entry.panel.id);
+ entry.panel.setAttribute('role', 'tabpanel');
+ entry.panel.setAttribute('aria-labelledby', entry.tab.id);
+ entry.tab.addEventListener('click', function () { selectTab(entry); });
+ entry.tab.addEventListener('keydown', function (event) {
+ var next;
+ if (event.key === 'ArrowRight') { next = entries[(index + 1) % entries.length]; }
+ if (event.key === 'ArrowLeft') { next = entries[(index - 1 + entries.length) % entries.length]; }
+ if (event.key === 'Home') { next = entries[0]; }
+ if (event.key === 'End') { next = entries[entries.length - 1]; }
+ if (!next) { return; }
+ event.preventDefault();
+ selectTab(next);
+ next.tab.focus();
+ });
+ });
+ selectTab(entries.find(function (entry) { return !entry.panel.hidden; }) || entries[0]);
+ tablist.setAttribute('role', 'tablist');
+ tablist.hidden = false;
+ });
+
+ // Retain the documentation links in browsers without native modal dialogs.
+ if (!window.HTMLDialogElement || !HTMLDialogElement.prototype.showModal) { return; }
+
+ var activePreview = null;
+
+ function lockPage() {
+ var body = document.body;
+ var root = document.documentElement;
+ var state = {
+ x: window.scrollX,
+ y: window.scrollY,
+ bodyStyle: body.getAttribute('style'),
+ rootStyle: root.getAttribute('style')
+ };
+ var scrollbarWidth = window.innerWidth - root.clientWidth;
+ var bodyPadding = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+
+ root.style.overflow = 'hidden';
+ body.style.position = 'fixed';
+ body.style.top = -state.y + 'px';
+ body.style.left = -state.x + 'px';
+ body.style.width = '100%';
+ body.style.overflow = 'hidden';
+ if (scrollbarWidth > 0) {
+ body.style.paddingRight = bodyPadding + scrollbarWidth + 'px';
+ }
+ return state;
+ }
+
+ function restorePage(state) {
+ var body = document.body;
+ var root = document.documentElement;
+ if (state.bodyStyle === null) { body.removeAttribute('style'); }
+ else { body.setAttribute('style', state.bodyStyle); }
+ // Restore the scroll position without the site's smooth-scroll behavior.
+ root.style.scrollBehavior = 'auto';
+ window.scrollTo(state.x, state.y);
+ if (state.rootStyle === null) { root.removeAttribute('style'); }
+ else { root.setAttribute('style', state.rootStyle); }
+ }
+
+ function outsideDialog(dialog, event) {
+ var bounds = dialog.getBoundingClientRect();
+ return event.clientX < bounds.left || event.clientX > bounds.right ||
+ event.clientY < bounds.top || event.clientY > bounds.bottom;
+ }
+
+ document.querySelectorAll('[data-home-preview]').forEach(function (trigger) {
+ var dialog = document.getElementById(trigger.getAttribute('data-home-preview'));
+ if (!dialog || dialog.tagName !== 'DIALOG') { return; }
+ var closeButton = dialog.querySelector('[data-home-preview-close]');
+ if (!closeButton) { return; }
+ var backdropPointerDown = false;
+
+ function openPreview() {
+ if (activePreview) { return; }
+ var state = lockPage();
+ try {
+ dialog.showModal();
+ } catch (error) {
+ restorePage(state);
+ return;
+ }
+ activePreview = {dialog: dialog, trigger: trigger, state: state};
+ closeButton.focus({preventScroll: true});
+ }
+
+ trigger.setAttribute('role', 'button');
+ trigger.setAttribute('aria-haspopup', 'dialog');
+ trigger.setAttribute('aria-controls', dialog.id);
+ trigger.addEventListener('click', function (event) {
+ // Keep the underlying documentation destination available in a new tab.
+ if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { return; }
+ event.preventDefault();
+ openPreview();
+ });
+ trigger.addEventListener('keydown', function (event) {
+ if (event.key !== ' ' || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { return; }
+ event.preventDefault();
+ openPreview();
+ });
+
+ closeButton.addEventListener('click', function () { dialog.close(); });
+ dialog.addEventListener('keydown', function (event) {
+ if (event.key !== 'Tab' || event.metaKey || event.ctrlKey || event.altKey) { return; }
+ var controls = Array.prototype.slice.call(dialog.querySelectorAll(
+ 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+ )).filter(function (control) {
+ return control.getClientRects().length > 0 && control.getAttribute('aria-hidden') !== 'true' &&
+ window.getComputedStyle(control).visibility !== 'hidden';
+ });
+ if (!controls.length) { return; }
+ // Keep every dialog action reachable, including with Safari's default
+ // setting that otherwise skips links when navigating with Tab.
+ var current = controls.indexOf(document.activeElement);
+ var next = current < 0 ? (event.shiftKey ? controls.length - 1 : 0) :
+ (current + (event.shiftKey ? -1 : 1) + controls.length) % controls.length;
+ event.preventDefault();
+ controls[next].focus();
+ });
+ dialog.addEventListener('pointerdown', function (event) {
+ backdropPointerDown = event.target === dialog && outsideDialog(dialog, event);
+ });
+ dialog.addEventListener('pointercancel', function () { backdropPointerDown = false; });
+ dialog.addEventListener('click', function (event) {
+ var dismiss = backdropPointerDown && event.target === dialog && outsideDialog(dialog, event);
+ backdropPointerDown = false;
+ if (dismiss) { dialog.close(); }
+ });
+ dialog.addEventListener('close', function () {
+ backdropPointerDown = false;
+ if (!activePreview || activePreview.dialog !== dialog) { return; }
+ var preview = activePreview;
+ activePreview = null;
+ restorePage(preview.state);
+ preview.trigger.focus({preventScroll: true});
+ });
+ });
+}());
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index 8fa9114a0a2d..76bd469c345e 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -80,361 +80,103 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
.home-section { padding: 72px 0; }
- // ---------- HERO (text + topology shot, one viewport) ----------
- // Override the theme's 8rem top padding on the first section and
- // size the hero to fill the viewport below the fixed 64px navbar.
- main section.home-hero { padding-top: calc(4rem + 18px); }
+ // ---------- HERO: cloud-native and AI, with equal product panels ----------
+ main section.home-hero { padding-top: calc(4rem + 36px); }
.home-hero {
position: relative; z-index: 1;
- padding: calc(4rem + 18px) 0 28px;
- min-height: 100vh;
- box-sizing: border-box;
- display: flex; flex-direction: column; justify-content: center;
- background: transparent; // reveals the fixed canyon backdrop on .td-home
- > .container { position: relative; z-index: 1; }
- }
- // everything after the hero rides on a solid surface, but its top edge
- // FADES from transparent into white so the fixed canyon transitions
- // smoothly into the content instead of a hard white edge while scrolling.
- .home-below {
- position: relative; z-index: 1;
- background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 180px);
+ padding-bottom: 42px;
+ > .container { position: relative; max-width: 1360px; padding-left: 24px; padding-right: 24px; }
+ [hidden] { display: none !important; }
+ a:focus-visible, button:focus-visible { outline: 2px solid #2875b9; outline-offset: 4px; }
}
-
- // footer rides above the fixed backdrop too (theme footer is opaque)
+ .home-below { position: relative; z-index: 1; background: #fff; }
footer { position: relative; z-index: 1; }
-
- // ASF oak-leaf "seal" — sits where the eyebrow used to, top-left of the hero
- .hero-seal {
- position: relative; display: block; z-index: 1;
- width: 92px; height: 92px; flex: 0 0 92px;
- // 50% larger visually, without changing layout footprint; grows DOWN from
- // its top edge so it clears the fixed navbar and can overlap the headline.
- transform: rotate(-7deg) scale(1.5);
- transform-origin: left top;
- margin-top: 6px;
- color: $muted; opacity: .72;
- transition: opacity .15s ease, transform .15s ease;
- &:hover { opacity: 1; transform: rotate(-7deg) scale(1.55); }
- svg { width: 100%; height: 100%; display: block; }
- .seal-ring { fill: none; stroke: currentColor; stroke-width: 2; }
- .seal-ring--thin { stroke-width: 1; }
- .seal-text {
- fill: currentColor;
- font-family: $font-family-base;
- font-size: 9px; font-weight: 600; letter-spacing: 1.4px;
- }
- // leaf sits inside the inner ring (r70 → ~140 dia in a 200 viewBox)
- .hero-seal-leaf {
- position: absolute; top: 50%; left: 50%;
- width: 30px; transform: translate(-50%, -50%);
- filter: grayscale(1); opacity: .9;
- }
- }
- .hero-top {
- display: flex; align-items: center; justify-content: space-between;
- gap: 24px; flex-wrap: wrap;
- margin-bottom: 26px;
- }
- .home-hero-grid {
- display: grid;
- grid-template-columns: 0.92fr 1.08fr;
- gap: 48px;
- align-items: center;
- }
- .hero-eyebrow {
- display: inline-flex; align-items: center; gap: 8px;
- padding: 6px 13px;
- border: 1px solid #d6e4f5;
- background: #eef5fd;
- color: #2c6cb0;
- border-radius: 999px;
- font-size: 13px; font-weight: 600;
- text-decoration: none;
- .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
- &:hover { background: #e3eefb; }
- }
.home-hero-text {
- text-align: left;
- position: relative; z-index: 2; // headline can overlap the (larger) seal
- h1 {
- font-size: 46px; line-height: 1.1; font-weight: 800; color: $ink;
- letter-spacing: -1.1px; margin: 0 0 16px; border: 0; padding: 0;
- .accent {
- // Keeps "cloud-native and AI" whole. Left to wrap it either strands
- // "and AI" alone or, under text-wrap: balance, splits "cloud-native"
- // at the hyphen.
- white-space: nowrap;
- background: linear-gradient(120deg, #3788D0, #E7136C 120%);
- -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
- }
- }
- .lead {
- font-size: 16px; line-height: 1.6; color: $body; margin: 0; max-width: 520px;
- .lead-brand { font-weight: 700; color: $ink; }
- }
- }
- .hero-cta {
- display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px;
- }
- .github-pill {
- display: inline-flex; align-items: center; gap: 7px;
- height: 46px; padding: 0 18px;
- border: 1px solid #DADDE0; border-radius: 8px;
- color: $ink; font-size: 15px; text-decoration: none; background: #fff;
- &:hover { box-shadow: 0 6px 18px rgba(17,24,39,.10); }
- .icon-github { font-size: 17px; }
- }
- .hero-stats {
- display: flex; gap: 36px; margin: 0; padding: 0; align-items: flex-start;
- li { display: flex; flex-direction: column; text-align: right; }
- li a { display: flex; flex-direction: column; text-decoration: none; }
- strong {
- font-family: $font-family-base;
- font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
- background: linear-gradient(120deg, #3788D0 10%, #E7136C 120%);
- -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
- font-feature-settings: "tnum";
- }
- span { font-size: 11.5px; color: $muted; margin-top: 5px; letter-spacing: .02em; }
- }
-
- // ---------- CAPABILITIES ----------
- .cap-grid {
- // Five pillars plus the CTA tile fill 3x2 exactly, leaving no orphan card.
- display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
- }
- .cap-card {
- display: flex; flex-direction: column; // so "Learn more" bottom-aligns across cards
- background: #fff;
- border: 1px solid $line;
- border-radius: 12px;
- padding: 24px 22px;
- transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
- &:hover { box-shadow: 0 16px 40px -18px rgba(17,24,39,.30); transform: translateY(-3px); border-color: #d6e4f5; }
- h3 { font-size: 18px; font-weight: 700; color: $ink; margin: 16px 0 8px; border: 0; padding: 0; line-height: 1.3; }
- p { font-size: 14px; color: $body; line-height: 1.6; margin: 0 0 16px; flex: 1; }
- a { font-size: 14px; font-weight: 600; color: $brand; text-decoration: none; margin-top: auto; &:hover { text-decoration: underline; } }
- }
- .cap-tag {
- // .cap-card is a column flexbox, which blockifies inline-block children and
- // stretches them to the full card width — the pill has to opt out.
- display: inline-block; align-self: flex-start;
- padding: 4px 11px; border-radius: 999px;
- font-size: 12px; font-weight: 700; letter-spacing: .04em;
- &.tracing { background: #fdecde; color: #c2580d; }
- &.metrics { background: #e2f1fd; color: #1d6fb8; }
- &.logging { background: #f0e7fd; color: #7c3aed; }
- &.profiling { background: #def5e7; color: #11814b; }
- &.genai { background: #fde8f3; color: #be2069; } // data/blog_topics.yml
- }
- // Dashed and tinted so it reads as a link, not a sixth capability.
- .cap-card--cta {
- text-decoration: none;
- border-style: dashed;
- border-color: #c9d9ee;
- background: linear-gradient(180deg, #f7faff 0%, #fff 75%);
- &:hover { border-color: $brand; text-decoration: none; }
- .cap-cta-eyebrow {
- font-size: 12px; font-weight: 700; letter-spacing: .12em;
- text-transform: uppercase; color: $muted;
- }
- h3 { margin-top: 16px; }
- .cap-cta-more {
- font-size: 14px; font-weight: 600; color: $brand; margin-top: auto;
- }
- }
-
- // ---------- HERO MAIN SHOT (topology) ----------
- .hero-shot {
- position: relative;
- margin: 0;
- border-radius: 14px;
- border: 1px solid $line;
- background: #0f131a;
- overflow: hidden;
- box-shadow: 0 26px 60px -24px rgba(17, 24, 39, .45);
- img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: left top; }
- }
- .shot-bar {
- display: flex; align-items: center; gap: 6px;
- height: 34px; padding: 0 14px;
- background: #141923; border-bottom: 1px solid #232a37;
- i { width: 10px; height: 10px; border-radius: 50%; background: #3a4456; }
- i:nth-child(1){ background:#ef4444; } i:nth-child(2){ background:#eab308; } i:nth-child(3){ background:#22c55e; }
- em { margin-left: 10px; font-style: normal; font-size: 12px; color: #818a9c; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
- }
-
- // ---------- FLOWING WIDGET ROW (trace / logs / metrics / rbac) ----------
- .widget-row {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
- margin-top: 26px;
- }
- .widget-card {
- flex: 1 1 200px;
- min-height: 190px;
- position: relative;
- margin: 0;
- border-radius: 14px;
- border: 1px solid $line;
- background: #fff;
- overflow: hidden;
- box-shadow: 0 10px 30px -20px rgba(17, 24, 39, .35);
- transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
- display: flex; flex-direction: column;
- &:hover { box-shadow: 0 22px 48px -24px rgba(17, 24, 39, .4); transform: translateY(-3px); border-color: #d6e4f5; }
- }
-
- // widget card with a real screenshot
- .widget-card.is-shot {
- img {
- position: absolute; inset: 0;
- width: 100%; height: 100%;
- object-fit: cover; object-position: left top;
- background: #0f131a;
- }
- figcaption {
- position: absolute; left: 0; right: 0; bottom: 0;
- padding: 16px 18px 14px;
- background: linear-gradient(180deg, rgba(15,19,26,0) 0%, rgba(15,19,26,.88) 72%);
- color: #fff;
- strong { display: block; font-size: 16px; font-weight: 700; }
- span { display: block; font-size: 13px; color: rgba(255,255,255,.82); margin-top: 3px; }
- }
- }
-
- // placeholder widget card (screenshot to come)
- .widget-card.is-empty {
- background: radial-gradient(120% 80% at 50% 0%, #f3f7fc 0%, #fff 70%);
- .widget-ph {
- flex: 1; display: grid; place-items: center;
- color: #b6c2d3;
- svg { width: 44px; height: 44px; }
- }
- figcaption {
- padding: 16px 18px 18px;
- border-top: 1px solid $line;
- strong { display: block; font-size: 16px; font-weight: 700; color: $ink; }
- span { display: block; font-size: 13px; color: $muted; margin-top: 3px; }
- }
- }
-
-
- // ---------- HIGHLIGHT FEATURE ROWS (AI Assistant + 3D map, zigzag) ----------
- // Two flagship "experience" features presented as alternating media/copy rows.
- .feature-rows {
- .frow {
- display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start;
- }
- .frow + .frow { margin-top: 80px; }
- // alternate: reversed rows put the media on the right, copy on the left,
- // and center the copy against the taller 3D stage
- .frow--reverse { align-items: center; }
- .frow--reverse .frow-media { order: 2; }
-
- .frow-media {
- margin: 0; min-width: 0; // allow the framed shot / 3D stage to shrink in its cell
- display: flex; flex-direction: column; gap: 16px; // stack the framed capture + BYO callout
- // framed AI capture (video, or its poster) inside a row cell
- .hero-shot img,
- .hero-shot video { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; background: #0f131a; }
- // the 3D map stage is centered + width-capped globally; fill the cell here
- .map3d-stage { max-width: 100%; }
- }
-
- .frow-copy {
- .eyebrow { margin-bottom: 12px; }
- h2 { font-size: 30px; font-weight: 700; color: $ink; border: 0; padding: 0;
- margin: 0 0 14px; line-height: 1.22; }
- > p { font-size: 16px; color: $body; line-height: 1.65; margin: 0 0 20px; }
- }
-
- // compact feature list in the copy column
- .frow-points {
- list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px;
- li {
- display: flex; gap: 12px; align-items: flex-start;
- font-size: 14.5px; color: $body; line-height: 1.55;
- strong { color: $ink; font-weight: 700; }
- }
- // meaning-bearing glyph in a brand chip — chart / magnifier / shield,
- // one per point so the icon reinforces the words
- .fp-ic {
- flex: 0 0 auto; margin-top: 1px;
- width: 26px; height: 26px; border-radius: 7px;
- display: grid; place-items: center;
- color: #fff; background: $brand-grad;
- box-shadow: 0 3px 8px rgba(55, 136, 208, .3);
- svg { width: 15px; height: 15px; display: block; }
- }
- }
-
- .frow-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
- }
-
- // "bring your own LLM" callout — the cost / vendor-neutral message (under the AI video)
- .ai-byo {
- margin: 0;
- display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
- border: 1px solid #d6e4f5; border-radius: 12px;
- background: radial-gradient(130% 150% at 0% 0%, #f2f8ff 0%, #fff 62%);
- padding: 15px 17px;
- .ai-byo-tag {
- flex: 0 0 auto;
- display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
- border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
- color: #fff; background: $brand-grad; box-shadow: 0 4px 12px rgba(55, 136, 208, .3);
- }
- p {
- flex: 1 1 240px; margin: 0; font-size: 13.5px; color: $body; line-height: 1.6;
- strong { color: $ink; }
- }
- }
-
-
- // ---------- ECOSYSTEM ----------
- .eco-grid {
- display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px;
- }
- .eco-card {
- display: flex; flex-direction: column;
- background: #fff; border: 1px solid $line; border-radius: 14px; padding: 22px 20px;
- text-decoration: none;
- position: relative; overflow: hidden;
- transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
- // accent strip in the project color
- &::before {
- content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
- background: var(--eco, #{$brand}); opacity: .85;
- }
- &:hover {
- box-shadow: 0 18px 44px -22px rgba(17,24,39,.3); transform: translateY(-3px);
- border-color: color-mix(in srgb, var(--eco, #{$brand}) 40%, #{$line});
- }
- .eco-ic {
- width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px;
- display: grid; place-items: center;
- color: var(--eco, #{$brand});
- background: color-mix(in srgb, var(--eco, #{$brand}) 12%, #fff);
- border: 1px solid color-mix(in srgb, var(--eco, #{$brand}) 22%, #{$line});
- svg { width: 20px; height: 20px; }
- }
- h4 { font-size: 16px; font-weight: 700; color: $ink; margin: 0 0 8px; padding: 0; border: 0; }
- p { font-size: 13.5px; color: $body; line-height: 1.6; margin: 0 0 14px; flex: 1; }
- .eco-more { font-size: 13px; font-weight: 600; color: var(--eco, #{$brand}); margin-top: auto; }
- }
- .formats {
- display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
- padding-top: 8px;
- }
- .formats-label { font-size: 13px; color: $muted; font-weight: 600; margin-right: 6px; }
- .format-chip {
- display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
- border: 1px solid $line; border-radius: 999px; background: #fff;
- font-size: 13px; color: $body;
- }
+ max-width: 960px; margin: 0 auto 40px; text-align: center;
+ h1 { font-size: clamp(42px, 4.8vw, 64px); line-height: 1.08; font-weight: 800; letter-spacing: -2.2px; margin: 14px 0 20px; padding: 0; border: 0; color: #172b40; }
+ .hero-cloud { color: #2875b9; white-space: nowrap; }
+ .hero-ai { color: #8651ac; }
+ .lead { max-width: 780px; margin: 0 auto; color: #536478; font-size: 17px; line-height: 1.65; }
+ }
+ .hero-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: #526b82; font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: .13em; span { color: #a6b5c3; } }
+ .hero-cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; .sky-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; } }
+ .github-pill { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 18px; border: 1px solid #DADDE0; border-radius: 8px; background: #fff; color: $ink; font-size: 15px; text-decoration: none; &:hover { box-shadow: 0 6px 18px rgba(17,24,39,.10); } .icon-github { font-size: 17px; } }
+
+ .observability-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
+ .observability-pillar {
+ --pillar-accent: #2875b9; --pillar-tint: #eef6fe; --pillar-border: #cddff0;
+ display: flex; flex-direction: column; min-width: 0;
+ overflow: hidden; border: 1px solid var(--pillar-border); border-top: 3px solid var(--pillar-accent); border-radius: 16px;
+ background: #fff; box-shadow: 0 14px 40px -24px rgba(24, 54, 83, .3);
+ scroll-margin-top: 88px;
+ &.pillar-ai { --pillar-accent: #8651ac; --pillar-tint: #f6f0fc; --pillar-border: #e2d7ee; }
+ &:target { box-shadow: 0 0 0 3px var(--pillar-tint), 0 14px 40px -24px rgba(24, 54, 83, .3); }
+ }
+ .pillar-copy { padding: 26px 28px 22px; background: linear-gradient(145deg, var(--pillar-tint), #fff 65%); }
+ .pillar-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--pillar-accent); font-size: 11px; font-weight: 750; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; }
+ .pillar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pillar-accent); }
+ .pillar-copy h2 { margin: 13px 0 12px; border: 0; padding: 0; color: #172b40; font-size: 29px; font-weight: 750; letter-spacing: -.6px; line-height: 1.15; }
+ .pillar-copy > p { min-height: 3.3em; margin: 0; color: #536478; font-size: 14px; line-height: 1.65; }
+ .pillar-topics { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 18px 0 0; color: var(--pillar-accent); font-size: 11px; font-weight: 600; line-height: 1.5; }
+ .pillar-topics li + li::before { content: "·"; margin-right: 14px; color: #a2b0be; }
+ .pillar-product { margin-top: auto; border-top: 1px solid #e7ecf2; background: #f7f9fc; }
+ .pillar-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 5px; max-width: 350px; padding: 8px 16px; }
+ .pillar-cloud .pillar-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
+ .pillar-tabs button { appearance: none; -webkit-appearance: none; padding: 7px 6px; min-height: 34px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #67788a; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer; }
+ .pillar-tabs button:hover { color: var(--pillar-accent); background: #fff; }
+ .pillar-tabs button[aria-selected="true"] { border-color: var(--pillar-border); background: #fff; color: var(--pillar-accent); box-shadow: 0 1px 3px rgba(29, 54, 83, .04); }
+ .pillar-screen { margin: 0; }
+ .pillar-screen img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: #f2f4f8; border-top: 1px solid #e7ecf2; border-bottom: 1px solid #e7ecf2; }
+ .pillar-cloud .pillar-screen img { background: #0f131a; }
+ .pillar-screen figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 10px 18px; color: #61758a; font-size: 11px; line-height: 1.45; }
+ .pillar-screen figcaption a { flex-shrink: 0; color: #526b82; text-decoration: none; &:hover { color: var(--pillar-accent); text-decoration: underline; } }
+ .pillar-footer { padding: 18px 28px 24px; border-top: 1px solid #e7ecf2; }
+ .pillar-note { display: flex; align-items: baseline; gap: 7px; min-height: 3.2em; margin: 0 0 16px; color: #6a7b8d; font-size: 11px; line-height: 1.6; }
+ .pillar-preview { display: inline-block; flex-shrink: 0; padding: 1px 6px; border-radius: 4px; background: var(--pillar-tint); color: var(--pillar-accent); font-size: 10px; font-weight: 650; }
+ .pillar-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+ .pillar-cta { display: inline-flex; align-items: center; gap: 12px; color: var(--pillar-accent); font-size: 14px; font-weight: 700; text-decoration: none; &:hover { color: var(--pillar-accent); text-decoration: underline; } }
+ .pillar-docs { color: #657789; font-size: 11px; text-decoration: none; white-space: nowrap; &:hover { color: var(--pillar-accent); text-decoration: underline; } }
+
+ .home-proof { display: grid; grid-template-columns: minmax(200px, .95fr) minmax(0, 3fr); align-items: center; gap: 24px; margin-top: 30px; padding: 28px; border: 1px solid #dce5ee; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px -24px rgba(24, 54, 83, .35); }
+ .home-foundation { display: inline-flex; align-items: center; gap: 14px; color: #42576c; font-size: 13px; font-weight: 550; line-height: 1.55; text-decoration: none; &:hover { color: #2875b9; } img { display: block; flex-shrink: 0; width: 29px; height: 40px; } }
+ .hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; li, li a { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; } li { min-width: 0; padding: 3px 12px; border-left: 1px solid #e2e8ef; } strong { color: #172b40; font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } span { margin-top: 7px; color: #4e6276; [...]
+
+ // ---------- CLOUD-NATIVE AND AI EXPLORATION ----------
+ main section.home-domain, main section.home-investigation { padding: 72px 0; }
+ .home-domain > .container, .home-investigation > .container { max-width: 1280px; padding-left: 24px; padding-right: 24px; }
+ .home-domain, .home-investigation { scroll-margin-top: 88px; }
+ .home-domain h2 { margin: 0 0 18px; padding: 0; border: 0; color: #172b40; font-size: 36px; font-weight: 750; line-height: 1.15; letter-spacing: -.8px; }
+ .home-cloud-domain > .container { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: 52px; }
+ .domain-story > p { margin: 0 0 22px; font-size: 15px; line-height: 1.75; color: #5c7083; }
+ .domain-details { display: grid; gap: 9px; margin: 0 0 25px; color: #425e77; font-size: 13px; li { display: flex; gap: 10px; align-items: center; } li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #438ac3; } }
+ .domain-link { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: #2875b9; font-size: 14px; font-weight: 650; text-decoration: none; &:hover { color: #1b5f96; text-decoration: underline; } }
+ .domain-link:focus-visible, .agent-workflow a:focus-visible, .map3d-poster:focus-visible { outline: 2px solid #2875b9; outline-offset: 4px; }
+ .domain-demo-note { display: block; margin-top: 9px; color: #7a8b9a; font-size: 11px; }
+ .domain-map { min-width: 0; .map3d-stage { max-width: none; border-radius: 16px; box-shadow: 0 16px 44px -20px rgba(17, 42, 67, .38); } .map3d-poster img { aspect-ratio: 8 / 5; object-fit: cover; } }
+
+ .home-ai-domain { background: #faf8fd; border-top: 1px solid #ece6f3; border-bottom: 1px solid #ece6f3; .eyebrow, .domain-link { color: #8651ac; } }
+ .ai-domain-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 60px; margin-bottom: 32px; h2 { margin-bottom: 0; } }
+ .ai-domain-intro p { margin: 0 0 14px; color: #637184; font-size: 15px; line-height: 1.75; }
+ .workflow-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; color: #6b567f; font-size: 12px; font-weight: 650; }
+ .workflow-preview { display: inline-block; padding: 3px 7px; border: 1px solid #e7dcf0; border-radius: 5px; background: #f2eaf9; color: #8454a7; font-size: 10px; font-weight: 650; line-height: 1.3; }
+ .agent-workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
+ .agent-workflow li { min-width: 0; }
+ .agent-workflow a { display: flex; flex-direction: column; height: 100%; min-height: 220px; padding: 22px; border: 1px solid #e6dcee; border-radius: 12px; background: #fff; text-decoration: none; box-shadow: 0 8px 24px -22px rgba(82, 49, 103, .4); &:hover { border-color: #b894d4; background: #fefcff; } }
+ .workflow-step { display: flex; align-items: center; justify-content: space-between; color: #9d7fb4; font-size: 12px; font-weight: 650; letter-spacing: .05em; > span { font-size: 18px; font-weight: 400; } }
+ .agent-workflow h3 { margin: 15px 0 9px; padding: 0; border: 0; color: #332743; font-size: 16px; font-weight: 700; line-height: 1.4; }
+ .agent-workflow p { margin: 0 0 22px; color: #766b82; font-size: 12px; line-height: 1.7; }
+ .workflow-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: #8651ac; font-size: 11px; font-weight: 600; }
+
+ // Shared ways to investigate both domains, with stable video frames.
+ .home-investigation .section-head { max-width: 720px; margin-bottom: 30px; p { font-size: 16px; } }
+ .investigation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
+ .investigation-card { display: flex; flex-direction: column; min-width: 0; margin: 0; border: 1px solid #dfe7ee; border-radius: 14px; overflow: hidden; background: #fff; scroll-margin-top: 88px; &:target { box-shadow: 0 0 0 3px #edf5fc; border-color: #8db9dc; } }
+ .investigation-copy { padding: 26px 26px 23px; }
+ .investigation-label { display: block; color: #527794; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
+ .investigation-copy h3 { margin: 11px 0 12px; border: 0; padding: 0; color: #1d354a; font-size: 24px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
+ .investigation-copy > p { min-height: 4.95em; margin: 0; color: #607488; font-size: 14px; line-height: 1.65; }
+ .investigation-media { margin: auto 0 0; border-top: 1px solid #e5ebf1; video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #10141d; } figcaption { padding: 11px 18px; background: #f7f9fc; color: #7b8b9b; font-size: 10px; line-height: 1.6; } }
+ .investigation-footer { padding: 18px 26px 22px; border-top: 1px solid #e5ebf1; p { min-height: 3.4em; margin: 0 0 14px; color: #6d8090; font-size: 12px; line-height: 1.7; } }
// ---------- EVENTS (reuses .feature-content list) ----------
.feature-content {
@@ -542,30 +284,138 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
.td-home {
// iOS/Android handle fixed backgrounds poorly — revert to scroll
.home-hero { background-attachment: scroll, scroll; }
- .home-hero-grid { grid-template-columns: 1fr; gap: 36px; }
- .home-hero-text h1 { font-size: 42px; }
- .cap-grid { grid-template-columns: 1fr 1fr; }
- .eco-grid { grid-template-columns: 1fr 1fr; }
- // stack the zigzag rows; always show the media on top when stacked
- .feature-rows .frow { grid-template-columns: 1fr; gap: 28px; }
- .feature-rows .frow + .frow { margin-top: 52px; }
- .feature-rows .frow--reverse .frow-media { order: 0; }
.community-cards { grid-template-columns: 1fr; }
- .widget-card { flex-basis: 45%; min-height: 220px; }
+ .home-proof { grid-template-columns: minmax(0, 1fr); gap: 22px; }
+ .home-foundation { justify-self: center; }
+ .hero-stats { border-top: 1px solid #e2e8ef; padding-top: 22px; }
+ .hero-stats li:first-child { border-left: 0; }
}
}
@media (max-width: 576px) {
.td-home {
.home-section { padding: 48px 0; }
- .home-hero { padding: 40px 0; }
- .home-hero-text h1 { font-size: 34px; }
.section-head h2 { font-size: 27px; }
- .cap-grid, .eco-grid { grid-template-columns: 1fr; }
- .hero-stats { gap: 26px; }
.get-started { padding: 32px 22px; }
.feature-content li { flex-basis: 100%; }
- .widget-card { flex-basis: 100%; min-height: 200px; }
+ }
+}
+
+// Keep the two domains equally weighted as cards stack on smaller screens.
+@media (max-width: 1100px) {
+ .td-home {
+ .pillar-copy { padding: 24px; }
+ .pillar-copy h2 { font-size: 26px; }
+ .pillar-copy > p { min-height: 4.95em; }
+ .pillar-topics { min-height: 3em; gap: 6px 10px; }
+ .pillar-topics li + li::before { margin-right: 10px; }
+ .pillar-tabs { min-height: 89px; }
+ .pillar-cloud .pillar-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+ .pillar-footer { padding: 18px 24px 24px; }
+ .pillar-note { min-height: 4.8em; }
+ .pillar-links { align-items: flex-start; flex-direction: column; gap: 12px; }
+ }
+}
+@media (max-width: 800px) {
+ .td-home {
+ main section.home-hero { padding-top: calc(4rem + 30px); }
+ .home-hero-text { margin-bottom: 30px; }
+ .home-hero-text h1 { font-size: 48px; letter-spacing: -1.7px; }
+ .home-hero-text .lead { max-width: 620px; font-size: 15px; }
+ .hero-lead-break { display: none; }
+ .observability-pillars { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 640px; margin: 0 auto; }
+ .pillar-copy > p, .pillar-topics { min-height: 0; }
+ .pillar-tabs { min-height: 0; }
+ .pillar-cloud .pillar-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+ .pillar-note { min-height: 3.2em; }
+ .pillar-links { flex-direction: row; align-items: center; }
+ }
+}
+@media (max-width: 576px) {
+ .td-home .pillar-cloud .pillar-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 480px) {
+ .td-home {
+ main section.home-hero { padding-top: calc(4rem + 26px); }
+ .home-hero > .container { padding-left: 20px; padding-right: 20px; }
+ .hero-eyebrow { gap: 7px; font-size: 8px; letter-spacing: .09em; }
+ .home-hero-text h1 { margin: 13px 0 18px; font-size: 37px; letter-spacing: -1.4px; }
+ .hero-cta { gap: 10px; margin-top: 22px; }
+ .hero-cta .sky-btn { padding: 10px 18px; font-size: 14px; }
+ .github-pill { height: 38px; padding: 0 13px; font-size: 12px; }
+ .pillar-copy { padding: 23px 20px 20px; }
+ .pillar-copy h2 { font-size: 25px; }
+ .pillar-copy > p { font-size: 13px; }
+ .pillar-topics { font-size: 10px; gap: 7px 9px; }
+ .pillar-topics li + li::before { display: none; }
+ .pillar-tabs { gap: 1px; padding: 5px 8px; }
+ .pillar-tabs button { padding: 10px 4px; min-height: 44px; font-size: 11px; }
+ .pillar-screen figcaption { padding: 10px 12px; gap: 12px; font-size: 10px; }
+ .pillar-screen figcaption a { display: inline-flex; align-items: center; min-height: 24px; }
+ .pillar-footer { padding: 16px 20px 21px; }
+ .pillar-note { min-height: 0; font-size: 10px; }
+ .pillar-links { flex-direction: column; align-items: flex-start; gap: 12px; }
+ .pillar-cta { min-height: 32px; font-size: 14px; }
+ .pillar-docs { min-height: 24px; }
+ .home-proof { padding: 22px 16px; }
+ .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
+ .hero-stats li { padding: 0 8px; }
+ .hero-stats li:nth-child(odd) { border-left: 0; }
+ .hero-stats strong { font-size: 30px; }
+ .hero-stats span { max-width: 110px; min-height: 3em; margin-top: 6px; }
+ }
+}
+@media (max-width: 359px) {
+ .td-home .home-hero-text h1 { font-size: 32px; }
+ .td-home .hero-eyebrow { font-size: 7px; }
+ .td-home .pillar-tabs button { font-size: 10px; }
+ .td-home .hero-stats li { padding-left: 4px; padding-right: 4px; }
+ .td-home .hero-stats strong { font-size: 28px; }
+}
+
+@media (max-width: 1000px) {
+ .td-home {
+ .home-cloud-domain > .container { gap: 30px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
+ .home-domain h2 { font-size: 31px; }
+ .ai-domain-heading { gap: 30px; }
+ .agent-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+ .agent-workflow a { min-height: 190px; }
+ .investigation-copy, .investigation-footer { padding-left: 22px; padding-right: 22px; }
+ .investigation-copy h3 { font-size: 22px; }
+ .investigation-footer p { min-height: 5.1em; }
+ }
+}
+@media (max-width: 760px) {
+ .td-home {
+ main section.home-domain, main section.home-investigation { padding: 48px 0; }
+ .home-cloud-domain > .container, .ai-domain-heading, .investigation-grid { grid-template-columns: minmax(0, 1fr); }
+ .home-cloud-domain > .container { gap: 28px; }
+ .domain-story { max-width: 580px; }
+ .home-domain h2 { font-size: 30px; }
+ .ai-domain-heading { gap: 20px; }
+ .domain-map .map3d-badge { font-size: 10px; top: 12px; left: 12px; padding: 0 9px; }
+ .investigation-copy > p, .investigation-footer p { min-height: 0; }
+ .investigation-grid { gap: 20px; }
+ }
+}
+@media (max-width: 480px) {
+ .td-home {
+ .home-domain > .container, .home-investigation > .container { padding-left: 20px; padding-right: 20px; }
+ .home-domain h2 { font-size: 27px; }
+ .home-domain h2 br { display: none; }
+ .domain-story > p, .ai-domain-intro p { font-size: 14px; }
+ .agent-workflow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
+ .agent-workflow a { min-height: 0; padding: 19px; }
+ .agent-workflow h3 { margin-top: 7px; }
+ .agent-workflow p { margin-bottom: 16px; font-size: 13px; }
+ .domain-map .map3d-stage { border-radius: 12px; }
+ .domain-map .map3d-play { gap: 10px; }
+ .domain-map .map3d-play-btn { width: 23px; height: 23px; padding: 12px; svg { width: 23px; height: 23px; margin-left: 3px; } }
+ .domain-map .map3d-badge { top: 9px; left: 9px; height: 22px; font-size: 9px; }
+ .investigation-copy { padding: 22px 20px 20px; }
+ .investigation-copy h3 { font-size: 23px; }
+ .investigation-footer { padding: 17px 20px 20px; }
+ .investigation-media figcaption { padding: 10px 14px; }
}
}
@@ -1588,29 +1438,6 @@ html.sw-menu-open, html.sw-menu-open body { overflow: hidden; }
}
.docs-card:hover .card-anchor { opacity: 1; }
-// Deep-link hooks on the home feature-row headings. A dedicated title wrapper
-// gives every normal, reversed and wrapped row the same containing block. The
-// hook hangs in its gutter while the heading text remains aligned to the eyebrow.
-.frow-title {
- position: relative;
- scroll-margin-top: 92px; // sticky navbar clearance when the hash lands here
-}
-.frow-title h2 {
- display: block;
-}
-.frow-title > .frow-anchor {
- position: absolute; left: -32px; top: 6px;
- margin: 0;
-}
-
-.frow:hover .frow-anchor,
-.frow-anchor:focus-visible { opacity: 1; }
-@media (max-width: 1199px) {
- .frow-title { padding-left: 32px; }
- .frow-title > .frow-anchor { left: 0; }
- .frow-anchor.card-anchor { opacity: 1; } // no hover on touch, so keep it visible
-}
-
// ── 3D Infrastructure Map: poster that opens the WebGL app as a full page ─────
// Used by the homepage "SEE IT IN 3D" band. The poster is a static image; the
// WebGL app (/3d-map-app/) only loads when the user clicks through to it.
@@ -1697,3 +1524,6 @@ html.sw-menu-open, html.sw-menu-open body { overflow: hidden; }
&:focus-visible, &:target { outline: 2px solid $brand; outline-offset: 4px; border-radius: 2px; }
}
}
+
+@import "home_platform";
+@import "home_workflow";
diff --git a/assets/scss/_home_platform.scss b/assets/scss/_home_platform.scss
new file mode 100644
index 000000000000..635e7434c080
--- /dev/null
+++ b/assets/scss/_home_platform.scss
@@ -0,0 +1,82 @@
+// Project entry points for both domains, followed by their shared foundation.
+.td-home main section.home-platform {
+ padding: 64px 0;
+
+ > .container { max-width: 1280px; padding-right: 24px; padding-left: 24px; }
+ .section-head { margin-bottom: 32px; }
+ a:focus-visible { outline: 2px solid #2875b9; outline-offset: 4px; }
+ .hp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
+ .hp-group {
+ --hp-accent: #2875b9;
+ --hp-tint: #eef6fe;
+ --hp-border: #d7e5f2;
+ display: flex; flex-direction: column; min-width: 0;
+ padding: 24px; border: 1px solid var(--hp-border); border-radius: 14px;
+ background: linear-gradient(155deg, var(--hp-tint), #fff 38%);
+ }
+ .hp-ai { --hp-accent: #8651ac; --hp-tint: #f6f0fc; --hp-border: #e5dcee; }
+ .hp-group-heading { display: flex; align-items: flex-start; gap: 13px; }
+ .hp-group-mark {
+ display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px;
+ border: 1px solid var(--hp-border); border-radius: 10px; background: #fff; color: var(--hp-accent);
+ svg { display: block; width: 23px; height: 23px; }
+ }
+ .hp-group-heading h3 { padding: 0; border: 0; margin: 0 0 6px; color: var(--hp-accent); font-size: 21px; font-weight: 700; line-height: 1.25; }
+ .hp-group-heading p { margin: 0; color: #62758a; font-size: 13px; line-height: 1.6; }
+ .hp-projects {
+ display: grid; grid-template-rows: 1fr 1.4fr 1.25fr; flex: 1;
+ padding: 0; margin: 22px 0 0; list-style: none;
+ > li { display: flex; min-width: 0; border-top: 1px solid var(--hp-border); }
+ }
+ .hp-project { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 0; color: #233d55; text-decoration: none; }
+ .hp-project-copy { display: block; min-width: 0; }
+ .hp-project-title { display: block; color: #233d55; font-size: 15px; font-weight: 700; line-height: 1.5; }
+ .hp-project-description { display: block; margin-top: 4px; color: #62758a; font-size: 13px; line-height: 1.6; }
+ .hp-arrow { flex: 0 0 auto; color: var(--hp-accent, #2875b9); font-size: 17px; line-height: 1; }
+ .hp-project:hover { text-decoration: none; .hp-project-title { color: var(--hp-accent); text-decoration: underline; text-underline-offset: 3px; } }
+ .hp-projects > .hp-integrations { display: flex; flex-direction: column; justify-content: center; padding: 18px 0; &:last-child { padding-bottom: 0; } }
+ .hp-integration-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; }
+ .hp-integration-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; color: var(--hp-accent); font-size: 12px; font-weight: 600; text-decoration: none; &:hover { text-decoration: underline; text-underline-offset: 3px; } }
+ .hp-preview { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--hp-tint); color: var(--hp-accent); font-size: 10px; font-weight: 650; vertical-align: 2px; }
+
+ .hp-shared { margin-top: 18px; padding: 20px 24px; border: 1px solid #e3eaf2; border-radius: 14px; background: #f8fafd; }
+ .hp-shared-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
+ .hp-shared-heading h3 { margin: 0; padding: 0; border: 0; color: #526b82; font-size: 13px; font-weight: 650; line-height: 1.5; }
+ .hp-shared-heading > span { color: #718398; font-size: 11px; line-height: 1.5; }
+ .hp-foundation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+ .hp-foundation-link {
+ display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px;
+ border: 1px solid #e3eaf2; border-radius: 8px; background: #fff; color: #233d55; text-decoration: none;
+ img { display: block; flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
+ > span:not(.hp-arrow) { min-width: 0; }
+ strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; }
+ strong + span { display: block; margin-top: 3px; color: #62758a; font-size: 11px; line-height: 1.5; }
+ .hp-arrow { margin-left: auto; }
+ &:hover { border-color: #bbd2e7; text-decoration: none; strong { color: #2875b9; text-decoration: underline; text-underline-offset: 3px; } }
+ }
+}
+
+@media (max-width: 800px) {
+ .td-home main section.home-platform {
+ padding: 48px 0;
+ .hp-groups { grid-template-columns: minmax(0, 1fr); gap: 18px; }
+ .hp-projects { grid-template-rows: none; }
+ .hp-foundation { grid-template-columns: minmax(0, 1fr); gap: 10px; }
+ .hp-projects > .hp-integrations:last-child { padding-bottom: 4px; }
+ }
+}
+
+@media (max-width: 480px) {
+ .td-home main section.home-platform {
+ .hp-group { padding: 20px; }
+ .hp-group-heading { gap: 11px; }
+ .hp-group-heading h3 { font-size: 20px; }
+ .hp-group-heading p, .hp-project-description { font-size: 12px; }
+ .hp-project { gap: 10px; }
+ .hp-integration-links { gap: 0 16px; }
+ .hp-integration-links a { min-height: 44px; }
+ .hp-shared { padding: 18px; }
+ .hp-shared-heading { flex-direction: column; gap: 3px; }
+ .hp-foundation-link { padding: 12px; gap: 10px; }
+ }
+}
diff --git a/assets/scss/_home_workflow.scss b/assets/scss/_home_workflow.scss
new file mode 100644
index 000000000000..798a15d322fd
--- /dev/null
+++ b/assets/scss/_home_workflow.scss
@@ -0,0 +1,57 @@
+.td-home {
+ .workflow-step svg { width: 19px; height: 19px; }
+ .workflow-more > span { font-size: 18px; font-weight: 400; line-height: 1; }
+
+ .workflow-dialog {
+ width: calc(100% - 48px); max-width: 1200px;
+ max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
+ margin: auto; padding: 0; border: 1px solid #e6dcee; border-radius: 16px;
+ background: #fff; color: #332743; box-shadow: 0 24px 100px rgba(16, 24, 40, .3);
+ overflow: hidden;
+ &:not([open]) { display: none; }
+ &[open] { display: flex; flex-direction: column; }
+ &::backdrop { background: rgba(19, 28, 45, .72); }
+ a:focus-visible, button:focus-visible { outline: 2px solid #8651ac; outline-offset: 3px; }
+ }
+ .workflow-dialog-header {
+ display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 20px;
+ padding: 24px 28px 20px; background: #faf8fd; border-bottom: 1px solid #e9e1f0;
+ }
+ .workflow-dialog-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; color: #8651ac; font-size: 12px; font-weight: 650; }
+ .workflow-dialog .workflow-dialog-title { margin: 0; padding: 0; border: 0; color: #332743; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.4px; }
+ .workflow-dialog-title > a[aria-hidden="true"] { display: none; }
+ .workflow-dialog-close {
+ display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
+ margin: 0; padding: 10px; border: 1px solid #e1d6eb; border-radius: 9px;
+ background: #fff; color: #685577; cursor: pointer; appearance: none;
+ svg { display: block; width: 24px; height: 24px; }
+ &:hover { border-color: #ac8bc4; background: #f0e8f7; color: #573575; }
+ }
+ .workflow-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+ .workflow-dialog-figure {
+ margin: 0; background: #10141d;
+ img { display: block; width: 100%; height: auto; max-height: 60vh; max-height: 60dvh; margin: 0; object-fit: contain; cursor: default; }
+ figcaption { padding: 9px 28px; border-bottom: 1px solid #eee7f3; background: #faf8fd; color: #776985; font-size: 11px; line-height: 1.5; }
+ }
+ .workflow-dialog-description { margin: 0; padding: 20px 28px; color: #665973; font-size: 15px; line-height: 1.7; }
+ .workflow-dialog-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-top: 1px solid #eee7f3; background: #fff; }
+ .workflow-dialog-fullsize { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #766184; font-size: 12px; font-weight: 550; &:hover { color: #63358c; } }
+ .workflow-dialog-cta {
+ display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px;
+ padding: 11px 18px; border: 1px solid #7948a0; border-radius: 8px;
+ background: #8651ac; color: #fff; font-size: 14px; font-weight: 650; line-height: 1.5; text-decoration: none;
+ &:hover { background: #704190; border-color: #704190; color: #fff; text-decoration: none; }
+ }
+}
+
+@media (max-width: 600px) {
+ .td-home {
+ .workflow-dialog { width: calc(100% - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
+ .workflow-dialog-header { gap: 12px; padding: 18px; }
+ .workflow-dialog .workflow-dialog-title { font-size: 21px; letter-spacing: -.2px; }
+ .workflow-dialog-figure figcaption { padding: 9px 18px; }
+ .workflow-dialog-description { padding: 16px 18px; font-size: 14px; }
+ .workflow-dialog-footer { flex-direction: column-reverse; align-items: stretch; gap: 6px; padding: 12px 18px; }
+ .workflow-dialog-fullsize { justify-content: center; }
+ }
+}
diff --git a/content/_index.html b/content/_index.html
index 26263d4870db..00f9577edb75 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -5,324 +5,177 @@ linkTitle = "Apache SkyWalking"
seo_title = "Apache SkyWalking — Observability for cloud-native and AI"
# Required: without it Hugo's opengraph template falls back to .Summary, which
# scrapes the hero SVG text into every social card.
-description = "Apache SkyWalking is an open source observability platform for cloud native architectures. It brings distributed tracing, metrics, logs, profiling and alarms into one platform, with auto-instrumentation agents for Java, Go, Python, Node.js, PHP, Rust, Ruby and .NET, plus eBPF on Kubernetes. It also monitors GenAI and LLM services — latency, token usage and estimated cost per provider and model — and works the other way too: a built-in assistant you can ask in plain languag [...]
+description = "Apache SkyWalking is an open source observability platform for cloud-native systems and AI. Explore services, Kubernetes, and infrastructure with traces, metrics, logs, and profiling; monitor model performance and token usage, and preview Claude Code conversation replay and workspace changes. Investigate through Horizon or your connected AI client."
+++
-<!-- ===== HERO + PRODUCT BENTO (merged) ===== -->
+<!-- Cloud-native and AI have equal space in the opening product view. -->
<section class="home-hero">
<div class="container">
- <div class="hero-top">
- <a class="hero-seal" href="https://www.apache.org/" target="_blank" rel="noopener" aria-label="Apache Software Foundation">
- <svg viewBox="0 0 200 200">
- <defs><path id="asfSealPath" d="M100,100 m-80,0 a80,80 0 1,1 160,0 a80,80 0 1,1 -160,0" fill="none" /></defs>
- <circle cx="100" cy="100" r="96" class="seal-ring" />
- <circle cx="100" cy="100" r="70" class="seal-ring seal-ring--thin" />
- <text class="seal-text"><textPath href="#asfSealPath" startOffset="0">· APACHE SOFTWARE FOUNDATION · OPEN SOURCE · COMMUNITY-DRIVEN </textPath></text>
- </svg>
- <img class="hero-seal-leaf" src="/images/asf-oakleaf.svg" alt="" />
- </a>
- <ul class="hero-stats">
- <li><a href="/team/"><strong>{{< team-count >}}</strong><span>contributors</span></a></li>
- <li><a href="https://github.com/apache?q=skywalking" target="_blank" rel="noopener"><strong>{{< stars-total >}}</strong><span>★ on GitHub</span></a></li>
- <li><strong>100B+</strong><span>telemetry / cluster</span></li>
- <li><strong>10+ yrs</strong><span>in production</span></li>
- </ul>
- </div>
-
- <div class="home-hero-grid">
- <div class="home-hero-text">
- <h1>Observability for <span class="accent">cloud-native and AI</span>.<br>And <span class="accent">AI</span> for observability.</h1>
- <p class="lead">
- <strong class="lead-brand">Apache SkyWalking</strong> puts distributed tracing, metrics, logs, profiling and alarms
- in one platform — across the services you run and the GenAI models they call,
- down to tokens and cost. 10+ language agents and eBPF on Kubernetes.
- Ask it in plain language, or investigate from the AI client
- you already use.
- </p>
- <div class="hero-cta">
- <a href="/get-started/#qs-showcase">
- <button class="sky-btn primary">Quick start <span class="hint">5 min</span></button>
- </a>
- <span class="dropdown demo-wrapper" id="demo">
- <button class="sky-btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
- Live demo
- </button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <span class="dropdown-item">Username: skywalking</span>
- <span class="dropdown-item">Password: skywalking</span>
- <span class="dropdown-item">
- <a href="https://demo.skywalking.apache.org/" target="_blank" rel="noopener">Go to UI <i class="iconfont icon-arrow-up-right"></i></a>
- </span>
- <span class="dropdown-item">
- <a href="https://demo.skywalking.apache.org:3000/" target="_blank" rel="noopener">Preview on Grafana <i class="iconfont icon-arrow-up-right"></i></a>
- </span>
- </div>
- </span>
- <a class="github-pill" href="https://github.com/apache/skywalking" target="_blank" rel="noopener">
- <i class="iconfont icon-github"></i> Star on GitHub
- </a>
- </div>
+ <div class="home-hero-text">
+ <span class="hero-eyebrow">APACHE SKYWALKING <span aria-hidden="true">/</span> OPEN SOURCE OBSERVABILITY</span>
+ <h1>Observability for<br><span class="hero-cloud">cloud-native</span> and <span class="hero-ai">AI</span>.</h1>
+ <p class="lead">Understand the systems you run and the AI that works alongside them.<br class="hero-lead-break"> Connect service performance, model usage, and agent activity in one platform.</p>
+ <div class="hero-cta">
+ <a class="sky-btn primary" href="/get-started/">Get started <span aria-hidden="true">→</span></a>
+ <span class="dropdown demo-wrapper" id="demo">
+ <button class="sky-btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">Live demo</button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <span class="dropdown-item">Username: skywalking</span>
+ <span class="dropdown-item">Password: skywalking</span>
+ <span class="dropdown-item"><a href="https://demo.skywalking.apache.org/" target="_blank" rel="noopener">Go to UI <i class="iconfont icon-arrow-up-right"></i></a></span>
+ <span class="dropdown-item"><a href="https://demo.skywalking.apache.org:3000/" target="_blank" rel="noopener">Preview on Grafana <i class="iconfont icon-arrow-up-right"></i></a></span>
+ </div>
+ </span>
+ <a class="github-pill" href="https://github.com/apache/skywalking" target="_blank" rel="noopener"><i class="iconfont icon-github"></i> Star on GitHub</a>
</div>
-
- <figure class="hero-shot" data-widget="topology">
- <span class="shot-bar"><i></i><i></i><i></i><em>demo.skywalking.apache.org</em></span>
- <img loading="eager" src="/images/home/horizon-dashboard.png" alt="SkyWalking services dashboard with topology and active alarms">
- </figure>
</div>
- <div class="widget-row">
- <figure class="widget-card is-shot" data-widget="trace">
- <img loading="lazy" src="/images/home/horizon-trace.png" alt="SkyWalking trace explorer with span waterfall">
- <figcaption><strong>Distributed tracing</strong><span>Span-by-span waterfalls.</span></figcaption>
- </figure>
-
- <figure class="widget-card is-shot" data-widget="logs">
- <img loading="lazy" src="/images/home/horizon-logs.png" alt="SkyWalking logs explorer">
- <figcaption><strong>Logs</strong><span>Trace-correlated log explorer.</span></figcaption>
- </figure>
-
- <figure class="widget-card is-shot" data-widget="metrics">
- <img loading="lazy" src="/images/home/horizon-metrics.png" alt="SkyWalking metrics and dashboards">
- <figcaption><strong>Metrics & dashboards</strong><span>Customizable widgets and MQE.</span></figcaption>
- </figure>
-
- <figure class="widget-card is-shot" data-widget="rbac">
- <img loading="lazy" src="/images/home/horizon-rbac.png" alt="SkyWalking RBAC and alerting">
- <figcaption><strong>RBAC & alerting</strong><span>Role-based access and alarm rules.</span></figcaption>
- </figure>
- </div>
- </div>
-</section>
-
-<div class="home-below">
-<!-- ===== HIGHLIGHTS: AI both ways + 3D map (alternating rows) =====
- Two AI rows, because SkyWalking now runs in both directions: it observes GenAI, and it
- can be investigated *by* AI. Row 1 is the assistant inside Horizon; row 2 is Horizon
- driven from the operator's own AI client over MCP.
- Row 1 media: horizon-ai-assistant.mp4 + .png poster — a 24-second edited tour with
- a branded opener, the tool-working interval disclosed at 12x, and the strongest metric,
- topology and summary frames retained.
- Row 2 media: the Codex capability tour, reused from /screenshots/horizon-1.0/ rather than
- copied into /images/home/ so the 3 MB clip is stored once — the draft Codex post uses the
- same file. Its poster is 1280x720 while the clip is 1920x1200; re-export before launch or
- the frame resizes on play.
- Links: both rows point at /next/ operate docs (MCP is on horizon-ui main but not yet in a
- tagged release, so /latest/ has no mcp page). The Codex announcement post is draft:true —
- add it as a third CTA on row 2 when it publishes. -->
-<section class="home-section feature-rows">
- <div class="container">
-
- <!-- Row 1 · AI Assistant — video + BYO callout on the left, copy on the right -->
- <div class="frow">
- <div class="frow-media">
- <figure class="hero-shot ai-shot">
- <span class="shot-bar"><i></i><i></i><i></i><em>horizon · AI Assistant</em></span>
- <video class="ai-video" poster="/images/home/horizon-ai-assistant.png"
- controls muted loop playsinline preload="none"
- aria-label="Horizon AI Assistant investigating latency — replies with inline charts and a service-dependency topology">
- <source src="/images/home/horizon-ai-assistant.mp4" type="video/mp4">
- </video>
- </figure>
- <div class="ai-byo">
- <span class="ai-byo-tag">Bring your own LLM</span>
- <p><strong>No frontier model required.</strong> Vendor-neutral — any OpenAI-compatible endpoint or Amazon Bedrock — and runs efficiently on a cost-effective model like <strong>DeepSeek</strong> or a mid-tier <strong>Claude Sonnet</strong>. The observability know-how lives in the tools, metric catalog and playbooks; the model orchestrates and narrates. Off by default.</p>
+ <div class="observability-pillars">
+ <article class="observability-pillar pillar-cloud" id="cloud-observability" data-home-gallery aria-labelledby="cloud-pillar-title">
+ <div class="pillar-copy">
+ <span class="pillar-eyebrow"><span class="pillar-dot" aria-hidden="true"></span>Cloud-native observability</span>
+ <h2 id="cloud-pillar-title">Understand your<br>running systems.</h2>
+ <p>Explore services, Kubernetes, and infrastructure. Bring topology, traces, metrics, logs, profiles, and alerts into every investigation.</p>
+ <ul class="pillar-topics" aria-label="Cloud-native observability coverage"><li>Services & APIs</li><li>Kubernetes & Service Mesh</li><li>Infrastructure & eBPF</li></ul>
</div>
- </div>
- <div class="frow-copy">
- <span class="eyebrow">NEW · AI ASSISTANT</span>
- <div class="frow-title" id="ai-assistant">
- <a class="card-anchor frow-anchor" href="#ai-assistant" data-anchor="ai-assistant" title="Copy link to “Ask questions in natural language”" aria-label="Copy link to Ask questions in natural language"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71 [...]
- <h2>Ask questions in natural language</h2>
+ <div class="pillar-product">
+ <div class="pillar-tabs" role="tablist" aria-label="Cloud-native observability screenshots" data-home-gallery-tabs hidden>
+ <button type="button" role="tab" id="cloud-topology-tab" data-home-gallery-tab="cloud-topology" aria-controls="cloud-topology" aria-selected="true" tabindex="0">Topology</button>
+ <button type="button" role="tab" id="cloud-traces-tab" data-home-gallery-tab="cloud-traces" aria-controls="cloud-traces" aria-selected="false" tabindex="-1">Traces</button>
+ <button type="button" role="tab" id="cloud-metrics-tab" data-home-gallery-tab="cloud-metrics" aria-controls="cloud-metrics" aria-selected="false" tabindex="-1">Metrics</button>
+ <button type="button" role="tab" id="cloud-logs-tab" data-home-gallery-tab="cloud-logs" aria-controls="cloud-logs" aria-selected="false" tabindex="-1">Logs</button>
+ <button type="button" role="tab" id="cloud-profiles-tab" data-home-gallery-tab="cloud-profiles" aria-controls="cloud-profiles" aria-selected="false" tabindex="-1">Profiles</button>
+ <button type="button" role="tab" id="cloud-alerts-tab" data-home-gallery-tab="cloud-alerts" aria-controls="cloud-alerts" aria-selected="false" tabindex="-1">Alerts</button>
+ </div>
+ <figure id="cloud-topology" class="pillar-screen" data-home-gallery-panel>
+ <img src="/screenshots/horizon-0.7.0/p03-topology-01-service-map.webp" alt="Horizon service topology showing dependencies and request flow" width="2992" height="1456" loading="eager" data-nolightbox="true">
+ <figcaption><span>See how your services connect</span><a href="/screenshots/horizon-0.7.0/p03-topology-01-service-map.webp" target="_blank" rel="noopener" aria-label="Enlarge topology screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
+ <figure id="cloud-traces" class="pillar-screen" data-home-gallery-panel hidden>
+ <img src="/screenshots/horizon-0.7.0/p06-traces-02-waterfall.webp" alt="Horizon distributed trace waterfall showing individual spans" width="2510" height="1332" loading="lazy" data-nolightbox="true">
+ <figcaption><span>Follow a request across your services</span><a href="/screenshots/horizon-0.7.0/p06-traces-02-waterfall.webp" target="_blank" rel="noopener" aria-label="Enlarge traces screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
+ <figure id="cloud-metrics" class="pillar-screen" data-home-gallery-panel hidden>
+ <img src="/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.webp" alt="Horizon metrics dashboard showing service load, latency, success rate, and JVM health" width="2424" height="1294" loading="lazy" data-nolightbox="true">
+ <figcaption><span>Track service and runtime health</span><a href="/screenshots/horizon-0.7.0/p02-dashboards-01-instance-jvm.webp" target="_blank" rel="noopener" aria-label="Enlarge metrics screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
+ <figure id="cloud-logs" class="pillar-screen" data-home-gallery-panel hidden>
+ <img src="/screenshots/horizon-0.7.0/p07-logs-01-stream.webp" alt="Horizon log explorer with level filters, a log timeline, and links to traces" width="2476" height="1282" loading="lazy" data-nolightbox="true">
+ <figcaption><span>Read logs alongside their traces</span><a href="/screenshots/horizon-0.7.0/p07-logs-01-stream.webp" target="_blank" rel="noopener" aria-label="Enlarge logs screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
+ <figure id="cloud-profiles" class="pillar-screen" data-home-gallery-panel hidden>
+ <img src="/screenshots/horizon-0.7.0/p09-profiling-01-flame.webp" alt="Horizon profiling flame graph showing where execution time is spent" width="2482" height="1156" loading="lazy" data-nolightbox="true">
+ <figcaption><span>Find where execution time goes</span><a href="/screenshots/horizon-0.7.0/p09-profiling-01-flame.webp" target="_blank" rel="noopener" aria-label="Enlarge profiles screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
+ <figure id="cloud-alerts" class="pillar-screen" data-home-gallery-panel hidden>
+ <img src="/screenshots/horizon-0.7.0/p10-alarms-01-incident-list.webp" alt="Horizon active alarms with an incident timeline, service filters, and alert details" width="3016" height="1650" loading="lazy" data-nolightbox="true">
+ <figcaption><span>Follow alerts into the affected services</span><a href="/screenshots/horizon-0.7.0/p10-alarms-01-incident-list.webp" target="_blank" rel="noopener" aria-label="Enlarge alerts screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
</div>
- <p>Horizon's built-in assistant answers questions about your running system — <em>"what's unhealthy right now?"</em>, <em>"investigate latency for checkout"</em> — with no MQE, PromQL or TraceQL to write. It replies with an ordered narrative built from the <strong>same charts, topology and tables</strong> as the rest of the UI, not a wall of text.</p>
- <ul class="frow-points">
- <li>
- <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5v14a1 1 0 0 0 1 1h15"/><path d="M7.5 14l3.5-4 3 2.5 4.5-6"/></svg></span>
- <span><strong>Answers you can see.</strong> Inline charts, top-N lists, tables and a focused one-hop topology — drawn by the same widgets as the dashboards.</span>
- </li>
- <li>
- <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M20.5 20.5l-4.2-4.2"/></svg></span>
- <span><strong>Guided root-cause.</strong> Playbooks walk root service → calling chain → error stack, read live Kubernetes pod logs, and can propose a profiling task only you approve.</span>
- </li>
- <li>
- <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg></span>
- <span><strong>Read-only, your permissions.</strong> Every action re-checks a read verb you already hold — it never sees more than you can, and never edits anything.</span>
- </li>
- </ul>
- <div class="frow-cta">
- <a class="sky-btn primary" href="/docs/skywalking-horizon-ui/next/operate/ai-assistant/">AI Assistant docs <i class="iconfont icon-arrow-right"></i></a>
- <a class="sky-btn" href="/blog/2026-07-06-horizon-ui-ai-assistant/">Meet Horizon UI</a>
+ <div class="pillar-footer">
+ <p class="pillar-note">From application code to the kernel, with native agents and ecosystem integrations.</p>
+ <div class="pillar-links"><a class="pillar-cta" href="/get-started/#showcase-architecture">Explore cloud-native <span aria-hidden="true">→</span></a><a class="pillar-docs" href="/docs/skywalking-horizon-ui/next/dashboards/general/">Platform docs <span aria-hidden="true">↗</span></a></div>
</div>
- </div>
- </div>
-
- <!-- Row 2 · Your own AI client — copy left, media right (alternating) -->
- <div class="frow frow--reverse">
- <div class="frow-media">
- <figure class="hero-shot ai-shot">
- <span class="shot-bar"><i></i><i></i><i></i><em>codex · horizon</em></span>
- <video class="ai-video" poster="/screenshots/horizon-1.0/codex-horizon-capability-tour-poster.jpg"
- controls muted loop playsinline preload="none"
- aria-label="Codex on the desktop reading a SkyWalking deployment — service discovery, a full layer topology and a role-aware BanyanDB deployment, mounted in the conversation">
- <source src="/screenshots/horizon-1.0/codex-horizon-capability-tour.mp4" type="video/mp4">
- </video>
- </figure>
- <div class="ai-byo">
- <span class="ai-byo-tag">The pattern</span>
- <p><strong>An entrance, not a scraper.</strong> The client calls an authorised capability and reasons from what comes back — it never clicks through the pages. SkyWalking keeps the semantics, permissions and presentation; the client keeps the model. From <a href="https://builder.aws.com/content/3IBMHB0VGZkCsH1WNw8vgTZXCJI/ai-clients-as-first-class-interfaces-a-new-pattern-for-software-access" target="_blank" rel="noopener">AI Clients as First-Class Interfaces</a>.</p>
+ </article>
+ <article class="observability-pillar pillar-ai" id="ai-observability" data-home-gallery aria-labelledby="ai-pillar-title">
+ <div class="pillar-copy">
+ <span class="pillar-eyebrow"><span class="pillar-dot" aria-hidden="true"></span>AI observability</span>
+ <h2 id="ai-pillar-title">Understand model calls<br>and agent work.</h2>
+ <p>Track model latency, token usage, and estimated cost. Follow agent conversations, tool calls, and recorded file changes.</p>
+ <ul class="pillar-topics" aria-label="AI observability coverage"><li>Models & tokens</li><li>Conversations & tools</li><li>Workspace changes</li></ul>
</div>
- </div>
- <div class="frow-copy">
- <span class="eyebrow">NEW · YOUR OWN AI CLIENT</span>
- <div class="frow-title" id="ai-client">
- <a class="card-anchor frow-anchor" href="#ai-client" data-anchor="ai-client" title="Copy link to “Investigate from the AI client you already use”" aria-label="Copy link to Investigate from the AI client you already use"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 [...]
- <h2>Investigate from the AI client you already use</h2>
+ <div class="pillar-product">
+ <div class="pillar-tabs" role="tablist" aria-label="AI observability screenshots" data-home-gallery-tabs hidden>
+ <button type="button" role="tab" id="ai-conversations-tab" data-home-gallery-tab="ai-conversations" aria-controls="ai-conversations" aria-selected="true" tabindex="0">Conversations</button>
+ <button type="button" role="tab" id="ai-changes-tab" data-home-gallery-tab="ai-changes" aria-controls="ai-changes" aria-selected="false" tabindex="-1">File changes</button>
+ <button type="button" role="tab" id="ai-usage-tab" data-home-gallery-tab="ai-usage" aria-controls="ai-usage" aria-selected="false" tabindex="-1">Token usage</button>
+ </div>
+ <figure id="ai-conversations" class="pillar-screen" data-home-gallery-panel>
+ <img src="/blog/2026-09-12-ai-sessionizer-workspace-changes/workspace-changes-featured.png" alt="Claude Code conversation replay with its timeline and recorded workspace changes" width="3000" height="1478" loading="eager" data-nolightbox="true">
+ <figcaption><span>Connect the conversation to the work</span><a href="/blog/2026-09-12-ai-sessionizer-workspace-changes/workspace-changes-featured.png" target="_blank" rel="noopener" aria-label="Enlarge conversations screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
+ <figure id="ai-changes" class="pillar-screen" data-home-gallery-panel hidden>
+ <img src="/blog/2026-09-12-ai-sessionizer-workspace-changes/tool-change-inspector.png" alt="A recorded tool call and its file diff in the workspace change inspector" width="2534" height="1290" loading="lazy" data-nolightbox="true">
+ <figcaption><span>Inspect the changes behind a tool call</span><a href="/blog/2026-09-12-ai-sessionizer-workspace-changes/tool-change-inspector.png" target="_blank" rel="noopener" aria-label="Enlarge file changes screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
+ <figure id="ai-usage" class="pillar-screen" data-home-gallery-panel hidden>
+ <img src="/blog/2026-09-12-ai-sessionizer-workspace-changes/ai-agent-overview.png" alt="SkyWalking AI Agent Overview with token heatmaps and usage by agent" width="3010" height="1486" loading="lazy" data-nolightbox="true">
+ <figcaption><span>See when and where tokens are used</span><a href="/blog/2026-09-12-ai-sessionizer-workspace-changes/ai-agent-overview.png" target="_blank" rel="noopener" aria-label="Enlarge token usage screenshot">Enlarge <span aria-hidden="true">↗</span></a></figcaption>
+ </figure>
</div>
- <p>SkyWalking exposes the same investigation capabilities over <strong>MCP</strong>, so an agent such as Codex can query your running system directly. In the ChatGPT desktop app, its own <strong>topology, deployment and chart components mount inside the conversation</strong> — interactive, not screenshots. In the CLI, the same capture comes back as structured evidence for a terminal workflow.</p>
- <ul class="frow-points">
- <li>
- <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 20h8M12 17v3"/></svg></span>
- <span><strong>One implementation, not two.</strong> The built-in assistant and an outside agent run the same investigation capabilities against the same live data — there is no second definition of a service, a metric or a topology to keep in sync.</span>
- </li>
- <li>
- <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg></span>
- <span><strong>Your permissions, still enforced.</strong> Connecting takes a permission of its own, and every capability then re-checks that you already have read access to the matching screen. Nothing on this path can change anything — profiling can be proposed, never started.</span>
- </li>
- <li>
- <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 11V8a5 5 0 0 1 10 0v3"/><rect x="5" y="11" width="14" height="10" rx="2"/></svg></span>
- <span><strong>The model stays on your side.</strong> Your agent brings its own model and its own subscription; SkyWalking only issues a read-scoped token, and never makes an LLM request itself.</span>
- </li>
- </ul>
- <div class="frow-cta">
- <a class="sky-btn primary" href="/docs/skywalking-horizon-ui/next/operate/mcp/">Connect your agent <i class="iconfont icon-arrow-right"></i></a>
+ <div class="pillar-footer">
+ <p class="pillar-note"><span class="pillar-preview">Preview</span> Conversation replay and file changes for Claude Code.</p>
+ <div class="pillar-links"><a class="pillar-cta" href="/blog/2026-09-12-ai-sessionizer-workspace-changes/">Explore AI observability <span aria-hidden="true">→</span></a><a class="pillar-docs" href="/docs/main/next/en/setup/backend/backend-envoy-ai-gateway-monitoring/">AI Gateway docs <span aria-hidden="true">↗</span></a></div>
</div>
- </div>
+ </article>
</div>
- <!-- Row 3 · 3D map — media left, copy right (alternating) -->
- <div class="frow">
- <figure class="frow-media">
- {{< map3d poster="/images/home/horizon-3d-map.png" badge="Interactive · sample data" >}}
- </figure>
- <div class="frow-copy">
- <span class="eyebrow">SEE IT IN 3D</span>
- <div class="frow-title" id="topology-3d">
- <a class="card-anchor frow-anchor" href="#topology-3d" data-anchor="topology-3d" title="Copy link to “Explore your topology in 3D”" aria-label="Copy link to Explore your topology in 3D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></a>
- <h2>Explore your topology in 3D</h2>
- </div>
- <p>Walk your services and cloud-native infrastructure as a living 3D scene — orbit, zoom and click any node to inspect it. It opens as a full page and runs entirely in your browser from a frozen demo snapshot: no server, no login, no setup.</p>
- <div class="frow-cta">
- <a class="sky-btn primary" href="/3d-map-app/">Open the 3D map <span class="hint">full page</span></a>
- </div>
- </div>
+ <div class="home-proof">
+ <a class="home-foundation" href="https://www.apache.org/" target="_blank" rel="noopener"><img src="/images/asf-oakleaf.svg" alt="" width="22" height="30" data-nolightbox="true"><span>An Apache Software<br>Foundation project</span></a>
+ <ul class="hero-stats" aria-label="SkyWalking community and scale">
+ <li><a href="/team/"><strong>{{< team-count >}}</strong><span>contributors</span></a></li>
+ <li><a href="https://github.com/apache?q=skywalking" target="_blank" rel="noopener"><strong>{{< stars-total >}}</strong><span>GitHub stars</span></a></li>
+ <li><strong>100B+</strong><span>telemetry per cluster</span></li>
+ <li><strong>10+</strong><span>years in production</span></li>
+ </ul>
</div>
-
</div>
</section>
-<!-- ===== CAPABILITIES ===== -->
-<section class="home-section">
+<div class="home-below">
+<!-- Explore each domain, then investigate with the same platform tools. -->
+<section class="home-domain home-cloud-domain" id="topology-3d" aria-labelledby="cloud-domain-title">
<div class="container">
- <div class="section-head">
- <span class="eyebrow">WHAT YOU GET</span>
- <h2>One platform for traces, metrics, logs, profiles and GenAI</h2>
- <p>An observability platform designed for cloud-native systems. Auto-instrument the languages you run, observe the kernel via eBPF, and store the volume natively in BanyanDB.</p>
- </div>
- <div class="cap-grid">
- <article class="cap-card">
- <span class="cap-tag tracing">Tracing</span>
- <h3>End-to-end distributed tracing</h3>
- <p>Native plus Zipkin v1/v2 formats. Auto-instrument 10+ languages, eBPF on Kubernetes, and dependency analysis across services and APIs.</p>
- <a href="/docs/main/latest/en/concepts-and-designs/probe-introduction/">Learn more →</a>
- </article>
- <article class="cap-card">
- <span class="cap-tag metrics">Metrics</span>
- <h3>Metrics pipeline at any scale</h3>
- <p>OTLP, native, OpenCensus, Telegraf and Zabbix flow through one MAL script pipeline — 100B+ data points per cluster.</p>
- <a href="/docs/main/latest/en/concepts-and-designs/mal/">Learn more →</a>
- </article>
- <article class="cap-card">
- <span class="cap-tag logging">Logging</span>
- <h3>Logs with trace correlation</h3>
- <p>Collect from disk or network, auto-bind trace context, extract metrics, sample by policy, and forward anywhere.</p>
- <a href="/docs/main/latest/en/setup/backend/log-analyzer/">Learn more →</a>
- </article>
- <article class="cap-card">
- <span class="cap-tag profiling">Profiling</span>
- <h3>Profiling, in-agent and eBPF</h3>
- <p>CPU and async profiling bundled in language agents. eBPF profiler on Rover for Kubernetes deployments.</p>
- <a href="/docs/main/latest/en/concepts-and-designs/profiling/">Learn more →</a>
- </article>
- <article class="cap-card">
- <span class="cap-tag genai">GenAI</span>
- <h3>LLM and GenAI monitoring</h3>
- <p>Latency, traffic, success rate, input/output tokens and estimated cost, per provider and model — from SkyWalking, OTLP or Zipkin traces.</p>
- <a href="/docs/main/latest/en/setup/service-agent/virtual-genai/">Learn more →</a>
- </article>
- <a class="cap-card cap-card--cta" href="/docs/">
- <span class="cap-cta-eyebrow">And the rest</span>
- <h3>See all capabilities</h3>
- <p>Every server, agent, database and integration in the project — each with documentation for every released version.</p>
- <span class="cap-cta-more">Browse documentation →</span>
- </a>
+ <div class="domain-story">
+ <span class="eyebrow">CLOUD-NATIVE OBSERVABILITY</span>
+ <h2 id="cloud-domain-title">See your systems<br>in context.</h2>
+ <p>Explore services and Kubernetes infrastructure together. Follow dependencies, rotate the 3D scene, and select a node to inspect it.</p>
+ <ul class="domain-details"><li>Service relationships</li><li>Infrastructure topology</li><li>Interactive exploration</li></ul>
+ <a class="domain-link" href="/3d-map-app/">Explore the 3D map <span aria-hidden="true">→</span></a>
+ <span class="domain-demo-note">Sample data · opens in your browser</span>
</div>
+ <div class="domain-map">{{< map3d poster="/images/home/horizon-3d-map.png" badge="Cloud-native demo · sample data" >}}</div>
</div>
</section>
-<!-- ===== ECOSYSTEM ===== -->
-<section class="home-section ecosystem">
+<section class="home-domain home-ai-domain" aria-labelledby="ai-domain-title">
<div class="container">
- <div class="section-head">
- <span class="eyebrow">ECOSYSTEM</span>
- <h2>Built for the stack you already run</h2>
- <p>Language agents, service mesh, eBPF, a native observability database, and broad telemetry-format support — vendor-neutral and Apache-governed.</p>
+ <div class="ai-domain-heading">
+ <div><span class="eyebrow">AI OBSERVABILITY</span><h2 id="ai-domain-title">From model performance<br>to agent work.</h2></div>
+ <div class="ai-domain-intro"><p>Monitor model and MCP traffic through Envoy AI Gateway. For Claude Code, explore usage patterns, replay conversations, and inspect the work recorded inside them.</p><a class="domain-link" href="/docs/skywalking-horizon-ui/next/dashboards/envoy_ai_gateway/">Explore AI Gateway <span aria-hidden="true">→</span></a></div>
</div>
- <div class="eco-grid">
- <a class="eco-card" href="/docs/#Agents" style="--eco: #3788D0;">
- <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span>
- <h4>Agents for your stack</h4>
- <p>Java, Go, Python, Node.js, PHP, Rust, Ruby, .NET, LUA, C++ and Client JavaScript — actively maintained.</p>
- <span class="eco-more">11 language agents →</span>
- </a>
- <a class="eco-card" href="/docs/skywalking-rover/latest/readme/" style="--eco: #11814b;">
- <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3v4m0 10v4m9-9h-4M7 12H3m13.5-6.5l-2.8 2.8M9.3 14.7l-2.8 2.8m11 0l-2.8-2.8M9.3 9.3L6.5 6.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="12" cy="12" r="2.4" stroke="currentColor" stroke-width="1.6"/></svg></span>
- <h4>eBPF with Rover</h4>
- <p>Monitor and profile Kubernetes deployments and diagnose CPU and network performance with eBPF.</p>
- <span class="eco-more">Rover docs →</span>
- </a>
- <a class="eco-card" href="/docs/skywalking-banyandb/latest/readme/" style="--eco: #0e7490;">
- <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="6" rx="7" ry="3" stroke="currentColor" stroke-width="1.6"/><path d="M5 6v6c0 1.66 3.13 3 7 3s7-1.34 7-3V6M5 12v6c0 1.66 3.13 3 7 3s7-1.34 7-3v-6" stroke="currentColor" stroke-width="1.6"/></svg></span>
- <h4>BanyanDB</h4>
- <p>A native observability database built to ingest, analyze and store telemetry at scale.</p>
- <span class="eco-more">BanyanDB docs →</span>
- </a>
- <a class="eco-card" href="/tags/ai/" style="--eco: #be2069;">
- <span class="eco-ic"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3l2.2 5.3L20 9l-4 3.6L17 18l-5-2.7L7 18l1-5.4L4 9l5.8-.7L12 3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg></span>
- <h4>AI-assisted troubleshooting</h4>
- <p>Ask Horizon UI to investigate in natural language — LLM-driven root cause, read-only and grounded in live data — plus ML baselines and anomaly detection.</p>
- <span class="eco-more">AI on the blog →</span>
- </a>
- </div>
- <div class="formats">
- <span class="formats-label">Telemetry supported natively</span>
- <span class="format-chip">OpenTelemetry (OTLP)</span>
- <span class="format-chip">Zipkin v1/v2</span>
- <span class="format-chip">Prometheus</span>
- <span class="format-chip">OpenCensus</span>
- <span class="format-chip">Telegraf</span>
- <span class="format-chip">Zabbix</span>
- <span class="format-chip">Fluentd / Fluent Bit</span>
- <span class="format-chip">Apache Kafka</span>
+ <div class="workflow-heading"><span>Inside a Claude Code workflow</span><span class="workflow-preview">Preview</span></div>
+ {{< home-agent-workflow >}}
+ </div>
+</section>
+
+<section class="home-investigation" aria-labelledby="investigation-title">
+ <div class="container">
+ <div class="section-head"><span class="eyebrow">AI FOR OBSERVABILITY</span><h2 id="investigation-title">Bring AI to every investigation.</h2><p>Explore your cloud-native and AI telemetry through Horizon's assistant or the AI client you already use.</p></div>
+ <div class="investigation-grid">
+ <article class="investigation-card" id="ai-assistant" aria-labelledby="horizon-investigation-title">
+ <div class="investigation-copy"><span class="investigation-label">IN HORIZON</span><h3 id="horizon-investigation-title">Ask. Explore. Understand.</h3><p>Ask about system health and performance. Get answers with charts, topology, traces, and logs, using the model you configure.</p></div>
+ <figure class="investigation-media"><video poster="/images/home/horizon-ai-assistant.png" controls muted playsinline preload="none" aria-label="Horizon AI Assistant investigating latency with charts and service topology"><source src="/images/home/horizon-ai-assistant.mp4" type="video/mp4"></video><figcaption>Horizon AI Assistant · recorded walkthrough</figcaption></figure>
+ <div class="investigation-footer"><p>Use an OpenAI-compatible endpoint or Amazon Bedrock. Investigations follow your access permissions.</p><a class="domain-link" href="/docs/skywalking-horizon-ui/next/operate/ai-assistant/">Explore the assistant <span aria-hidden="true">→</span></a></div>
+ </article>
+ <article class="investigation-card" id="ai-client" aria-labelledby="client-investigation-title">
+ <div class="investigation-copy"><span class="investigation-label">IN YOUR AI CLIENT</span><h3 id="client-investigation-title">Bring your own workflow.</h3><p>Connect over MCP to use the same investigation tools and observability data from your desktop or terminal.</p></div>
+ <figure class="investigation-media"><video poster="/screenshots/horizon-1.0/codex-horizon-capability-tour-poster.jpg" controls muted playsinline preload="none" aria-label="Codex exploring a SkyWalking deployment with Horizon charts and topology inside the conversation"><source src="/screenshots/horizon-1.0/codex-horizon-capability-tour.mp4" type="video/mp4"></video><figcaption>Codex with Horizon · recorded walkthrough</figcaption></figure>
+ <div class="investigation-footer"><p>MCP Apps clients can render Horizon views. Terminal clients receive structured evidence to investigate.</p><a class="domain-link" href="/docs/skywalking-horizon-ui/next/operate/mcp/">Connect your AI client <span aria-hidden="true">→</span></a></div>
+ </article>
</div>
</div>
</section>
+{{< home-platform >}}
+
<!-- ===== EVENTS & BLOGS ===== -->
<section class="home-section">
<div class="container">
<div class="section-head">
<span class="eyebrow">LATEST</span>
- <h2>Events & blogs</h2>
+ <h2>From the SkyWalking community</h2>
+ <p>Releases, practical guides, and progress in cloud-native and AI observability.</p>
</div>
<ul class="events-content feature-content">
{{< blocks/events >}}
@@ -337,11 +190,11 @@ description = "Apache SkyWalking is an open source observability platform for cl
<div class="get-started">
<div class="gs-text">
<span class="gs-eyebrow">GET STARTED</span>
- <h2>Ready to get started?</h2>
- <p>Spin up the Showcase to see Apache SkyWalking in action, or install the platform — then join a community built by <a href="/team/">{{< team-count >}} contributors</a>.</p>
+ <h2>Start with your systems. Or your AI.</h2>
+ <p>Run the cloud-native Showcase or explore AI monitoring and agent workflows. Build with an open source community of <a href="/team/">{{< team-count >}} contributors</a>.</p>
<div class="gs-cta">
- <a class="sky-btn primary" href="/get-started/#qs-skywalking">Quick start <i class="iconfont icon-arrow-right"></i></a>
- <a class="sky-btn" href="/docs/">Explore projects</a>
+ <a class="sky-btn" href="/get-started/#qs-showcase">Try the cloud-native Showcase <i class="iconfont icon-arrow-right"></i></a>
+ <a class="sky-btn" href="#ai-domain-title">Explore AI observability <i class="iconfont icon-arrow-right"></i></a>
</div>
</div>
</div>
diff --git a/layouts/partials/map3d.html b/layouts/partials/map3d.html
index ef4df1437dd8..ced94ead24c6 100644
--- a/layouts/partials/map3d.html
+++ b/layouts/partials/map3d.html
@@ -1,7 +1,7 @@
{{- /*
3D Infrastructure Map launcher — a clickable poster that opens the WebGL app
as a full browser page (/3d-map-app/). The poster is a static image, so the
- 22MB bundle / render loop never loads on the page that embeds it; it loads
+ application bundle and render loop never load on the page that embeds it; they load
only after the user clicks through.
Usage (content): {{< map3d poster="/images/home/horizon-3d-map.png" badge="Interactive · sample data" >}}
@@ -15,7 +15,7 @@
<figure class="map3d-stage">
<a class="map3d-poster" href="{{ $app }}" aria-label="Open the interactive 3D infrastructure map">
{{- with $badge }}<span class="map3d-badge">{{ . }}</span>{{ end }}
- <img loading="lazy" src="{{ $poster }}"
+ <img loading="lazy" src="{{ $poster }}" data-nolightbox="true"
alt="Apache SkyWalking topology rendered as an interactive 3D scene you can orbit, zoom and click">
<span class="map3d-play" aria-hidden="true">
<span class="map3d-play-btn">
diff --git a/layouts/shortcodes/home-agent-workflow.html b/layouts/shortcodes/home-agent-workflow.html
new file mode 100644
index 000000000000..9675c7579ae2
--- /dev/null
+++ b/layouts/shortcodes/home-agent-workflow.html
@@ -0,0 +1,68 @@
+{{- $catalog := partialCached "project-catalog-data.html" .Page.Site -}}
+{{- $sessionizer := (index $catalog "skywalking-ai-sessionizer").project -}}
+{{- $sessionizerLink := $sessionizer.next.docs.link -}}
+{{- $previews := slice
+ (dict "id" "usage" "title" "Usage"
+ "summary" "See token patterns across agents, sessions, and machines."
+ "heading" "See where your tokens are going."
+ "description" "Compare daily and hourly token usage across your agents. Find a busy period, then narrow the investigation to a runtime or conversation."
+ "image" "/blog/2026-09-12-ai-sessionizer-workspace-changes/ai-agent-overview.png"
+ "width" 3010 "height" 1486
+ "alt" "AI Agent Overview with daily and hourly token heatmaps and reporting agent services."
+ "caption" "Horizon · AI Agent Overview")
+ (dict "id" "conversations" "title" "Conversations"
+ "summary" "Find a task and replay the discussion alongside its timeline."
+ "heading" "Find the conversation behind the activity."
+ "description" "Filter collected conversations by runtime, time range, or title. Review activity counts and open a task to follow its transcript and execution timeline."
+ "image" "/blog/2026-09-12-ai-sessionizer-workspace-changes/conversation-list.png"
+ "width" 3014 "height" 1476
+ "alt" "Conversations list with runtime and title filters, model calls, tool activity, and recorded change counts."
+ "caption" "Horizon · Conversations")
+ (dict "id" "tools" "title" "Tools & subagents"
+ "summary" "Inspect tool calls, their results, and delegated work."
+ "heading" "Follow the work inside a conversation."
+ "description" "Follow model calls and tools on the execution timeline. Switch between the main agent and child streams, then inspect a tool's request, result, and source evidence."
+ "image" "/blog/2026-09-03-ai-sessionizer-first-look/asz-2.png"
+ "width" 3018 "height" 1468
+ "alt" "AI Sessionizer replay with a tool execution timeline, main and child stream navigation, and an evidence inspector."
+ "caption" "AI Sessionizer · Local replay")
+ (dict "id" "changes" "title" "File changes"
+ "summary" "Read recorded diffs in the context of the work that produced them."
+ "heading" "Read a change with its supporting evidence."
+ "description" "Read a recorded file diff alongside its associated tool call. Inspect its capture source and supporting evidence to understand the change in context."
+ "image" "/blog/2026-09-12-ai-sessionizer-workspace-changes/tool-change-inspector.png"
+ "width" 2534 "height" 1290
+ "alt" "A recorded Write tool change showing a unified file diff, capture source, and supporting evidence."
+ "caption" "Horizon · File change inspector")
+-}}
+<ol class="agent-workflow">
+ {{- range $index, $preview := $previews }}
+ <li>
+ <a href="{{ $sessionizerLink }}" data-home-preview="workflow-preview-{{ .id }}" aria-label="Preview {{ .title }}">
+ <span class="workflow-step" aria-hidden="true">{{ printf "%02d" (add $index 1) }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M9 4H4v5m11-5h5v5M4 15v5h5m11-5v5h-5"/></svg></span>
+ <h3>{{ .title }}</h3>
+ <p>{{ .summary }}</p>
+ <span class="workflow-more">View screenshot <span aria-hidden="true">+</span></span>
+ </a>
+ </li>
+ {{- end }}
+</ol>
+{{- range $previews }}
+<dialog class="workflow-dialog" id="workflow-preview-{{ .id }}" aria-labelledby="workflow-preview-{{ .id }}-title" aria-describedby="workflow-preview-{{ .id }}-description">
+ <div class="workflow-dialog-header">
+ <div><div class="workflow-dialog-eyebrow">{{ .title }} <span class="workflow-preview">Preview</span></div><h2 class="workflow-dialog-title" id="workflow-preview-{{ .id }}-title">{{ .heading }}</h2></div>
+ <button type="button" class="workflow-dialog-close" data-home-preview-close aria-label="Close {{ .title }} preview"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="m6 6 12 12M6 18 18 6"/></svg></button>
+ </div>
+ <div class="workflow-dialog-body">
+ <figure class="workflow-dialog-figure">
+ <img src="{{ .image }}" width="{{ .width }}" height="{{ .height }}" alt="{{ .alt }}" loading="lazy" data-nolightbox="true">
+ <figcaption>{{ .caption }}</figcaption>
+ </figure>
+ <p class="workflow-dialog-description" id="workflow-preview-{{ .id }}-description">{{ .description }}</p>
+ </div>
+ <div class="workflow-dialog-footer">
+ <a class="workflow-dialog-fullsize" href="{{ .image }}" target="_blank" rel="noopener">View full-size screenshot <span aria-hidden="true">↗</span></a>
+ <a class="workflow-dialog-cta" href="{{ $sessionizerLink }}">Explore AI Sessionizer <span aria-hidden="true">→</span></a>
+ </div>
+</dialog>
+{{- end }}
diff --git a/layouts/shortcodes/home-platform.html b/layouts/shortcodes/home-platform.html
new file mode 100644
index 000000000000..3e36fd66c4c9
--- /dev/null
+++ b/layouts/shortcodes/home-platform.html
@@ -0,0 +1,93 @@
+{{- $catalog := partialCached "project-catalog-data.html" .Page.Site -}}
+{{- $rover := (index $catalog "skywalking-rover").project -}}
+{{- $sessionizer := (index $catalog "skywalking-ai-sessionizer").project -}}
+<section class="home-platform" aria-labelledby="home-platform-title">
+ <div class="container">
+ <div class="section-head">
+ <span class="eyebrow">Projects & integrations</span>
+ <h2 id="home-platform-title">Build your observability stack.</h2>
+ <p>Connect your systems and AI workflows to one shared platform.</p>
+ </div>
+
+ <div class="hp-groups">
+ <article class="hp-group hp-cloud" aria-labelledby="hp-cloud-title">
+ <header class="hp-group-heading">
+ <span class="hp-group-mark" aria-hidden="true">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="6" rx="1.5"/><rect x="2" y="16" width="8" height="6" rx="1.5"/><rect x="14" y="16" width="8" height="6" rx="1.5"/><path d="M12 8v4M6 16v-4h12v4"/></svg>
+ </span>
+ <div><h3 id="hp-cloud-title">Cloud-native</h3><p>From application code to the infrastructure beneath it.</p></div>
+ </header>
+ <ul class="hp-projects">
+ <li>
+ <a class="hp-project" href="/docs/#Agents">
+ <span class="hp-project-copy"><span class="hp-project-title">Language agents</span><span class="hp-project-description">Instrument services in the languages you use.</span></span>
+ <span class="hp-arrow" aria-hidden="true">→</span>
+ </a>
+ </li>
+ <li class="hp-integrations">
+ <span class="hp-project-title">Service Mesh</span>
+ <span class="hp-project-description">Monitor Istio / Envoy, including Istio Ambient with the Rover eBPF agent.</span>
+ <div class="hp-integration-links">
+ <a href="/docs/main/next/en/setup/envoy/als_setting/">Istio / Envoy <span aria-hidden="true">→</span></a>
+ <a href="/docs/#{{ replaceRE `[ ()]` "" $rover.name }}">Rover · Istio Ambient <span aria-hidden="true">→</span></a>
+ </div>
+ </li>
+ <li class="hp-integrations">
+ <span class="hp-project-title">Telemetry integrations</span>
+ <span class="hp-project-description">Connect your existing telemetry tools.</span>
+ <div class="hp-integration-links">
+ <a href="/docs/main/next/en/setup/backend/opentelemetry-receiver/">OpenTelemetry (OTLP) <span aria-hidden="true">→</span></a>
+ </div>
+ </li>
+ </ul>
+ </article>
+
+ <article class="hp-group hp-ai" aria-labelledby="hp-ai-title">
+ <header class="hp-group-heading">
+ <span class="hp-group-mark" aria-hidden="true">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 3h16v12H9l-5 5V3Z"/><path d="m8 9 2 2 4-4M16 8h1M16 11h1"/></svg>
+ </span>
+ <div><h3 id="hp-ai-title">AI</h3><p>From model calls to the work your agents perform.</p></div>
+ </header>
+ <ul class="hp-projects">
+ <li>
+ <a class="hp-project" href="/docs/main/next/en/setup/backend/backend-envoy-ai-gateway-monitoring/">
+ <span class="hp-project-copy"><span class="hp-project-title">AI Gateway</span><span class="hp-project-description">Monitor LLM and MCP traffic through Envoy AI Gateway.</span></span>
+ <span class="hp-arrow" aria-hidden="true">→</span>
+ </a>
+ </li>
+ <li>
+ <a class="hp-project" href="/docs/#{{ replaceRE `[ ()]` "" $sessionizer.name }}">
+ <span class="hp-project-copy"><span class="hp-project-title">{{ $sessionizer.name }}</span><span class="hp-project-description">Collect Claude Code history and export it to SkyWalking.</span></span>
+ <span class="hp-arrow" aria-hidden="true">→</span>
+ </a>
+ </li>
+ <li>
+ <a class="hp-project" href="/blog/2026-09-12-ai-sessionizer-workspace-changes/">
+ <span class="hp-project-copy"><span class="hp-project-title">Claude Code <span class="hp-preview">Preview</span></span><span class="hp-project-description">Explore conversations, tool calls, and recorded file changes.</span></span>
+ <span class="hp-arrow" aria-hidden="true">→</span>
+ </a>
+ </li>
+ </ul>
+ </article>
+ </div>
+
+ <div class="hp-shared" aria-labelledby="hp-shared-title">
+ <div class="hp-shared-heading"><h3 id="hp-shared-title">One shared platform</h3><span>Explore · analyze · store</span></div>
+ <div class="hp-foundation">
+ {{- range slice
+ (dict "repo" "skywalking-horizon-ui" "label" "Horizon UI" "description" "Explore and investigate.")
+ (dict "repo" "skywalking" "label" "Observability Analysis Platform" "description" "Analyze and correlate.")
+ (dict "repo" "skywalking-banyandb" "label" "BanyanDB" "description" "Store and query telemetry.")
+ -}}
+ {{- $project := (index $catalog .repo).project -}}
+ <a class="hp-foundation-link" href="/docs/#{{ replaceRE `[ ()]` "" $project.name }}">
+ {{- with $project.icon }}<img src="/images/project/{{ . }}.svg" width="32" height="32" alt="" loading="lazy" data-nolightbox="true">{{ end -}}
+ <span><strong>{{ .label }}</strong><span>{{ .description }}</span></span>
+ <span class="hp-arrow" aria-hidden="true">→</span>
+ </a>
+ {{- end -}}
+ </div>
+ </div>
+ </div>
+</section>
diff --git a/themes/docsy/layouts/partials/scripts-home.html b/themes/docsy/layouts/partials/scripts-home.html
index 793372680cca..1f0644c89472 100644
--- a/themes/docsy/layouts/partials/scripts-home.html
+++ b/themes/docsy/layouts/partials/scripts-home.html
@@ -1,3 +1,7 @@
+{{ if .IsHome }}
+{{ $homeGallery := resources.Get "js/home-observability.js" | minify | fingerprint }}
+<script src="{{ $homeGallery.RelPermalink }}" integrity="{{ $homeGallery.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ end }}
<script>
initBanner();
openDemoDropdown();