211 lines
12 KiB
Django/Jinja
211 lines
12 KiB
Django/Jinja
{# ontoref Services — tier-structured.
|
|
The protocol is a gift (voluntary-adoption, protocol-not-runtime); what is
|
|
offered is help OPERATING its highest tier (tier-2: operations, witness,
|
|
governance — via-001) and TRAINING/COACHING to climb the lower tiers (tier-0
|
|
declarative, tier-1 substrate). Bilingual via `texts[...]`; ES deep-link
|
|
anchors via data-anchor-es. Mirrors the jpl services design (ds-* classes). #}
|
|
<div class="min-h-screen ds-bg-page">
|
|
|
|
<section class="py-8 ds-container">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl">
|
|
{{ texts["services-page-title"] }}
|
|
</h1>
|
|
<p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
|
|
{{ texts["services-page-subtitle"] }}
|
|
</p>
|
|
<p class="mt-3 ds-caption font-mono ds-text-secondary max-w-2xl mx-auto">
|
|
{{ texts["services-page-note"] }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{# ── Tier 2: the proposal — operate the operations/governance surface ─────── #}
|
|
<section id="tier2" data-anchor-es="tier2" class="py-16 ds-bg">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-12">
|
|
<span class="ds-caption font-mono px-2 py-1 ds-bg-page border ds-border ds-rounded ds-text-secondary">
|
|
{{ texts["services-tier2-eyebrow"] }}
|
|
</span>
|
|
<h2 class="mt-4 text-3xl font-bold ds-text">{{ texts["services-tier2-title"] }}</h2>
|
|
<p class="mt-4 ds-text-secondary max-w-3xl mx-auto">
|
|
{{ texts["services-tier2-desc"] }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-ops-title"] }}</h3>
|
|
<p class="ds-text-secondary">{{ texts["services-tier2-ops-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-audit-title"] }}</h3>
|
|
<p class="ds-text-secondary">{{ texts["services-tier2-audit-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-validators-title"] }}</h3>
|
|
<p class="ds-text-secondary">{{ texts["services-tier2-validators-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-migration-title"] }}</h3>
|
|
<p class="ds-text-secondary">{{ texts["services-tier2-migration-desc"] }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16">
|
|
<h3 class="text-2xl font-bold ds-text text-center mb-8">{{ texts["services-what-you-get"] }}</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
|
<div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-witnessed-history"] }}</span></div>
|
|
<div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-validators"] }}</span></div>
|
|
<div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-knowledge-transfer"] }}</span></div>
|
|
<div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-no-lockin"] }}</span></div>
|
|
<div class="flex items-start gap-3 md:col-span-2"><span class="ds-text-secondary">{{ texts["services-get-open-protocol"] }}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# ── Training & coaching for the lower tiers — use or learn ───────────────── #}
|
|
<section id="learn" data-anchor-es="aprender" class="py-16 ds-bg-page">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-12">
|
|
{% set training_img = "ontoref-formacion" if lang == "es" else "ontoref-training" %}
|
|
<picture>
|
|
<source srcset="/images/{{ training_img }}.avif" type="image/avif">
|
|
<source srcset="/images/{{ training_img }}.webp" type="image/webp">
|
|
<img src="/images/{{ training_img }}.webp"
|
|
alt="{{ texts['services-learn-title'] }}"
|
|
width="1536" height="512" loading="lazy"
|
|
class="mb-ds-8 mx-auto rounded-lg ds-shadow-sm w-full max-w-3xl h-auto" />
|
|
</picture>
|
|
<h2 class="text-3xl font-bold ds-text">{{ texts["services-learn-title"] }}</h2>
|
|
<p class="mt-4 ds-text-secondary max-w-3xl mx-auto">{{ texts["services-learn-desc"] }}</p>
|
|
{% set coaching_img = "ontoref-coaching-es" if lang == "es" else "ontoref-coaching-en" %}
|
|
<picture>
|
|
<source srcset="/images/{{ coaching_img }}.avif" type="image/avif">
|
|
<source srcset="/images/{{ coaching_img }}.webp" type="image/webp">
|
|
<img src="/images/{{ coaching_img }}.webp"
|
|
alt="{{ texts['services-learn-title'] }}"
|
|
width="1536" height="1024" loading="lazy"
|
|
class="mt-ds-8 mx-auto rounded-lg ds-shadow-sm w-full max-w-3xl h-auto" />
|
|
</picture>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<div id="coaching" data-anchor-es="coaching">
|
|
<span class="ds-caption font-mono ds-text-secondary">{{ texts["services-coaching-eyebrow"] }}</span>
|
|
<h3 class="text-2xl font-bold ds-text mt-2 mb-6">{{ texts["services-coaching-title"] }}</h3>
|
|
<p class="ds-text-secondary mb-8">{{ texts["services-coaching-desc"] }}</p>
|
|
<div class="space-y-3">
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{{ texts["services-coaching-1to1-title"] }}</h4>
|
|
<span class="text-sm ds-text-secondary">{{ texts["services-coaching-1to1-note"] }}</span>
|
|
</div>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-coaching-1to1-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{{ texts["services-coaching-ondaod-title"] }}</h4>
|
|
<span class="text-sm ds-text-secondary">{{ texts["services-coaching-ondaod-note"] }}</span>
|
|
</div>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-coaching-ondaod-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{{ texts["services-coaching-adr-title"] }}</h4>
|
|
<span class="text-sm ds-text-secondary">{{ texts["services-coaching-adr-note"] }}</span>
|
|
</div>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-coaching-adr-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h4 class="font-semibold ds-text">{{ texts["services-coaching-ongoing-title"] }}</h4>
|
|
<span class="text-sm ds-text-secondary">{{ texts["services-coaching-ongoing-note"] }}</span>
|
|
</div>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-coaching-ongoing-desc"] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="training" data-anchor-es="formacion">
|
|
<span class="ds-caption font-mono ds-text-secondary">{{ texts["services-training-eyebrow"] }}</span>
|
|
<h3 class="text-2xl font-bold ds-text mt-2 mb-6">{{ texts["services-training-title"] }}</h3>
|
|
<p class="ds-text-secondary mb-8">{{ texts["services-training-desc"] }}</p>
|
|
<div class="space-y-3">
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{{ texts["services-training-courses-title"] }}</h4>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-training-courses-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{{ texts["services-training-workshops-title"] }}</h4>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-training-workshops-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{{ texts["services-training-talks-title"] }}</h4>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-training-talks-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg p-ds-4 ds-rounded-lg">
|
|
<h4 class="font-semibold ds-text mb-2">{{ texts["services-training-content-title"] }}</h4>
|
|
<p class="text-sm ds-text-secondary">{{ texts["services-training-content-desc"] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# ── The three tiers — which one fits (taglines from tier-taglines.ncl) ───── #}
|
|
<section class="py-16 ds-bg">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-12">
|
|
<h2 class="text-3xl font-bold ds-text">{{ texts["services-tiers-title"] }}</h2>
|
|
<p class="mt-4 ds-text-secondary max-w-3xl mx-auto">{{ texts["services-tiers-desc"] }}</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<span class="ds-caption font-mono ds-text-secondary">{{ texts["services-tier0-label"] }}</span>
|
|
<h3 class="ds-heading-4 ds-text mt-2 mb-2">{{ texts["services-tier0-title"] }}</h3>
|
|
<p class="ds-text-secondary text-sm">{{ texts["services-tier0-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<span class="ds-caption font-mono ds-text-secondary">{{ texts["services-tier1-label"] }}</span>
|
|
<h3 class="ds-heading-4 ds-text mt-2 mb-2">{{ texts["services-tier1-title"] }}</h3>
|
|
<p class="ds-text-secondary text-sm">{{ texts["services-tier1-desc"] }}</p>
|
|
</div>
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm border ds-border">
|
|
<span class="ds-caption font-mono ds-text-secondary">{{ texts["services-tier2-label"] }}</span>
|
|
<h3 class="ds-heading-4 ds-text mt-2 mb-2">{{ texts["services-tier2-card-title"] }}</h3>
|
|
<p class="ds-text-secondary text-sm">{{ texts["services-tier2-card-desc"] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-16 ds-bg-page">
|
|
<div class="mx-auto max-w-4xl ds-container text-center">
|
|
{% set action_img = "ontoref-accion" if lang == "es" else "ontoref-action" %}
|
|
<picture>
|
|
<source srcset="/images/{{ action_img }}.avif" type="image/avif">
|
|
<source srcset="/images/{{ action_img }}.webp" type="image/webp">
|
|
<img src="/images/{{ action_img }}.webp"
|
|
alt="{{ texts['services-cta-title'] }}"
|
|
width="1536" height="512" loading="lazy"
|
|
class="mb-ds-8 mx-auto rounded-lg ds-shadow-sm w-full max-w-3xl h-auto" />
|
|
</picture>
|
|
<h2 class="text-3xl font-bold ds-text mb-ds-4">{{ texts["services-cta-title"] }}</h2>
|
|
<p class="ds-text-secondary mb-8 ds-body">{{ texts["services-cta-desc"] }}</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="{{ texts['services-cta-primary-url'] | default('/contact') }}" class="no-underline ds-btn-primary">
|
|
{{ texts["services-cta-primary"] }}
|
|
</a>
|
|
<a href="{{ texts['services-cta-secondary-url'] | default('/about') }}" class="no-underline ds-btn-secondary">
|
|
{{ texts["services-cta-secondary"] }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
{% include "partials/image-zoom.j2" %}
|