feat(about): add AboutHero section and about page route#337
Conversation
|
@shogun444 is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
|
@shogun444 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds the ChangesAbout page
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related issues
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing Touches🧪 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: 3
🤖 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 `@components/about/about-hero.tsx`:
- Around line 10-14: Update the headline JSX in the about hero title to append a
period immediately after the highlighted “products” span, preserving the
existing text and styling.
- Around line 6-7: Remove the canvas-backed HeroBackground wrapper from the
About hero and replace it with a CSS-only background or wrapper around Section.
Preserve the existing Section content, classes, and layout while ensuring
HeroBackground is no longer mounted.
In `@components/marketing/section.tsx`:
- Around line 79-88: Update the h2 className in the section component so the
mt-6 margin is applied only when eyebrow is present, while preserving the
existing heading classes for sections without an eyebrow.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f2d9f4bc-5cfb-4567-aaf2-1a02244b99b7
📒 Files selected for processing (3)
app/about/page.tsxcomponents/about/about-hero.tsxcomponents/marketing/section.tsx
| <HeroBackground fieldHeight={640} fadeBottom> | ||
| <Section className='py-24 text-center lg:py-32'> |
There was a problem hiding this comment.
🚀 Performance & Scalability | 🟠 Major | ⚡ Quick win
Remove the canvas-backed HeroBackground from the About hero.
HeroBackground mounts an animated <canvas>, but the Issue #330 acceptance criteria explicitly require the hero to avoid a background canvas. Use a CSS-only background/wrapper around Section instead.
🤖 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/about/about-hero.tsx` around lines 6 - 7, Remove the canvas-backed
HeroBackground wrapper from the About hero and replace it with a CSS-only
background or wrapper around Section. Preserve the existing Section content,
classes, and layout while ensuring HeroBackground is no longer mounted.
| title={ | ||
| <> | ||
| The people behind the{' '} | ||
| <span className='text-primary-500'>products</span> | ||
| </> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Match the required headline copy.
The required headline ends with a period: The people behind the products. Add the missing . after the highlighted word.
🤖 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/about/about-hero.tsx` around lines 10 - 14, Update the headline
JSX in the about hero title to append a period immediately after the highlighted
“products” span, preserving the existing text and styling.
| {eyebrow ? ( | ||
| typeof eyebrow === 'string' ? ( | ||
| <Eyebrow>{eyebrow}</Eyebrow> | ||
| ) : ( | ||
| eyebrow | ||
| ) | ||
| ) : null} | ||
| <h2 | ||
| className={cn( | ||
| 'font-heading text-3xl font-bold tracking-tight text-balance text-white sm:text-4xl', | ||
| 'mt-6 font-heading text-3xl font-bold tracking-tight text-balance text-white sm:text-4xl', |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Make heading spacing conditional on an eyebrow.
mt-6 is now applied to every heading, including SectionHeading instances without an eyebrow. Apply this margin only when eyebrow is present.
Proposed fix
className={cn(
- 'mt-6 font-heading text-3xl font-bold tracking-tight text-balance text-white sm:text-4xl',
+ eyebrow && 'mt-6',
+ 'font-heading text-3xl font-bold tracking-tight text-balance text-white sm:text-4xl',
titleClassName
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {eyebrow ? ( | |
| typeof eyebrow === 'string' ? ( | |
| <Eyebrow>{eyebrow}</Eyebrow> | |
| ) : ( | |
| eyebrow | |
| ) | |
| ) : null} | |
| <h2 | |
| className={cn( | |
| 'font-heading text-3xl font-bold tracking-tight text-balance text-white sm:text-4xl', | |
| 'mt-6 font-heading text-3xl font-bold tracking-tight text-balance text-white sm:text-4xl', | |
| {eyebrow ? ( | |
| typeof eyebrow === 'string' ? ( | |
| <Eyebrow>{eyebrow}</Eyebrow> | |
| ) : ( | |
| eyebrow | |
| ) | |
| ) : null} | |
| <h2 | |
| className={cn( | |
| eyebrow && 'mt-6', | |
| 'font-heading text-3xl font-bold tracking-tight text-balance text-white sm:text-4xl', |
🤖 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/marketing/section.tsx` around lines 79 - 88, Update the h2
className in the section component so the mt-6 margin is applied only when
eyebrow is present, while preserving the existing heading classes for sections
without an eyebrow.
Rebuild AboutHero on the shared HeroSection shell (left-aligned two-color headline, subheading, PartnerLogos row) to match the boundless-platform About hero, with boundless-style copy adapted for the Builders showcase. Revert the shared Section/SectionHeading/Eyebrow changes so the hero no longer restyles every other section; HeroSection owns its own layout.
The About hero sat directly above the footer and ended on the teal peak, cutting off abruptly. Add an additive fadeBottom pass-through to HeroSection (forwarded to HeroBackground) and enable it on the About hero, so the teal tint resolves back to ink at the bottom and meets the footer with no seam, matching the landing hero.
2 participants
Summary
Implements the About page hero section for Issue #330 using the shared marketing primitives and introduces the
/aboutroute.To keep the About page visually consistent with the existing landing experience, the hero follows the same typography, spacing, and layout patterns as the homepage while using the copy provided in the issue.
Type of Change
Related Issues
Closes #330
Changes Made
components/about/about-hero.tsx./aboutpage route (app/about/page.tsx).Section,SectionHeading, andEyebrowprimitives fromcomponents/marketing/section.tsx.SectionHeadingto support an optionaldescriptionClassNameprop for reusable description styling.Design Notes
The About page is intended to introduce the people behind the ecosystem rather than the platform itself. The implementation keeps the hero intentionally minimal while aligning it with the visual language already established on the homepage.
The component reuses the existing design system primitives instead of introducing custom hero markup, making it consistent with the rest of the marketing pages.
Testing
npm run lintnpm run buildVerification
Section,SectionHeading, andEyebrow/aboutScreenshots
Homepage Hero (reference)
About Page
Checklist
npm run lintpassesnpm run buildpassesSummary by CodeRabbit