feat(landing): Mobbin UX patterns — hero, install, countup, changelog#14
Open
FlorianBruniaux wants to merge 6 commits into
Open
feat(landing): Mobbin UX patterns — hero, install, countup, changelog#14FlorianBruniaux wants to merge 6 commits into
FlorianBruniaux wants to merge 6 commits into
Conversation
…, countup stats, changelog - Hero: replace Star CTA with Docs ghost CTA (/guide/) - Hero: update stars fallback 31k → 47k - Hero: add countUp animation (IntersectionObserver + rAF) on 3 stat values - Install: add $ prompt prefix on code blocks via CSS ::before - Add /changelog page with type-coloured badges (accent/cyan/violet) and RSS feed button - Add doc/research/mobbin-ui-patterns.md (2 sessions, 12 actionable patterns) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Updates the landing experience to match “Mobbin” UX patterns (CTA, animated hero stats, terminal-style install blocks) and adds a public /changelog/ page powered by existing RSS entry data.
Changes:
- Add a
$prompt prefix styling for landing “code blocks”. - Update Hero stats (stars fallback + count-up animation) and switch the secondary CTA to Docs.
- Add a new
/changelog/page listingrssEntries, plus a Mobbin research doc.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/styles/landing.css | Adds $ pseudo-prefix styling for .code-block command snippets. |
| src/pages/changelog/index.astro | Introduces a /changelog/ page rendering rssEntries with colored badges + RSS button. |
| src/components/landing/Hero.astro | Updates stars fallback, adds count-up animation via IntersectionObserver+rAF, and swaps the ghost CTA to Docs. |
| doc/research/mobbin-ui-patterns.md | Adds UX research notes and actionable pattern recommendations. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <a href="https://github.com/rtk-ai/rtk" class="btn btn-ghost" target="_blank" rel="noopener"> | ||
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> | ||
| <span>{t('hero.cta_star', lang)}</span> | ||
| <a href="/guide/" class="btn btn-ghost"> |
Comment on lines
+128
to
+142
| <script> | ||
| const els = document.querySelectorAll<HTMLElement>('[data-countup]') | ||
|
|
||
| const observer = new IntersectionObserver( | ||
| (entries) => { | ||
| entries.forEach((entry) => { | ||
| if (!entry.isIntersecting) return | ||
| observer.unobserve(entry.target) | ||
| const el = entry.target as HTMLElement | ||
| const target = parseFloat(el.dataset.countup ?? '0') | ||
| const suffix = el.dataset.suffix ?? '' | ||
| const comma = 'comma' in el.dataset | ||
| const decimals = parseInt(el.dataset.decimal ?? '0') | ||
| const duration = 1400 | ||
| const t0 = performance.now() |
| <ol class="changelog-list"> | ||
| {rssEntries.map((entry) => ( | ||
| <li class="changelog-entry"> | ||
| <time class="entry-date">{entry.date}</time> |
| {badgeLabel[entry.type] ?? entry.type} | ||
| </span> | ||
| <div class="entry-body"> | ||
| <a href={entry.link} class="entry-title" target="_blank" rel="noopener"> |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add "What's new" / "Releases" tabs (ARIA-compliant, vanilla JS) - Fetch GitHub releases at build time (rtk-ai/rtk, per_page=30) - Fallback to GitHub link if API unavailable - max-width: var(--max-w) to match header/footer width (was 760px) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Tab buttons: add appearance:none + border-radius:0 to kill browser defaults - Container: hardcode 1140px + width:100% + box-sizing + import landing.css to match other sub-pages (savings, vs, faq) - Add focus-visible outline for accessibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Sidebar nav (sticky, 200px) with left-border active state - Right panels show only the active section (vanilla JS tab pattern) - Mobile: sidebar flips to horizontal pill tabs - Remove all em dashes (11 instances) replaced with parens or restructured - Fix 3 staccato sequences (Q5, Q7, Q20) - Replace jargon: "context pollution" → clutter, "key differentiator" → natural phrasing - Hero subheading em dash → colon Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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
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.
Summary
/guide/. Les 47k stars restent visibles dans la stat row en dessous.Hero.astro.$prefix sur les code blocks : CSS::beforesur.code-block code, purement visuel, n'affecte pas le copy button./changelog/: nouvelle page avec badges colorés par type (--accentrelease,--cyannew content,--violetperformance) et bouton RSS visible en haut à droite.doc/research/mobbin-ui-patterns.md— 2 sessions Mobbin, 12 patterns actionnables documentés.Patterns encore en suspens (hors scope de cette PR)
/changelog/existe mais n'est pas encore dans la nav/footer.Test plan
pnpm buildpasse avec 0 erreur (145 pages)$visible avant chaque commande, copy button copie sans le$/changelog/accessible, badges colorés corrects, lien RSS pointe vers/rss.xml🤖 Generated with Claude Code