fix(landing): blend hero bottom into the section below - #363
Conversation
The hero gradient ended at its peak teal tint exactly at the hero's bottom edge, so it met the flat ink background of the next section as a hard horizontal step. It only looked right when StatsStrip rendered, since that component carried its own teal-to-ink gradient to continue the glow. StatsStrip returns null whenever its stat queries fail or come back empty, so the seam depended on an API call succeeding. The hero now uses fadeBottom, peaking the tint just above its base and resolving it back to ink at the edge within its own gradient, so it blends into whatever follows. StatsStrip drops its gradient, which would otherwise reintroduce the same step in reverse. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
@Benjtalkshow is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe homepage enables the hero background bottom fade. The stats section removes its custom gradient class. Hero component documentation now describes fade behavior and transition conditions. ChangesLanding gradient updates
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 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}
1 participant
Problem
The bottom of the landing hero did not blend with the section below it. The hero's background gradient ended at its peak teal tint (
rgba(46, 237, 170, 0.08)at the100%stop) exactly at the hero's bottom edge, while the next section sits on flat#0D1111. The two met as a hard horizontal step.This only looked correct when
StatsStriprendered, because that component carried its own teal-to-ink gradient to continue the glow.StatsStripreturnsnullwhenever its three stat queries fail or come back empty, so a clean seam depended on an API call succeeding.Fix
app/page.tsx— the hero now passesfadeBottom. The tint peaks just above the base and resolves back to ink at the edge, inside the hero's own gradient, so it blends into whatever follows.components/landing/stats-strip.tsx— dropped the gradient class. With the hero self-contained, a strip starting at full teal would reintroduce the same step in reverse.fadeBottomdoc comments inhero-background.tsxandhero-section.tsx, which said the prop was only for heroes sitting directly above the footer.Verification
npx tsc --noEmit,npm run lint, andnpm run buildall pass.Checked locally in a browser. The data sections were empty there because the backend API was not reachable from my machine, so they fell into their error and empty states. The seam sits at the hero's bottom edge and renders independently of that data.
Before — hard line at the hero base, lighter teal above, flat ink below.
After — continuous fade, no visible edge.
🤖 Generated with Claude Code
Summary by CodeRabbit