220 lines
13 KiB
Django/Jinja
220 lines
13 KiB
Django/Jinja
<div class="ds-bg-page">
|
|
{# TEMP: hide the Posts/Recipes door CTAs for now (remove this <style> to restore) #}
|
|
<style>.tagline-panel-graph{display:none}</style>
|
|
|
|
{# Hero — three-door vestibule, projected from .ontoref/positioning/spine.ncl (ADR-057).
|
|
Never an exposition of the core: the doors route, the prize is revealed once inside.
|
|
Tech features live below the fold (Three Pillars / How it works). #}
|
|
<section class="relative py-ds-8 ds-container">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<span class="inline-block px-3 py-1 ds-caption ds-bg border ds-border ds-rounded-md ds-text-secondary mb-4 font-mono">
|
|
{{ texts["home-hero-badge"] }}
|
|
</span>
|
|
{# A · hero — the language-specific banner carries logo + headline + sub-hero + the
|
|
four value nodes (baked in) and scales fluidly at every width, so it shows at all
|
|
breakpoints. The h1/sub stay sr-only for SEO + a11y; the <picture> is click-to-zoom. #}
|
|
<h1 class="sr-only">{{ texts["spine-hero"] }}</h1>
|
|
<p class="sr-only">{{ texts["spine-sub"] }}</p>
|
|
{% set hero_img = "ontoref-home-seguro" if lang == "es" else "ontoref-home-sure-footed" %}
|
|
<picture>
|
|
<source srcset="/images/{{ hero_img }}.avif" type="image/avif">
|
|
<source srcset="/images/{{ hero_img }}.webp" type="image/webp">
|
|
<img src="/images/{{ hero_img }}.webp"
|
|
alt="{{ texts['spine-hero'] }}"
|
|
width="1220" height="417" loading="eager"
|
|
class="block mx-auto rounded-lg w-full max-w-4xl h-auto mb-6" />
|
|
</picture>
|
|
{# rotating definition-phrases by audience + focus #}
|
|
<p class="ds-body-lg ds-text mb-1" style="min-height: 1.6em">
|
|
<span
|
|
data-tagline-rotator
|
|
data-audience="all"
|
|
data-src="/public/r/taglines.json"
|
|
data-focus-target=".tagline-focus"
|
|
>{{ texts["spine-hero"] }}</span
|
|
>
|
|
</p>
|
|
<span class="tagline-focus" aria-hidden="true"></span>
|
|
{# C · four doors — primary nav: each switches taglines AND reveals its panel #}
|
|
<div class="tagline-doors" role="group" aria-label="{{ texts['spine-doors-heading'] }}">
|
|
<button type="button" class="tagline-door is-active" data-tagline-audience="all" data-door="all">{{ texts["home-tagline-door-all"] }}</button>
|
|
<button type="button" class="tagline-door" data-tagline-audience="arriving-developer" data-door="developer">{{ texts["spine-door-developer-label"] }}</button>
|
|
<button type="button" class="tagline-door" data-tagline-audience="infrastructure-inheritor" data-door="infrastructure">{{ texts["spine-door-infrastructure-label"] }}</button>
|
|
<button type="button" class="tagline-door" data-tagline-audience="personal-ontology" data-door="personal">{{ texts["spine-door-personal-label"] }}</button>
|
|
<button type="button" class="tagline-door" data-tagline-audience="authoring-knowledge" data-door="authoring">{{ texts["spine-door-authoring-label"] }}</button>
|
|
</div>
|
|
{# door panels — hidden until a door is clicked; 'all' hides all. A teaser that
|
|
ROUTES to the door landing (full value-prop) + the live graph, never argues. #}
|
|
<div class="tagline-panels max-w-2xl mx-auto">
|
|
<div class="tagline-panel" data-tagline-panel="developer" hidden>
|
|
<p class="tagline-panel-line">{{ texts["spine-door-developer-line"] }}</p>
|
|
<div class="tagline-panel-cta">
|
|
<a class="no-underline ds-btn-secondary" href="{{ texts['spine-door-developer-href'] }}">{{ texts["spine-door-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-developer-blog'] }}">{{ texts["spine-door-blog-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-developer-recipes'] }}">{{ texts["spine-door-recipes-cta"] }}</a>
|
|
</div>
|
|
</div>
|
|
<div class="tagline-panel" data-tagline-panel="infrastructure" hidden>
|
|
<p class="tagline-panel-line">{{ texts["spine-door-infrastructure-line"] }}</p>
|
|
<div class="tagline-panel-cta">
|
|
<a class="no-underline ds-btn-secondary" href="{{ texts['spine-door-infrastructure-href'] }}">{{ texts["spine-door-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-infrastructure-blog'] }}">{{ texts["spine-door-blog-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-infrastructure-recipes'] }}">{{ texts["spine-door-recipes-cta"] }}</a>
|
|
</div>
|
|
</div>
|
|
<div class="tagline-panel" data-tagline-panel="personal" hidden>
|
|
<p class="tagline-panel-line">{{ texts["spine-door-personal-line"] }}</p>
|
|
<div class="tagline-panel-cta">
|
|
<a class="no-underline ds-btn-secondary" href="{{ texts['spine-door-personal-href'] }}">{{ texts["spine-door-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-personal-blog'] }}">{{ texts["spine-door-blog-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-personal-recipes'] }}">{{ texts["spine-door-recipes-cta"] }}</a>
|
|
</div>
|
|
</div>
|
|
<div class="tagline-panel" data-tagline-panel="authoring" hidden>
|
|
<p class="tagline-panel-line">{{ texts["spine-door-authoring-line"] }}</p>
|
|
<div class="tagline-panel-cta">
|
|
<a class="no-underline ds-btn-secondary" href="{{ texts['spine-door-authoring-href'] }}">{{ texts["spine-door-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-authoring-blog'] }}">{{ texts["spine-door-blog-cta"] }}</a>
|
|
<a class="no-underline tagline-panel-graph" href="{{ texts['spine-door-authoring-recipes'] }}">{{ texts["spine-door-recipes-cta"] }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# D · prize — the reward once inside #}
|
|
<p class="ds-caption font-mono mt-8 mb-6 max-w-2xl mx-auto" style="color: #f97316">
|
|
{{ texts["spine-prize"] }}
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/blog" class="no-underline ds-btn-primary">
|
|
{{ texts["home-cta-explore"] }}
|
|
</a>
|
|
<a href="https://github.com/stratum-iops/ontoref" target="_blank" rel="noopener noreferrer"
|
|
class="no-underline ds-btn-secondary inline-flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 10 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 20 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ texts["home-cta-github"] }}
|
|
</a>
|
|
</div>
|
|
{# E · close — bookend with the hero #}
|
|
<p class="ds-caption ds-text-secondary mt-8 italic">{{ texts["spine-close"] }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
{# Three Pillars #}
|
|
<section class="py-ds-8 ds-bg ds-rounded-lg">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-8">
|
|
<h2 class="text-3xl font-bold ds-text">{{ texts["home-pillars-title"] }}</h2>
|
|
<p class="mt-3 ds-text-secondary ds-body">{{ texts["home-pillars-subtitle"] }}</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm border ds-border">
|
|
<div class="mb-4">
|
|
<span class="ds-caption font-mono px-2 py-1 ds-bg border ds-border ds-rounded ds-text-secondary">
|
|
{{ texts["home-pillar-impact-label"] }}
|
|
</span>
|
|
</div>
|
|
<h3 class="ds-heading-4 ds-text mb-3">{{ texts["home-pillar-impact-title"] }}</h3>
|
|
<p class="ds-text-secondary ds-body-sm">{{ texts["home-pillar-impact-desc"] }}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm border ds-border">
|
|
<div class="mb-4">
|
|
<span class="ds-caption font-mono px-2 py-1 ds-bg border ds-border ds-rounded ds-text-secondary">
|
|
{{ texts["home-pillar-witness-label"] }}
|
|
</span>
|
|
</div>
|
|
<h3 class="ds-heading-4 ds-text mb-3">{{ texts["home-pillar-witness-title"] }}</h3>
|
|
<p class="ds-text-secondary ds-body-sm">{{ texts["home-pillar-witness-desc"] }}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm border ds-border">
|
|
<div class="mb-4">
|
|
<span class="ds-caption font-mono px-2 py-1 ds-bg border ds-border ds-rounded ds-text-secondary">
|
|
{{ texts["home-pillar-shared-label"] }}
|
|
</span>
|
|
</div>
|
|
<h3 class="ds-heading-4 ds-text mb-3">{{ texts["home-pillar-shared-title"] }}</h3>
|
|
<p class="ds-text-secondary ds-body-sm">{{ texts["home-pillar-shared-desc"] }}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# Architecture image — config-driven & optional: shown only when the consumer's
|
|
home FTL declares `home-arch-img-light` (per-site content, never hardcoded). #}
|
|
{% if texts["home-arch-img-light"] %}
|
|
<section class="py-ds-8 ds-container">
|
|
<div class="mx-auto max-w-4xl">
|
|
<h2 class="text-2xl font-bold ds-text mb-6 text-center">{{ texts["home-arch-title"] }}</h2>
|
|
{# The SVG carries its own dark surface + rounded corners — no wrapper card, or
|
|
its background double-frames and clashes. Shown in both themes; wrapped in
|
|
<picture> so the global lightbox makes it click-to-zoom. #}
|
|
<div class="text-center">
|
|
<picture>
|
|
<img src="{{ texts['home-arch-img-light'] }}"
|
|
alt="{{ texts['home-arch-title'] }}"
|
|
class="block mx-auto w-full h-auto rounded-lg" />
|
|
</picture>
|
|
<p class="ds-caption ds-text-secondary mt-3">{{ texts["home-arch-caption"] }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
{# How it works #}
|
|
<section class="py-ds-8 ds-bg ds-rounded-lg">
|
|
<div class="ds-container-lg ds-container">
|
|
<div class="text-center mb-ds-8">
|
|
<h2 class="text-3xl font-bold ds-text">{{ texts["home-how-title"] }}</h2>
|
|
<p class="mt-3 ds-text-secondary ds-body">{{ texts["home-how-subtitle"] }}</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<div class="w-8 h-8 ds-rounded-full flex items-center justify-center font-bold ds-text mb-4"
|
|
style="background: #3b82f620; color: #60a5fa; border: 1px solid #3b82f640">1</div>
|
|
<h3 class="font-mono ds-text font-semibold mb-2">{{ texts["home-how-step1-title"] }}</h3>
|
|
<p class="ds-text-secondary ds-body-sm">{{ texts["home-how-step1-desc"] }}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<div class="w-8 h-8 ds-rounded-full flex items-center justify-center font-bold ds-text mb-4"
|
|
style="background: #3b82f620; color: #60a5fa; border: 1px solid #3b82f640">2</div>
|
|
<h3 class="font-mono ds-text font-semibold mb-2">{{ texts["home-how-step2-title"] }}</h3>
|
|
<p class="ds-text-secondary ds-body-sm">{{ texts["home-how-step2-desc"] }}</p>
|
|
</div>
|
|
|
|
<div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
|
|
<div class="w-8 h-8 ds-rounded-full flex items-center justify-center font-bold ds-text mb-4"
|
|
style="background: #3b82f620; color: #60a5fa; border: 1px solid #3b82f640">3</div>
|
|
<h3 class="font-mono ds-text font-semibold mb-2">{{ texts["home-how-step3-title"] }}</h3>
|
|
<p class="ds-text-secondary ds-body-sm">{{ texts["home-how-step3-desc"] }}</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# CTA #}
|
|
<section class="py-ds-10 ds-container">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<h2 class="text-3xl font-bold ds-text mb-4">{{ texts["home-cta-title"] }}</h2>
|
|
<p class="ds-body ds-text-secondary mb-8">{{ texts["home-cta-desc"] }}</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/blog" class="no-underline ds-btn-primary">
|
|
{{ texts["home-cta-primary"] }}
|
|
</a>
|
|
<a href="/blog" class="no-underline ds-btn-secondary">
|
|
{{ texts["home-cta-secondary"] }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{# Hero tagline rotator — typed.js (typewriter) + native fade fallback #}
|
|
<script src="/js/typed.umd.js"></script>
|
|
<script src="/js/tagline-rotator.js"></script>
|
|
</div>
|