From b280faadf8411b9c5ac2003b751fe69a5023082b Mon Sep 17 00:00:00 2001 From: Jason Staack Date: Mon, 9 Mar 2026 23:16:38 -0500 Subject: [PATCH] docs: update landing page copy from review notes - Hero: tighter 3-line intro focused on the problem - What It Does: updated section label - Safe Config: panic-revert language, fleet-wide templates - Who This Is For: expanded audience descriptions - Architecture: new section with vertical flow diagram - Quick Start: simplified to 3 commands - CTA: open source + self-hosted, closing tagline - Slow gradient fill animation from 1.2s to 2s Co-Authored-By: Claude Opus 4.6 --- docs/website/index.html | 93 +++++++++++++++++++---------------------- docs/website/style.css | 42 ++++++++++++++++++- 2 files changed, 85 insertions(+), 50 deletions(-) diff --git a/docs/website/index.html b/docs/website/index.html index 0a1c1d4..347d4b2 100644 --- a/docs/website/index.html +++ b/docs/website/index.html @@ -107,6 +107,7 @@
Features + Architecture Screenshots Docs GitHub @@ -151,8 +152,8 @@

Centralized Management for MikroTik Networks

Managing MikroTik routers shouldn’t require dozens of WinBox tabs, SSH scripts, and crossed fingers.

-

The Other Dude is a modern management platform for MikroTik networks that gives you centralized visibility and control over your entire fleet.

-

Designed for operators who run real networks — from small deployments to large distributed infrastructures.

+

The Other Dude gives you centralized visibility and control over your entire MikroTik fleet.

+

Monitor devices, push configuration safely, and operate your network from a single interface.

Get Started View on GitHub @@ -165,7 +166,7 @@
- WHAT IT DOES + WHAT THE OTHER DUDE DOES

Manage MikroTik routers at scale without the chaos of manual tools

With a single interface you can:

@@ -182,58 +183,65 @@
- +
- SAFE CONFIGURATION + SAFE CONFIGURATION CHANGES

Push changes with confidence

-

Remote configuration changes can be risky. The Other Dude includes a two-phase push system with automatic rollback protection to help prevent accidental lockouts and configuration mistakes.

+

Remote configuration changes can be risky.

+

The Other Dude includes a two-phase push system with automatic panic-revert protection to help prevent accidental lockouts and configuration mistakes.

  • Two-phase configuration push
    • -
  • Automatic rollback safety
    • +
  • Automatic panic-revert rollback
  • Configuration diff and history
    • -
  • Controlled fleet-wide changes
    • +
  • Fleet-wide templates and controlled rollouts
- +
- WHO IT’S FOR + WHO THIS IS FOR

Built for real operators

The Other Dude is designed for people who operate MikroTik networks in the real world:

    -
  • Managed Service Providers
    • -
  • Wireless ISPs
    • -
  • Network engineers managing distributed sites
    • -
  • Homelab operators running large environments
    • +
  • Managed Service Providers managing many client networks
    • +
  • Wireless ISPs running large router fleets
    • +
  • Network engineers operating distributed infrastructure
    • +
  • Homelab operators managing larger environments
-

If you manage more than a handful of routers, centralized control becomes essential.

- + -
+
- SCALE -

Designed for scale

-

The Other Dude was built from the start to support modern infrastructure.

+ ARCHITECTURE +

Event-driven, designed for reliability and horizontal scaling

-
    -
  • Kubernetes-native deployment
    • -
  • Horizontally scalable pollers
    • -
  • Event-driven architecture
    • -
  • PostgreSQL + TimescaleDB metrics storage
    • -
-

Deploy small or scale to thousands of routers.

+
+
Routers
+
↓
+
Go Pollers
+
↓
+
NATS Event Bus
+
↓
+
FastAPI Backend
+
↓
+
PostgreSQL + TimescaleDB
+
↓
+
React Web Interface
+
+ +

This architecture allows the system to scale horizontally while keeping polling, processing, and the user interface separated.

@@ -298,7 +306,7 @@
QUICK START -

Up and running in minutes

+

Run The Other Dude locally in minutes using Docker

@@ -307,24 +315,9 @@ Terminal
- 
# Clone the repo
-git clone https://github.com/staack/the-other-dude.git
+        
git clone https://github.com/staack/the-other-dude
 cd the-other-dude
-
-# Configure
-cp .env.example .env
-
-# Start infrastructure
-docker compose up -d
-
-# Build app images
-docker compose build api && docker compose build poller && docker compose build frontend
-
-# Launch
-docker compose up -d
-
-# Open TOD
-open http://localhost:3000

+docker compose up
@@ -335,12 +328,14 @@
OPEN SOURCE -

Centralized management for MikroTik networks

-

The Other Dude is open source and available on GitHub. Run it yourself, contribute improvements, or adapt it for your own infrastructure.

-

Less time juggling tools. More time running your network.

+

The Other Dude is open source and self-hosted

+

Run it yourself, modify it, or contribute improvements.

View on GitHub - Quick Start Guide +
+
+

Centralized management for MikroTik networks.

+

Less time juggling tools.
More time running your network.

diff --git a/docs/website/style.css b/docs/website/style.css index bd89cb1..9cf3c77 100644 --- a/docs/website/style.css +++ b/docs/website/style.css @@ -375,7 +375,7 @@ ul, ol { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - animation: gradient-fill 1.2s ease-out 0.3s both; + animation: gradient-fill 2s ease-out 0.3s both; } @keyframes gradient-fill { @@ -550,6 +550,46 @@ ul, ol { background: var(--bg-surface); } +/* Architecture flow diagram */ +.arch-flow { + display: flex; + flex-direction: column; + align-items: center; + gap: 0; + margin: 40px 0; +} + +.arch-flow-step { + font-family: "Fira Code", "SF Mono", monospace; + font-size: 0.95rem; + color: var(--text-primary); + background: var(--bg-elevated); + border: 1px solid var(--border-accent); + border-radius: 8px; + padding: 10px 28px; + letter-spacing: 0.02em; +} + +.arch-flow-arrow { + color: var(--accent); + font-size: 1.2rem; + line-height: 1; + padding: 4px 0; +} + +/* CTA closing */ +.cta-closing { + margin-top: 48px; +} + +.cta-closing-title { + color: var(--text-primary); + font-family: "Outfit", sans-serif; + font-weight: 600; + font-size: 1.3rem; + margin-bottom: 8px; +} + .features-grid { display: grid; grid-template-columns: repeat(3, 1fr);