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 06:56:27 UTC
(skywalking-website) branch redesign-homepage-cloud-native-ai created (now 9a73ee41e88b)
This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a change to branch redesign-homepage-cloud-native-ai
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
at 9a73ee41e88b Redesign homepage around cloud-native and AI observability
This branch includes the following new commits:
new 9a73ee41e88b Redesign homepage around cloud-native and AI observability
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(skywalking-website) 01/01: Redesign homepage around cloud-native and AI observability
Posted by wu...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch redesign-homepage-cloud-native-ai
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
commit 9a73ee41e88b8ed74bdeaf9de79bd181d9a82a11
Author: Wu Sheng <wu...@foxmail.com>
AuthorDate: Mon Sep 14 14:55:40 2026 +0800
Redesign homepage around cloud-native and AI observability
---
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();