-
+
+
{new Date(latestPost.date).toLocaleDateString('en-US', {
diff --git a/src/components/HomepageRedesign/DesignCanvas.jsx b/src/components/HomepageRedesign/DesignCanvas.jsx
new file mode 100644
index 0000000..2345a3d
--- /dev/null
+++ b/src/components/HomepageRedesign/DesignCanvas.jsx
@@ -0,0 +1,191 @@
+import React, { useRef, useCallback, useEffect } from 'react';
+
+const DC = {
+ bg: '#f0eee9',
+ grid: 'rgba(0,0,0,0.06)',
+ label: 'rgba(60,50,40,0.7)',
+ title: 'rgba(40,30,20,0.85)',
+ subtitle: 'rgba(60,50,40,0.6)',
+ font: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+};
+
+export function DesignCanvas({ children, minScale = 0.1, maxScale = 8, style = {} }) {
+ const vpRef = useRef(null);
+ const worldRef = useRef(null);
+ const tf = useRef({ x: 0, y: 0, scale: 1 });
+
+ const apply = useCallback(() => {
+ const { x, y, scale } = tf.current;
+ const el = worldRef.current;
+ if (el) el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
+ }, []);
+
+ useEffect(() => {
+ const vp = vpRef.current;
+ if (!vp) return;
+
+ const zoomAt = (cx, cy, factor) => {
+ const r = vp.getBoundingClientRect();
+ const px = cx - r.left, py = cy - r.top;
+ const t = tf.current;
+ const next = Math.min(maxScale, Math.max(minScale, t.scale * factor));
+ const k = next / t.scale;
+ t.x = px - (px - t.x) * k;
+ t.y = py - (py - t.y) * k;
+ t.scale = next;
+ apply();
+ };
+
+ const isMouseWheel = (e) =>
+ e.deltaMode !== 0 ||
+ (e.deltaX === 0 && Number.isInteger(e.deltaY) && Math.abs(e.deltaY) >= 40);
+
+ let isGesturing = false;
+ const onWheel = (e) => {
+ e.preventDefault();
+ if (isGesturing) return;
+ if (e.ctrlKey) {
+ zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY * 0.01));
+ } else if (isMouseWheel(e)) {
+ zoomAt(e.clientX, e.clientY, Math.exp(-Math.sign(e.deltaY) * 0.18));
+ } else {
+ tf.current.x -= e.deltaX;
+ tf.current.y -= e.deltaY;
+ apply();
+ }
+ };
+
+ let gsBase = 1;
+ const onGestureStart = (e) => { e.preventDefault(); isGesturing = true; gsBase = tf.current.scale; };
+ const onGestureChange = (e) => {
+ e.preventDefault();
+ zoomAt(e.clientX, e.clientY, (gsBase * e.scale) / tf.current.scale);
+ };
+ const onGestureEnd = (e) => { e.preventDefault(); isGesturing = false; };
+
+ let drag = null;
+ const onPointerDown = (e) => {
+ const onBg = e.target === vp || e.target === worldRef.current;
+ if (!(e.button === 1 || (e.button === 0 && onBg))) return;
+ e.preventDefault();
+ vp.setPointerCapture(e.pointerId);
+ drag = { id: e.pointerId, lx: e.clientX, ly: e.clientY };
+ vp.style.cursor = 'grabbing';
+ };
+ const onPointerMove = (e) => {
+ if (!drag || e.pointerId !== drag.id) return;
+ tf.current.x += e.clientX - drag.lx;
+ tf.current.y += e.clientY - drag.ly;
+ drag.lx = e.clientX; drag.ly = e.clientY;
+ apply();
+ };
+ const onPointerUp = (e) => {
+ if (!drag || e.pointerId !== drag.id) return;
+ vp.releasePointerCapture(e.pointerId);
+ drag = null;
+ vp.style.cursor = '';
+ };
+
+ vp.addEventListener('wheel', onWheel, { passive: false });
+ vp.addEventListener('gesturestart', onGestureStart, { passive: false });
+ vp.addEventListener('gesturechange', onGestureChange, { passive: false });
+ vp.addEventListener('gestureend', onGestureEnd, { passive: false });
+ vp.addEventListener('pointerdown', onPointerDown);
+ vp.addEventListener('pointermove', onPointerMove);
+ vp.addEventListener('pointerup', onPointerUp);
+ vp.addEventListener('pointercancel', onPointerUp);
+
+ return () => {
+ vp.removeEventListener('wheel', onWheel);
+ vp.removeEventListener('gesturestart', onGestureStart);
+ vp.removeEventListener('gesturechange', onGestureChange);
+ vp.removeEventListener('gestureend', onGestureEnd);
+ vp.removeEventListener('pointerdown', onPointerDown);
+ vp.removeEventListener('pointermove', onPointerMove);
+ vp.removeEventListener('pointerup', onPointerUp);
+ vp.removeEventListener('pointercancel', onPointerUp);
+ };
+ }, [apply, minScale, maxScale]);
+
+ const gridSvg = `url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M120 0H0v120' fill='none' stroke='${encodeURIComponent(DC.grid)}' stroke-width='1'/%3E%3C/svg%3E")`;
+
+ return (
+
+ );
+}
+
+export function DCSection({ title, subtitle, children, gap = 48 }) {
+ return (
+
+
+
{title}
+ {subtitle && (
+
{subtitle}
+ )}
+
+
+ {children}
+
+
+ {label && (
+
{label}
+ )}
+
+ {children}
+
+
+
+
+
+
+ {/* Masthead — magazine-style */}
+
+
VOL. 03 · NO. 41
+
+ The 5L Labs Journal
+
+
+ NOTES ON PRIVATE AI · PRIVATE IOT · FROM A COMMERCIAL RESEARCH LAB
+
+
+ puts the writing
+
+
+
+ {/* LEFT: feed */}
+
+ {/* Lead story */}
+
+
+ ★ LEAD STORY · FRONTIER RESEARCH
+
+
+ Learning about learning?
+
+
+ We've been poking at the limits of Transformer architectures for a few months now — and what we found about the
+ Platonic Representation Hypothesis surprised us. A long read on curiosity-driven learning
+ and what comes after scale.
+
+
+
+ 14 MIN READ · FEB 23, 2026
+
+
+
+ {/* Feed */}
+
+ RECENT WRITING
+
+ {posts.slice(1).map(([date, tag, title, desc], i) => (
+
+ ))}
+
+
+ {/* RIGHT: sidebar */}
+
+
+
ABOUT THE LAB
+
+ A privacy-first commercial research lab.
+
+
+ We split our time between applied consulting and open research. Writing is the main output.
+
+
+
+
+
+
PROJECTS
+ {[
+ ['Open Embeddings', 'open community registry'],
+ ['Recruiter Rankings', 'verified performance data'],
+ ['Overlord Kill Switch', 'hardware network isolator'],
+ ].map(([n, d]) => (
+
+ ))}
+
+
+
+
SUBSCRIBE
+
+ Get new writing in your inbox.
+
+
+ you@domain.com
+
+
+
+
+
+ sidebar keeps products
+
+
+
+
+
+
+
+
+
+
+ {/* HERO — big type statement */}
+
+
+ EST. 2023 — NEW YORK — A PRIVATE RESEARCH LAB
+
+
+ Your datafor you. Not against you.
+
+
+
+ We build AI, ML, and IoT systems that learn from sensitive data
+ without ever seeing it .
+ Commercial-grade. Privacy-first. Shipped.
+
+
+
+
+
+ replace the vague
+
+ ONE primary CTA.
+
+
+
+
+ {/* PILLARS — three numbered beliefs */}
+
+
+ 03 — WHAT WE BELIEVE
+
+
+ {[
+ ['01', 'Privacy is a feature, not a tax.', 'Differential privacy, federated learning, on-device inference. Techniques, not promises.'],
+ ['02', 'Own the silicon. Own the data.', 'Self-hosted IoT from the chip up. No cloud middleman between you and your home.'],
+ ['03', 'Open source the boring parts.', 'Embeddings, templates, kill-switches. The plumbing should be free.'],
+ ].map(([n, t, d]) => (
+
+ ))}
+
+
+
+
+
+ {/* FEATURED — one product, one piece of writing */}
+
+
+
LATEST WRITING
+
+ Learning about learning?
+
+
+
FEB 23 · FRONTIER RESEARCH
+
+
+
FEATURED PROJECT
+
+ Open Embeddings
+
+
+ A community registry for high-quality open embeddings.
+
+
+
+
+
+
+
+
+
VIEW
+ {buttons.map((b, i) => (
+
+ {i === 1 &&
}
+ onSetView(b.id)} aria-pressed={view === b.id}>
+ {b.label}
+
+
+ ))}
+
+
TWEAKS
+
+
+
Density
+
+ {['tight', 'roomy'].map(v => (
+ onTweak('density', v)} aria-pressed={tweaks.density === v}>
+ {v.charAt(0).toUpperCase() + v.slice(1)}
+
+ ))}
+
+
+
+
+
Accent
+
+ {ACCENT_SWATCHES.map(c => (
+ onTweak('accent', c)}
+ aria-label={`Select accent color ${c}`}
+ title={`Accent color ${c}`}
+ aria-pressed={tweaks.accent === c}
+ />
+ ))}
+
+
+
+
+
Annotation notes
+
+ {['show', 'hide'].map(v => (
+ onTweak('notes', v)} aria-pressed={tweaks.notes === v}>
+ {v.charAt(0).toUpperCase() + v.slice(1)}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function SingleView({ which }) {
+ const components = { '1': Manifesto, '2': Journal, '3': Terminal, '4': Schematic };
+ const Comp = components[which];
+ return (
+
+ );
+}
+
+export default function PreviewApp() {
+ const rootRef = useRef(null);
+
+ const [view, setView] = useState(() => {
+ try { return localStorage.getItem(LS_VIEW) || 'canvas'; } catch { return 'canvas'; }
+ });
+
+ const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
+
+ const handleSetView = (v) => {
+ try { localStorage.setItem(LS_VIEW, v); } catch {}
+ setView(v);
+ };
+
+ const handleTweak = (key, value) => {
+ setTweaks(prev => ({ ...prev, [key]: value }));
+ };
+
+ // Apply tweaks via CSS custom properties and class toggles on the root element
+ useEffect(() => {
+ const el = rootRef.current;
+ if (!el) return;
+ el.style.setProperty('--accent', tweaks.accent);
+ el.style.setProperty('--wf-accent', tweaks.accent);
+ el.classList.toggle('roomy', tweaks.density === 'roomy');
+ el.classList.toggle('notes-hidden', tweaks.notes === 'hide');
+ }, [tweaks]);
+
+ const rootClasses = [
+ 'wf-preview-root',
+ tweaks.density === 'roomy' ? 'roomy' : '',
+ tweaks.notes === 'hide' ? 'notes-hidden' : '',
+ ].filter(Boolean).join(' ');
+
+ return (
+
+
+
+ {view === 'canvas' ?
:
}
+
+ {view === 'canvas' && (
+
+
5L Labs — Homepage wireframes
+
4 rough directions · low-fi, b&w + rust accent.
+
Click a tab above to zoom into one.
+
+ )}
+
+
+
+
+
+
+
+ {/* HERO headline + schematic */}
+
+
+ FIG. 01 — HOW 5L LABS WORKS
+
+
+ One lab, three outputs,one rule: privacy first.
+
+
+
+ {/* THE SCHEMATIC DIAGRAM */}
+
+
+
+
+
+
+
+ 5L Labs
+ NYC · 2023–
+
+
+ {/* INPUT node */}
+
+ sensitive
+ data
+ INPUT
+
+
+ research & writing
+ frontier · applied · iot
+ free, open, archival
+
+
+ open-source products
+ open-embeddings · overlord · …
+
+
+ consulting $
+ this pays for everything else
+ 1–2 engagements / quarter
+
+ funds the research →
+
+
+
+ the diagram IS
+
+
+ {/* The three output areas expanded */}
+
+
+
FIG. 02 — RESEARCH
+
Four beats, published openly.
+ {['Frontier Research', 'Applied AI Engineering', 'Self-Hosted IoT', 'Applied Home ML IoT'].map(x => (
+
+ {x} →
+
+ ))}
+
+
+
FIG. 03 — PRODUCTS
+
Free, open, self-hostable.
+ {[
+ ['Open Embeddings', 'embeddings registry'],
+ ['Recruiter Rankings', 'verified perf data'],
+ ['Overlord Kill Switch', 'hardware isolation'],
+ ].map(([n, d]) => (
+
+ ))}
+
+
+
FIG. 04 — CONSULTING
+
+ Work with us.
+
+
+ We take 1–2 engagements per quarter . Private ML, on-device inference, IoT audits.
+
+
Start an inquiry →
+
+ NEXT AVAILABILITY — Q3 2026
+
+
+
+
+
+
+
+
+
+
+
+ {/* Terminal banner */}
+
+
$ whoami
+
5L Labs — commercial privacy-first research, est. 2023 (NYC)
+
$ cat mission.txt
+
Advancing technology for humans and bots — with privacy in mind.
+
$ ls areas/
+
+ private-ai/ {' '}
+ private-iot/ {' '}
+ frontier/ {' '}
+ applied-ai/
+
+
+ $ ./hire-us --consulting ▊
+
+
+ devs are
+
+
+ {/* INDEX */}
+
+
+
+ INDEX OF / · SORT BY:
+
+
DATE ↓
+
AREA
+
TYPE
+
+
+
+
+ {['DATE', 'TYPE', 'AREA', 'TITLE', '↗'].map((h, i) => (
+ {h}
+ ))}
+
+
+
+ {entries.map((row, i) => (
+
+ {row[0]}
+
+ {row[1]}
+
+ {row[2]}
+ {row[3]}
+ {row[4]}
+ ))}
+
+
+
+ — load 24 more —
+
+
+
+ {/* Two-column sub-indexes */}
+
+
+
~/projects
+ {[
+ ['open-embeddings', '★ 1.2k', 'community registry for open vector embeddings'],
+ ['recruiter-rankings', 'preview', 'industry rankings backed by verified data'],
+ ['overlord-kill-switch', '★ 340', 'hardware network isolator for commercial envs'],
+ ].map(([n, meta, d]) => (
+
+ ))}
+
+
+
~/consulting
+
+ We take on a small number of engagements each quarter.
+
+
+ Private ML systems, on-device inference, and IoT architecture audits.
+
+
+ CURRENT AVAILABILITY: Q3 2026
+
+
./inquire →
+
+
+
+
+
+
+ {children}
+ {arrow && (
+
+
+ )}
+
{label}
;
+}
+
+export function Lines({ rows = 3, widths }) {
+ const ws = widths || ['w-90', 'w-80', 'w-60'];
+ return (
+
+ {Array.from({ length: rows }).map((_, i) => (
+
+ ))}
+
+
+ 5L
+ 5L Labs
+
+
+ {links.map(l => (
+ {l}
+ ))}
+
+
+
+
5L Labs
+
+ Commercial privacy-first.
+
+
+
Research
+
+ Private AI/ML
+ Private IoT
+ Frontier
+
+
+
+
Projects
+
+ Open Embeddings
+ Recruiter Rankings
+ Kill Switch
+
+
+
+
Contact
+
+ inquiries@5l-labs.com
+ GitHub
+ LinkedIn
+
+
+
+ {sources.map(([label, href]) => (
+
+ {label}
+
+ ))}
+
+ Topic
+ onSelect(event.target.value)}>
+ {conceptTopics.map((item) => (
+
+ {item.title}
+
+ ))}
+
+
+ );
+}
+
+export default function OpenEmbeddingsConceptDemo() {
+ const [selected, setSelected] = useState(conceptTopics[0].slug);
+ const topic = conceptTopics.find((item) => item.slug === selected) ?? conceptTopics[0];
+
+ return (
+
+
+
+
Interactive research note
+
Language-specific concept cards
+
+ Select any processed topic to see the kind of English-normalized concept layer a
+ publisher could expose alongside Open Embeddings.
+
+
+
+ 304 rows8 spaces10 topics
+
+
+
+
+
+ {conceptTopics.slice(0, 5).map((item) => (
+ setSelected(item.slug)}>
+ {item.title}
+
+ ))}
+
+
+
+
+
+
{topic.languages}
+
{topic.title}
+
{topic.summary}
+
+
{topic.angle}
+
+
+
+ {topic.cards.map((card) => (
+
+ {card.languages}
+ {card.label}
+ {card.text}
+
+ ))}
+
+
+
+
+
+
$ ls -lt writing/
+
+ {allPosts.length} entries across{' '}
+ {homepageConfig.areas.map((a, i) => (
+
+ {a}/
+ {i < homepageConfig.areas.length - 1 ? ' ' : ''}
+
+ ))}
+
+
+
+ INDEX OF /writing
+ ·
+ FILTER:
+ {AREAS.map(a => (
+ setArea(a)}
+ aria-label={`Filter by ${a === 'all' ? 'all areas' : a}`}
+ aria-pressed={area === a}
+ >
+ {a}
+
+ ))}
+
+
+
+
+
+
+
+ DATE
+ TYPE
+ AREA
+ TITLE
+ ↗
+
+
+
+ {entries.length === 0 ? (
+
+
+ No entries found.
+
+
+ ) : entries.map((entry) => (
+
+ {entry.dateLabel}
+
+ {entry.type}
+
+ {entry.area}
+
+
+
+ ))}
+
+
+
+
+ {entries.length} {area === 'all' ? 'total' : area} entr{entries.length === 1 ? 'y' : 'ies'}
+
+
+
+
+
+ );
+}
diff --git a/src/pages/homepage-preview.js b/src/pages/homepage-preview.js
new file mode 100644
index 0000000..c0d1d6e
--- /dev/null
+++ b/src/pages/homepage-preview.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export default function HomepagePreview() {
+ return (
+ <>
+
+ 5L Labs — Homepage Preview
+ Loading preview… }>
+ {() => {
+ const PreviewApp = require('../components/HomepageRedesign/PreviewApp').default;
+ return
;
+ }}
+
+
+ );
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 656fe2f..da59e0d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,47 +1,166 @@
-import React from "react";
-import clsx from "clsx";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from "@theme/Layout";
-import HomepageContent from "../components/HomepageContent";
-import styles from "./index.module.css";
+import React, { useState, useMemo } from 'react';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import homepageConfig from '../config/homepage';
+import allPosts from '../generated/all-posts.json';
+import styles from './index.module.css';
-import Logo from "@site/static/img/5L_Labs_Logo.png";
-
-function HomepageHeader() {
- const { siteConfig } = useDocusaurusContext();
- return (
-
-
-
- {/* Explicit width/height to prevent CLS and ensure proper aspect ratio */}
-
-
-
{siteConfig.title}
-
{siteConfig.tagline}
-
-
-
- );
-}
+const PREVIEW_COUNT = 7;
+const AREAS = ['all', ...homepageConfig.areas];
export default function Home() {
const { siteConfig } = useDocusaurusContext();
+ const [area, setArea] = useState('all');
+
+ // ⚡ Bolt Perf: Memoize array filtering to prevent redundant O(N) operations on every component re-render unless the area filter changes.
+ const filtered = useMemo(() => area === 'all' ? allPosts : allPosts.filter(p => p.area === area), [area]);
+ const entries = filtered.slice(0, PREVIEW_COUNT);
+ const remaining = filtered.length - PREVIEW_COUNT;
+
+ const { consulting, areas } = homepageConfig;
+
return (
-
-
+
+ {/* Terminal banner */}
+
+
$ whoami
+
5L Labs — commercial privacy-first research, est. 2023 (NYC)
+
$ cat mission.txt
+
{homepageConfig.missionStatement}
+
$ ls areas/
+
+ {areas.map(a => (
+ {a}/
+ ))}
+
+
+ $ ./hire-us --consulting {' '}
+ ▊
+
+
+
+ INDEX OF /
+ ·
+ FILTER:
+ {AREAS.map(a => (
+ setArea(a)}
+ aria-label={`Filter by ${a === 'all' ? 'all areas' : a}`}
+ aria-pressed={area === a}
+ >
+ {a}
+
+ ))}
+
+
+
+
+
+
+
+ DATE
+ TYPE
+ AREA
+ TITLE
+ ↗
+
+
+
+ {entries.length === 0 ? (
+
+
+ No entries found.
+
+
+ ) : entries.map((entry) => (
+
+ {entry.dateLabel}
+
+ {entry.type}
+
+ {entry.area}
+
+
+
+ ))}
+
+
+
+ {remaining > 0 && (
+
+
+ )}
+
+
+ {/* Projects + Consulting */}
+
+
+
+
~/projects
+ {homepageConfig.products.map((p) => {
+ const isExternal = p.link && p.link.startsWith('http');
+ return (
+
+
+
+ {p.title.toLowerCase().replace(/\s*\(.*?\)/, '')}
+
+ ↗
+
+
{p.description}
+
+ );
+ })}
+
+
+
+
~/consulting
+
{consulting.blurb}
+
{consulting.services}
+
+ CURRENT AVAILABILITY:{' '}
+ {consulting.availability}
+
+
+ ./inquire →
+
+
+
+
);
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..6dcc2cd 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,23 +1,251 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
+.page {
+ max-width: 1100px;
+ margin: 0 auto;
+ padding: 48px 40px 80px;
+ font-family: var(--font-mono);
+ font-size: 13px;
+ line-height: 1.55;
+}
-.heroBanner {
- padding: 4rem 0;
- text-align: center;
+/* ── Terminal banner ── */
+.terminal {
+ padding: 20px 24px;
+ background: #0d1117;
+ color: #e8e6df;
+ font-family: var(--font-mono);
+ font-size: 13px;
+ line-height: 1.6;
+ border: 1px solid #30363d;
+ border-radius: 4px;
+ margin-bottom: 40px;
+}
+.terminalPrompt { color: #7bd27b; }
+.terminalDir { color: #f0a060; }
+.terminalCursor { color: #7bd27b; }
+
+/* Light mode: terminal needs to stand out from white bg */
+[data-theme='light'] .terminal {
+ background: #1a1a1a;
+ border-color: #333;
+}
+
+/* ── Index ── */
+.indexSection { margin-bottom: 36px; }
+
+.indexHeader {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 12px;
+ color: var(--text-muted);
+ font-size: 11px;
+ letter-spacing: 0.14em;
+}
+
+.indexTable {
+ width: 100%;
+ border-collapse: collapse;
+ font-family: var(--font-mono);
+ font-size: 13px;
+ table-layout: fixed;
+}
+
+/* Column widths */
+.indexTable col.colDate { width: 108px; }
+.indexTable col.colType { width: 96px; }
+.indexTable col.colArea { width: 108px; }
+.indexTable col.colTitle { width: auto; }
+.indexTable col.colMeta { width: 80px; }
+
+.indexTable thead tr {
+ border-bottom: 1.5px solid var(--text-main);
+ text-align: left;
+}
+.indexTable thead th {
+ padding: 8px 6px;
+ font-weight: 500;
+ font-size: 11px;
+ letter-spacing: 0.08em;
+ color: var(--text-muted);
+ white-space: nowrap;
+}
+.indexTable thead th:last-child { text-align: right; }
+
+.indexTable tbody tr {
position: relative;
+ border-bottom: 1px dashed color-mix(in srgb, var(--text-muted) 30%, transparent);
+}
+.indexTable tbody tr:hover { background: color-mix(in srgb, var(--text-muted) 8%, transparent); }
+.indexTable tbody tr:focus-within { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
+
+.indexTable tbody td {
+ padding: 10px 6px;
+ color: var(--text-muted);
+ vertical-align: middle;
+ white-space: nowrap;
overflow: hidden;
+ text-overflow: ellipsis;
+}
+.indexTable tbody td.colTitle {
+ color: var(--text-main);
+ white-space: normal;
+}
+.indexTable tbody td.colTitle a {
+ color: var(--text-main);
+ text-decoration: none;
+}
+.indexTable tbody td.colTitle a::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+}
+.indexTable tbody td.colTitle a:hover { color: var(--brand-primary); }
+.indexTable tbody td:last-child { text-align: right; }
+.indexTable tbody td:last-child a {
+ display: inline-block;
+ transition: transform 0.2s ease, color 0.2s ease;
+ z-index: 2;
+ position: relative;
+}
+.indexTable tbody tr:hover td:last-child a,
+.indexTable tbody tr:focus-within td:last-child a {
+ transform: translate(2px, -2px);
+ color: var(--brand-primary);
}
-@media screen and (max-width: 996px) {
- .heroBanner {
- padding: 2rem;
- }
+.loadMore {
+ text-align: center;
+ margin-top: 14px;
+ color: var(--text-muted);
+ font-size: 12px;
}
-.buttons {
+/* ── Chips ── */
+.chip {
+ display: inline-block;
+ border: 1px solid color-mix(in srgb, var(--text-muted) 50%, transparent);
+ padding: 1px 7px;
+ font-size: 11px;
+ font-family: var(--font-mono);
+ border-radius: 999px;
+ background: transparent;
+ color: var(--text-muted);
+ cursor: pointer;
+ white-space: nowrap;
+}
+.chip:hover {
+ opacity: 0.8;
+}
+.chip:focus-visible {
+ outline: 2px solid var(--brand-primary);
+ outline-offset: 2px;
+}
+
+.chipActive {
+ border-color: var(--brand-primary);
+ color: var(--brand-primary);
+}
+
+/* ── Two-column lower section ── */
+.twoCol {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+}
+
+.box {
+ border: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
+ border-radius: 4px;
+ padding: 20px;
+}
+
+.boxLabel {
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ color: var(--brand-primary);
+ margin-bottom: 14px;
+}
+
+.projectGroupLink {
+ display: block;
+ text-decoration: none;
+ padding: 10px 0;
+ border-bottom: 1px dashed color-mix(in srgb, var(--text-muted) 30%, transparent);
+}
+.projectGroupLink:last-child { border-bottom: none; padding-bottom: 0; }
+.projectGroupLink:hover .projectName { color: var(--brand-primary); }
+.projectGroupLink:focus-visible {
+ outline: 2px solid var(--brand-primary);
+ outline-offset: 4px;
+ border-radius: 2px;
+}
+.projectGroupLink:hover .projectMeta,
+.projectGroupLink:focus-visible .projectMeta {
+ transform: translate(2px, -2px);
+ color: var(--brand-primary);
+}
+
+.projectRow {
display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ font-size: 14px;
+ margin-bottom: 3px;
+}
+.projectName { color: var(--text-main); text-decoration: none; transition: color 0.2s ease; }
+.projectMeta {
+ color: var(--text-muted);
+ font-size: 12px;
+ display: inline-block;
+ transition: transform 0.2s ease, color 0.2s ease;
+}
+.projectDesc { font-size: 12px; color: var(--text-muted); transition: color 0.2s ease; }
+
+.consultTitle {
+ font-family: var(--font-mono);
+ font-size: 15px;
+ line-height: 1.4;
+ margin-bottom: 10px;
+ color: var(--text-main);
+}
+.consultDesc {
+ font-size: 13px;
+ color: var(--text-muted);
+ margin-bottom: 14px;
+}
+.availability {
+ font-size: 11px;
+ letter-spacing: 0.1em;
+ color: var(--text-muted);
+ margin-bottom: 14px;
+}
+.availabilityVal { color: var(--brand-primary); }
+
+.btnAccent {
+ display: inline-flex;
align-items: center;
- justify-content: center;
+ background: var(--brand-primary);
+ color: #fff;
+ border: none;
+ padding: 8px 16px;
+ font-family: var(--font-mono);
+ font-size: 13px;
+ border-radius: 3px;
+ text-decoration: none;
+ cursor: pointer;
+ box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
+}
+.btnAccent:hover { color: #fff; opacity: 0.9; text-decoration: none; }
+.btnAccent:focus-visible {
+ outline: 2px solid var(--brand-primary);
+ outline-offset: 2px;
+}
+
+
+@media (max-width: 768px) {
+ .page { padding: 32px 20px 60px; }
+ .twoCol { grid-template-columns: 1fr; }
+ .indexTable { font-size: 12px; table-layout: auto; }
+ .hideOnMobile { display: none; }
}
diff --git a/src/pages/inquiry.js b/src/pages/inquiry.js
new file mode 100644
index 0000000..1d0f7af
--- /dev/null
+++ b/src/pages/inquiry.js
@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import homepageConfig from '../config/homepage';
+import styles from './inquiry.module.css';
+
+// To wire up form submission, create a free account at https://formspree.io,
+// create a form, and replace null with your form ID string e.g. 'xpwzabcd'
+const FORMSPREE_ID = null;
+
+const INITIAL = { name: '', email: '', phone: '', message: '', smsConsent: false };
+
+export default function Inquiry() {
+ const [fields, setFields] = useState(INITIAL);
+ const [status, setStatus] = useState('idle'); // idle | submitting | success | error
+
+ const set = (key) => (e) => {
+ const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
+ setFields(prev => ({ ...prev, [key]: value }));
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setStatus('submitting');
+
+ if (FORMSPREE_ID) {
+ try {
+ const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+ body: JSON.stringify({
+ name: fields.name,
+ email: fields.email,
+ phone: fields.phone || '(not provided)',
+ message: fields.message,
+ sms_consent: fields.smsConsent ? 'Yes — consented to SMS' : 'No',
+ }),
+ });
+ setStatus(res.ok ? 'success' : 'error');
+ } catch {
+ setStatus('error');
+ }
+ } else {
+ // Fallback: open email client with pre-filled body
+ const body = encodeURIComponent(
+ `Name: ${fields.name}\nEmail: ${fields.email}\nPhone: ${fields.phone || 'N/A'}\n\n${fields.message}\n\nSMS consent: ${fields.smsConsent ? 'Yes' : 'No'}`
+ );
+ if (typeof window !== 'undefined') {
+ window.location.href = `mailto:${homepageConfig.contactInfo.email}?subject=Consulting%20Inquiry&body=${body}`;
+ }
+ setStatus('success');
+ }
+ };
+
+ if (status === 'success') {
+ return (
+
+
+
+
✓
+
Got it.
+
We'll be in touch at {fields.email} .
+
We take on 1–2 engagements per quarter — expect a response within a few business days.
+
← back to home
+
+
+ );
+ }
+
+ return (
+
+
+
+
~/consulting/inquire
+
Start an inquiry
+
+ We take 1–2 engagements per quarter . Current availability:{' '}
+ {homepageConfig.consulting.availability} .
+
+
+
+ );
+}
diff --git a/src/pages/inquiry.module.css b/src/pages/inquiry.module.css
new file mode 100644
index 0000000..492a119
--- /dev/null
+++ b/src/pages/inquiry.module.css
@@ -0,0 +1,166 @@
+.page {
+ max-width: 640px;
+ margin: 0 auto;
+ padding: 48px 40px 80px;
+ font-family: var(--font-mono);
+ font-size: 13px;
+}
+
+.header { margin-bottom: 36px; }
+
+.label {
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ color: var(--brand-primary);
+ margin-bottom: 12px;
+}
+
+.title {
+ font-family: var(--font-mono);
+ font-size: 28px;
+ font-weight: 600;
+ margin: 0 0 10px;
+ color: var(--text-main);
+}
+
+.subtitle {
+ font-size: 14px;
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.availability { color: var(--brand-primary); }
+
+/* ── Form ── */
+.form { display: flex; flex-direction: column; gap: 20px; }
+
+.row { display: flex; flex-direction: column; gap: 6px; }
+
+.fieldLabel {
+ font-size: 11px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--text-muted);
+}
+
+.optional { font-size: 10px; text-transform: none; letter-spacing: 0; }
+
+.input,
+.textarea {
+ font-family: var(--font-mono);
+ font-size: 13px;
+ background: transparent;
+ border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
+ border-radius: 3px;
+ padding: 10px 12px;
+ color: var(--text-main);
+ width: 100%;
+ transition: border-color 0.15s;
+}
+.input:focus,
+.textarea:focus {
+ outline: none;
+ border-color: var(--brand-primary);
+}
+.textarea { resize: vertical; min-height: 120px; }
+
+/* ── SMS consent ── */
+.consentRow {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+ padding: 14px;
+ border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
+ border-radius: 3px;
+ background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
+}
+
+.checkbox {
+ margin-top: 2px;
+ flex-shrink: 0;
+ width: 15px;
+ height: 15px;
+ accent-color: var(--brand-primary);
+ cursor: pointer;
+}
+
+.consentLabel {
+ font-size: 12px;
+ line-height: 1.5;
+ color: var(--text-muted);
+ cursor: pointer;
+}
+.consentLabel a { color: var(--brand-primary); }
+
+/* ── Submit ── */
+.submit {
+ align-self: flex-start;
+ background: var(--brand-primary);
+ color: #fff;
+ border: none;
+ padding: 10px 20px;
+ font-family: var(--font-mono);
+ font-size: 13px;
+ border-radius: 3px;
+ cursor: pointer;
+ box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
+ transition: opacity 0.15s;
+}
+.submit:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+ box-shadow: none;
+}
+.submit:not(:disabled):hover { opacity: 0.9; }
+.submit:focus-visible {
+ outline: 2px solid var(--brand-primary);
+ outline-offset: 2px;
+}
+
+
+.errorMsg {
+ font-size: 13px;
+ color: #c84a1f;
+ padding: 10px 12px;
+ border: 1px solid #c84a1f;
+ border-radius: 3px;
+}
+
+/* ── Footer ── */
+.footer {
+ margin-top: 32px;
+ font-size: 12px;
+ color: var(--text-muted);
+ padding-top: 20px;
+ border-top: 1px dashed color-mix(in srgb, var(--text-muted) 30%, transparent);
+}
+
+/* ── Success state ── */
+.success {
+ text-align: center;
+ padding: 80px 0;
+}
+.successIcon {
+ font-size: 48px;
+ color: var(--brand-primary);
+ margin-bottom: 16px;
+}
+.success h1 {
+ font-family: var(--font-mono);
+ font-size: 28px;
+ margin-bottom: 12px;
+}
+.success p { color: var(--text-muted); margin-bottom: 8px; }
+.backLink {
+ display: inline-block;
+ margin-top: 24px;
+ font-family: var(--font-mono);
+ font-size: 13px;
+ color: var(--brand-primary);
+}
+
+.muted { color: var(--text-muted); }
+
+@media (max-width: 768px) {
+ .page { padding: 32px 20px 60px; }
+}
diff --git a/src/pages/privacy-policy.md b/src/pages/privacy-policy.md
index c8d0a06..7a65011 100644
--- a/src/pages/privacy-policy.md
+++ b/src/pages/privacy-policy.md
@@ -4,7 +4,7 @@ title: Privacy Policy
# Privacy Policy
-**Last Updated:** March 22, 2025
+**Last Updated:** April 26, 2026
---
diff --git a/static/img/5L-Labs-Blue.svg b/static/img/5L-Labs-Blue.svg
index 891b23e..ffde66a 100644
--- a/static/img/5L-Labs-Blue.svg
+++ b/static/img/5L-Labs-Blue.svg
@@ -1,17 +1 @@
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/static/img/5L_Labs_Logo.png b/static/img/5L_Labs_Logo.png
deleted file mode 100644
index 66150b4..0000000
Binary files a/static/img/5L_Labs_Logo.png and /dev/null differ
diff --git a/static/img/5L_Labs_Logo.webp b/static/img/5L_Labs_Logo.webp
new file mode 100644
index 0000000..4c7dfb4
Binary files /dev/null and b/static/img/5L_Labs_Logo.webp differ
diff --git a/static/img/5L_Labs_Logo_old.png b/static/img/5L_Labs_Logo_old.png
deleted file mode 100644
index fc72d29..0000000
Binary files a/static/img/5L_Labs_Logo_old.png and /dev/null differ