docs: add community video section

2 files changed, 184 insertions, 1 deletions

diff --git a/website/css/style.css b/website/css/style.css
index 04c3f4b4..76d739af 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -1490,6 +1490,14 @@ samp {
     font-weight: 400;
 }
 
+.logo-cloud-note {
+    margin: 0.35rem 0 0;
+    color: var(--muted-2);
+    font-family: var(--mono);
+    font-size: 0.68rem;
+    line-height: 1.4;
+}
+
 .logo-marquee {
     position: relative;
     overflow: hidden;
@@ -1538,6 +1546,116 @@ samp {
     display: none;
 }
 
+.community-section {
+    padding-top: 4.25rem;
+}
+
+.community-video-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem;
+}
+
+.community-video-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    background: var(--bg-elevated);
+    color: var(--ink-soft);
+    transition:
+        border-color 120ms ease,
+        transform 120ms ease,
+        background 120ms ease;
+}
+
+.community-video-card:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
+    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft));
+    color: var(--ink-soft);
+}
+
+.community-video-thumb {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    background: var(--term-bg);
+    border-bottom: 1px solid var(--line);
+}
+
+.community-video-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 180ms ease;
+}
+
+.community-video-card:hover .community-video-thumb img {
+    transform: scale(1.025);
+}
+
+.play-badge {
+    position: absolute;
+    right: 0.75rem;
+    bottom: 0.75rem;
+    display: grid;
+    place-items: center;
+    width: 2.3rem;
+    height: 2.3rem;
+    border: 1px solid color-mix(in srgb, #fff 45%, transparent);
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--term-bg) 78%, transparent);
+    backdrop-filter: blur(8px);
+}
+
+.play-badge::before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 0.16rem;
+    border-top: 0.42rem solid transparent;
+    border-bottom: 0.42rem solid transparent;
+    border-left: 0.68rem solid #fff;
+}
+
+.community-video-copy {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.45rem;
+    padding: 1rem;
+}
+
+.community-video-meta {
+    color: var(--accent);
+    font-family: var(--mono);
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.community-video-title {
+    color: var(--ink);
+    font-family: var(--mono);
+    font-size: 1.05rem;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+}
+
+.community-video-desc {
+    margin-top: auto;
+    color: var(--muted);
+    font-size: 0.9rem;
+    line-height: 1.55;
+}
+
 @keyframes logo-marquee {
     to {
         transform: translateX(-50%);
@@ -2330,6 +2448,10 @@ td:last-child {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    .community-video-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .access-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -2443,6 +2565,7 @@ td:last-child {
 
     .pillar-grid,
     .contrast-grid,
+    .community-video-grid,
     .access-grid,
     .differ-list {
         grid-template-columns: 1fr;
diff --git a/website/index.html b/website/index.html
index a50494e9..61a45624 100644
--- a/website/index.html
+++ b/website/index.html
@@ -57,7 +57,7 @@
                 document.documentElement.setAttribute("data-palette", saved || system);
             })();
         </script>
-        <link rel="stylesheet" href="/css/style.css?v=41" />
+        <link rel="stylesheet" href="/css/style.css?v=42" />
     </head>
     <body>
         <header class="site-header">
@@ -382,6 +382,7 @@
                 <div class="logo-cloud-heading">
                     <p class="section-kicker"># used in the wild</p>
                     <h2 id="logo-cloud-title">Popular with engineers from</h2>
+                    <p class="logo-cloud-note">Individual engineers, not company endorsements.</p>
                 </div>
                 <div class="logo-marquee" aria-label="Company logos">
                     <div class="logo-track">
@@ -425,6 +426,65 @@
                 </div>
             </section>
 
+            <section class="section community-section" id="community" aria-labelledby="community-title">
+                <div class="section-heading-wide">
+                    <div>
+                        <p class="section-kicker"># from the community</p>
+                        <h2 id="community-title">Watch Herdr through other developers' workflows.</h2>
+                    </div>
+                    <p>
+                        Independent walkthroughs from Jilles, DevOps Toolbox, and Better Stack. See how Herdr feels as a tmux-style multiplexer for coding agents, remote sessions, and day-to-day agent orchestration.
+                    </p>
+                </div>
+                <div class="community-video-grid" aria-label="Community videos about Herdr">
+                    <a class="community-video-card" href="https://www.youtube.com/watch?v=qnIu-Xu64H0" target="_blank" rel="noopener">
+                        <span class="community-video-thumb">
+                            <img
+                                src="https://i.ytimg.com/vi/qnIu-Xu64H0/maxresdefault.jpg"
+                                alt="Thumbnail for Jilles' Herdr in about 6 minutes video"
+                                loading="lazy"
+                            />
+                            <span class="play-badge" aria-hidden="true"></span>
+                        </span>
+                        <span class="community-video-copy">
+                            <span class="community-video-meta">Jilles · 6:37</span>
+                            <span class="community-video-title">Herdr in about 6 minutes</span>
+                            <span class="community-video-desc">The fastest practical intro: install, workspaces, agent states, persistence, and the agent skill workflow.</span>
+                        </span>
+                    </a>
+                    <a class="community-video-card" href="https://www.youtube.com/watch?v=5GtkyPvuvbQ" target="_blank" rel="noopener">
+                        <span class="community-video-thumb">
+                            <img
+                                src="https://i.ytimg.com/vi/5GtkyPvuvbQ/maxresdefault.jpg"
+                                alt="Thumbnail for DevOps Toolbox's This Tmux Rewrite Is Actually Brilliant video"
+                                loading="lazy"
+                            />
+                            <span class="play-badge" aria-hidden="true"></span>
+                        </span>
+                        <span class="community-video-copy">
+                            <span class="community-video-meta">DevOps Toolbox · 16:40</span>
+                            <span class="community-video-title">This Tmux "Rewrite" Is Actually Brilliant</span>
+                            <span class="community-video-desc">A deeper hands-on look at the full package: mouse-first panes, remote use, agent support, and the CLI.</span>
+                        </span>
+                    </a>
+                    <a class="community-video-card" href="https://www.youtube.com/watch?v=PlN86TvzGy4" target="_blank" rel="noopener">
+                        <span class="community-video-thumb">
+                            <img
+                                src="https://i.ytimg.com/vi/PlN86TvzGy4/maxresdefault.jpg"
+                                alt="Thumbnail for Better Stack's Herdr agent multiplexer video"
+                                loading="lazy"
+                            />
+                            <span class="play-badge" aria-hidden="true"></span>
+                        </span>
+                        <span class="community-video-copy">
+                            <span class="community-video-meta">Better Stack · 7:10</span>
+                            <span class="community-video-title">Is This the Ultimate Agent Multiplexer?</span>
+                            <span class="community-video-desc">A clear tmux comparison with agent awareness, remote attach, and why Herdr stays inside your terminal.</span>
+                        </span>
+                    </a>
+                </div>
+            </section>
+
             <section class="section access-section why-section" id="why">
                 <div class="section-heading-wide">
                     <div>