feat(marketing): build home page sections (workflow, personas, testimonials, FAQ, news)#12
Conversation
Complete the FundingPaths section (under the trust bar) as the four-column "Work flows through Boundless in 4 steps" workflow, reusing the existing animated building blocks. - Four columns (Discover / Apply / Earn / Track) with the section header, bordered frame and dividers on desktop, stacked cards on mobile - Reuse ExplorePath, CtaTicker and PrizePool; add an EscrowFlow card for "Track Progress" with a glassy card and primary-edge glow - Shared Glow helper (primary mixed with the explore-path badge accent) for the per-column ambient glows - PrizePool: pin the total-pool header and scroll only the tier list - Drop the now-redundant FourSteps placeholder from the home page
Two opposite-scrolling marquee rows of social testimonials with a liquid-glass "Follow Boundless" button and green-accent border cards. Adds the marquee-left/right keyframes. Hidden on mobile per the design.
Heading beside a preview accordion (first item open) linking to /faq, reusing FaqAccordion and FAQ_ITEMS. Open-item handle now uses primary.
Heading with "See more Articles" link and three blog previews, reusing BlogCard and the first three BLOG_POSTS.
A bare color as a background-image layer voids the whole property, so the teal glow never painted. Set ink as background-color instead.
|
@Benjtalkshow is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review limit reached
More reviews will be available in 53 minutes and 17 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. 📝 WalkthroughWalkthroughThis PR rebuilds the marketing homepage by implementing all placeholder marketing sections. It adds CSS marquee animations, creates new decorative components (Glow, EscrowFlow), and replaces scaffolds with fully featured sections: testimonials with seamless marquee looping, personas with auto-advancing carousel, FAQ preview, 4-step funding paths, refactored prize pool with animation, and blog teaser. The FourSteps component is removed. ChangesMarketing Homepage Redesign
Sequence DiagramsequenceDiagram
participant HomePage
participant TrustBar
participant FundingPaths
participant Personas
participant Testimonials
participant Faq
participant NewsSection
participant CtaSection
HomePage->>TrustBar: render
HomePage->>FundingPaths: render 4 steps + EscrowFlow
HomePage->>Personas: render auto-advancing carousel
HomePage->>Testimonials: render marquee rows (left/right)
HomePage->>Faq: render preview + link to /faq
HomePage->>NewsSection: render 3 blog posts + link to /blog
HomePage->>CtaSection: render
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 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 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
🤖 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 `@src/app/globals.css`:
- Around line 183-186: Add a prefers-reduced-motion override for the infinite
marquee animations by detecting the CSS variables/animations
(--animate-marquee-left, --animate-marquee-right and the keyframes
marquee-left/marquee-right) and disabling or pausing them inside an `@media`
(prefers-reduced-motion: reduce) rule; set the animation to none (or
animation-duration: 0s / animation-play-state: paused) for those
variables/selectors so users who opt out of motion won't see continuous
scrolling—and apply the same override for the other marquee definitions
referenced later in the file (the block around the other occurrences).
🪄 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
Run ID: d4af2f7b-a604-4487-bcd9-98668e552d7e
📒 Files selected for processing (11)
src/app/(public)/page.tsxsrc/app/globals.csssrc/features/marketing/components/escrow-flow.tsxsrc/features/marketing/components/faq-accordion.tsxsrc/features/marketing/components/faq.tsxsrc/features/marketing/components/funding-paths.tsxsrc/features/marketing/components/glow.tsxsrc/features/marketing/components/news-section.tsxsrc/features/marketing/components/personas.tsxsrc/features/marketing/components/prize-pool.tsxsrc/features/marketing/components/testimonials.tsx
💤 Files with no reviewable changes (1)
- src/app/(public)/page.tsx
| /* Marketing: testimonials. Two duplicated rows slide horizontally in | ||
| opposite directions for a seamless loop (-50% = one copy). */ | ||
| --animate-marquee-left: marquee-left 48s linear infinite; | ||
| --animate-marquee-right: marquee-right 48s linear infinite; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Respect reduced-motion preferences for infinite marquee animations.
The new marquee animations run infinitely but there is no prefers-reduced-motion fallback. Add a reduced-motion override so desktop users who opt out of motion do not get continuous scrolling.
Proposed fix
`@keyframes` marquee-right {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
+
+@media (prefers-reduced-motion: reduce) {
+ .animate-marquee-left,
+ .animate-marquee-right {
+ animation: none !important;
+ transform: none !important;
+ }
+}Also applies to: 198-214
🤖 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 `@src/app/globals.css` around lines 183 - 186, Add a prefers-reduced-motion
override for the infinite marquee animations by detecting the CSS
variables/animations (--animate-marquee-left, --animate-marquee-right and the
keyframes marquee-left/marquee-right) and disabling or pausing them inside an
`@media` (prefers-reduced-motion: reduce) rule; set the animation to none (or
animation-duration: 0s / animation-play-state: paused) for those
variables/selectors so users who opt out of motion won't see continuous
scrolling—and apply the same override for the other marquee definitions
referenced later in the file (the block around the other occurrences).
The workflow section title reuses "Discover Opportunities", so the regex matched two headings and tripped Playwright strict mode.
1 participant
Implements the remaining marketing home-page sections from Figma (desktop + mobile), reusing existing components where they already exist.
Sections
Glow./faq, reusingFaqAccordion+FAQ_ITEMS.BlogCard+BLOG_POSTS.Notes
marquee-left/marquee-rightkeyframes for the testimonials.background-imagelayer voided the whole property (the section teal glows never painted); ink is now a realbackground-color.Verification
npm run typecheck && npm run lint && npm run test && npm run buildall pass (tests 14/14).Summary by CodeRabbit
New Features
Style