feat: peanut wallet landing page#684
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request updates several key components and middleware logic. The LandingPage and Hero components are revised to remove unused sections and update properties, including replacing the single CTA with primary and secondary CTAs. Footer elements have been commented out and removed, while the Layout component is streamlined by removing the header and adjusting import order. Additional modifications include enhancing the Marquee component to accept multiple messages, refining the HomeWaitlist view, updating setup step descriptions, and revising middleware authentication redirection. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant M as Middleware
participant C as Cookie Storage
U->>M: Request page (e.g., "/")
M->>C: Check for JWT token
alt Token Exists
M->>U: Redirect to "/home"
else No Token
M->>U: Continue normal processing
end
sequenceDiagram
participant H as Hero Component
participant R as renderCTAButton Function
H->>R: Check for primaryCta and secondaryCta props
alt primaryCta exists
R->>H: Render primary CTA button
end
alt secondaryCta exists
R->>H: Render secondary CTA button
end
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (4)
src/components/Global/Footer/consts.ts (1)
14-14: Fix typo in comment and add more context.The comment contains a typo ("fotter" instead of "footer") and could be more descriptive about the timeline for restoration.
- // note: temporarily removed docs link from fotter, as it points to old docs + // note: temporarily removed docs link from footer until new documentation is ready (ETA: TBD)src/middleware.ts (1)
17-19: Consider adding a comment explaining the setup page redirection.While the logic is correct, adding a comment explaining why authenticated users are redirected from the setup page would improve code maintainability.
+ // Redirect authenticated users from setup page as they have already completed onboarding if (isAuthenticated && request.nextUrl.pathname === '/setup') { return NextResponse.redirect(new URL('/home', request.url)) }src/components/Global/MarqueeWrapper/index.tsx (1)
50-72: Consider extracting message rendering logic.While the implementation is correct, the rendering logic could be simplified by extracting it into a separate component.
+const MarqueeMessage = ({ message, imageSrc, imageAnimationClass }) => ( + <div className="mx-3 inline-flex min-h-12 items-center gap-3 py-2"> + <div className="text-lg font-bold uppercase md:text-xl">{message}</div> + <img + src={imageSrc} + alt="Marquee Image" + className={`${imageAnimationClass || ''} ml-2 h-auto w-8`} + /> + </div> +); {Array.isArray(message) ? message.map((msg, index) => ( - <div key={index} className="mx-3 inline-flex min-h-12 items-center gap-3 py-2"> - <div className="text-lg font-bold uppercase md:text-xl">{msg}</div> - {index < message.length && ( - <img - src={imageSrc} - alt="Marquee Image" - className={`${imageAnimationClass || ''} ml-2 h-auto w-8`} - /> - )} - </div> + <MarqueeMessage + key={index} + message={msg} + imageSrc={imageSrc} + imageAnimationClass={imageAnimationClass} + /> )) : message && ( - <div className="mx-3 inline-flex min-h-12 items-center py-2"> - <div className="text-lg font-bold uppercase md:text-xl">{message}</div> - <img - src={imageSrc} - alt="Marquee Image" - className={`${imageAnimationClass || ''} ml-2 h-auto w-8`} - /> - </div> + <MarqueeMessage + message={message} + imageSrc={imageSrc} + imageAnimationClass={imageAnimationClass} + /> )}src/components/LandingPage/hero.tsx (1)
41-84: Consider extracting animation values into constants.The animation values are duplicated between the
initial,animate, andwhileHoverstates. Consider extracting these into constants for better maintainability.+const ANIMATION_VALUES = { + translateY: 4, + translateX: 4, + rotate: 0.75, +} const renderCTAButton = (cta: CTAButton, variant: 'primary' | 'secondary') => ( <motion.div className={`fixed bottom-4 z-20 sm:bottom-8 ${ variant === 'primary' ? 'right-[calc(50%)]' : 'right-[calc(50%-120px)]' }`} initial={{ opacity: 0, - translateY: 4, - translateX: 4, - rotate: 0.75, + ...ANIMATION_VALUES, }} animate={{ opacity: buttonVisible ? 1 : 0, translateY: buttonVisible ? 0 : 20, translateX: buttonVisible ? 0 : 20, rotate: buttonVisible ? 0 : 1, pointerEvents: buttonVisible ? 'auto' : 'none', }} whileHover={{ - translateY: 6, - translateX: 3, - rotate: 0.75, + translateY: ANIMATION_VALUES.translateY + 2, + translateX: ANIMATION_VALUES.translateX - 1, + rotate: ANIMATION_VALUES.rotate, }} transition={{ type: 'spring', damping: 15 }} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/app/page.tsx(3 hunks)src/components/Global/Footer/consts.ts(1 hunks)src/components/Global/Footer/index.tsx(2 hunks)src/components/Global/Layout/index.tsx(1 hunks)src/components/Global/MarqueeWrapper/index.tsx(2 hunks)src/components/Home/HomeWaitlist.tsx(0 hunks)src/components/LandingPage/hero.tsx(4 hunks)src/components/Setup/Setup.consts.tsx(1 hunks)src/middleware.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/Home/HomeWaitlist.tsx
✅ Files skipped from review due to trivial changes (1)
- src/components/Global/Footer/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (10)
src/middleware.ts (1)
9-15: LGTM! Authentication flow enhancement.The addition of JWT token verification and redirection logic improves the user experience by automatically directing authenticated users to the home page.
src/app/page.tsx (2)
18-26: LGTM! Enhanced CTA structure.The split between primary (waitlist) and secondary (cashout) CTAs provides clear user paths while maintaining focus on the waitlist feature.
32-46: LGTM! Improved FAQ content.The FAQ content has been updated to better reflect the current state of the product and provide clear next steps for waitlisted users.
src/components/Setup/Setup.consts.tsx (1)
22-24: LGTM! Enhanced welcome message.The updated description effectively communicates the value proposition and incentivizes early signup through pre-launch rewards.
src/components/Global/Layout/index.tsx (3)
4-9: LGTM! Import statements are well organized.The imports are now better organized, with related imports grouped together.
31-53: LGTM! Layout structure aligns with landing page requirements.The removal of the Header component and addition of FooterVisibilityObserver aligns well with the PR objectives for implementing a new landing page.
80-110: LGTM! FooterVisibilityObserver implementation follows best practices.The component:
- Uses IntersectionObserver API efficiently
- Has proper cleanup on unmount
- Uses a reasonable threshold value
src/components/LandingPage/hero.tsx (3)
9-24: LGTM! Well-structured type definitions.The types provide good type safety and the
isExternaloption inCTAButtonis a nice addition for handling external links properly.
26-26: LGTM! Clean implementation of dual CTA support.The Hero component now cleanly supports both primary and secondary CTAs, with proper optional rendering and improved marquee visibility check.
Also applies to: 117-120
74-81: LGTM! Good accessibility implementation.The component follows accessibility best practices:
- External links have proper
targetandrelattributes- Images have descriptive
alttextAlso applies to: 90-94
| // note: temporarily removed docs link from fotter, as it points to old docs | ||
| // { | ||
| // name: 'gitbook', | ||
| // url: 'https://docs.peanut.to', | ||
| // logoSrc: icons.GITBOOK_ICON.src, | ||
| // }, |
There was a problem hiding this comment.
Resolve inconsistency with documentation links.
The gitbook social link is commented out due to outdated documentation, but the same URL is still active in the LINKS array. This inconsistency could confuse users.
Consider either:
- Commenting out both links until the new documentation is ready
- Updating both links to point to the new documentation URL
Also applies to: 27-31
Hugo0
left a comment
Hugo0
left a comment
There was a problem hiding this comment.
I have no code issues, but please make a review task for konrad to review https://peanut-ui-git-feat-wallet-lp-squirrellabs.vercel.app/
2 participants
fixes TASK-8772
Summary by CodeRabbit
New Features
Refactor