Skip to content

feat(landing): guide intros, why it matters and key takeaways #2023

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
JeremyFunk wants to merge 1 commit into
base: main
Choose a base branch
from
+251 −76
Open

feat(landing): guide intros, why it matters and key takeaways #2023

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
27 changes: 20 additions & 7 deletions apps/landing/src/pages/guides/dynatrace-pricing.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,14 +255,26 @@ const articleJsonLd = {
</aside>

<article class="dt-guide min-w-0">
<section class="guide-lead">
<p>
You want to know what Dynatrace will cost, and the pricing page lists unit prices instead of a total. Dynatrace is a full-stack monitoring platform: an agent on each server watches your applications, the servers themselves and your users' browsers, and reports problems in one place. <strong>Dynatrace pricing</strong> is pay-as-you-use against a yearly minimum: every host-hour, gigabyte and user session is metered and taken out of an amount you commit to each year. The rate card is public but the minimum isn't, so an estimate built from the rate card alone can come in under the contract you're asked to sign. By the end you can price your own fleet from the rate card and know what to ask sales.
</p>
<div class="guide-takeaways">
<p class="guide-kicker">Key takeaways</p>
<ul>
<li>Full-Stack Monitoring is $0.01 per memory-GiB-hour with a 4 GiB minimum: $58.40 a month for an 8 GiB host.</li>
<li>Infrastructure Monitoring is $0.04 per host-hour for any size host, $29.20 a month.</li>
<li>Logs and traces cost $0.20 per GiB to ingest, plus separate charges to retain and query them.</li>
<li>No per-seat fees: every user gets the full platform.</li>
<li>Everything draws from an annual commitment whose minimum Dynatrace doesn't publish.</li>
</ul>
</div>
</section>

<section id="how-it-works" class="scroll-mt-24">
<p class="guide-eyebrow"><span>01</span> · The model</p>
<h2>How Dynatrace pricing works</h2>

<div class="guide-answer">
<p><strong>Dynatrace pricing</strong> is pay-as-you-use against a yearly minimum. You agree to spend at least a set amount each year, and everything you monitor is metered by the hour or by the gigabyte and taken out of that amount.</p>
</div>

<p>
The contract is the <strong>Dynatrace Platform Subscription</strong> (DPS). It includes every generally available capability, so there are no modules to buy, and it has no per-seat fees: every user gets the full platform. What you pay depends on three kinds of meter, and this guide colors each one the same way throughout:
</p>
Expand Down Expand Up @@ -571,14 +583,15 @@ const articleJsonLd = {
.dt-guide h2 { margin: 0 0 1.5rem; font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; color: var(--foreground); text-wrap: balance; }
.dt-guide h3 { display: flex; align-items: center; gap: 0.6rem; margin: 3rem 0 0.8rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 550; line-height: 1.3; letter-spacing: -0.015em; color: var(--foreground); }
.dt-guide h4 { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 550; color: var(--foreground); }
.dt-guide > section > p:not(.guide-eyebrow, .guide-kicker, .guide-caption), .dt-guide .guide-answer p, .dt-guide .guide-list li { margin: 0 0 1.15rem; font-size: 17px; line-height: 1.7; font-weight: 430; color: color-mix(in oklab, var(--foreground) 85%, var(--background)); }
.dt-guide > section > p:not(.guide-eyebrow, .guide-kicker, .guide-caption), .dt-guide .guide-list li { margin: 0 0 1.15rem; font-size: 17px; line-height: 1.7; font-weight: 430; color: color-mix(in oklab, var(--foreground) 85%, var(--background)); }
.dt-guide strong { font-weight: 600; color: var(--foreground); }
.dt-guide code:not(pre code) { border: 1px solid var(--border); background: var(--bg-elevated); padding: 0.1rem 0.35rem; font-family: var(--font-mono); font-size: 12px; color: var(--foreground); }
.dt-guide pre { margin: 1.25rem 0 1.5rem; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg-deep); padding: 0.9rem 1.1rem; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: var(--foreground); }
.dt-guide a:not(.guide-button) { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--primary) 42%, transparent); text-underline-offset: 3px; transition: color 150ms ease; }
.dt-guide a:not(.guide-button):hover { color: var(--foreground); }
.dt-guide .guide-answer { margin: 2rem 0; border-left: 2px solid var(--primary); border-radius: 0 0.5rem 0.5rem 0; background: color-mix(in oklab, var(--primary) 8%, var(--bg-deep)); padding: 1.25rem 1.35rem; }
.dt-guide .guide-answer p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--foreground); }
.dt-guide .guide-takeaways { margin: 2rem 0 0; border-left: 2px solid var(--primary); border-radius: 0 0.5rem 0.5rem 0; background: color-mix(in oklab, var(--primary) 8%, var(--bg-deep)); padding: 1.25rem 1.35rem; }
.dt-guide .guide-takeaways ul { display: grid; gap: 0.5rem; margin: 0.8rem 0 0; padding-left: 1.1rem; list-style: disc; font-size: 15px; line-height: 1.6; color: var(--foreground); }
.dt-guide .guide-takeaways li::marker { color: var(--primary); }
.dt-guide .guide-kicker { margin: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.dt-guide .guide-list { margin: 0 0 1.5rem; padding-left: 1.2rem; list-style: disc; }
.dt-guide .guide-list li::marker { color: var(--chart-1); }
Expand Down
32 changes: 21 additions & 11 deletions apps/landing/src/pages/guides/incident-response.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,19 +221,28 @@ const articleJsonLd = {
</aside>

<article class="ir-guide min-w-0">
<section class="guide-lead">
<p>
When production breaks at a startup, the one or two engineers on call have to find the problem, fix it and keep customers informed, usually at the same time. <strong>Incident response</strong> is what a team does from the moment something breaks until users are fine again and the cause is fixed. Every minute of downtime costs orders or signups: in this guide's worked example, a bad deploy fails 23% of checkouts for 18 minutes. When customers notice before your alerts do, you lose some of their trust as well. This guide sets up a process sized for that team: an afternoon of preparation, five response steps and a one-page postmortem.
</p>
<div class="guide-takeaways">
<p class="guide-kicker">Key takeaways</p>
<ul>
<li>Prepare in an afternoon: alerts on symptoms users feel, who gets alerted when, and runbooks for your top three failure modes.</li>
<li>Stop the user impact before you know the cause; a deploy in the last hour is the first suspect, so roll it back.</li>
<li>Declare early in one channel, such as #incidents, and post updates at a fixed interval while customers are affected.</li>
<li>Write a blameless one-page postmortem for incidents customers noticed, with an owner and a due date on every action item.</li>
<li>Once a quarter, count incidents per month, median time to detect and mitigate, and repeat causes.</li>
</ul>
</div>
</section>

<section id="how-it-works" class="scroll-mt-24">
<p class="guide-eyebrow"><span>01</span> · The process</p>
<h2>How incident response works</h2>

<div class="guide-answer">
<p><strong>Incident response</strong> is what a team does from the moment something breaks in production until users are fine again and the cause is fixed. It runs as a loop: what the team learns from one incident changes the alerts, runbooks and code the next incident meets.</p>
</div>

<p>
An incident is an unplanned event that hurts users or puts data at risk: an outage, a slow checkout, a leaked credential.
</p>
<p>
This guide is written for startups and small companies. Often one or two engineers are on call, and the engineer who gets paged is the one who fixes the problem, so every step is sized for that. For the formal versions, written for larger security teams, see <a href="https://csrc.nist.gov/pubs/sp/800/61/r2/final" target="_blank" rel="noopener noreferrer">NIST SP 800-61</a> and the <a href="https://www.sans.org/white-papers/33901" target="_blank" rel="noopener noreferrer">SANS Incident Handler's Handbook</a>.
An incident is an unplanned event that hurts users or puts data at risk: an outage, a slow checkout, a leaked credential. For the formal process, written for larger security teams, see <a href="https://csrc.nist.gov/pubs/sp/800/61/r2/final" target="_blank" rel="noopener noreferrer">NIST SP 800-61</a> and the <a href="https://www.sans.org/white-papers/33901" target="_blank" rel="noopener noreferrer">SANS Incident Handler's Handbook</a>.
</p>
<p>
The process has four phases. You <span class="phase-badge" style={`--phase: ${phases.prepare.color}`}>Prepare</span> on a quiet day. When an alert fires, you <span class="phase-badge" style={`--phase: ${phases.detect.color}`}>Detect and triage</span>, then <span class="phase-badge" style={`--phase: ${phases.mitigate.color}`}>Mitigate and resolve</span> until users are no longer affected and the system is clean. Afterwards you <span class="phase-badge" style={`--phase: ${phases.learn.color}`}>Learn</span> in a postmortem whose action items go back into preparation: a load test that would have caught the bug, an alert that fires two minutes sooner, a rollback that takes one command.
Expand Down Expand Up @@ -569,15 +578,16 @@ const articleJsonLd = {
.ir-guide h2 { margin: 0 0 1.5rem; font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; color: var(--foreground); text-wrap: balance; }
.ir-guide h3 { margin: 3rem 0 0.8rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 550; line-height: 1.3; letter-spacing: -0.015em; color: var(--foreground); }
.ir-guide h4 { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 550; color: var(--foreground); }
.ir-guide > section > p:not(.guide-eyebrow, .guide-kicker, .guide-caption), .ir-guide .guide-answer p { margin: 0 0 1.15rem; font-size: 17px; line-height: 1.7; font-weight: 430; color: color-mix(in oklab, var(--foreground) 85%, var(--background)); }
.ir-guide > section > p:not(.guide-eyebrow, .guide-kicker, .guide-caption) { margin: 0 0 1.15rem; font-size: 17px; line-height: 1.7; font-weight: 430; color: color-mix(in oklab, var(--foreground) 85%, var(--background)); }
.ir-guide strong { font-weight: 600; color: var(--foreground); }
.ir-guide code:not(pre code) { border: 1px solid var(--border); background: var(--bg-elevated); padding: 0.1rem 0.35rem; font-family: var(--font-mono); font-size: 12px; color: var(--foreground); }
.ir-guide pre { margin: 1.25rem 0 1.5rem; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg-deep); padding: 0.9rem 1.1rem; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: var(--foreground); }
.ir-guide a:not(.guide-button) { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--primary) 42%, transparent); text-underline-offset: 3px; transition: color 150ms ease; }
.ir-guide a:not(.guide-button):hover { color: var(--foreground); }
.ir-guide .guide-caption { margin: 0.7rem 0 0; font-family: var(--font-mono); font-size: 10px; line-height: 1.6; color: var(--muted-foreground); }
.ir-guide .guide-answer { margin: 2rem 0; border-left: 2px solid var(--primary); border-radius: 0 0.5rem 0.5rem 0; background: color-mix(in oklab, var(--primary) 8%, var(--bg-deep)); padding: 1.25rem 1.35rem; }
.ir-guide .guide-answer p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--foreground); }
.ir-guide .guide-takeaways { margin: 2rem 0 0; border-left: 2px solid var(--primary); border-radius: 0 0.5rem 0.5rem 0; background: color-mix(in oklab, var(--primary) 8%, var(--bg-deep)); padding: 1.25rem 1.35rem; }
.ir-guide .guide-takeaways ul { display: grid; gap: 0.5rem; margin: 0.8rem 0 0; padding-left: 1.1rem; list-style: disc; font-size: 15px; line-height: 1.6; color: var(--foreground); }
.ir-guide .guide-takeaways li::marker { color: var(--primary); }
.ir-guide .guide-kicker { margin: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }

/* One color per NIST phase: set --phase on the element. */
Expand Down
Loading
Loading