fix(website): correct footer social icons + polish HowItWorks scroll#5473
Open
ashrafchowdury wants to merge 2 commits into
Open
fix(website): correct footer social icons + polish HowItWorks scroll#5473ashrafchowdury wants to merge 2 commits into
ashrafchowdury wants to merge 2 commits into
Conversation
…just token values for nav pill
…and performance; adjust SiteNav for passive scroll handling
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dosubot
Bot
added
size:M
Contributor
Website previewPreview URL: https://pr-5473-agenta-website-preview.mahmoud-637.workers.dev Built from |
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe marketing site updates the How It Works scroll animation, optimizes nav-pill scroll handling, adjusts nav-pill inset geometry, and corrects footer social icon mappings. ChangesHow It Works motion
Navigation pill behavior
Footer social icons
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant HowItWorks
participant ChatCard
Browser->>HowItWorks: Emit scroll or resize event
HowItWorks->>HowItWorks: Schedule one requestAnimationFrame measurement
HowItWorks->>ChatCard: Render mapped scroll stage
ChatCard->>ChatCard: Apply fade mask and overflow clipping
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: aeefafbf-3725-4311-abff-a9185227584b
⛔ Files ignored due to path filters (1)
website/public/icons/social-linkedin.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
website/src/components/HowItWorks.tsxwebsite/src/components/SiteFooter.astrowebsite/src/components/SiteNav.astrowebsite/src/styles/tokens.css
Comment on lines
+27
to
+32
| // Scroll length of the pinned stage. The 6 stages are mapped across | ||
| // (SECTION_VH − 100vh) of scroll, so each beat advances every | ||
| // (SECTION_VH − 100) / 6 vh. Smaller = snappier (less scrolling per beat). | ||
| // Was 500 (~67vh/beat); 320 is ~37vh/beat — tune here if beats fly by / drag. | ||
| const SECTION_VH = 320; | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Update the wrapper’s scroll-height comment.
website/src/components/HowItWorks.astro still says the desktop layout owns a 500vh scroll layout (Lines 4-5), while this component now renders 320vh. Update that comment to 320vh or reference SECTION_VH.
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
1 participant
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.
Context
Two unrelated fixes on the marketing site, grouped because they're both visual polish.
Footer social icons were wrong. The repo's
social-*.svgfiles aren't named by platform, and the footer pointed at the wrong ones: LinkedIn rendered the Slack glyph, and Slack rendered an OpenAI mark. There was no real LinkedIn icon in the repo at all.The HowItWorks scroll section felt off. The pinned section was 500vh tall (~67vh of scroll per beat), so the six chat stages dragged. The chat metadata read "$0.00", which looked like a bug. The thread grows upward as stages reveal and was hard-clipped at the top edge of the card. And both this section's scroll handler and the nav pill did layout work every frame instead of only when needed.
Changes
Social icons. Added a real LinkedIn SVG and remapped the footer so each platform points at its actual glyph.
Before:
/icons/social-2.svg(this is the Slack glyph)/icons/social-4.svg(this is an OpenAI mark)After:
/icons/social-linkedin.svg(new, real LinkedIn glyph)/icons/social-2.svg(the real Slack glyph)A comment in
SiteFooter.astronow records which numbered file is which, since the filenames don't say.HowItWorks.
SECTION_VHconstant and dropped it from 500 to 320 (~37vh per beat), so the beats feel snappier. It's documented and tunable in one place.$0.00cost figures to realistic numbers ($0.14 and $0.06).requestAnimationFrame, so the singlegetBoundingClientRectread happens at most once per frame instead of on every raw event.Nav pill (SiteNav). Replaced the always-on
requestAnimationFrameloop (which ran every frame forever, even while idle) with a passive scroll/resize listener that coalesces into one rAF per frame and only writes the.nav-scrolledclass on an actual crossing of the 24px threshold.Nav pill inset (tokens.css). Tightened
--nav-pill-insetfrom 24px to 12px so the floating pill sits closer to the top and reclaims viewport space.Tests / notes