From 3541d8528958defab4ba2ee355f69be6556a903d Mon Sep 17 00:00:00 2001
From: DemchaAV <demchaav@gmail.com>
Date: Sun, 24 May 2026 22:00:46 +0200
Subject: [PATCH] docs(showcase): add Layered Architecture callout under hero
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Right now the GitHub Pages showcase is a gallery of generated PDFs —
useful, but it doesn't surface the new v2 layered template
architecture or its documentation. Visitors arrive, browse 14 v1 CV
presets, and have no obvious path to "I want to build my own
template."

This PR drops a small callout block between the hero and the value
prop strip that points at the v2 layered docs:

  - NEW pill badge (tinted gradient — matches existing accent colour scheme)
  - Title: "Building your own templates?"
  - One-sentence intro describing the 5-folder pattern
    (data / theme / components / widgets / presets)
  - 3 buttons:
      → Quickstart (5 min)       — docs/templates/v2-layered/README.md
      → Author a preset          — docs/templates/v2-layered/authoring-presets.md
      → Add a template family    — docs/templates/v2-layered/contributor-guide.md

Styling
-------

New .layered-callout / .layered-card / .layered-badge /
.layered-actions classes in styles.css. Dark-theme colour tokens
(slate-50 / slate-200 / slate-300) match the rest of the site —
first iteration used dark text on dark background by mistake, fixed.

What this is NOT
----------------

This is a **placeholder discoverability fix**, not a showcase rework.
A proper "Level 1" overhaul (hero with persona buttons, v2 preset
cards with doc-links, 5-layer SVG diagram, v1 collapsed by default)
is deferred until v2 stabilises across 3+ ported presets or the
first non-CV template family ships. Recording the full plan in
docs/private/cv-v2-roadmap.md for when that moment arrives.

No engine, source, or test changes.
---
 docs/index.html | 13 +++++++++++
 docs/styles.css | 57 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/docs/index.html b/docs/index.html
index c0349df5..f91ed30e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -171,6 +171,19 @@ <h1 id="hero-title">Java PDF layout engine for structured business documents.</h
       </div>
     </section>
 
+    <section class="layered-callout section-shell" aria-labelledby="layered-title">
+      <div class="layered-card">
+        <span class="layered-badge">NEW</span>
+        <h2 id="layered-title">Building your own templates?</h2>
+        <p>The <strong>layered architecture</strong> guide walks you through the five-folder pattern &mdash; <code>data</code> / <code>theme</code> / <code>components</code> / <code>widgets</code> / <code>presets</code> &mdash; with a worked CV example, widget cookbook, and step-by-step contributor checklist. New templates and major rewrites follow this shape.</p>
+        <div class="layered-actions">
+          <a class="button button-primary" href="https://github.com/DemchaAV/GraphCompose/tree/develop/docs/templates/v2-layered">Quickstart (5 min)</a>
+          <a class="button button-secondary" href="https://github.com/DemchaAV/GraphCompose/blob/develop/docs/templates/v2-layered/authoring-presets.md">Author a preset</a>
+          <a class="button button-ghost" href="https://github.com/DemchaAV/GraphCompose/blob/develop/docs/templates/v2-layered/contributor-guide.md">Add a template family</a>
+        </div>
+      </div>
+    </section>
+
     <section class="value-prop section-shell" aria-labelledby="value-title">
       <div class="value-grid">
         <div>
diff --git a/docs/styles.css b/docs/styles.css
index c5099b82..c03e2fa4 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -799,6 +799,63 @@ h2 {
   font-size: 0.94em;
 }
 
+/* Layered architecture callout */
+.layered-callout {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
+.layered-card {
+  position: relative;
+  padding: 28px 32px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(99, 102, 241, 0.10));
+  border: 1px solid rgba(129, 140, 248, 0.35);
+}
+
+.layered-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  color: #0f172a;
+  background: linear-gradient(135deg, #38bdf8, #818cf8);
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.layered-card h2 {
+  margin: 0 0 8px 0;
+  font-size: 22px;
+  color: #f8fafc;
+}
+
+.layered-card p {
+  margin: 0 0 18px 0;
+  max-width: 720px;
+  color: #cbd5e1;
+  line-height: 1.55;
+}
+
+.layered-card strong {
+  color: #e2e8f0;
+}
+
+.layered-card code {
+  background: rgba(148, 163, 184, 0.18);
+  color: #f1f5f9;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.layered-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 /* Value prop strip */
 .value-prop {
   padding-top: 56px;