Skip to content

updated header on index, product pages #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arhimede merged 3 commits into from
Aug 17, 2026
Merged

updated header on index, product pages #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
824b9c6
updated header on index, product pages
bidi47 Aug 17, 2026
efb891c
updated llms-full
bidi47 Aug 17, 2026
b356909
updated llms-full
bidi47 Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

33 changes: 0 additions & 33 deletions public/llms-full.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17523,36 +17523,3 @@ Dotkernel Queue is developed and led by the dev team at Apidemia - built to keep

[Talk to us →](https://www.dotkernel.com/contact/)


<!-- ============================================================ -->
<!-- md-pages/who-we-are.md -->
<!-- ============================================================ -->

---
title: "Who We Are"
canonical_url: "https://www.dotkernel.com/who-we-are/"
language: "en"
---

# demo page

WHO WE ARE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

## [heading](https://docs.mezzio.dev/mezzio/)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

## [heading](https://github.com/laminas/laminas-diactoros)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

## [heading](https://github.com/laminas/laminas-stratigility)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

27 changes: 0 additions & 27 deletions public/md-pages/who-we-are.md
View file
Open in desktop

This file was deleted.

17 changes: 14 additions & 3 deletions src/App/assets/scss/components/_custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ html[data-theme="light"] {
--sage: #8C1729;
--amber-dim: rgba(199, 31, 56, .12);
--teal-dim: rgba(163, 60, 75, .12);
--periwinkle-dim: rgba(74, 70, 62, .12);
--rose-dim: rgba(201, 124, 137, .12);
--sage-dim: rgba(140, 23, 41, .12);
--nav-bg: rgba(251, 249, 244, .86);
--on-accent: #FBF6F0;

Expand Down Expand Up @@ -47,6 +50,9 @@ html[data-theme="dark"] {
--sage: #8C1729;
--amber-dim: rgba(218, 53, 80, .16);
--teal-dim: rgba(232, 99, 122, .16);
--periwinkle-dim: rgba(92, 88, 84, .16);
--rose-dim: rgba(240, 169, 182, .16);
--sage-dim: rgba(140, 23, 41, .16);
--nav-bg: rgba(11, 11, 11, .86);

/* Lifted for the dark surfaces; same four states as the light theme. */
Expand Down Expand Up @@ -107,7 +113,7 @@ img {
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--teal);
color: var(--page-accent, var(--teal));
display: inline-flex;
align-items: center;
gap: 8px;
Expand All @@ -117,8 +123,8 @@ img {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 3px var(--teal-dim);
background: var(--page-accent, var(--teal));
box-shadow: 0 0 0 3px var(--page-accent-dim, var(--teal-dim));
}
}

Expand Down Expand Up @@ -516,6 +522,11 @@ html[data-theme="light"] .theme-toggle {
margin-top: 20px;
max-width: 520px;
color: var(--text-muted);

strong {
color: var(--page-accent, var(--teal));
font-weight: 600;
}
}
}

Expand Down
77 changes: 68 additions & 9 deletions src/App/templates/app/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,22 @@
{% block json_ld %} {{ include('@jsonld/index.jsonld.twig') }} {% endblock %}
{% block title %}A PSR-15 compliant application{% endblock %}

{% block stylesheets %}
<style>
/* Product org-chart in the hero - scoped to this page. */
.org-chart { display: block; width: 100%; max-width: 380px; height: auto; margin: 6px auto 0; }
.org-chart .oc-line { stroke: var(--text-dim); stroke-width: 1.8; fill: none; }
.org-chart .oc-arrow { fill: var(--text-dim); }
.org-chart .oc-badge { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.org-chart .oc-icon * { fill: none; stroke: var(--text-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.org-chart .oc-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; fill: var(--text-dim); text-anchor: middle; }
.org-chart .oc-admin { fill: #E2862E; }
.org-chart .oc-queue { fill: #22A06B; }
.org-chart .oc-api { fill: var(--brand-red); }
.org-chart .oc-box-name { font-family: var(--mono); font-weight: 700; text-anchor: middle; fill: var(--on-accent); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
</style>
{% endblock %}

{% block content %}

<section class="hero">
Expand Down Expand Up @@ -29,15 +45,58 @@
</div>

<div class="pipeline">
<div class="pipeline-label"><span>Request lifecycle</span></div>
<div class="pipeline-track">
<div class="pl-packet" aria-hidden="true"></div>
<div class="pl-step"><span class="name">Router</span><span class="tag">FastRoute</span></div>
<div class="pl-step"><span class="name">Authentication</span><span class="tag">dot-authentication</span></div>
<div class="pl-step"><span class="name">RBAC guard</span><span class="tag">dot-rbac-guard</span></div>
<div class="pl-step"><span class="name">Your handler</span><span class="tag">PSR-15</span></div>
<div class="pl-step"><span class="name">Response</span><span class="tag">Diactoros</span></div>
</div>
<div class="pipeline-label"><span>Three products, one core</span></div>
<svg class="org-chart" viewBox="0 0 400 420" role="img" aria-label="An Admin box with an arrow into a Queue box, a double arrow down to a central API box, and four double arrows from the API box down to icon boxes for a smartphone, a computer, a person, and a cloud">
<defs>
<marker id="oc-arrowhead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 Z" class="oc-arrow"/>
</marker>
</defs>

<rect class="oc-admin" x="30" y="20" width="90" height="44" rx="8"/>
<text class="oc-box-name" x="75" y="47" font-size="14">Admin</text>

<rect class="oc-queue" x="155" y="20" width="90" height="44" rx="8"/>
<text class="oc-box-name" x="200" y="47" font-size="14">Queue</text>

<rect class="oc-api" x="130" y="160" width="140" height="80" rx="12"/>
<text class="oc-box-name" x="200" y="209" font-size="26">API</text>

<circle class="oc-badge" cx="74" cy="348" r="32"/>
<g class="oc-icon" transform="translate(74,348)">
<rect x="-6" y="-11" width="12" height="22" rx="2.5"/>
<line x1="-3" y1="8" x2="3" y2="8"/>
</g>
<text class="oc-label" x="74" y="392">Mobile</text>

<circle class="oc-badge" cx="158" cy="348" r="32"/>
<g class="oc-icon" transform="translate(158,348)">
<rect x="-10" y="-8" width="20" height="13" rx="1.5"/>
<line x1="0" y1="5" x2="0" y2="8"/>
<line x1="-6" y1="9" x2="6" y2="9"/>
</g>
<text class="oc-label" x="158" y="392">Client</text>

<circle class="oc-badge" cx="242" cy="348" r="32"/>
<g class="oc-icon" transform="translate(242,348)">
<circle cx="0" cy="-4" r="5"/>
<path d="M -9,10 C -9,2 9,2 9,10"/>
</g>
<text class="oc-label" x="242" y="392">Users</text>

<circle class="oc-badge" cx="326" cy="348" r="32"/>
<g class="oc-icon" transform="translate(326,348)">
<path d="M -6,-4 C -6,-7 -3,-9 0,-9 C 3,-9 6,-7 6,-4 C 9,-4 11,-2 11,1 C 11,3.5 9,5 6,5 L -8,5 C -11,5 -13,3 -13,0 C -13,-2.5 -11,-4.5 -8,-4.5 C -7.3,-4.5 -6.6,-4.3 -6,-4 Z"/>
</g>
<text class="oc-label" x="326" y="392">Cloud</text>

<line class="oc-line" x1="120" y1="42" x2="155" y2="42" marker-end="url(#oc-arrowhead)"/>
<line class="oc-line" x1="200" y1="64" x2="200" y2="160" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/>
<line class="oc-line" x1="200" y1="240" x2="74" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/>
<line class="oc-line" x1="200" y1="240" x2="158" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/>
<line class="oc-line" x1="200" y1="240" x2="242" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/>
<line class="oc-line" x1="200" y1="240" x2="326" y2="316" marker-start="url(#oc-arrowhead)" marker-end="url(#oc-arrowhead)"/>
</svg>
</div>
</div>
</section>
Expand Down
61 changes: 51 additions & 10 deletions src/Page/templates/page/about.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,30 @@

{% block title %}About Us{% endblock %}

{% block stylesheets %}
<style>
/* Pyramid layout in the hero - scoped to this page. */
.pyramid { display: flex; flex-direction: column-reverse; align-items: center; margin-top: 10px; }
.pyramid-item { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; }
.pyramid-item .pyr-icon { flex-shrink: 0; width: 22px; height: 22px; }
.pyramid-item .pyr-icon * { fill: none; stroke: var(--page-accent, var(--sage)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pyramid-item .pyr-text { display: flex; flex-direction: column; gap: 2px; }
.pyramid-item .name { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text); }
.pyramid-item .tag { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }
.pyramid-arrow { width: 18px; height: 14px; margin: 6px 0; fill: none; stroke: var(--text-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
</style>
{% endblock %}

{% block content %}

<section class="hero">
<section class="hero" style="--page-accent:var(--sage); --page-accent-dim:var(--sage-dim)">
<div class="wrap hero-grid">
<div>
<span class="eyebrow">About us · Apidemia</span>
<h1>The team behind Dotkernel</h1>
<p class="sub">
Dotkernel started as an internal tool for handling complex architectures, built because we needed
it ourselves. We released it under MIT because the PHP community gave us the components it stands
it ourselves. We released it under <strong>MIT</strong> because the <strong>PHP community</strong> gave us the components it stands
on. Everything here is made by a team that has to live with its own decisions.
</p>
<div class="hero-ctas">
Expand All @@ -40,14 +54,41 @@
<div class="hero-visual">
<div class="pipeline">
<div class="pipeline-label"><span>How a change ships</span></div>
<div class="pipeline-track">
<div class="pl-packet" aria-hidden="true"></div>
<div class="pl-step"><span class="name">Propose</span><span class="tag">plan before code</span></div>
<div class="pl-step"><span class="name">Build</span><span class="tag">house structure</span></div>
<div class="pl-step"><span class="name">Review</span><span class="tag">another pair of eyes</span></div>
<div class="pl-step"><span class="name">QA gate</span><span class="tag">cs · PHPStan · tests</span></div>
<div class="pl-step"><span class="name">Document</span><span class="tag">for the next person</span></div>
<div class="pl-step"><span class="name">Release</span><span class="tag">MIT, in public</span></div>
<div class="pyramid">
<div class="pyramid-item" style="width:100%">
<svg class="pyr-icon" viewBox="0 0 20 20"><path d="M10 3a5 5 0 0 0-3 9c.6.5 1 1.2 1 2h4c0-.8.4-1.5 1-2a5 5 0 0 0-3-9z"/><line x1="8" y1="17" x2="12" y2="17"/><line x1="8.5" y1="19" x2="11.5" y2="19"/></svg>
<div class="pyr-text"><span class="name">Propose</span><span class="tag">plan before code</span></div>
</div>
<svg class="pyramid-arrow" viewBox="0 0 20 12"><path d="M2 10 L10 2 L18 10"/></svg>

<div class="pyramid-item" style="width:88%">
<svg class="pyr-icon" viewBox="0 0 20 20"><rect x="6" y="4" width="8" height="5" rx="1"/><rect x="3" y="11" width="7" height="5" rx="1"/><rect x="11" y="11" width="6" height="5" rx="1"/></svg>
<div class="pyr-text"><span class="name">Build</span><span class="tag">house structure</span></div>
</div>
<svg class="pyramid-arrow" viewBox="0 0 20 12"><path d="M2 10 L10 2 L18 10"/></svg>

<div class="pyramid-item" style="width:76%">
<svg class="pyr-icon" viewBox="0 0 20 20"><circle cx="8.5" cy="8.5" r="5.5"/><line x1="13" y1="13" x2="17.5" y2="17.5"/></svg>
<div class="pyr-text"><span class="name">Review</span><span class="tag">another pair of eyes</span></div>
</div>
<svg class="pyramid-arrow" viewBox="0 0 20 12"><path d="M2 10 L10 2 L18 10"/></svg>

<div class="pyramid-item" style="width:64%">
<svg class="pyr-icon" viewBox="0 0 20 20"><path d="M10 2l7 3v6c0 4-3 6.5-7 7-4-.5-7-3-7-7V5z"/><path d="M7 10l2.2 2.2L13.5 8"/></svg>
<div class="pyr-text"><span class="name">QA gate</span><span class="tag">cs · PHPStan · tests</span></div>
</div>
<svg class="pyramid-arrow" viewBox="0 0 20 12"><path d="M2 10 L10 2 L18 10"/></svg>

<div class="pyramid-item" style="width:52%">
<svg class="pyr-icon" viewBox="0 0 20 20"><rect x="5" y="2" width="10" height="16" rx="1.5"/><line x1="8" y1="7" x2="12" y2="7"/><line x1="8" y1="10.5" x2="12" y2="10.5"/><line x1="8" y1="14" x2="11" y2="14"/></svg>
<div class="pyr-text"><span class="name">Document</span><span class="tag">for the next person</span></div>
</div>
<svg class="pyramid-arrow" viewBox="0 0 20 12"><path d="M2 10 L10 2 L18 10"/></svg>

<div class="pyramid-item" style="width:40%">
<svg class="pyr-icon" viewBox="0 0 20 20"><path d="M5 15h10"/><path d="M10 13V3"/><path d="M6.5 7.5L10 3l3.5 4.5"/></svg>
<div class="pyr-text"><span class="name">Release</span><span class="tag">MIT, in public</span></div>
</div>
</div>
</div>
</div>
Expand Down
Loading