Skip to content

feat(landing): alerting homepage section + redesigned /features/alerting page #249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Makisuo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(landing): alerting homepage section + redesigned /features/alerting page #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions apps/landing/messages/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,15 +293,21 @@

"alert_badge": "Alerting",
"alert_heading": "Alerts with the context attached",
"alert_rules_title": "Alert rules",
"alert_rules_desc": "7 built-in signal types \u2014 error rate, P95/P99 latency, Apdex, throughput, custom metrics, and custom queries. With severity levels, incident tracking, and auto-resolution.",
"alert_route_title": "Route everywhere",
"alert_route_desc": "Push alerts to Slack, Discord, PagerDuty, or any webhook. Your team gets notified where they already work.",
"alert_rules_title": "From error rate to raw SQL",
"alert_rules_desc": "Error rate, P95/P99 latency, Apdex, throughput, any metric \u2014 and when the presets run out, write the query yourself. You set the window, the threshold, and the severity.",
"alert_route_title": "Paged where you work",
"alert_route_desc": "Slack, Discord, PagerDuty, email, Hazel, or any webhook. Wire one rule to as many destinations as you want \u2014 on-call gets paged while the channel gets the summary.",
"alert_firing": "Firing",
"alert_triggered_ago": "Triggered 34s ago",
"alert_view": "View in Maple",
"alert_acknowledge": "Acknowledge",
"alert_webhook_note": "+ any custom webhook endpoint",
"alert_lede": "Threshold and anomaly rules watch your live telemetry around the clock. When one fires, the page arrives with the trace that tripped it, the blast radius, and a one-click AI diagnosis \u2014 not just a number that crossed a line.",
"alert_incidents_title": "Incidents, not noise",
"alert_incidents_desc": "A firing rule opens an incident, renotifies while it's still hot, and auto-resolves when the numbers recover. Fan out per group. Preview against real history before you ship it.",
"alert_ai_note": "AI diagnosis linked in every notification",
"alert_dest_email": "Email",
"alert_dest_webhook": "Webhook",

"how_badge": "Getting started",
"how_heading": "Three steps to observability",
Expand All @@ -328,6 +334,7 @@
"footer_metrics_dashboards": "Metrics & Dashboards",
"footer_service_catalog": "Service Catalog",
"footer_error_tracking": "Error Tracking",
"footer_alerting": "Alerting",
"footer_ai_mcp": "AI & MCP",
"footer_kubernetes": "Kubernetes Monitoring",
"footer_compare": "Compare",
Expand Down
15 changes: 11 additions & 4 deletions apps/landing/messages/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,15 +293,21 @@

"alert_badge": "\u30a2\u30e9\u30fc\u30c8",
"alert_heading": "\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u4ed8\u304d\u306e\u30a2\u30e9\u30fc\u30c8",
"alert_rules_title": "\u30a2\u30e9\u30fc\u30c8\u30eb\u30fc\u30eb",
"alert_rules_desc": "\u30a8\u30e9\u30fc\u7387\u3001P95/P99\u30ec\u30a4\u30c6\u30f3\u30b7\u3001Apdex\u3001\u30b9\u30eb\u30fc\u30d7\u30c3\u30c8\u3001\u30ab\u30b9\u30bf\u30e0\u30e1\u30c8\u30ea\u30af\u30b9\u3001\u30ab\u30b9\u30bf\u30e0\u30af\u30a8\u30ea\u306e7\u7a2e\u985e\u306e\u7d44\u307f\u8fbc\u307f\u30b7\u30b0\u30ca\u30eb\u3002\u91cd\u5927\u5ea6\u30ec\u30d9\u30eb\u3001\u30a4\u30f3\u30b7\u30c7\u30f3\u30c8\u8ffd\u8de1\u3001\u81ea\u52d5\u89e3\u6c7a\u4ed8\u304d\u3002",
"alert_route_title": "\u3069\u3053\u3078\u3067\u3082\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0",
"alert_route_desc": "\u30a2\u30e9\u30fc\u30c8\u3092Slack\u3001Discord\u3001PagerDuty\u3001\u4efb\u610f\u306eWebhook\u3078\u3002\u30c1\u30fc\u30e0\u304c\u666e\u6bb5\u3044\u308b\u5834\u6240\u306b\u901a\u77e5\u304c\u5c4a\u304d\u307e\u3059\u3002",
"alert_rules_title": "\u30a8\u30e9\u30fc\u7387\u304b\u3089\u751fSQL\u307e\u3067",
"alert_rules_desc": "\u30a8\u30e9\u30fc\u7387\u3001P95/P99\u30ec\u30a4\u30c6\u30f3\u30b7\u3001Apdex\u3001\u30b9\u30eb\u30fc\u30d7\u30c3\u30c8\u3001\u4efb\u610f\u306e\u30e1\u30c8\u30ea\u30af\u30b9\u3002\u30d7\u30ea\u30bb\u30c3\u30c8\u3067\u8db3\u308a\u306a\u3051\u308c\u3070\u3001\u30af\u30a8\u30ea\u3092\u81ea\u5206\u3067\u66f8\u3051\u307e\u3059\u3002\u30a6\u30a3\u30f3\u30c9\u30a6\u3001\u3057\u304d\u3044\u5024\u3001\u91cd\u5927\u5ea6\u306f\u3059\u3079\u3066\u81ea\u7531\u306b\u3002",
"alert_route_title": "\u666e\u6bb5\u3044\u308b\u5834\u6240\u306b\u901a\u77e5",
"alert_route_desc": "Slack\u3001Discord\u3001PagerDuty\u3001\u30e1\u30fc\u30eb\u3001Hazel\u3001\u4efb\u610f\u306eWebhook\u30021\u3064\u306e\u30eb\u30fc\u30eb\u3092\u8907\u6570\u306e\u5b9b\u5148\u3078 \u2014 \u30aa\u30f3\u30b3\u30fc\u30eb\u306b\u306f\u30da\u30fc\u30b8\u3001\u30c1\u30e3\u30f3\u30cd\u30eb\u306b\u306f\u30b5\u30de\u30ea\u30fc\u3092\u3002",
"alert_firing": "\u767a\u706b\u4e2d",
"alert_triggered_ago": "34\u79d2\u524d\u306b\u767a\u706b",
"alert_view": "Maple\u3067\u8868\u793a",
"alert_acknowledge": "\u78ba\u8a8d",
"alert_webhook_note": "+ \u4efb\u610f\u306e\u30ab\u30b9\u30bf\u30e0Webhook\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8",
"alert_lede": "\u3057\u304d\u3044\u5024\u3068\u7570\u5e38\u691c\u77e5\u306e\u30eb\u30fc\u30eb\u304c\u3001\u30e9\u30a4\u30d6\u306a\u30c6\u30ec\u30e1\u30c8\u30ea\u3092\u5e38\u6642\u76e3\u8996\u3002\u767a\u706b\u3057\u305f\u901a\u77e5\u306b\u306f\u3001\u539f\u56e0\u3068\u306a\u3063\u305f\u30c8\u30ec\u30fc\u30b9\u3001\u5f71\u97ff\u7bc4\u56f2\u3001\u30ef\u30f3\u30af\u30ea\u30c3\u30af\u306eAI\u8a3a\u65ad\u304c\u6dfb\u4ed8\u3055\u308c\u307e\u3059 \u2014 \u6570\u5b57\u304c\u5c4a\u304f\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002",
"alert_incidents_title": "\u30ce\u30a4\u30ba\u3067\u306f\u306a\u304f\u30a4\u30f3\u30b7\u30c7\u30f3\u30c8",
"alert_incidents_desc": "\u767a\u706b\u3057\u305f\u30eb\u30fc\u30eb\u306f\u30a4\u30f3\u30b7\u30c7\u30f3\u30c8\u3092\u958b\u304d\u3001\u7d9a\u304f\u9593\u306f\u518d\u901a\u77e5\u3057\u3001\u6570\u5024\u304c\u56de\u5fa9\u3059\u308c\u3070\u81ea\u52d5\u3067\u89e3\u6c7a\u3002\u30b0\u30eb\u30fc\u30d7\u3054\u3068\u306b\u30d5\u30a1\u30f3\u30a2\u30a6\u30c8\u3057\u3001\u4fdd\u5b58\u524d\u306b\u5b9f\u30c7\u30fc\u30bf\u3067\u30d7\u30ec\u30d3\u30e5\u30fc\u3067\u304d\u307e\u3059\u3002",
"alert_ai_note": "\u3059\u3079\u3066\u306e\u901a\u77e5\u306bAI\u8a3a\u65ad\u30ea\u30f3\u30af\u4ed8\u304d",
"alert_dest_email": "\u30e1\u30fc\u30eb",
"alert_dest_webhook": "Webhook",

"how_badge": "\u306f\u3058\u3081\u304b\u305f",
"how_heading": "3\u30b9\u30c6\u30c3\u30d7\u3067\u30aa\u30d6\u30b6\u30fc\u30d0\u30d3\u30ea\u30c6\u30a3",
Expand All @@ -328,6 +334,7 @@
"footer_metrics_dashboards": "\u30e1\u30c8\u30ea\u30af\u30b9 & \u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9",
"footer_service_catalog": "\u30b5\u30fc\u30d3\u30b9\u30ab\u30bf\u30ed\u30b0",
"footer_error_tracking": "\u30a8\u30e9\u30fc\u30c8\u30e9\u30c3\u30ad\u30f3\u30b0",
"footer_alerting": "\u30a2\u30e9\u30fc\u30c8",
"footer_ai_mcp": "AI & MCP",
"footer_kubernetes": "Kubernetes\u76e3\u8996",
"footer_compare": "\u6bd4\u8f03",
Expand Down
15 changes: 11 additions & 4 deletions apps/landing/messages/ko.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,15 +293,21 @@

"alert_badge": "\uc54c\ub9bc",
"alert_heading": "\ucee8\ud14d\uc2a4\ud2b8\uac00 \ubd99\uc5b4 \uc788\ub294 \uc54c\ub9bc",
"alert_rules_title": "\uc54c\ub9bc \uaddc\uce59",
"alert_rules_desc": "\uc5d0\ub7ec\uc728, P95/P99 \ub808\uc774\ud134\uc2dc, Apdex, \ucc98\ub9ac\ub7c9, \ucee4\uc2a4\ud140 \uba54\ud2b8\ub9ad, \ucee4\uc2a4\ud140 \ucffc\ub9ac \ub4f1 7\uac00\uc9c0 \ub0b4\uc7a5 \uc2dc\uadf8\ub110 \uc720\ud615. \uc2ec\uac01\ub3c4 \ub808\ubca8, \uc778\uc2dc\ub358\ud2b8 \ucd94\uc801, \uc790\ub3d9 \ud574\uacb0 \ud3ec\ud568.",
"alert_route_title": "\uc5b4\ub514\ub85c\ub4e0 \ub77c\uc6b0\ud305",
"alert_route_desc": "\uc54c\ub9bc\uc744 Slack, Discord, PagerDuty \ub610\ub294 \uc784\uc758\uc758 \uc6f9\ud6c5\uc73c\ub85c \ubcf4\ub0b4\uc138\uc694. \ud300\uc774 \uc774\ubbf8 \uc77c\ud558\ub294 \uacf3\uc73c\ub85c \uc54c\ub9bc\uc774 \uac11\ub2c8\ub2e4.",
"alert_rules_title": "\uc5d0\ub7ec\uc728\ubd80\ud130 raw SQL\uae4c\uc9c0",
"alert_rules_desc": "\uc5d0\ub7ec\uc728, P95/P99 \ub808\uc774\ud134\uc2dc, Apdex, \ucc98\ub9ac\ub7c9, \uc784\uc758\uc758 \uba54\ud2b8\ub9ad \u2014 \ud504\ub9ac\uc14b\uc73c\ub85c \ubd80\uc871\ud558\uba74 \ucffc\ub9ac\ub97c \uc9c1\uc811 \uc791\uc131\ud558\uc138\uc694. \uc708\ub3c4\uc6b0, \uc784\uacc4\uac12, \uc2ec\uac01\ub3c4\ub294 \ubaa8\ub450 \uc790\uc720\ub86d\uac8c.",
"alert_route_title": "\ud300\uc774 \uc77c\ud558\ub294 \uacf3\uc73c\ub85c",
"alert_route_desc": "Slack, Discord, PagerDuty, \uc774\uba54\uc77c, Hazel, \uc784\uc758\uc758 \uc6f9\ud6c5. \ud558\ub098\uc758 \uaddc\uce59\uc744 \uc5ec\ub7ec \ub300\uc0c1\uc5d0 \uc5f0\uacb0\ud558\uc138\uc694 \u2014 \uc628\ucf5c\uc740 \ud398\uc774\uc9c0\ub97c, \ucc44\ub110\uc740 \uc694\uc57d\uc744 \ubc1b\uc2b5\ub2c8\ub2e4.",
"alert_firing": "\ubc1c\uc0dd \uc911",
"alert_triggered_ago": "34\ucd08 \uc804 \ubc1c\uc0dd",
"alert_view": "Maple\uc5d0\uc11c \ubcf4\uae30",
"alert_acknowledge": "\ud655\uc778",
"alert_webhook_note": "+ \uc784\uc758\uc758 \ucee4\uc2a4\ud140 \uc6f9\ud6c5 \uc5d4\ub4dc\ud3ec\uc778\ud2b8",
"alert_lede": "\uc784\uacc4\uac12 \ubc0f \uc774\uc0c1 \ud0d0\uc9c0 \uaddc\uce59\uc774 \uc2e4\uc2dc\uac04 \ud154\ub808\uba54\ud2b8\ub9ac\ub97c \uc0c1\uc2dc \uac10\uc2dc\ud569\ub2c8\ub2e4. \uc54c\ub9bc\uc774 \ubc1c\uc0dd\ud558\uba74 \uc6d0\uc778\uc774 \ub41c \ud2b8\ub808\uc774\uc2a4, \uc601\ud5a5 \ubc94\uc704, \uc6d0\ud074\ub9ad AI \uc9c4\ub2e8\uc774 \ud568\uaed8 \ub3c4\ucc29\ud569\ub2c8\ub2e4 \u2014 \uc22b\uc790 \ud558\ub098\ub9cc \uc624\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.",
"alert_incidents_title": "\ub178\uc774\uc988\uac00 \uc544\ub2cc \uc778\uc2dc\ub358\ud2b8",
"alert_incidents_desc": "\ubc1c\uc0dd\ud55c \uaddc\uce59\uc740 \uc778\uc2dc\ub358\ud2b8\ub97c \uc5f4\uace0, \uc9c0\uc18d\ub418\ub294 \ub3d9\uc548 \uc7ac\uc54c\ub9bc\ud558\uba70, \uc218\uce58\uac00 \ud68c\ubcf5\ub418\uba74 \uc790\ub3d9\uc73c\ub85c \ud574\uacb0\ub429\ub2c8\ub2e4. \uadf8\ub8f9\ubcc4\ub85c \ud655\uc7a5\ud558\uace0, \uc800\uc7a5 \uc804\uc5d0 \uc2e4\uc81c \ub370\uc774\ud130\ub85c \ubbf8\ub9ac \ud655\uc778\ud558\uc138\uc694.",
"alert_ai_note": "\ubaa8\ub4e0 \uc54c\ub9bc\uc5d0 AI \uc9c4\ub2e8 \ub9c1\ud06c \ud3ec\ud568",
"alert_dest_email": "\uc774\uba54\uc77c",
"alert_dest_webhook": "\uc6f9\ud6c5",

"how_badge": "\uc2dc\uc791\ud558\uae30",
"how_heading": "3\ub2e8\uacc4\ub85c \uc635\uc800\ubc84\ube4c\ub9ac\ud2f0",
Expand All @@ -328,6 +334,7 @@
"footer_metrics_dashboards": "\uba54\ud2b8\ub9ad & \ub300\uc2dc\ubcf4\ub4dc",
"footer_service_catalog": "\uc11c\ube44\uc2a4 \uce74\ud0c8\ub85c\uadf8",
"footer_error_tracking": "\uc5d0\ub7ec \ucd94\uc801",
"footer_alerting": "\uc54c\ub9bc",
"footer_ai_mcp": "AI & MCP",
"footer_kubernetes": "Kubernetes \ubaa8\ub2c8\ud130\ub9c1",
"footer_compare": "\ube44\uad50",
Expand Down
152 changes: 152 additions & 0 deletions apps/landing/src/components/Alerting.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
---
/**
* Homepage section — Alerting.
* Centered "stage" layout (like the Kubernetes section): eyebrow pill,
* gradient heading, the firing-incident artifact, a row of every supported
* notification destination, and a 3-card feature strip.
*/
import { getRelativeLocaleUrl } from "astro:i18n";
import LiveAlertFeed from "./live/LiveAlertFeed.astro";
import * as m from "../paraglide/messages";

const locale = Astro.currentLocale ?? "en";
const featurePath = getRelativeLocaleUrl(locale, "/features/alerting");

const features = [
{ title: m.alert_rules_title(), desc: m.alert_rules_desc() },
{ title: m.alert_route_title(), desc: m.alert_route_desc() },
{ title: m.alert_incidents_title(), desc: m.alert_incidents_desc() },
];
---

<section class="relative bg-bg-deep overflow-hidden">
<!-- Subtle dot-grid backdrop, faded toward the edges. -->
<div
class="absolute inset-0 pointer-events-none"
aria-hidden="true"
style="
background-image: radial-gradient(oklch(1 0 0 / 5%) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 78%);
"
></div>

<div class="relative mx-auto max-w-6xl px-6 py-24 md:py-32">
<!-- Centered prose stage. -->
<div class="mx-auto max-w-2xl text-center">
<span
class="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-2.5 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-fg-muted"
>
<span class="inline-block size-1.5 rounded-full bg-primary"></span>
{m.alert_badge()}
</span>

<h2
class="mt-4 font-display text-3xl sm:text-4xl md:text-5xl font-semibold leading-[1.04] tracking-tight text-gradient-accent"
>
{m.alert_heading()}
</h2>
<p class="mx-auto mt-5 text-sm md:text-base text-fg-muted leading-relaxed max-w-lg">
{m.alert_lede()}
</p>

<div class="mt-7 flex justify-center text-[12.5px]">
<a
href={featurePath}
class="text-fg hover:text-primary transition-colors border-b border-border hover:border-primary pb-0.5"
>
{m.cta_learn_more()}
</a>
</div>
</div>

<!-- Incident artifact with a soft glow underneath. -->
<div class="relative mt-14 md:mt-16 mx-auto max-w-2xl">
<div
class="absolute inset-0 pointer-events-none -z-10"
aria-hidden="true"
style="box-shadow: 0 0 160px 32px oklch(0.70 0.16 60 / 0.08);"
></div>
<LiveAlertFeed />
</div>

<!-- Every supported destination. -->
<div class="mt-12 flex flex-wrap justify-center gap-3">
<span
class="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1.5 text-[12px] text-fg-muted"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" fill="#E8C5EA" aria-hidden="true">
<path
d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"
/>
</svg>
Slack
</span>
<span
class="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1.5 text-[12px] text-fg-muted"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" fill="#C7CDFF" aria-hidden="true">
<path
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
/>
</svg>
Discord
</span>
<span
class="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1.5 text-[12px] text-fg-muted"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" fill="none" aria-hidden="true">
<path d="M4 6h16v12H4z" stroke="#E8872A" stroke-width="1.8" stroke-linejoin="round" />
<path d="m4 7 8 6 8-6" stroke="#E8872A" stroke-width="1.8" stroke-linejoin="round" />
</svg>
{m.alert_dest_email()}
</span>
<span
class="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1.5 text-[12px] text-fg-muted"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" fill="#06AC38" aria-hidden="true">
<path
d="M16.965 1.18C15.085.164 13.769 0 10.683 0H3.73v14.55h6.926c2.743 0 4.8-.164 6.61-1.37 1.975-1.303 3.004-3.484 3.004-6.007 0-2.716-1.262-4.896-3.305-5.994zm-5.5 10.326h-4.21V3.113l3.977-.027c3.62-.028 5.43 1.234 5.43 4.128 0 3.113-2.248 4.292-5.197 4.292zM3.73 17.61h3.525V24H3.73z"
/>
</svg>
PagerDuty
</span>
<span
class="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1.5 text-[12px] text-fg-muted"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" fill="none" aria-hidden="true">
<path d="M8 6c-2 0-2 2-2 3s0 3-3 3c3 0 3 2 3 3s0 3 2 3M16 6c2 0 2 2 2 3s0 3 3 3c-3 0-3 2-3 3s0 3-2 3" stroke="#F59E0B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
</svg>
{m.alert_dest_webhook()}
</span>
<span
class="inline-flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1.5 text-[12px] text-fg-muted"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266 219" width="15" height="15" fill="#F46F0F" aria-hidden="true">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M155 124.5C167.16 122 187.95 109.3 194.35 96.5H194.35C186.18 82.16 159.85 55 119.85 61C117.85 55.83 111.35 43.4 101.35 35C89.35 43 36.85 167.5 93.35 219C65.35 210.16 7.65 178.6 0.85 123C-7.64 53.5 48.85 8.5 98.85 8.5C113.44 8.5 132.42 10.75 151.99 13.08C199.45 18.73 250.35 24.78 250.35 0C270.18 29 289 137.5 172.5 183.5C172.84 182.02 173.22 180.49 173.61 178.92C177.93 161.62 183.42 139.63 155 124.5ZM146 88.5C146 93.19 142.19 97 137.5 97C132.80 97 129 93.19 129 88.5C129 83.80 132.80 80 137.5 80C142.19 80 146 83.80 146 88.5ZM120.78 136.70C92.00 138.35 87.77 156.55 89.25 165.44C89.25 169.30 95.96 172.51 102.08 175.45C107.69 178.13 112.82 180.59 111.89 183.10C109.95 188.35 100.57 188.57 96.12 188.03C99.90 198.70 111.00 219.39 125.23 216.77C139.46 214.14 150.02 196.51 153.53 188.03C149.49 188.85 137.76 186.38 137.76 181.46C137.76 179.71 140.55 178.54 144.14 177.01C150.71 174.23 160 170.31 160 159.70C159.03 139.99 136.95 135.33 126.04 135.47C128.30 127.59 134.80 124.25 137.76 123.56C136.79 118.97 132.78 117.27 130.89 117C123.45 122.58 121.05 132.46 120.78 136.70Z"
/>
</svg>
Hazel
</span>
</div>
<p class="mt-3 text-center text-[11px] text-fg-muted">{m.alert_webhook_note()}</p>

<!-- Feature strip. -->
<div
class="mt-12 md:mt-16 overflow-hidden rounded-xl grid grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border"
>
{
features.map((f) => (
<div class="bg-bg-deep p-6 md:p-7">
<h3 class="text-[15px] font-semibold text-fg mb-2 leading-snug">{f.title}</h3>
<p class="text-[13px] text-fg-muted leading-relaxed">{f.desc}</p>
</div>
))
}
</div>
</div>
</section>
Loading
Loading