Developer Tool Landing Page

Build a landing page for a developer tool called "Shiplog" — a CLI + API for structured application logging and error tracking. Target audience: backend engineers and DevOps teams. The page should include:

1. **Navbar** — Logo ("Shiplog" with a terminal icon `>_`) left, nav links (Docs, Integrations, Pricing, GitHub), a "GitHub stars" badge (showing "⭐ 4.2k"), and a "Get started free" button (blue-600). Nav border-bottom: 1px zinc-200.

2. **Hero section** — Left-aligned hero, max-w-5xl, 80px top padding.
   - Pill badge: "🚀 v2.4 released — see what's new →" (clickable)
   - H1 (text-5xl, font-extrabold, max-w-2xl): "Structured logging for production apps."
   - Subtitle (text-lg, text-zinc-500, max-w-xl): "Shiplog gives your team instant visibility into errors, latency, and service health — with a single npm install."
   - Two CTAs: "Read the docs" (blue-600, rounded-md) and "View on GitHub →" (ghost button with GitHub logo)
   - Below CTAs: "Works with Node.js, Python, Go, Ruby, and Java."
   - **Right side:** A dark terminal window card (zinc-900 background, rounded-xl, font-mono, text-sm):
     ```
     $ npm install shiplog
     ✔ Installed shiplog@2.4.1
     
     $ shiplog init
     ? Project name: my-api
     ? Environment: production
     ✔ Config written to shiplog.config.js
     
     $ node app.js
     [INFO]  Server started on port 3000
     [WARN]  DB pool near capacity (88%)
     [ERROR] Unhandled rejection: Cannot read 'id' of undefined
             → routes/users.js:142
     ```

3. **Code snippet section** — White background, centered heading "Drop in two lines of code." Show a syntax-highlighted code block (dark theme, rounded-xl) with a copy button:
   ```js
   import { log } from 'shiplog';
   
   log.error('Payment failed', {
     userId: 'usr_8f3kd',
     amount: 4900,
     currency: 'usd',
     error: err.message,
   });
   ```
   Below the code block: "That's it. Your logs are searchable, structured, and queryable in real time."

4. **Integrations grid** — "Connects with your stack" heading. A 4×2 grid of integration logos (each in a zinc-50 card, 80×80px, icon + name below): Datadog, PagerDuty, Slack, GitHub Actions, AWS CloudWatch, Sentry, Vercel, Grafana.

5. **Feature list (3-col, 6 items):**
   - Zero-config structured JSON logs
   - Real-time error grouping & deduplication
   - P50 / P95 / P99 latency histograms
   - Log search with full-text and field queries
   - Alerting via Slack, PagerDuty, or webhook
   - Self-hosted or Shiplog Cloud
   Each feature has a green checkmark, bold label, and 1-line description.

6. **Social proof** — A horizontal bar with: "Used by 3,800+ engineering teams" and 5 greyscale company logos.

7. **CTA section** — "Get started in 2 minutes." Two paths side by side:
   - **Cloud:** "Shiplog Cloud — free up to 1M events/mo. No credit card." → "Start free"
   - **Self-hosted:** "Deploy on your own infra. Full control." → "Read the docs"

8. **Footer** — 4-column standard footer.

**Design:** Primarily white, dark terminal blocks (zinc-900), blue-600 accent, monospace code fonts (JetBrains Mono / Fira Code), system sans for body. Clean and developer-focused — minimal decoration, maximum clarity.

[NAVBAR]
  >_ Shiplog    Docs  Integrations  Pricing  GitHub    [⭐ 4.2k]  [Get started free]

[HERO — left-aligned]
  ┌────────────────────────────────────────────────┐  ┌──────────────────────────────────────┐
  │ 🚀 v2.4 released — see what's new →            │  │ >_  shiplog           ● ● ●          │
  │                                                │  │ ────────────────────────────────     │
  │ Structured logging for                         │  │ $ npm install shiplog                │
  │ production apps.                               │  │ ✔ Installed shiplog@2.4.1            │
  │                                                │  │                                      │
  │ Shiplog gives your team instant visibility     │  │ $ shiplog init                       │
  │ into errors, latency, and service health       │  │ ? Project name: my-api               │
  │ — with a single npm install.                   │  │ ? Environment: production            │
  │                                                │  │ ✔ Config written to shiplog.config.js│
  │  [Read the docs]   [GitHub ↗]                  │  │                                      │
  │                                                │  │ $ node app.js                        │
  │  Works with Node.js, Python, Go, Ruby, Java.   │  │ [INFO]  Server started :3000         │
  └────────────────────────────────────────────────┘  │ [WARN]  DB pool at 88%               │
                                                       │ [ERROR] Unhandled rejection          │
                                                       │         → routes/users.js:142        │
                                                       └──────────────────────────────────────┘

[CODE SNIPPET — centered]
  Drop in two lines of code.

  ┌──────────────────────────────────────────────────────────┐  [Copy]
  │  import { log } from 'shiplog';                          │
  │                                                          │
  │  log.error('Payment failed', {                           │
  │    userId: 'usr_8f3kd',                                  │
  │    amount:   4900,                                       │
  │    currency: 'usd',                                      │
  │    error:    err.message,                                │
  │  });                                                     │
  └──────────────────────────────────────────────────────────┘
  "Your logs are searchable, structured, and queryable in real time."

[INTEGRATIONS — 4×2 grid]
  Connects with your stack
  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
  │Datadog│ │Pager │ │Slack │ │GitHub│
  │      │ │Duty  │ │      │ │Actions
  └──────┘ └──────┘ └──────┘ └──────┘
  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
  │ AWS  │ │Sentry│ │Vercel│ │Grafna│
  │CloudW│ │      │ │      │ │      │
  └──────┘ └──────┘ └──────┘ └──────┘

[FEATURES — 3×2]
  ✓ Zero-config JSON logs          ✓ Error grouping & dedup         ✓ Latency histograms (P99)
    Drop in, get structure.          Group same errors automatically.   Built-in per-endpoint.

  ✓ Full-text log search           ✓ Alerting (Slack/PD/webhook)    ✓ Self-hosted or Cloud
    Field + free-text queries.       Know before your users do.         You choose.

[SOCIAL PROOF BAR]
  Used by 3,800+ engineering teams
  [Linear]  [Retool]  [Cal.com]  [Turso]  [Fly.io]

[CTA — two paths]
  ┌────────────────────────────────────────┐  ┌────────────────────────────────────────┐
  │ ☁ Shiplog Cloud                        │  │ 🖥 Self-Hosted                         │
  │ Free up to 1M events/mo.               │  │ Deploy on your own infra.              │
  │ No credit card required.               │  │ Full control, full data locality.      │
  │                                        │  │                                        │
  │ [Start free →]                         │  │ [Read the docs →]                      │
  └────────────────────────────────────────┘  └────────────────────────────────────────┘

[FOOTER — 4 cols]
  >_ Shiplog          Product          Developers       Company
  "Logs you can       Features         Docs             About
   reason about."     Pricing          API Reference    Blog
                      Changelog        SDKs             Status

  © 2026 Shiplog, Inc.