feat(landing): update footer#492
Conversation
Structured category grid, brand newsletter column, resources link, and sibling-focus-nav spacing/hover updates for stacked footer links. Co-authored-by: Cursor <cursoragent@cursor.com>
Shared with the resources page branch — small util for ?ref= on outbound URLs. Co-authored-by: Cursor <cursoragent@cursor.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThe PR redesigns the site footer from a simple layout to a component-based, themed architecture. It updates ChangesFooter Redesign & Component Infrastructure
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
components/footer-bottom.tsx (1)
15-15: ⚡ Quick winUse brand yellow for highlight styling to match design guidelines.
The selection highlight currently uses
selection:bg-black/30; this should use the brand yellow token (#ffcc00) per project rule for highlights.As per coding guidelines "
**/*.{tsx,ts,css}: Use brand yellow#ffcc00(from logo) for highlights and badges".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/footer-bottom.tsx` at line 15, Replace the selection highlight class in the footer container string so it uses the brand yellow token instead of the current black translucent value: locate the class string that contains selection:bg-black/30 (in the footer-bottom component where the class list includes "border-t border-black/8 bg-white px-5 py-10 text-center selection:bg-black/30 selection:text-white sm:px-8 sm:py-12") and change the selection background to the brand yellow (`#ffcc00`) (e.g., use the Tailwind arbitrary color syntax selection:bg-[`#ffcc00`]) and adjust selection text color as needed for contrast.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/`(main)/_landing/newsletter.tsx:
- Line 9: Remove the unused import statement for FOOTER_INK: delete the "import
{ FOOTER_INK } ..." line at the top of the newsletter component file and ensure
no other references to the FOOTER_INK symbol (e.g., in render or props) remain;
if any accidental references exist, either replace them with the correct
constant or remove those references too.
- Around line 62-63: Tailwind v4 requires the important modifier (!) at the end
of the utility; update the class strings in the array where
"hover:!bg-[hsl(var(--accent))]/90" and "hover:!text-white" appear (inside the
JSX array near the compact ternary in newsletter.tsx) to use
"hover:bg-[hsl(var(--accent))]/90!" and "hover:text-white!" respectively so the
important modifier is suffixing each utility.
In `@components/footer-stamp.tsx`:
- Line 11: The Tailwind arbitrary-variant uses the old leading-! important
syntax which v4 rejects; update the class on Icons.logo so the important
modifier is a suffix of the utility. Locate the Icons.logo usage (className
"pointer-events-none w-[300%] max-w-none scale-[2] opacity-[0.18]
[&_*]:!fill-(--footer-stamp)") and change the variant from
"[&_*]:!fill-(--footer-stamp)" to the v4 form "[&_*]:fill-(--footer-stamp)!" so
the SVG fill override is applied correctly.
In `@components/site-footer.tsx`:
- Line 95: The inline style on the span (the element with className
"leading-relaxed" in components/site-footer.tsx) uses textBoxTrim (CSS
text-box-trim) which Firefox ignores; update the style to keep textBoxTrim as a
progressive enhancement but add a compatible fallback (for example set an
explicit lineHeight or adjust padding/margin as the baseline, then apply
textBoxTrim after it) so Firefox users get the intended spacing — locate the
span rendering in SiteFooter/ site-footer.tsx and change the style prop to
include the fallback spacing properties plus the existing textBoxTrim property.
In `@lib/outbound-ref.ts`:
- Line 10: new URL(href) can throw on malformed or non-absolute hrefs; wrap the
URL parsing in a try/catch around the new URL(href) call (the expression that
creates const url) and if parsing fails return the original href (or a safe
fallback) instead of letting the exception propagate. Locate the place where
const url = new URL(href) is used in outbound-ref.ts, catch any error from new
URL(href), and short-circuit the function to return href (or a defined safe
value) so rendering paths do not crash.
In `@styles/globals.css`:
- Line 429: The global CSS accent/ring hue was changed to a blue value; restore
the theme token back to the required purple-violet by updating the --accent (and
any --ring that derives from it) declarations to the repository standard
purple/violet HSL token (use the same HSL triple used elsewhere for
purple/violet theme tokens), replacing the blue HSL value currently set for
--accent so that hsl(var(--accent)) matches the mandated purple/violet across
all occurrences of --accent/--ring in this file (search for the --accent and
--ring declarations and swap the value back to the canonical purple/violet
token).
---
Nitpick comments:
In `@components/footer-bottom.tsx`:
- Line 15: Replace the selection highlight class in the footer container string
so it uses the brand yellow token instead of the current black translucent
value: locate the class string that contains selection:bg-black/30 (in the
footer-bottom component where the class list includes "border-t border-black/8
bg-white px-5 py-10 text-center selection:bg-black/30 selection:text-white
sm:px-8 sm:py-12") and change the selection background to the brand yellow
(`#ffcc00`) (e.g., use the Tailwind arbitrary color syntax selection:bg-[`#ffcc00`])
and adjust selection text color as needed for contrast.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 84b88f51-1df0-4d74-b343-dd3084e951e2
📒 Files selected for processing (19)
animata/container/sibling-focus-nav.stories.tsxanimata/container/sibling-focus-nav.tsxapp/(main)/_landing/newsletter.tsxapp/(main)/layout.tsxapp/layout.tsxcomponents/footer-bottom.tsxcomponents/footer-category-grid.tsxcomponents/footer-stamp.tsxcomponents/footer-subscribe.tsxcomponents/site-footer.tsxconfig/site.tscontent/docs/changelog/2026-06.mdxcontent/docs/container/sibling-focus-nav.mdxlib/brand-font.tslib/docs.tslib/footer-grid.tslib/footer-theme.tslib/outbound-ref.tsstyles/globals.css
💤 Files with no reviewable changes (1)
- app/(main)/layout.tsx
Remove unused import and fix Tailwind v4 important suffix syntax. Guard outbound URL parsing, restore global accent tokens, and add textBoxTrim fallback spacing for Firefox. Co-authored-by: Cursor <cursoragent@cursor.com>
Summary by CodeRabbit
New Features
Refactor
Documentation
Style