Redesign codexbar.app landing page#1784
Merged
Merged
Conversation
Refresh docs/index.html with the new dark landing layout, coordinated hero animations, features/technical sections, language picker shell, and lossless hero mockup assets for GitHub Pages.
Introduce a shared section-inner max-width wrapper and hero title line spans so the headline stays readable at wide breakpoints.
Replace the stacked feature list with a responsive card grid, red image placeholders, and a focused three-item layout without CLI/widgets copy.
Introduce a terminal output mock on the left with CodexBar on CLI copy on the right, including bundled binary messaging and session privacy footnote.
Recreate the macOS widget picker on the right with copy on the left, using red placeholders for small, medium, and large widget previews.
Add eleven transparent widget crops for the landing page macOS gallery mock.
Replace red placeholders with widget PNGs, group them in scrollable rows, and keep the gallery viewport height fixed.
Match the shield icon to CodexBar blue instead of muted gray.
Replace the tan usage bar fill with CodexBar blue across the terminal mock.
Stretch each card and pin the image placeholders to a shared baseline so differing copy lengths no longer throw off the row.
Replace the hollow shield outline with a tinted shield and checkmark that reads better at small size.
Let the gallery fill mac-widget-main without growing the sheet, and add a bottom scroll fade so more widgets read as discoverable.
Group each card title and body so they sit on a shared baseline with consistent spacing before the image row.
Lock mac-widget-sheet__body to a fixed viewport instead of growing with all rows, and tighten row spacing so content scrolls within the fade.
Use the correct titles and descriptions for all eleven widgets and order rows History, Burn Down, Usage, then Switcher.
On desktop split layouts with copy on the left, align text to the right so it faces the widget sheet.
Pull the scroll layer out of mac-widget-main side padding so the fade spans the full column while title and tiles keep their inset.
Drop aspect-ratio boxes that added uneven gaps and use a fixed margin below each preview before the title.
Only show the bottom fade while more content is below the fold and remove it when the gallery is fully scrolled or not overflowing.
Crop PNG halos with a slight scale inside rounded clips and a dark preview background until assets can be re-exported.
Revert the unintended 1–11 sequence reorder and keep the original Metric/History, Usage, Switcher, Burn Down grouping with updated labels.
Inset the bottom fade from the right so it no longer covers the scrollbar track.
Use text-wrap balance and tighten the Home Screen line break so desktop is not left alone.
Add resets, credits, and status screenshots for the three feature cards.
Replace red placeholders with the new feature screenshots using cover fit inside the 4:3 frames.
Remove forced line breaks and nowrap the Know before you commit title.
Use the new resets screenshot for card one and move the misty landscape asset to the status card.
clawsweeper
Bot
added
the
proof: 📸 screenshot
Fixes CI lint check that compares the generated llms index against docs/index.html.
clawsweeper
Bot
added
rating: 🦪 silver shellfish
clawsweeper
Bot
added
proof: sufficient
clawsweeper
Bot
added
rating: 🦐 gold shrimp
Owner
|
Maintainer landing pass complete on exact head Improvements before landing:
Proof:
Strong redesign. Thank you, @vyctorbrzezowski! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Updated preview: https://codexbar-redesign-preview.vercel.app
Screenshots: full gallery
Summary
site-locales.mjs.docs/site.cssanddocs/site.js;docs/index.htmlis now markup-only (~780 lines).openclaw.svg; canonical mockup ishero-mockup.svg(notchless MacBook Air frame, same 6111×3239 artboard).Visual QA
Desktop / main sections
Locales
Responsive viewports
Review notes
:rootCSS vars +applyHeroDesktopLayout(); tuned values are documented insite.js/site.css.Scripts/check-site-locales.mjsvalidates locale parity and provider logo assets.Test plan
node Scripts/check-site-locales.mjsMaintainer validation (2026-07-01)
Validated on head
4c41840e76d24753fdc61b6a0e67ac025735b507after rebasing the proposal onto currentmainand addressing review findings.Changes made during review
Proof
make check— pass (SwiftFormat, SwiftLint strict, locale/site checks)make test— pass (43/43 shards)node Scripts/check-site-locales.mjs— pass (21 locales, 139 messages)node --check docs/site.js— pass./Scripts/build-site-css.sh— pass and reproducibleFollow-up preview polish (2026-07-02)
Follow-up commit
6692ab9365df7e30b9ba5736f37e0e552206d325keeps the preview-only landing polish scoped to four docs files:data-theme-preferencevalue from the inline head script.downloadcopy for the header CTA in English and pt-BR.Proof for this follow-up:
git diff --check— passnode --check docs/site.js— passnode Scripts/check-site-locales.mjs— passmake check— pass; existing locale coverage warnings only?lang=en&theme=dark: desktop hero timing/state, dark theme icon first state, lowercase download label, mobile provider grid, zero console errorsLanding decision
Mechanically ready, but held for owner design approval. This is a broad brand/landing-page direction change and introduces a generated CSS build step;
VISION.mdrequires signoff for that scope. Recommendation: approve the visual direction and local Tailwind build, then land this exact head once CI is green.