Skip to content

Show Word on the web before the On your website card #3305

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
esokullu merged 2 commits into from
Nov 2, 2026
+1,204 −1,039
Merged

Show Word on the web before the On your website card #3305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7384ea4
Show Word on the web before the On your website card
esokullu Nov 2, 2026
cb2243c
Merge pull request #570 from esokullu/websites-after-voices
esokullu Nov 2, 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
10 changes: 7 additions & 3 deletions test/run.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44973,13 +44973,13 @@ test('homepage leads with the browser extension and offers WebBrain for websites
assert.match(build, /\{ page: 'home', source: template, outPath: path\.join\(localeDir, 'index\.html'\) \}/);

// Order: headline, the browser extension with the scene carousel, then
// WebBrain for websites, word on the web, and the extension's sections.
// word on the web, WebBrain for websites, and the extension's sections.
const order = [
'<section class="home-hero"',
'<section class="path path-browser"',
'id="mockup-stack"',
'<section class="path path-websites"',
'id="voices"',
'<section class="path path-websites"',
'<section class="section" id="providers"',
'<section class="section" id="features"',
'id="faq"',
Expand Down Expand Up @@ -45010,7 +45010,11 @@ test('homepage leads with the browser extension and offers WebBrain for websites
assert.match(template, /href="\{\{websites_path\}\}" class="path-btn path-btn-ink" id="hero-websites-cta"/, 'web home: the website card adds WebBrain to a website');
// WebBrain for websites sits behind one switch: the card stays in the
// template either way, and the built pages keep it only while it is on.
assert.match(template, /<!-- if websites -->\s*<!-- WebBrain for websites:[\s\S]*?<section class="path path-websites"[\s\S]*?<\/section>\s*<!-- end websites -->/, 'web home: the website card is behind the launch switch');
assert.match(template, /<!-- if websites -->\s*<!-- WebBrain for websites:[\s\S]*?<div class="home-websites">\s*<section class="path path-websites"[\s\S]*?<\/section>\s*<\/div>\s*<!-- end websites -->/, 'web home: the website card is behind the launch switch');
// Word on the web backs the extension right after its card; the website card follows it.
assert.ok(template.indexOf('id="voices"') < template.indexOf('<div class="home-websites">'), 'web home: the website card comes after Word on the web');
const heroSection = template.slice(template.indexOf('<section class="home-hero"'), template.indexOf('id="voices"'));
assert.doesNotMatch(heroSection, /path-websites/, 'web home: the website card is no longer inside the hero');
assert.match(build, /WEBSITES_LAUNCHED,/, 'web home: the build reads the launch switch');
// The hero has a browser-only version for while the switch is off.
for (const key of ['kicker', 'title_line1', 'title_line2', 'lede']) {
Expand Down
97 changes: 52 additions & 45 deletions web/ar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3782,6 +3782,8 @@
padding: 12px 32px 12px 12px;
}
.path-websites .path-copy { display: flex; flex-direction: column; gap: 22px; padding: 14px 0; }
.home-websites { max-width: var(--max-w); margin: 0 auto; padding: 8px 24px 40px; }
.home-websites .path-websites { margin-top: 0; }

.illo {
position: relative;
Expand Down Expand Up @@ -3904,6 +3906,7 @@
}
@media (max-width: 768px) {
.home-hero { padding: 48px 16px 0; }
.home-websites { padding: 4px 16px 32px; }
.path-browser { padding: 22px 16px 20px; margin-top: 34px; }
.video-dialog { width: min(440px, calc(100vw - 24px)); }
.video-dialog video { aspect-ratio: 9 / 16; }
Expand Down Expand Up @@ -4567,10 +4570,54 @@ <h3>كتالوج المنتجات</h3>

</div>


<!-- WebBrain for websites: same weight of words, less room. The code
illustration marks it as the developer product. Shown while
WEBSITES_LAUNCHED (site-footer.mjs) is on. -->
</section>

<dialog class="video-dialog" id="home-video-dialog" aria-labelledby="home-video-title">
<div class="video-dialog-head">
<h2 id="home-video-title">شاهد WebBrain أثناء العمل</h2>
<button class="video-dialog-close" id="home-video-close" type="button" aria-label="إغلاق الفيديو">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
</div>
<video id="home-video" data-desktop-src="/assets/webbrain-home-demo.mp4" data-mobile-src="/assets/webbrain-home-demo-vertical.mp4" data-desktop-poster="/assets/webbrain-home-demo-poster.jpg" data-mobile-poster="/assets/webbrain-home-demo-poster-vertical.jpg" controls preload="none" playsinline></video>
</dialog>

<section class="section voices-section" id="voices" lang="en" dir="ltr" aria-labelledby="voices-title">
<h2 id="voices-title">Word on the web</h2>
<div class="voices-grid">
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/chris-messina.png" alt="Illustrated portrait of Chris Messina" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.producthunt.com/products/webbrain">“The power of this approach is that the assistant has access to your sessions, cookies, and context — <em>intact</em>.”</blockquote>
<figcaption>
<span class="voice-name">Chris Messina</span>
<a class="voice-source" href="https://www.producthunt.com/products/webbrain" target="_blank" rel="noopener noreferrer">Product Hunt</a>
</figcaption>
</figure>
<figure class="voice voice-featured">
<img class="voice-portrait" src="/assets/voices/robert-scoble.png" alt="Illustrated portrait of Robert Scoble" width="90" height="90" loading="lazy" decoding="async">
<blockquote cite="https://x.com/Scobleizer/status/2098481418687123967">“Makes Google Chrome a lot more useful.”</blockquote>
<figcaption>
<span class="voice-name">Robert Scoble</span>
<a class="voice-source" href="https://x.com/Scobleizer/status/2098481418687123967" target="_blank" rel="noopener noreferrer">X / Scobleizer</a>
</figcaption>
</figure>
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/asif-razzaq.png" alt="Illustrated portrait of Asif Razzaq" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/">“Run the agent against a local model, and no page data leaves your machine.”</blockquote>
<figcaption>
<span class="voice-name">Asif Razzaq</span>
<a class="voice-source" href="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/" target="_blank" rel="noopener noreferrer">MarkTechPost</a>
</figcaption>
</figure>
</div>
</section>


<!-- WebBrain for websites: same weight of words, less room. The code
illustration marks it as the developer product. It follows Word on
the web, so the quotes back the extension right after its card.
Shown while WEBSITES_LAUNCHED (site-footer.mjs) is on. -->
<div class="home-websites">
<section class="path path-websites" aria-labelledby="path-websites-title">
<div class="illo illo-site" aria-hidden="true">
<div class="code-pane">
Expand Down Expand Up @@ -4623,48 +4670,8 @@ <h2 id="path-websites-title">على موقعك</h2>
</div>
</div>
</section>

</section>
</div>

<dialog class="video-dialog" id="home-video-dialog" aria-labelledby="home-video-title">
<div class="video-dialog-head">
<h2 id="home-video-title">شاهد WebBrain أثناء العمل</h2>
<button class="video-dialog-close" id="home-video-close" type="button" aria-label="إغلاق الفيديو">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
</div>
<video id="home-video" data-desktop-src="/assets/webbrain-home-demo.mp4" data-mobile-src="/assets/webbrain-home-demo-vertical.mp4" data-desktop-poster="/assets/webbrain-home-demo-poster.jpg" data-mobile-poster="/assets/webbrain-home-demo-poster-vertical.jpg" controls preload="none" playsinline></video>
</dialog>

<section class="section voices-section" id="voices" lang="en" dir="ltr" aria-labelledby="voices-title">
<h2 id="voices-title">Word on the web</h2>
<div class="voices-grid">
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/chris-messina.png" alt="Illustrated portrait of Chris Messina" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.producthunt.com/products/webbrain">“The power of this approach is that the assistant has access to your sessions, cookies, and context — <em>intact</em>.”</blockquote>
<figcaption>
<span class="voice-name">Chris Messina</span>
<a class="voice-source" href="https://www.producthunt.com/products/webbrain" target="_blank" rel="noopener noreferrer">Product Hunt</a>
</figcaption>
</figure>
<figure class="voice voice-featured">
<img class="voice-portrait" src="/assets/voices/robert-scoble.png" alt="Illustrated portrait of Robert Scoble" width="90" height="90" loading="lazy" decoding="async">
<blockquote cite="https://x.com/Scobleizer/status/2098481418687123967">“Makes Google Chrome a lot more useful.”</blockquote>
<figcaption>
<span class="voice-name">Robert Scoble</span>
<a class="voice-source" href="https://x.com/Scobleizer/status/2098481418687123967" target="_blank" rel="noopener noreferrer">X / Scobleizer</a>
</figcaption>
</figure>
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/asif-razzaq.png" alt="Illustrated portrait of Asif Razzaq" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/">“Run the agent against a local model, and no page data leaves your machine.”</blockquote>
<figcaption>
<span class="voice-name">Asif Razzaq</span>
<a class="voice-source" href="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/" target="_blank" rel="noopener noreferrer">MarkTechPost</a>
</figcaption>
</figure>
</div>
</section>

<!-- 4. BRING YOUR OWN AI -->
<section class="section" id="providers" style="padding-top: 40px;">
Expand Down
97 changes: 52 additions & 45 deletions web/bn/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3782,6 +3782,8 @@
padding: 12px 32px 12px 12px;
}
.path-websites .path-copy { display: flex; flex-direction: column; gap: 22px; padding: 14px 0; }
.home-websites { max-width: var(--max-w); margin: 0 auto; padding: 8px 24px 40px; }
.home-websites .path-websites { margin-top: 0; }

.illo {
position: relative;
Expand Down Expand Up @@ -3904,6 +3906,7 @@
}
@media (max-width: 768px) {
.home-hero { padding: 48px 16px 0; }
.home-websites { padding: 4px 16px 32px; }
.path-browser { padding: 22px 16px 20px; margin-top: 34px; }
.video-dialog { width: min(440px, calc(100vw - 24px)); }
.video-dialog video { aspect-ratio: 9 / 16; }
Expand Down Expand Up @@ -4567,10 +4570,54 @@ <h3>পণ্য ক্যাটালগ</h3>

</div>


<!-- WebBrain for websites: same weight of words, less room. The code
illustration marks it as the developer product. Shown while
WEBSITES_LAUNCHED (site-footer.mjs) is on. -->
</section>

<dialog class="video-dialog" id="home-video-dialog" aria-labelledby="home-video-title">
<div class="video-dialog-head">
<h2 id="home-video-title">WebBrain অ্যাকশনে দেখুন</h2>
<button class="video-dialog-close" id="home-video-close" type="button" aria-label="ভিডিও বন্ধ করুন">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
</div>
<video id="home-video" data-desktop-src="/assets/webbrain-home-demo.mp4" data-mobile-src="/assets/webbrain-home-demo-vertical.mp4" data-desktop-poster="/assets/webbrain-home-demo-poster.jpg" data-mobile-poster="/assets/webbrain-home-demo-poster-vertical.jpg" controls preload="none" playsinline></video>
</dialog>

<section class="section voices-section" id="voices" lang="en" dir="ltr" aria-labelledby="voices-title">
<h2 id="voices-title">Word on the web</h2>
<div class="voices-grid">
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/chris-messina.png" alt="Illustrated portrait of Chris Messina" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.producthunt.com/products/webbrain">“The power of this approach is that the assistant has access to your sessions, cookies, and context — <em>intact</em>.”</blockquote>
<figcaption>
<span class="voice-name">Chris Messina</span>
<a class="voice-source" href="https://www.producthunt.com/products/webbrain" target="_blank" rel="noopener noreferrer">Product Hunt</a>
</figcaption>
</figure>
<figure class="voice voice-featured">
<img class="voice-portrait" src="/assets/voices/robert-scoble.png" alt="Illustrated portrait of Robert Scoble" width="90" height="90" loading="lazy" decoding="async">
<blockquote cite="https://x.com/Scobleizer/status/2098481418687123967">“Makes Google Chrome a lot more useful.”</blockquote>
<figcaption>
<span class="voice-name">Robert Scoble</span>
<a class="voice-source" href="https://x.com/Scobleizer/status/2098481418687123967" target="_blank" rel="noopener noreferrer">X / Scobleizer</a>
</figcaption>
</figure>
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/asif-razzaq.png" alt="Illustrated portrait of Asif Razzaq" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/">“Run the agent against a local model, and no page data leaves your machine.”</blockquote>
<figcaption>
<span class="voice-name">Asif Razzaq</span>
<a class="voice-source" href="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/" target="_blank" rel="noopener noreferrer">MarkTechPost</a>
</figcaption>
</figure>
</div>
</section>


<!-- WebBrain for websites: same weight of words, less room. The code
illustration marks it as the developer product. It follows Word on
the web, so the quotes back the extension right after its card.
Shown while WEBSITES_LAUNCHED (site-footer.mjs) is on. -->
<div class="home-websites">
<section class="path path-websites" aria-labelledby="path-websites-title">
<div class="illo illo-site" aria-hidden="true">
<div class="code-pane">
Expand Down Expand Up @@ -4623,48 +4670,8 @@ <h2 id="path-websites-title">আপনার ওয়েবসাইটে</h2>
</div>
</div>
</section>

</section>
</div>

<dialog class="video-dialog" id="home-video-dialog" aria-labelledby="home-video-title">
<div class="video-dialog-head">
<h2 id="home-video-title">WebBrain অ্যাকশনে দেখুন</h2>
<button class="video-dialog-close" id="home-video-close" type="button" aria-label="ভিডিও বন্ধ করুন">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
</div>
<video id="home-video" data-desktop-src="/assets/webbrain-home-demo.mp4" data-mobile-src="/assets/webbrain-home-demo-vertical.mp4" data-desktop-poster="/assets/webbrain-home-demo-poster.jpg" data-mobile-poster="/assets/webbrain-home-demo-poster-vertical.jpg" controls preload="none" playsinline></video>
</dialog>

<section class="section voices-section" id="voices" lang="en" dir="ltr" aria-labelledby="voices-title">
<h2 id="voices-title">Word on the web</h2>
<div class="voices-grid">
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/chris-messina.png" alt="Illustrated portrait of Chris Messina" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.producthunt.com/products/webbrain">“The power of this approach is that the assistant has access to your sessions, cookies, and context — <em>intact</em>.”</blockquote>
<figcaption>
<span class="voice-name">Chris Messina</span>
<a class="voice-source" href="https://www.producthunt.com/products/webbrain" target="_blank" rel="noopener noreferrer">Product Hunt</a>
</figcaption>
</figure>
<figure class="voice voice-featured">
<img class="voice-portrait" src="/assets/voices/robert-scoble.png" alt="Illustrated portrait of Robert Scoble" width="90" height="90" loading="lazy" decoding="async">
<blockquote cite="https://x.com/Scobleizer/status/2098481418687123967">“Makes Google Chrome a lot more useful.”</blockquote>
<figcaption>
<span class="voice-name">Robert Scoble</span>
<a class="voice-source" href="https://x.com/Scobleizer/status/2098481418687123967" target="_blank" rel="noopener noreferrer">X / Scobleizer</a>
</figcaption>
</figure>
<figure class="voice">
<img class="voice-portrait" src="/assets/voices/asif-razzaq.png" alt="Illustrated portrait of Asif Razzaq" width="76" height="76" loading="lazy" decoding="async">
<blockquote cite="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/">“Run the agent against a local model, and no page data leaves your machine.”</blockquote>
<figcaption>
<span class="voice-name">Asif Razzaq</span>
<a class="voice-source" href="https://www.marktechpost.com/2026/07/02/meet-webbrain-an-open-source-local-first-ai-browser-agent-that-reads-pages-and-automates-tasks-in-chrome-and-firefox/" target="_blank" rel="noopener noreferrer">MarkTechPost</a>
</figcaption>
</figure>
</div>
</section>

<!-- 4. BRING YOUR OWN AI -->
<section class="section" id="providers" style="padding-top: 40px;">
Expand Down
Loading
Loading