ECC — 21 landing-page variants

Twenty distinct positioning bets. Variants v01–v10 are messaging-led (Samsara/Stripe/Tesla/etc.). v11–v12 are image-maximalist (editorial + Bento mosaic). v13–v20 are fully interactive — live tickers, calculators, scroll-driven storytelling, comparison matrix, faux docs, animated SVG architecture, JSON playground, dual-persona split. Research: docs/landing-competitor-research-2026-06-12.md + …-round2…md.

live at eccontrol.org right now: v1.17.7 (reverted) — none of these are deployed there yet. Sign off on which one wins and we promote it.
01

Operator-first

samsara · fleet-ops

Animated live telemetry panel ticks in the hero. Tabbed feature carousel. Primary CTA = "see pricing" → 3-tier table with realistic Czech prices.

Open v01
02

Developer-first

stripe · animated mesh + code

Animated radial-gradient hero, gradient-clip text. Inline device_twin.json code block. "From one battery to a hundred grids."

Open v02
03

Configurator

tesla megapack · spec-as-claim

"188 registrů. 30 sekund. Živě." Three-step inline configurator with running price total. Spec-led, premium-minimal.

Open v03
04

Enterprise three-stage

siemens insights hub · funnel

Sbírat → Vidět → Řídit funnel. Compliance badges (NIS2, IEC 62443, ISO 27001). Architecture diagram. Vykání throughout.

Open v04
05

Stack-as-hero

schneider ecostruxure · architecture

The 4-layer stack diagram IS the hero. Click any layer (Application / Cloud / Edge / Field) for inline detail. Architect-led.

Open v05
06

Four-verb gates

aveva + abb ability · punchy

"Vidět. Sbírat. Řídit. Servisovat." The four verbs ARE the hero. Click any, the panel below swaps inline. Declarative, branded.

Open v06
07

One-badge credibility

fluence · premium infra

Full-bleed Poustka photo + white type overlay. ONE big number: "99.4% / 73 days". Operator quote. Single-pin Czech map. No logo wall.

Open v07
08

Before/after slider

thingsboard · comparative

Interactive drag-slider: left = fake Excel logbook with coffee stains and red-pen notes; right = ECC dashboard. Same data.

Open v08
09

Story-led / regional CZ

founder-letter · no portrait

Serif typography (Crimson Pro), warm paper tones. "Postavili jsme to ve dvou. Běží to v Poustce." Origin-story timeline. No face photos.

Open v09
10

Extreme minimalism

linear / vercel · brutalist-tech

Black background, electric-teal accent, monospace. One sentence: "Modbus → Cloud. Hotovo." One button. Spec sheet rendered as /etc/ecc/spec.toml. + Earth-night + Poustka bands.

Open v10
11

Editorial photo essay

magazine · all 9 images · long-form

Fraunces serif, paper tones. Full-bleed cover (hero-main), five chapters with text+photo, two wide bands (earth-night + dashboard-grafana), 3-up gallery. Uses every image.

Open v11
12

Bento mosaic hero

apple-style asymmetric grid

15-tile Bento grid: 9 photo tiles + 3 stat tiles + accent compliance tile + phone-CTA tile. Whole landing IS the grid. Clickable everywhere.

Open v12
13 · LIVE

Live status ticker

grafana play + linear · the page IS the dashboard

Hero is a live operational dashboard for Poustka with ticking KPIs, animated chart, Modbus event feed scrolling, 12-row event table, 73-day uptime bar. The page does the product.

Open v13
14 · INTERACTIVE

ROI calculator

octopus postcode · 3 sliders → savings

Device count + site count + manual-log frequency sliders. Live-recomputing annual savings in CZK, payback period in months, transparent assumptions panel. Direct phone deeplink with computed quote.

Open v14
15 · SCROLLY

Scrollytelling architecture

linear + pudding · sticky SVG diagram

Five-chapter scroll-driven narrative. Sticky SVG of Field→Edge→Cloud→Storage→Dashboard lights up node by node as you scroll. IntersectionObserver-driven. The "journey of one register".

Open v15
16 · COMPETITIVE

Comparison matrix

ECC × Siemens × ThingsBoard × Excel

Filterable 11-row table comparing ECC against Siemens MindSphere, ThingsBoard CE, and manual Excel. Per-row checks/crosses, real Czech-market prices, "challenge a claim" CTA. Confrontational but honest.

Open v16
17 · DEV-FACING

Faux docs landing

particle + vercel + stripe atlas

Looks like a docs site, sells like a landing. Sidebar nav with categories (Getting started / Concepts / API / Support), inline code blocks with copy buttons + language toggle, params table, ⌘K hint, anchor-scroll active links.

Open v17
18 · ANIMATED

Data-flow architecture

cloudflare globe · SVG packet animation

Hero SVG with 4 nodes (Field/Edge/Cloud/App) and pipes connecting them. JS spawns telemetry "packets" that flow through the pipes continuously. Below: 4 channel cards (Modbus / AMQP / HTTPS / Direct Methods) with latency.

Open v18
19 · FUNCTIONAL

Device Twin playground

stripe/vercel code · actually downloadable JSON

Pick device type (Sinexcel/CATL/REF615/Emax2/Sungrow), check registers you want, get production-ready Device Twin JSON with syntax highlighting + live byte/day stats. Copy or download. Same config as live at Poustka.

Open v19
20 · DUAL-TRACK

Operator vs Engineer split

golioth + balena · two-track hero

Split hero: warm operator side (phone, 15-min call, "we pick up") + dark engineer side (docker pull, Swagger, twin push). Toggle in nav resizes the split. Shared-product band below, two-card CTA at end.

Open v20
21 · FROM BRIEF

Doc-style — final brief 1:1

stripe docs / linear docs · multi-page

Built directly from the FINAL brief (webova_prezentace_ecc_FINAL.docx). 5 pages: homepage + 4 capability sub-pages (Service · Data · Control · Visualization). Sidebar nav, breadcrumbs, hero photo per page, minimalist doc aesthetic. The recommended candidate.

Open v21